Photoshop Tips<br />July 31, 2009<br />Critical Mass, Inc. All Rights Reserved.<br />
“Lo importante no es saber todo, sinotener el teléfono del quesabe.”<br />
Indice<br />Photoshop Presets<br />Preajustes de Photoshop<br />Styles<br />Shapes<br />Brushes<br />Patterns<br />Actions...
Photoshop Presets<br />Preajustes de Photoshop<br />
PORQUÉ, PARA QUÉ?<br />Para hacernos el trabajo:<br />• Fácil<br />• Estandarizado<br />• Rápido<br />
Styles<br />Son efectosvisualescomosombras, brillos, volúmenestexturasyotrosmás, que se se puedenguardarpara ser utilizado...
Styles<br />O en la barra de herramientasderechaidentificado con estafigura<br />Se encuentra en el menú Windows.<br />Par...
Styles<br />El logo tieneaplicado un style<br />
Ejemplos<br />
Shapes<br />Son formasofigurasprediseñadas<br />que se puedencargar al programa<br />yquevienen en paths ovectores,<br />p...
Custom Shapes<br />O con la teclarápida “U” <br />Posterior deberáaparecerarriba<br />lasherramientasadicionalesy los shap...
Shapes<br />
Ejemplos<br />
Brushes<br />Son brochasprediseñadas de direrentesformasy se puedenaplicar  de diferentestamañosocolores, con ellas se pue...
Brushes<br />1- Presionar la tecla F5,<br />Buscarlo en el menú windows,<br />hacer click en la letra “b” (shorcut)<br />o...
4- En la listaqueaparece<br />seleccionar “Load Brushes”<br />5- Seguidamentenospideubicar<br />    el archivo con extensi...
Brushes<br />El fondoestacreado<br />A partir de brochas<br />
Brushes<br />Estarealiazado en capasyparalogrardiferentesefectos se juega con los blending modes (mezclas), que son propie...
Ejemplos<br />
Patterns<br />Son patronesprediseñadoque se cargandesde los layer style ysirvenparagenerarfondosotexturas. <br />
Patterns<br />Primero se selecciona la capa a <br />la que se le va a aplicar el patrón<br />haciendodoble click. <br />Lu...
Patterns<br />El fondotexturizadoes un patrón<br />
Actions<br />+<br />Son unaserie de accionesocomandospredeterminadosque se guardanparaluego ser utilizadosunayotravez. <br />
Actions<br />También en el menú de windows y con lasteclas Shift + F9. <br />Se localiza en la barra de Herramientasderech...
Actions<br />Hacer click en el triangulito anterior a la carpeta. <br />Se despliegaunalista de acciones, se selecciona la...
Ejemplos<br />
Gradients<br />Es unagalería de gradientes de coloresprediseñadas, que se cargan al programaypuedenestarordenadoporcategor...
Gradients<br />1- Presionar en el triangulito<br />2- Cargargradientes<br />3- Se busca el archivo .GRD   <br />que se ide...
Gradients<br />
Swatches<br />Se localiza en la barra de herramientasderecha con esteícono<br />Son galerías de coloresque se puedenguarda...
Swatches<br />1- Hacer click en el triangulito<br />2- Luegohacemos click en Load Swatches<br />3- Buscamos el archivo .AC...
Exportarimagenes<br />en Photoshop<br />
Las Reglas y Guías<br />View &gt; Rulers ó Control+R<br />View &gt; Show &gt; Guides ó Control+ñ<br />
Las Capas<br />Es importanteconocercomofuncionanlascapasyaqueavecesnecesitamosesconder o mostraralgunascapas a la hora de ...
Crear un Slice<br />Cuando se cortanlasimagenesesrecomendableaumentar el tamaño de la vista del diseño.<br />Para estopode...
Crear un Slice<br />Tenemos 2 opcionesparacrear los Slices:<br />Yaquehemoscreadolasguíasseleccionamos la herramienta Slic...
Crear un Slice<br />La segundaopciónescrear los slices deseadosunoporuno.<br />Esto se haceactivando la herramienta Slice ...
Exportar los Slices<br />Para exportar los slices vamos a File &gt; Save for web ó shift+control+alt+s<br />Es aquídondeva...
ComprimirImágenes<br />En estepuntotenemosquetomar en cuentalasnecesidades de desarollo y de la imagen, esaquídonde se dec...
Imagenes GIF<br />-Ventajas:<br />Amplia compatibilidad en los navegadores .<br />La transparencia puede ser muy útil, si ...
Transparencias en GIF<br />
Transparencias en GIF<br />
ImágenesJPG o JPEG (Joint of Photographic Experts Group)<br />Es el formato más común para comprimir imágenes con relativa...
ImágenesJPG<br />
ImágenesPNG (Portable Networks Graphic) <br />Es un formato gráfico que esta basado en un algoritmo de compresión sin pérd...
ImágenesPNG<br />Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos:...
ImágenesPNG<br />
ANSWERS & QUESTIONS <br />
Photoshop Tips
Próxima SlideShare
Cargando en…5
×

Photoshop Tips

