Este documento proporciona una guía de herramientas y técnicas útiles en Photoshop como preajustes, estilos, formas, brochas, patrones, acciones, gradientes, muestras de color y cómo exportar imágenes. Explica cómo usar capas, crear y exportar slices, y comprimir imágenes en formatos como GIF, JPG y PNG considerando ventajas y desventajas de cada uno.

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

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

3. IndicePhotoshop PresetsPreajustes de PhotoshopStylesShapesBrushesPatternsActionsGradientsSwatchesExportarimágenes en PhotoshopReglas y GuíasLas CapasCrear un SliceExportar SlicesCompresión de ImágenesGIFJPGPNG

4. Photoshop PresetsPreajustes de Photoshop

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

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

7. StylesO en la barra de herramientasderechaidentificado con estafiguraSe encuentra en el menú Windows.Para cargar los styles se debehacer click en el siguientefiguraypresionar “Load styles” :Luego se busca el archivo .ASL identificado con el siguienteícono:Inmediatamenteaparecerán losStyles cargados en la ventanacorrespondiente.

8. StylesEl logo tieneaplicado un style

9. Ejemplos

10. ShapesSon formasofigurasprediseñadasque se puedencargar al programayquevienen en paths ovectores,por lo que son totalmenteeditables.Además se puedenexportar a Ilustradoroviceversa.Shortcut

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

12. Shapes

13. Ejemplos

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

15. Brushes1- 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 siguienteventana.3- Luegohacemos click en el iconitoubicado en la esquina superior derecha.

16. 4- En la listaqueapareceseleccionar “Load Brushes”5- Seguidamentenospideubicar el archivo con extensión .ABRidentificado con el siguienteícono:6- Inmediatamenteaparecenyavisualizadaslasbrochasparasuselección.7- El tamaño de la brocha se puedemodificar con lasteclas control + Click derechoo con lastechas:

17. BrushesEl fondoestacreadoA partir de brochas

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

19. Ejemplos

20. PatternsSon patronesprediseñadoque se cargandesde los layer style ysirvenparagenerarfondosotexturas.

21. PatternsPrimero se selecciona la capa a la que se le va a aplicar el patrónhaciendodoble click. Luego se selecciona la opción“Pattern Overlay”.En la parte de la ventanadondeaparecen los patrones se hace click.Y en el triangulitohacemos clicky se selecciona “Load Pattern”Seguidamentenospideubicarel archivo con extensión .PATidentificado con el siguienteícono:Inmediatamenteaparecerán los patronesprediseñados en la ventanalistosparasuselección.

22. PatternsEl fondotexturizadoes un patrón

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

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

25. ActionsHacer 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. GradientsEs unagalería de gradientes de coloresprediseñadas, que se cargan al programaypuedenestarordenadoporcategorías. Shortcut

28. Gradients1- Presionar en el triangulito2- Cargargradientes3- Se busca el archivo .GRD que se identifica con el siguienteícono:4- Inmediatamenteaparecerán los gradientesparasuselección

29. Gradients

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

31. Swatches1- Hacer click en el triangulito2- Luegohacemos click en Load Swatches3- Buscamos el archivo .ACO ó .ASE que se identifica con lossiguientesíconosrespectivamente:4- Inmediatamenteaparecerá en la ventanalasmuestras de color.

32. Exportarimagenesen Photoshop

33. Las Reglas y GuíasView > Rulers ó Control+RView > Show > Guides ó Control+ñ

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

35. Crear un SliceCuando 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 SliceTenemos 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 SliceLa segundaopciónescrear los slices deseadosunoporuno.Esto se haceactivando la herramienta Slice y arrastrándolapor el documentoparacrearlasrebanadasdeseadas.

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

39. ComprimirImágenesEn 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ágenesPNGLos 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