Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Photoshop Tips

1,268 views

Published on

Published in: Art & Photos, Technology
  • Be the first to comment

  • Be the first to like this

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 />

×