Jornada para Webmasters. de la UNAM. Guía del taller.

Transcripción

1 Guía del taller. 1

2 Índice Formatos de imágenes para web... 3 Optimización de imágenes... 3 Manejo de transparencias...11 Uso de degradados...14 Crear fondo con logotipos a marca de agua...16 Manejo de texturas en imágenes...18 Manejo de efectos para imagen y tipografía...21 Creación de botones

3 Guía del Taller Buenas Prácticas en Diseño Web (Gráficos en Web). Objetivo. Que los Webmasters adquieran los conocimientos necesarios para manipular y optimizar gráficos que se publicarán en sitios Web institucionales, además de efectos básicos y otros elementos como botones, fondos (background images) y texturas (patterns). 1. Formatos de imágenes para web. Los formatos más utilizados y que se han logrado convertir en estándares para Web son básicamente 3, JPG, GIF y PNG. Estos formatos se explican a detalle en el taller. 2. Optimización de imágenes. Ampliar y reducir imagen. Ampliar y reducir desde menú. Para hacer más grande una imagen necesitamos abrir el archivo en Photoshop, después ir al menú Image y dar clic en Image size, enseguida se abrirá una ventana en primer plano, que nos mostrará las propiedades del tamaño de la imagen a editar, como se muestra en las imágenes siguientes. 3

4 En esta ventana de propiedades de tamaño, modificaremos el tamaño en pixeles de nuestra imagen, la podremos hacer más chica o más grande. Para modificar el tamaño proporcionalmente tendremos que activar la casilla Constrain Proportions que funciona tanto para reducir el tamaño como para ampliar. 4

5 Enseguida modificaremos en en pixeles el tamaño de nuestra imagen incrementando o reduciendo los valores en la casilla width o en la casilla Heigth. Si modificamos cualquiera de estas propiedades con la casilla Constrain Proportions activa, automáticamente nos modificará proporcionalmente el tamaño de la otra propiedad. Aquí el resultado de la imagen ampliada conservando la proporción: 5

6 Si queremos hacer más grande sólo un lado de nuestra imagen, desactivamos la casilla Constrain Proportions y así sólo modificará el ancho o el alto que modifiquemos sin forzar a conservar las proporciones. Resultado de una imagen modificada en el ancho (width) sin conservar proporciones: 6

7 Optimización de gráficos para Web. Cuando terminamos de editar y modificar nuestra imagen o gráfico, es necesario optimizarlo para su publicación en Web. Para optimizar nos vamos al menú File y después damos clic en Save for Web & Devices.., como en la imagen siguiente: A continuación nos abrirá una ventana con la interfaz para optimizar nuestra imagen editada. Nos mostrará la imagen original y la imagen optimizada junto con nuestras propiedades de optimización. 7

8 8

9 Seleccionamos el formato en que lo queremos salvar, en JPG, GIF o PNG. Optimización en JPG. Si seleccionamos formato JPG, tenemos que ajustar nuestra calidad de optimización del 0 al 100, mientras mayor mejor calidad. Recordemos que mientras más calidad mayo peso y viceversa. Podremos ver la comparación de la imagen optimizada con la imagen original en el momento de modificar la calidad y así saber cómo quedará nuestra imagen. Optimización en GIF. Si seleccionamos formato GIF, tenemos que ajustar la cantidad de colores para optimizar la imagen de entre 2,4,8,16, 32, 64, 128 y 256 como se muestra en la siguiente imagen: 9

10 Podremos ver la comparación de la imagen optimizada con la imagen original en el momento de modificar la calidad y así saber cómo quedará nuestra imagen. De la misma forma que en JPG entre más colores es más calidad y más peso en el archivo. Optimización en PNG. Para la optimización en PNG seleccionamos PNG-24 que es el más recomendable para Web. Aquí Photoshop no nos da más opciones que esta selección. En los 3 casos podemos ver bajo nuestra imagen optimizada un cálculo del peso en disco de nuestra imagen y los segundos en que se descargará en Web. Después de seleccionar el formato y la calidad y peso, damos Click en Save y la guardamos en nuestro disco duro. 10

11 3. Manejo de transparencias. Abrir la imagen a salvar con transparencia, después en nuestra ventana Layers hacer click derecho en el layer Background y seleccionamos Duplicate layer, después borramos el Layer Background. A continuación vamos a quitar o borrar lo parte que queremos que sea transparente de nuestra imagen ya sea con la herramienta Marquee, Lasso, Magic wand o con la herramienta Erase. Se selecciona la parte a borrar y con la tecla suprimir borramos la selección, como se puede apreciar en las siguientes imágenes. Marquee. Lasso 11