1.228 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.228
En SlideShare
0
De insertados
0
Número de insertados
32
Acciones
Compartido
0
Descargas
22
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Photoshop Tips

  1. 1. Photoshop Tips<br />July 31, 2009<br />Critical Mass, Inc. All Rights Reserved.<br />
  2. 2. “Lo importante no es saber todo, sinotener el teléfono del quesabe.”<br />
  3. 3. Indice<br />Photoshop Presets<br />Preajustes de Photoshop<br />Styles<br />Shapes<br />Brushes<br />Patterns<br />Actions<br />Gradients<br />Swatches<br />Exportarimágenes en Photoshop<br />Reglas y Guías<br />Las Capas<br />Crear un Slice<br />Exportar Slices<br />Compresión de Imágenes<br />GIF<br />JPG<br />PNG<br />
  4. 4. Photoshop Presets<br />Preajustes de Photoshop<br />
  5. 5. PORQUÉ, PARA QUÉ?<br />Para hacernos el trabajo:<br />• Fácil<br />• Estandarizado<br />• Rápido<br />
  6. 6. Styles<br />Son efectosvisualescomosombras, brillos, volúmenestexturasyotrosmás, que se se puedenguardarpara ser utilizadosporotrosusuariosuotrosproyectos<br />
  7. 7. Styles<br />O en la barra de herramientasderechaidentificado con estafigura<br />Se encuentra en el menú Windows.<br />Para cargar los styles se debehacer click en el siguientefigura<br />ypresionar “Load styles” :<br />Luego se busca el archivo .ASL identificado con el siguienteícono:<br />Inmediatamenteaparecerán los<br />Styles cargados en la ventanacorrespondiente.<br />
  8. 8. Styles<br />El logo tieneaplicado un style<br />
  9. 9. Ejemplos<br />
  10. 10. Shapes<br />Son formasofigurasprediseñadas<br />que se puedencargar al programa<br />yquevienen en paths ovectores,<br />por lo que son totalmenteeditables.<br />Además se puedenexportar a Ilustradoroviceversa.<br />Shortcut<br />
  11. 11. Custom Shapes<br />O con la teclarápida “U” <br />Posterior deberáaparecerarriba<br />lasherramientasadicionalesy los shapes quetiene el programapordefecto.<br />Luego se presiona en el cuadro<br />superior al lado de la palabra shape yaparecerán los quevienenpordefecto.<br />Se localiza en la barra de herramientasderecha<br />Hacer click en el triangulitoypresionar “Load Shapes”.<br />Seguidamentenospidelocalizar el archivo .CSH, identificado con el siguienteícono:<br />
  12. 12. Shapes<br />
  13. 13. Ejemplos<br />
  14. 14. Brushes<br />Son brochasprediseñadas de direrentesformasy se puedenaplicar de diferentestamañosocolores, con ellas se puedenrealizarfácilmentefondosytexturas.<br />Shortcut<br />
  15. 15. Brushes<br />1- Presionar la tecla F5,<br />Buscarlo en el menú windows,<br />hacer click en la letra “b” (shorcut)<br />o en la barra de herramientas de<br /> la derechay se identifica con el <br />siguientegráfico.<br />2- Si presionamosdesde el menú<br /> de windows o en la barra de <br />Herramientasaparecerá la siguiente<br />ventana.<br />3- Luegohacemos click en el iconito<br />ubicado en la esquina superior <br />derecha.<br />
  16. 16. 4- En la listaqueaparece<br />seleccionar “Load Brushes”<br />5- Seguidamentenospideubicar<br /> el archivo con extensión .ABR<br />identificado con el siguienteícono:<br />6- Inmediatamenteaparecenyavisualizadas<br />lasbrochasparasuselección.<br />7- El tamaño de la brocha se puedemodificar<br /> con lasteclas control + Click derecho<br />o con lastechas:<br />
  17. 17. Brushes<br />El fondoestacreado<br />A partir de brochas<br />
  18. 18. Brushes<br />Estarealiazado en capasyparalogrardiferentesefectos se juega con los blending modes (mezclas), que son propiedadesque se le puedenasignar a lascapas.<br />
  19. 19. Ejemplos<br />
  20. 20. Patterns<br />Son patronesprediseñadoque se cargandesde los layer style ysirvenparagenerarfondosotexturas. <br />
  21. 21. Patterns<br />Primero se selecciona la capa a <br />la que se le va a aplicar el patrón<br />haciendodoble click. <br />Luego se selecciona la opción<br />“Pattern Overlay”.<br />En la parte de la ventanadonde<br />aparecen los patrones se hace click.<br />Y en el triangulitohacemos click<br />y se selecciona “Load Pattern”<br />Seguidamentenospideubicar<br />el archivo con extensión .PAT<br />identificado con el siguienteícono:<br />Inmediatamenteaparecerán los patrones<br />prediseñados en la ventanalistosparasuselección.<br />
  22. 22. Patterns<br />El fondotexturizadoes un patrón<br />
  23. 23. Actions<br />+<br />Son unaserie de accionesocomandospredeterminadosque se guardanparaluego ser utilizadosunayotravez. <br />
  24. 24. Actions<br />También en el menú de windows y con lasteclas Shift + F9. <br />Se localiza en la barra de Herramientasderecha con esteícono<br />Hacemos Click en el triangulitoypresionamos<br />“Load Actions”<br />Localizamos el archivo con extensión .ATN identificado con esteícono:<br />Seguidamenteapareceunacarpeta con lasaccionesque se ejecutarán<br />
  25. 25. Actions<br />Hacer click en el triangulito anterior a la carpeta. <br />Se despliegaunalista de acciones, se selecciona la primera.<br />Inmediatamente se activa la opción de “Play” en la parte inferior de la ventana, seguidamente se hace click y Voila!!!<br />Empiezan a correrlasacciones de modoautomáticosegúnsucreador.<br />
  26. 26. Ejemplos<br />
  27. 27. Gradients<br />Es unagalería de gradientes de coloresprediseñadas, que se cargan al programaypuedenestarordenadoporcategorías. <br />Shortcut<br />
  28. 28. Gradients<br />1- Presionar en el triangulito<br />2- Cargargradientes<br />3- Se busca el archivo .GRD <br />que se identifica con el <br />siguienteícono:<br />4- Inmediatamente<br />aparecerán los gradientes<br />parasuselección<br />
  29. 29. Gradients<br />
  30. 30. Swatches<br />Se localiza en la barra de herramientasderecha con esteícono<br />Son galerías de coloresque se puedenguardarporcategorías, ya sea parautilizar en marcasespecíficaso resolver composiciones a nivel de color.<br />
  31. 31. Swatches<br />1- Hacer click en el triangulito<br />2- Luegohacemos click en Load Swatches<br />3- Buscamos el archivo .ACO ó .ASE que se identifica con los<br />siguientesíconosrespectivamente:<br />4- Inmediatamenteaparecerá en la ventanalasmuestras de color.<br />
  32. 32. Exportarimagenes<br />en Photoshop<br />
  33. 33. Las Reglas y Guías<br />View &gt; Rulers ó Control+R<br />View &gt; Show &gt; Guides ó Control+ñ<br />
  34. 34. Las Capas<br />Es importanteconocercomofuncionanlascapasyaqueavecesnecesitamosesconder o mostraralgunascapas a la hora de exportar el diseño. <br />
  35. 35. Crear un Slice<br />Cuando se cortanlasimagenesesrecomendableaumentar el tamaño de la vista del diseño.<br />Para estopodemosutilizar la herramienta Zoom <br />Ó el comando “Control +” paraacercar y “Control –” paraalejar la vista del diseño.<br />
  36. 36. Crear un Slice<br />Tenemos 2 opcionesparacrear los Slices:<br />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”<br />
  37. 37. Crear un Slice<br />La segundaopciónescrear los slices deseadosunoporuno.<br />Esto se haceactivando la herramienta Slice y arrastrándolapor el documentoparacrearlasrebanadasdeseadas.<br />
  38. 38. Exportar los Slices<br />Para exportar los slices vamos a File &gt; Save for web ó shift+control+alt+s<br />Es aquídondevamos a indicar el tipo de imagenquedeseamosasicomo el tipo de compresiónquevamos a aplicar a cadaimagen.<br />
  39. 39. ComprimirImágenes<br />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.<br />Imagenes GIF (Graphic Interchange Format).<br />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.<br />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.<br />
  40. 40. Imagenes GIF<br />-Ventajas:<br />Amplia compatibilidad en los navegadores .<br />La transparencia puede ser muy útil, si se sabe utilizar.<br />La compresión logra imágenes de muy bajo peso.<br />-Desventajas:<br />Límite de 256 colores (degradados y fotografías se ven muy mal)<br />
  41. 41. Transparencias en GIF<br />
  42. 42. Transparencias en GIF<br />
  43. 43. ImágenesJPG o JPEG (Joint of Photographic Experts Group)<br />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. <br />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.<br />-Ventajas:<br />Soporta millones de colores a un peso relativamente bajo .<br />Ampliamente soportado en todos los navegadores y plataformas.<br />-Desventajas:<br />No soporta transparencias .<br />
  44. 44. ImágenesJPG<br />
  45. 45. ImágenesPNG (Portable Networks Graphic) <br />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.<br />
  46. 46. ImágenesPNG<br />Los diferentes tipos de PNG, se usan para lograr la mejor relación peso/calidad en todo tipo de gráficos:<br />PNG 8, se pueden usar para gráficos sencillos, colores planos, logos, pequeñas sombras, y para imágenes que no requieran mucho color.<br />PNG 24 sirven para gráficos más complejos, degradados de varios colores, fotografías no tan complejas y transparencias.<br />-Ventajas:<br />En la mayoría de los casos prácticos, se obtiene la mejor relación peso/calidad.<br />Acepta transparencias. <br />-Desventajas:<br />Imágenes con mucho color y texturas suelen ser muy pesadas.<br />El soporte de PNG no es tan amplio como los formatos anteriores.<br />IE6 para Windows no soporta PNGs con transparencia. <br />
  47. 47. ImágenesPNG<br />
  48. 48. ANSWERS & QUESTIONS <br />

×