July 31, 2009

Photoshop Tips

Critical Mass, Inc. All Rights Reserved.

“Lo importante no es saber todo, sino tener el teléfono del que sabe.”

Indice Photoshop PresetsPreajustes de Photoshop

StylesShapesBrushesPatternsActionsGradientsSwatches

Exportar imágenes en PhotoshopReglas y GuíasLas CapasCrear un SliceExportar SlicesCompresión de ImágenesGIFJPGPNG

Photoshop PresetsPreajustes de Photoshop

PORQUÉ, PARA QUÉ?

Para hacernos el trabajo:

• Fácil

• Estandarizado

• Rápido

Styles Son efectos visuales como sombras, brillos, volúmenes texturas y otros más, que se se pueden guardar para ser utilizados por otros usuarios u otros proyectos

Se encuentra en el menú Windows.

Styles

O en la barra de

herramientas derecha

identificado con esta figura

Para cargar los styles se debe hacer click en el siguiente figuray presionar “Load styles” :

Luego se busca el archivo .ASL identificado con el siguiente ícono:

Inmediatamente aparecerán losStyles cargados en la ventana correspondiente.

Styles

El logo tiene aplicado un style

Ejemplos

ShapesShortcut

Son formas o figuras prediseñadasque se pueden cargar al programay que vienen en paths o vectores,por lo que son totalmente editables.Además se pueden exportar a Ilustrador o viceversa.

Custom Shapes

O con la tecla rápida “U”

Posterior deberá aparecer arribalas herramientas adicionales y los shapes que tiene el programa por defecto.

Luego se presiona en el cuadrosuperior al lado de la palabra shape y aparecerán los que vienen por defecto.

Hacer click en el triangulito y presionar “Load Shapes”.

Seguidamente nos pide localizar el archivo .CSH, identificado con el siguiente ícono:

Se localiza en la barra de herramientas derecha

Shapes

Ejemplos

BrushesShortcut

Son brochas prediseñadas de direrentes formas y se pueden aplicar de diferentes tamaños o colores, con ellas se pueden realizar fácilmente fondos y texturas.

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 derecha y se identifica con el siguiente gráfico.

2- Si presionamos desde el menú de windows o en la barra de Herramientas aparecerá la siguiente ventana.3- Luego hacemos click en el iconito ubicado en la esquina superior derecha.

4- En la lista que aparece seleccionar “Load Brushes”

5- Seguidamente nos pide ubicar el archivo con extensión .ABR identificado con el siguiente ícono:

6- Inmediatamente aparecen ya visualizadas las brochas para su selección.

7- El tamaño de la brocha se puede modificar con las teclas control + Click derecho o con las techas:

Brushes

El fondo esta creadoA partir de brochas

Brushes

Esta realiazado en capas y para lograr diferentes efectos se juega con los

blending modes (mezclas), que son propiedades que se le pueden asignar a

las capas.

Ejemplos

PatternsSon patrones prediseñado que se cargan desde los layer style y sirven para generar fondos o texturas.

Patterns

Primero se selecciona la capa a la que se le va a aplicar el patrónhaciendo doble click.

Luego se selecciona la opción“Pattern Overlay”.

En la parte de la ventana dondeaparecen los patrones se hace click.

Y en el triangulito hacemos clicky se selecciona “Load Pattern”

Seguidamente nos pide ubicarel archivo con extensión .PATidentificado con el siguiente ícono:

Inmediatamente aparecerán los patronesprediseñados en la ventana listos para su selección.

Patterns

El fondo texturizado es

un patrón

Actions +Son una serie de acciones o comandos predeterminados que se guardan para luego ser utilizados una y otra vez.

Se localiza en la barra de Herramientas derecha

con este ícono

También en el menú de windows y con las teclas Shift + F9.

Actions

Hacemos Click en el triangulito y presionamos“Load Actions”

Localizamos el archivo con extensión .ATN identificado con este ícono:

Seguidamente aparece una carpeta con las acciones que se ejecutarán

Actions

Hacer click en el triangulito anterior a la carpeta.

Se despliega una lista 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 correr las acciones de modo automático según su creador.

Ejemplos

GradientsShortcut

Es una galería de gradientes de colores prediseñadas, que se cargan al programa y pueden estar ordenado por categorías.

Gradients

1- Presionar en el triangulito

3- Se busca el archivo .GRD que se identifica con el siguiente ícono:

2- Cargar gradientes

4- Inmediatamente aparecerán los gradientes para su selección

Gradients

SwatchesSon galerías de colores que se pueden guardar por categorías, ya sea para utilizar en marcas específicas o resolver composiciones a nivel de color.

Se localiza en la barra de herramientas derecha con este ícono

Swatches

1- Hacer click en el triangulito

2- Luego hacemos click en Load Swatches

3- Buscamos el archivo .ACO ó .ASE que se identifica con los

siguientes íconos respectivamente:

4- Inmediatamente aparecerá en la ventana las

muestras de color.

Exportar imagenesen Photoshop

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

Las Capas

Es importante conocer como funcionan las capas ya que aveces necesitamos esconder o mostrar algunas capas a la hora de exportar el diseño.

Cuando se cortan las imagenes es recomendable aumentar el tamaño de la vista del diseño.Para esto podemos utilizar la herramienta Zoom Ó el comando “Control +” para acercar y “Control –” para alejar la vista del diseño.

Crear un Slice

Tenemos 2 opciones para crear los Slices:

Ya que hemos creado las guías seleccionamos la herramienta Slice del panel de herramientas y en el menu superior nos va a aparecer un submenú el cuál cuenta con el botón “Slices From Guides”

Crear un Slice

La segunda opción es crear los slices deseados uno por uno.Esto se hace activando la herramienta Slice y arrastrándola por el documento para crear las rebanadas deseadas.

Crear un Slice

Exportar los SlicesPara exportar los slices vamos a File > Save for web ó shift+control+alt+s

Es aquí donde vamos a indicar el tipo de imagen que deseamos asi como el tipo de compresión que vamos a aplicar a cada imagen.

Comprimir Imágenes

En este punto tenemos que tomar en cuenta las necesidades de desarollo y de la imagen, es aquí donde se decide en que formato van a ser exportadas así como el peso y la calidad del formato.

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.

Imagenes GIF (Graphic Interchange Format).

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)

Transparencias en GIF

Transparencias en GIF

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 .

Imágenes JPG o JPEG (Joint of Photographic Experts Group)

Imágenes JPG

Imágenes PNG (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.

Imágenes PNG

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.

Imágenes PNG

ANSWERS & QUESTIONS