12 Magic wand. Erase. En este caso no se presiona la tecla suprimir ya que va borrando en automático por donde vamos pasando la herramienta. 12

13 A continuación salvamos para Web y seleccionamos en formato GIF o PNG. En formato GIF seleccionamos la casilla Transparency, seleccionamos el número de colores y salvamos nuestra imagen. En formato PNG seleccionamos PNG 24 y salvamos. 13

14 4. Uso de degradados. Creación de degradados para utilizarlos como Background en nuestro sitio Web. Abrimos un nuevo documento con el tamaño que necesitemos nuestro background. Enseguida creamos una nueva capa (layer). Después seleccionamos la herramienta Gradient. Una vez seleccionada la herramienta Gradient, en la barra de propiedades seleccionamos un color predeterminado de gradiente o le damos doble Clic en el color para editarlo. 14

15 Cuando tengamos los colores deseados lo aplicaremos dando clic izquierdo en nuestro Lienzo o Canvas en la parte superior central, manteniéndolo y dirigiendo la linea que se traza hacia la parte baja del lienzo como se muestra en la siguiente imagen. Enseguida se pintará en el lienzo nuestro color degradado que habíamos seleccionado anteriormente. Está imagen la podremos salvar para Web y utilizar en un sitio Web como fondo. 15

16 Ejemplo de fondo: 5. Crear fondo con logotipos a marca de agua. Creación de una marca de agua (Watermark) para mostrarla en una fotografía o gráfico. Abrir imagen a la cual se le quiere aplicar la marca de agua. Enseguida con la herramienta Horizontal Type o Vertical Type, sobre nuestra imagen ingresamos el texto a hacer la Marca de agua, dando clic en la imagen y escribiendo algún nombre o marca. En la imagen siguiente mostramos el texto UNAM que será nuestra marca de agua. 16

17 El siguiente paso es acomodar el texto en el lugar deseado y aplicarle un efecto de transparencia. En nuestra ventana de layers seleccionar el layer del texto que ingresamos (UNAM) y en la casilla de Opacity u opacidad modificamos el porcentaje hasta crear el efecto de transparencia deseado. Aquí vemos el resultado de nuestro texto modificado en su opacidad sobre nuestra imagen, creando así el efecto de transparencia para ser utilizado como un logotipo en marca de agua. En el taller presencial veremos además cómo rotar y aplicar algunos efectos en el layer. 17

18 6. Manejo de texturas en imágenes. 1.- Vamos a crear un nuevo documento de 15 x 15px a 72px, transparente. 2.- Creamos las figuras que queramos que se repita para el fondo. 18

19 3.- Ahora lo definiremos como patrón para que lo podamos utilizar cuando deseemos. Nos vamos a Edición / Edit Definir motivo / Define Pattern 4.- Ponemos un nombre que podamos recordar (esto es especialmente útil cuando tenemos muchos patrones personalizados). Una vez que hayas escrito el nombre le das OK y finalmente quedará definido tu propio patrón personalizado. 19

20 5.- Para utilizar el patrón que acabas de hacer, creas un nuevo documento. Le das clic en Edición / Edit Rellenar / Fill 6.- En el cuadro de diálogo, selecciona el Motivo / Pattern de la lista desplegable, encuentra el patrón que has creado y haces click en OK. 20

21 7.- Le damos ok. 8.- Posteriormente jugamos un poco con los estilos de la capa y listo. 7. Manejo de efectos para imagen y tipografía. Para darle algunos efectos a las imágenes y la tipografía vamos a utilizar los efectos de capa, estos se logran dando clic derecho a la capa/layer o tipografía que queramos ponerle un efecto y en opciones de fusión/blending options. 21

22 Al darle clic nos aparecerá otra ventana llamada estilo de capa/ layer style. La vista q que nos da por default son las opciones de fusión por defecto / Blending options Default. Se pueden aplicar los diferentes efectos: Sombra paralela / Drop Shadow: produce la sensación de sombreado. 22

23 Sombra interior / Inner Shadow: produce una sombra hacia el interior de la imagen creando la sensación de recorte. Resplandor exterior / Outer Glow: crea la sensación de un halo alrededor de la imagen. 23

