1. Photoshop Tips July 31, 2009 Critical Mass, Inc. All Rights Reserved.

2. “Lo importante no es saber todo, sinotener el teléfono del quesabe.”

3. Indice Photoshop Presets Preajustes de Photoshop Styles Shapes Brushes Patterns Actions Gradients Swatches Exportarimágenes en Photoshop Reglas y Guías Las Capas Crear un Slice Exportar Slices Compresión de Imágenes GIF JPG PNG

4. Photoshop Presets Preajustes de Photoshop

5. PORQUÉ, PARA QUÉ? Para hacernos el trabajo: • Fácil • Estandarizado • Rápido

6. Styles Son efectosvisualescomosombras, brillos, volúmenestexturasyotrosmás, que se se puedenguardarpara ser utilizadosporotrosusuariosuotrosproyectos

7. Styles O en la barra de herramientasderechaidentificado con estafigura Se encuentra en el menú Windows. Para cargar los styles se debehacer click en el siguientefigura ypresionar “Load styles” : Luego se busca el archivo .ASL identificado con el siguienteícono: Inmediatamenteaparecerán los Styles cargados en la ventanacorrespondiente.

8. Styles El logo tieneaplicado un style

9. Ejemplos

10. Shapes Son formasofigurasprediseñadas que se puedencargar al programa yquevienen en paths ovectores, por lo que son totalmenteeditables. Además se puedenexportar a Ilustradoroviceversa. Shortcut

11. Custom Shapes O con la teclarápida “U” Posterior deberáaparecerarriba lasherramientasadicionalesy los shapes quetiene el programapordefecto. Luego se presiona en el cuadro superior al lado de la palabra shape yaparecerán los quevienenpordefecto. Se localiza en la barra de herramientasderecha Hacer click en el triangulitoypresionar “Load Shapes”. Seguidamentenospidelocalizar el archivo .CSH, identificado con el siguienteícono:

12. Shapes

13. Ejemplos

14. Brushes Son brochasprediseñadas de direrentesformasy se puedenaplicar de diferentestamañosocolores, con ellas se puedenrealizarfácilmentefondosytexturas. Shortcut

15. Brushes 1- Presionar la tecla F5, Buscarlo en el menú windows, hacer click en la letra “b” (shorcut) o en la barra de herramientas de la derechay se identifica con el siguientegráfico. 2- Si presionamosdesde el menú de windows o en la barra de Herramientasaparecerá la siguiente ventana. 3- Luegohacemos click en el iconito ubicado en la esquina superior derecha.

16. 4- En la listaqueaparece seleccionar “Load Brushes” 5- Seguidamentenospideubicar el archivo con extensión .ABR identificado con el siguienteícono: 6- Inmediatamenteaparecenyavisualizadas lasbrochasparasuselección. 7- El tamaño de la brocha se puedemodificar con lasteclas control + Click derecho o con lastechas:

17. Brushes El fondoestacreado A partir de brochas

18. Brushes Estarealiazado en capasyparalogrardiferentesefectos se juega con los blending modes (mezclas), que son propiedadesque se le puedenasignar a lascapas.

19. Ejemplos

20. Patterns Son patronesprediseñadoque se cargandesde los layer style ysirvenparagenerarfondosotexturas.

21. Patterns Primero se selecciona la capa a la que se le va a aplicar el patrón haciendodoble click. Luego se selecciona la opción “Pattern Overlay”. En la parte de la ventanadonde aparecen los patrones se hace click. Y en el triangulitohacemos click y se selecciona “Load Pattern” Seguidamentenospideubicar el archivo con extensión .PAT identificado con el siguienteícono: Inmediatamenteaparecerán los patrones prediseñados en la ventanalistosparasuselección.

22. Patterns El fondotexturizadoes un patrón

23. Actions + Son unaserie de accionesocomandospredeterminadosque se guardanparaluego ser utilizadosunayotravez.

24. Actions También en el menú de windows y con lasteclas Shift + F9. Se localiza en la barra de Herramientasderecha con esteícono Hacemos Click en el triangulitoypresionamos “Load Actions” Localizamos el archivo con extensión .ATN identificado con esteícono: Seguidamenteapareceunacarpeta con lasaccionesque se ejecutarán

25. Actions Hacer click en el triangulito anterior a la carpeta. Se despliegaunalista de acciones, se selecciona la primera. Inmediatamente se activa la opción de “Play” en la parte inferior de la ventana, seguidamente se hace click y Voila!!! Empiezan a correrlasacciones de modoautomáticosegúnsucreador.

26. Ejemplos

