No nos dan documentación a los formadores, por lo que tenemos que "literalmente" buscarnos la vida :)
En mi caso, como estoy cogiendo encargos de diseño web, gráfico, 3d, redes, CM... al mismo tiempo que doy las clases, me gusta incorporar los encargos como casos prácticos.
Otras veces enlazo a tutoriales de internet, pero a medida que avanza el curso me voy adaptando al recorrido de los alumnos y me divierte hacer yo los tutoriales.
Voy a mostrar un ejemplo de tutorial, realizado para los alumnos de diseño web y diseño gráfico de la Casa de la Cultura de Torrejón de Ardoz.
Como en este centro trabajamos sobre Linux y todo es software libre, el tutorial corre sobre GIMP (en el Centro Cultural de Sanchinarro, esto mismo lo explicaré sobre Photoshop).
Para el tutorial uso de guía un trabajo profesional que fue la realización y programación de la web de
Normalmente diseño yo los trabajos, pero en este caso el diseño de la imagen corporativa, web y dirección de arte fue de Javier Garrido director de arte en El Laboratorio, yo sólo realicé la maquetación y la programación ;)
Este trabajo me sirve para introducir a los alumnos de diseño web y de diséño gráfico en el uso de grids
Normalmente dejo así los tutoriales a los alumnos en sus áreas privadas del blog, pero es posible que este curso 2014-2015 haga algunos en vídeo porque me lo han pedido algunos alumnos... Ya veremos :)
EL TUTORIAL TIPO QUE CREO PARA ALUMNOS ES:
(recordad que está basado en un encargo profesional real, ya que procuro que lo que os enseño tenga aplicación práctica... y que es GIMP ya que estos alumnos en Torrejón pilotan software libre, los de Sanchinarro pilotan Adobe... )
Vamos a trabajar el diseño gráfico para la web hasta este punto:
+10.41.22.png)
El archivo con el que he hecho el tutorial podéis descargarlo aquí:
Partimos de nuestro archivo con la rejilla de 12 columnas
Lo primero que haremos será bloquear la capa Grid para que no nos moleste
Abrimos el archivo png. Con Ctrl+A seleccionamos todo, con Editar > Copiar lo copiamos. Vamos a nuestro archivo del ejercicio y Editar > Pegar
Nos crea una selección flotante que convertimos en una capa nueva, y que luego situamos entre la capa fondo y la capa Grid
Ahora situamos el logotipo. Y arrastramos una guía horizontar para marcar la anchura del Header. Las guías las arrastramos haciendo clic en la zona de la regla del documento y arrastrando hasta su sitio.
Es importante acordarse de que para mover una guía después de haberla creado, en las opciones de la herramienta mover no tenemos que tener activada la opción Mover capa activa, ya que si no en lugar de arrastrar la guía moveríamos la capa activa.
Con la herramienta Texto preparamos el menú del header. A diferencia de lo que hicimos en clase, aquí no la escalamos, la dejaremos como queremos sólo con las herramientas de texto. Podéis verlas en las capturas de pantalla.
Una vez configurada, la situamos en su posición aproximada.
Nombraremos la capa. Como os dije, es importante nombrar las capas y agruparlas para que quienes retomen nuestro trabajo, bien en agencias de diseño o de publicidad puedan funcionar rápidamente. En caso contrario se buscarán otro diseñador.
A efectos prácticos, para mostrar lo que pretendemos, nos basta con poner el color de link activo sólo a HOME
Y después sólo a otro link de forma que en la agencia haciendo clic al ojo situado a la izquierda de la capa puedas ver lo que pasa cuando se sitúa el ratón sobre el link
Para ello duplicaremos la capa del menú, y en la nueva capa borramos todos los textos menos el segundo link (RECORRIDOS) y le cambiamos de color.
Como usaremos a menudo este color en el trabajo, siempre es buena idea apuntarse en una hoja los colores usados ( en mi caso el amarillo que uso es e5b950 )
En la nueva capa, al quedar solo la palabra RECORRIDOS tendré que mover ésta hasta situarla justo encima de la palabra RECORRIDOS de la primera capa de texto del menú
Cuando ya esté situada con precisión, es buena idea enlazar estas dos capas para poder moverlas a la vez. Lo haremos con las cadenas que tienen ambas capas a su izquierda.
Aquí es importante recordar que cuando copiamos una capa que está enlazada a otra, la copia está enlazada. Si queremos transformar la copia habremos de desenlazarla haciendo clic en su cadena.
Para el recuadro negro de la lista desplegable negra, creamos una capa nueva. Luego creamos una selección rectangular que desde Editar > Rellenar con el color de frente... rellenamos de negro (el color de frente yo lo tengo en negro. Si no lo tenéis habréis de hacer clic en su rectángulo y en la ventana que se abre de colores darle un negro)
Después de rellenarla de negro Seleccionar > Ninguno para eliminar el recuadro de la selección.
Ahora podemos escalar lo con el acceso a la herramienta escalar de la barra de herramientas o desde Herramientas > Herramientas de transformación > Escalar
Aquí ahora es importante usar la opción Capa > Autorecortar capa para que la capa tenga el mismo tamaño que el recuadro
Escalamos el rectángulo hasta dejarlo como queremos
Nombramos la capa del rectángulo.
Ahora queremos escribir los textos del menu de este desplegable. Para ello duplicamos la capa HEADER MENU y la situamos sobre el rectángulo. Como os dije esta copia sigue enlazada, por lo que tenemos que desenlazarla para trabajar con ella.
Es importante acordarse de estas cosas. Por ejemplo, si hemos bloqueado capas, y hacemos una copia de una de ellas, la copia sigue bloqueada. Así cuando más tarde dupliquemos el rectángulo negro para hacer el recuadro amarillo, si ahora lo hemos bloqueado para trabajar con comodidad en el texto del menú, habremos de desbloquear la copia, de otra forma no podríamos cambiarle el color y escalarla.
De nuevo con las herramientas de texto ajustamos el menú vertical de este desplegable.
Duplicamos la capa del rectángulo negro. Si la bloqueamos en su momento, desbloquearemos la copa para trabajar con ella (bloquear y desbloquear una capa recuerdo que se hace haciendo clic en el pincel de la zona superior del menú de la capa)
Podíamos haber creado una capa nueva, en ella hacer una selección rectangular y rellenarla con el color amarillo que apuntamos, autorecortar la capa y luego escalarla. Pero me apecete recordaros esa opción tan útil que es Colores > Colorear que nos permite conseguir lo mismo.
Una vez ajustada la capa del rectángulo amarillo, y situado debajo del texto y sobre la capa del rectángulo negro, cambiamos el color del link que esté sobre la capa. Yo he elegido AUSTRIAS
Para ver el resultado podemos ocultar provisionalmente la capa Grid y las guías
Es hora de hacer un grupo de capas con las capas que hemos usado en este menú. Creamos el grupo con la carpeta que está en la base del menú de capas. Y arrastraremos sobre esta carpeta las capas que queramos que incluya. Luego renombraremos el grupo.
Vemos el resultado. Ahora, cuando nuestro cliente reciba el diseño basta con que haga clic en el ojo situado a la izquierda del grupo para ocultar o descubrir el menú y entender su funcionamiento.
Vamos a preparar el slider. Hemos recortado una imagen al tamaño del slider 1400x478px. La pegamos en nuestro documento. la ajustamos a la guía horizontal, y para alinearla a la izquierda de la página usaremos la herramienta de Alineación.
Preparamos con Inskcape el corchete del slider, que será una imagen en formato png, para que tenga su transparencia. Es el corchete Next. Para tener otro corchete Prev usaremos la herramienta de volteo.
Podemos crear otra guía horizontal que nos ayude a que los dos corchetes estén alineados horizontalmente.
Creamos otra capa para el texto del banner. Lo ajustaremos de tamaño y color con las herramientas de texto.
Para darle us sombra de texto usaremos Filtros > Luces y sombras > Sombra arrojada. Pero este filtro no se puede aplicar a una capa de texto, por que tendremos que rasterizar la capa. El término rasterizar se aplica en Photoshop y otros programas, pero en Gimp es Capa > Descartar información del texto.
Probad las opciones hasta conseguir el efecto que os satisfaga.
De nuevo vamos a crear un grupo de capas para el slider.
Y ya está.
Al principio del tutorial os puse el archivo acabado.
Gracias a MakeMyDayInMadrid y a Javier Garrido por usar estos elementos para la serie de tutoriales sobre el uso de grids en diseño gráfico y diseño web :)
No hay comentarios:
Publicar un comentario