24 Resplandor interior / Inner Glow: crea la sensación de un halo de luz que parte del interior de la imagen, bien desde el centro, bien desde los bordes de la misma. Bisel y relieve / Bevel and Emboss: crea la sensación de relieve en las imágenes. 24

25 Satinado / Satin: dota a la imagen de brillos y sombras, imitando el efecto de una tela de satén. Superposición de colores Color Overlay: rellena la imagen con el color elegido. 25

26 Superposición de degradado/ Gradient Overlay: rellena la capa con un degradado. Superposición de motivo / Pattern Overlay: rellena la capa con un motivo o patrón escogido de la biblioteca de patrones. 26

27 Trazo / Stroke: crea un contorno en la capa orientado hacia fuera de la misma, hacia dentro o hacia el centro. El contorno puede rellenarse con un color sólido, un degradado o un motivo. 27

28 8. Creación de botones. Para realizar un botón en photoshop, tendremos que seguir los siguientes pasos: 1.- Crear un archivo nuevo con el fondo blanco. 2.- Dibujaremos el botón con la herramienta rectángulo, rectángulo redondeado o elipse / rectangle tool, rounded rentangle tool, elipse. De acuerdo a el diseño de nuestra página. 3. Pondremos el radio / radius de calado que desee para las esquinas, en este caso 10 px y rellenelo del color que queramos. 4.- Sobre esta capa y con la forma seleccionada aplique un degradado de ángulo tomando colores de la gama del color que elegimos en distintas tonalidad para producir el efecto deseado. 28

29 5.- Para darle un efecto más vistoso, jugaremos con los efectos de la capa, los cuales los encontramos dando clic derecho en el mouse -efectos de capa y jugamos con ellos haciendo pruebas hasta conseguir el efecto que desee. Finalmente le pondremos texto al botón con los estilos que queramos en la capa. 29

30 Teclas rápidas C :herramienta de recorte D :Restablece la paleta de colores a blanco y negro E : herramienta goma de borrar F : Cambia la vista de la ventana de la pantalla normal y completa, la pantalla en negro G : balde / herramienta de degradado H :herramienta de mano I : Cuentagotas / muestrario de colores / herramienta de medida L : Lazo / Lazo poligonal / herramienta Lazo magnético M :Marco rectangular / herramienta de marco elíptico S : Tampón de clonar / herramienta Tampón de motivo T : tipo horizontal / vertical de tipo / máscara de tipo horizontal / vertical de la herramienta máscara de tipo U : rectángulo / rectángulo redondeado / elipse / polígono / línea / herramienta de forma personalizada V : herramienta de movimiento W :Varita mágica X : Cambia los colores de la paleta de colores Z : herramienta de zoom CTRL + A: Selecciona todo en la foto CTRL + B: Modificar el balance de color CTRL + E: Combina la capa seleccionada con la capa de abajo, o se funde todas las capas enlazadas CTRL + G: Grupos de la capa seleccionada con la capa debajo de ella CTRL + I: Invierte las capas de colores CTRL + J: Duplica la capa seleccionada CTRL + N: Abre un nuevo documento CTRL + O: Abrir documento CTRL + Q: Sale de PhotoShop CTRL + R: Cambia la regla CTRL + S: "guardar como" CTRL + U: Tono / Saturación CTRL + V: pega lo que hay en el portapapeles CTRL + W: cierra la ventana del proyecto actual CTRL + X: Corta la selección de la página CTRL + Y: Activa o desactiva los modos de color CTRL + Z: Un-es la última acción CTRL + SHIFT + D: vuelve a seleccionar lo que se seleccionó por última vez CTRL + SHIFT + E: Combina todas las capas en que el documento CTRL + SHIFT + N: Crea una nueva capa CTRL + SHIFT + P: Configuración de ventana CTRL + SHIFT + S: "guardar como" ventana 30

31 CTRL + ALT + E: Copia el contenido de la capa seleccionada a la capa debajo de ella CTRL + ALT + J: Duplica la capa, y le da la opción de nombrar el duplicado CTRL + ALT + Z: Se desplaza de nuevo en la historia. CTRL + MAYÚS + ALT + E: Toma la capa seleccionada CTRL + MAYÚS + ALT + N: Crea una nueva capa CTRL + MAYÚS + ALT + S: "Guardar para Web" ventana 31