27. Gradients Es unagalería de gradientes de coloresprediseñadas, que se cargan al programaypuedenestarordenadoporcategorías. Shortcut

28. Gradients 1- Presionar en el triangulito 2- Cargargradientes 3- Se busca el archivo .GRD que se identifica con el siguienteícono: 4- Inmediatamente aparecerán los gradientes parasuselección

29. Gradients

30. Swatches Se localiza en la barra de herramientasderecha con esteícono Son galerías de coloresque se puedenguardarporcategorías, ya sea parautilizar en marcasespecíficaso resolver composiciones a nivel de color.

31. Swatches 1- Hacer click en el triangulito 2- Luegohacemos click en Load Swatches 3- Buscamos el archivo .ACO ó .ASE que se identifica con los siguientesíconosrespectivamente: 4- Inmediatamenteaparecerá en la ventanalasmuestras de color.

32. Exportarimagenes en Photoshop

33. Las Reglas y Guías View > Rulers ó Control+R View > Show > Guides ó Control+ñ

34. Las Capas Es importanteconocercomofuncionanlascapasyaqueavecesnecesitamosesconder o mostraralgunascapas a la hora de exportar el diseño.

35. Crear un Slice Cuando se cortanlasimagenesesrecomendableaumentar el tamaño de la vista del diseño. Para estopodemosutilizar la herramienta Zoom Ó el comando “Control +” paraacercar y “Control –” paraalejar la vista del diseño.

36. Crear un Slice Tenemos 2 opcionesparacrear los Slices: Yaquehemoscreadolasguíasseleccionamos la herramienta Slice del panel de herramientas y en el menu superior nosva a aparecer un submenú el cuálcuenta con el botón “Slices From Guides”

37. Crear un Slice La segundaopciónescrear los slices deseadosunoporuno. Esto se haceactivando la herramienta Slice y arrastrándolapor el documentoparacrearlasrebanadasdeseadas.

38. Exportar los Slices Para exportar los slices vamos a File > Save for web ó shift+control+alt+s Es aquídondevamos a indicar el tipo de imagenquedeseamosasicomo el tipo de compresiónquevamos a aplicar a cadaimagen.

39. ComprimirImágenes En estepuntotenemosquetomar en cuentalasnecesidades de desarollo y de la imagen, esaquídonde se decide en queformato van a ser exportadasasícomo el peso y la calidad del formato. Imagenes GIF (Graphic Interchange Format). Utiliza compresión de un máximo de 8 bits (256 colores), por lo tanto se reduce considerablemente la calidad si se trata de imágenes como fotografías o degradados complejos. El formato GIF calcula la cantidad de colores mediante una formula que permite paletas de 2, 4, 8, 16, 32, 64, 128 y 256 colores, lo que nos da una amplia gama de posibilidades a la hora de optimizar gráficos sencillos.

40. Imagenes GIF -Ventajas: Amplia compatibilidad en los navegadores . La transparencia puede ser muy útil, si se sabe utilizar. La compresión logra imágenes de muy bajo peso. -Desventajas: Límite de 256 colores (degradados y fotografías se ven muy mal)

41. Transparencias en GIF

42. Transparencias en GIF

43. ImágenesJPG o JPEG (Joint of Photographic Experts Group) Es el formato más común para comprimir imágenes con relativamente poca pérdida de calidad y bajo peso, generalmente usado en imágenes fotográficas. El formato JPEG admite millones de colores (24 bits). JPEG es el formato óptimo para fotografías digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de color en degradado o cualquier imagen que requiera más de 256 colores. -Ventajas: Soporta millones de colores a un peso relativamente bajo . Ampliamente soportado en todos los navegadores y plataformas. -Desventajas: No soporta transparencias .

44. ImágenesJPG

45. ImágenesPNG (Portable Networks Graphic) Es un formato gráfico que esta basado en un algoritmo de compresión sin pérdidas, fue desarrollado para resolver las deficiencias del GIF y permite archivos de muy bajo peso sin pérdida de calidad.

46. ImágenesPNG Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos: PNG 8, se pueden usar para gráficos sencillos, colores planos, logos, pequeñas sombras, y para imágenes que no requieran mucho color. PNG 24 sirven para gráficos más complejos, degradados de varios colores, fotografías no tan complejas y transparencias. -Ventajas: En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad. Acepta transparencias. -Desventajas: Imágenes con mucho color y texturas suelen ser muy pesadas. El soporte de PNG no es tan amplio como los formatos anteriores. IE6 para Windows no soporta PNGs con transparencia.

47. ImágenesPNG

48. ANSWERS & QUESTIONS