P2 - Tareas #01 a #15: Photoshop

Programas como éste, con curva de aprendizaje media-alta son complicados de dominar solo con manuales y algunos ejercicios, además de ésto es necesario manejarlos habitualmente.

Esta práctica consiste en realizar distintas tareas (un mínimo de 15 trabajos) con grado de dificultad creciente. Para realizar dichas tareas se utilizarán diversas herramientas, filtros, ajustes y efectos. El objetivo es adquirir una soltura suficiente con el programa y un conocimiento aceptable del mismo.

Método de realización de la práctica:

Utilizar los recursos y videotutoriales del siguiente sitio Web

Ir realizando las tareas por orden de dificultad (según se señala en cada una)

Siguir el videotutorial correspondiente a la tarea y las explicaciones de clase

Es conveniente crear una carpeta por cada tarea (con el nombre del efecto) donde guardarás las imágenes que necesites para realizarla, los pinceles, texturas, motivos, etc...En cada "efecto" o "fotomontaje" realizado aparecerá una referencia del alumn@ en la esquina inferior derecha con un tamaño (en px) no superior al 10% de las dimensiones de la imagen.

Guarda cada tarea de 3 formas:

Un archivo .psd, correspondiente al formato de Photoshop, por si es necesario modificarlo o revisarlo
Un archivo .jpg con resolución de 800 px de ancho (el alto será proporcional)
Un archivo .png de 200 px de ancho por 124 px de alto (miniatura para presentar en formato Web)

y, por supuesto, guárdalas en la carpeta correspondiente de tu tarjeta SD

Con tu cuenta de Gmail entra en Picasa Web Albums de Google y crea tres álbumes; uno para cada nivel de dificultad y sube las imágenes .jpg que has terminado.

Las tareas de nivel 1 valen 1 punto y deberías realizar 11. Las tareas de nivel 2 valen 2 puntos y deberías realizar 3 y las tareas de nivel 3 valen 3 puntos y deberías realizar 1. En total puedes alcanzar 11·1+3·2+1·3 = 20 puntos.

Para puntuar dichas tareas, entre otros parámetros, se tendrá en cuenta: el grado correcto de ejecución, la originalidad y la creatividad.Al finalizar la práctica todas las tareas que la componen deben presentarse en formato Web como una galería de imágenes utilizando uno de los siguientes tipos de galerías "responsive design": Shadowbox, Yoxview, Highslide, Swipebox, rlightbox, etc...

12 jQuery DEMOS Responsive Lightbox

El uso de técnicas basadas en JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario. La técnica se conoce como Lightbox y fue creada originalmente por Lokesh Dhakar. La mayoría de los plugin se basan en jQuery.

Demo de ejemplo

De todos los plugins lightbox mencionados vamos a tomar como ejemplo Lightcase, por ser uno de los más sencillos de implementar y tener en su página oficial una documentación suficiente.

El método para crear nuestra galería es el siguiente:

Creamos una carpeta con nombre arbitrario, por ejemplo [galeria_psd] y dentro de ella estas 4 carpetas: [css], [js], [fonts] y [img]
Nos bajamos el Framework jQuery versión 1.12.0.min.js y el archivo .zip de Lightcase
Dentro de cada carpeta colocamos los siguientes archivos:
- Carpeta [css]; dos archivos: style.css y lightcase.css
- Carpeta [js]; dos archivos: jquery-1.12.0.min.js y lightcase.js
- Carpeta [fonts]; los cuatro archivos de la carpeta fonts que vienen con lightcase
- Carpeta [img]; treinta archivos gráficos como mínimo: 15 imágenes .png de 200x124 pixels y 15 imágenes .jpg normales
Dentro de la carpeta raíz [galeria_psd] el archivo index.html que contendrá el código html necesario para crear la galería

Código HTML del archivo index.html del ejemplo


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/lightcase.css">
  <link rel="stylesheet" href="/css/style.css">
  <title>Galería: Trabajos PSD</title>
</head>
<body>

<div class="titulo">
  <p>Galería de Trabajos PHOTOSHOP</p>
</div>
<div class="contenedor">
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 01" href="/img/max_01.jpg">
    <img class="miniatura" src="/img/min_01.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 02" href="/img/max_02.jpg">
    <img class="miniatura" src="/img/min_02.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 03" href="/img/max_03.jpg">
    <img class="miniatura" src="/img/min_03.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 04" href="/img/max_04.jpg">
    <img class="miniatura" src="/img/min_04.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 05" href="/img/max_05.jpg">
    <img class="miniatura" src="/img/min_05.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 06" href="/img/max_06.jpg">
    <img class="miniatura" src="/img/min_06.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 07" href="/img/max_07.jpg">
    <img class="miniatura" src="/img/min_07.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 08" href="/img/max_08.jpg">
    <img class="miniatura" src="/img/min_08.png"></a>
  <a data-rel="lightcase:galeria1:slideshow" title="Imagen 09" href="/img/max_09.jpg">
    <img class="miniatura" src="/img/min_09.png"></a>
</div>

<div class="creditos">
  <p>(cc) curso 2015-16, Nombre del alumn@</p>
  <p>Slideshow utilizado: <a target="_blank" href="/i2016/ http://cornel.bopp-art.com/lightcase ">
  lightcase</a></p>
</div>

<!-- librerias javaScript -->
<script type="text/javascript" src="/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="/js/lightcase.js"></script>
<script>
  jQuery(document).ready(function($) {
    $('a[data-rel^=lightcase]').lightcase();
  });
</script>

</body>
</html>

Código CSS del archivo style.cs


body {
  min-height: 95vh;
  background: steelblue;
  font: 1.1em sans-serif;

  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.contenedor {
  max-width: 860px;
  min-height: 150px;

  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
}
.miniatura {
  width: 200px;
  height: 124px;
  margin: 10px;
  opacity: 0.5;
  transition: all 0.5s;
}
.miniatura:hover {
  opacity:1;
  box-shadow: 0 0 0 2px #ff0;
}
.titulo {
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px #333;
  font: 900 2.4em/1 serif;
}
.creditos {
  text-shadow: 0 1px 1px #333;
  font: 100 0.9em/0.5 serif;  
  text-align:center;
}
a, a:link, a:visited {
  text-decoration: none;
  color: #ddd;
}
a:hover { color: #fa0; }

Obteniendo como resultado del ejemplo esta demo