http://www.elwebmaster.

com/ editorial/taller-adobephotoshop-programa Taller Adobe Photoshop: Temario

PHOTOSHOP, DISEO GRFICO, TALLERES, PROGRAMA PHOTOSHOP, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP

Bienvenidos al taller de Adobe Photoshop. Podrn seguir las clases todos los mircoles desde el 30 de enero hasta el 13 de agosto (29 clases) . No se lo pierdan! Aprendern a dominar la principal herramienta de diseo grfico. Objetivos del Curso: aprender a utilizar las funciones bsicas y avanzadas de Photoshop para crear un Sitio Web y sus componentes ms importantes: Imgenes, Banners, Logos, Iconos, Botones, Popups, Newsletters, etc. Trabajo Final: Realizacin de un Sitio Web con Photoshop.

o o o o o o o o o o o o o o

Clase 1: Conceptos bsicos La imagen digital Tipos de imgenes digitales Vectores y pxeles Digitalizacin de imgenes de mapa de bits El Escner La cmara digital Resolucin de la imagen Tamao de una imagen de mapa de bits Profundidad de color Formatos de los archivos de imgenes digitales Clase 2: Introduccin a Photoshop Interfaz del programa Herramientas Personalizacin de mens y atajos de teclado Clase 3: Herramientas de Seleccin (1) Herramientas de seleccin directa

o o o o o o o o o o o o o o o o o o o o o o o o o
Clase 9: Clase 8: Clase 7:

La Pluma como herramienta de seleccin Calado / Feather Clase 4: Herramientas de Seleccin (2) Rango de color Guardar y cargar selecciones Transformar una seleccin Clase 5: Prctica Comenzando a diagramar tu Sitio Web Elementos que lo conforman La interfaz del Sitio Clase 6: Ajustes de color Configuracin y ajuste del espacio de trabajo

Niveles y Curvas

Correccin selectiva

Tono y saturacin Sombras e iluminaciones Otras funciones de correccin Clase 10: Automatizacin en Photoshop: Acciones Acciones predefinidas Crear una accin Trabajar con lotes de imgenes Clase 11: Prctica La maquetacin de tu sitio web Clase 12: Prctica Generando los elementos de la interfaz Clase 13: Formas vectorizadas Rectngulo Rectngulo redondeado Elipse Polgono Lnea Forma personalizada Clase 14: Estilos

 o o o o o o o o o o o o o o o o o o o o o o o o o

Clase 15: Paneles flotantes (1) Clase 16: Paneles flotantes (2) Clase 17: Prctica Creacin de un Banner publicitario Clase 18: Las Mscaras en Photoshop Diferentes tipos de mscaras Seleccin a travs de mscaras Mscara rpida Clase 19: Canales Alpha Otras mscaras Personalizacin de las mscaras Seleccin por medio de canales Clase 20: Las capas de Photoshop Capa Fondo y capas normales de pxeles Capa con mscara de capa o capas de fotomontaje Alinear y distribuir capas Composiciones en capas Clase 21: Las capas de ajuste Capa de ajuste Capa de relleno, capa vectorial Capa de texto Objetos inteligentes Clase 22: Mscaras de capa o de fotomontaje Selecciones difciles: pelo, transparencias Plugin de Fotomontaje profesional: MaskPro Clase 23: Efectos de capa Estilos de capa predeterminados Sombras, resplandores, trazos y relieves Clase 24: Prctica La interfaz de tu sitio web Creacin de Botones Clase 25: Herramientas de pintura y de correccin Pinceles, sellos, pinceles correctores El auge de los Pinceles Creando y compartiendo Pinceles en la Web

 o o o o o o o o o o o o o

Clase 26: Panel y pincel de historia Degradados de color Clase 27: ltimas novedades del programa Filtro Licuar: caricaturas, deformaciones, etc Punto de fuga: fotos 3d Correccin de lente Clase 28: De Photoshop a la web Creacin de la Interfaz de tu Sitio Web Las Guas Los Sectores Uso de Slices Exportar imgenes optimizadas Guardar para la Web Clase 29: Prctica La interfaz de tu sitio web Ajustes finales Podrn seguir las clases todos los mircoles desde el 30 de enero hasta el 13 de agosto (29 clases).

Sigue el curso desde el siguiente enlace:

Taller de Adobe Photoshop: La interfaz del programa

PHOTOSHOP, TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 2

Hola, bienvenido a la segunda clase del Taller de Adobe Photoshop. La clase anterior aprendimos los conceptos bsicos sobre imagen y color. Son tan importantes como conocer esta herramienta a fondo. Por eso, hoy veremos la interfaz del programa, analizaremos sus barras de men, herramientas, paneles y dems. Aprenderemos tambin los atajos de teclado que nos harn manejar el programa con mayor velocidad.

La interfaz del Programa

La interfaz de Photoshop est comprendida por la ventana del documento, el panel de herramientas, la barra de opciones y los paneles flotantes.

La barra de opciones, que se ubica debajo de la barra de men, tiene los principales atributos de la herramienta seleccionada. Todas las herramientas tienen algn parmetro, caracterstica o personalizacin que puede ser asignada desde esta barra. Si una herramienta no funciona como esperamos lo ms probable es que tenga alguna opcin que no corresponde con el trabajo quequeremos hacer.

El panel de herramientas, contiene las herramientas usuales. En algunos de sus casilleros aparece un pequeo tringulo negro que indica que contiene ms de una herramienta; slo tenemos que presionar el botn del ratn un momento y se desplegarn. Los paneles flotantes tienen muy diversas funciones. Todos se despliegan desde el men Ventana / Windows.

La ventana del documento

En la ventana del documento, adems de la imagen, vemos la barra de ttulo con el nombre del documento, el sistema de color en que est descripta la imagen y el porcentaje de visualizacin. Debajo de la ventana del documento est la barra de estado. A la izquierda se muestra el porcentaje de ampliacin del documento. Esta informacin no est relacionada con el tamao de impresin de la imagen sino con su resolucin. Una visualizacin al 100% significa que cada pxel del documento coincide con un pxel del monitor. Es la mejor forma de ver un documento. Otros porcentajes distorsionan la imagen, a veces demasiado, ya que se tiene que crear o desechar informacin. Este campo de texto es accesible y permite ingresar un porcentaje cualquiera entre 0.09 y 1600 %. A la derecha de la barra de estado aparece un texto que nos indica las tareas que podemos realizar de acuerdo a la herramienta que tenemos seleccionada en ese momento. Esta ltima opcin est presente slo en la versin Windows del programa. Presionando el pequeo triangulo negro de la Barra de estado podemos elegir varias opciones de la informacin que ser mostrada en la barra.

Grupos de Herramientas
Photoshop permite acceder a la mayora de las herramientas con la simple accin de pulsar una letra del teclado. Por razones obvias esta ventaja se desactiva mientras estamos usando la herramienta de texto. A continuacin veremos para qu sirve cada herramienta y el atajo de teclado que le corresponde.

Herramientas de seleccin:
1<M> Marco rectangular Marco elptico Marco fila nica Marco columna nica Las ms usuales son las dos primeras, que realizan selecciones de formas predeterminadas. 2<V> Mover Sirve para mover reas seleccionadas, capas o imgenes completas. 3<L> Lazo Lazo poligonal Lazo magntico Herramienta de seleccin de forma libre. El Lazo poligonal realiza polgonos de lados rectos. El Lazo magntico selecciona siguiendo los bordes de diferentes tonos. 4<W> Varita mgica

Selecciona reas valindose de las diferencia de tono. 5<C> Recortar Recorta o reencuadra la imagen en forma rectangular, desechando las reas que quedan fuera de rectngulo definido. 6<K> Sector Seleccin de sector Sirve para dividir imgenes en sectores imgenes destinadas a pginas web. Estos sectores se convertirn luego en celdas de una tabla HTML.

Herramientas de pintura:
7<J> Pincel Reparador Herramienta Parche Para corregir imperfecciones de las imgenes: permite tomar la textura de un rea sana y corregir defectos y manchas. Ideal para quitar arrugas y manchas en la piel. 8<B> Pincel Lpiz Herramientas de pintura. 9<S> Tampn Tampn de motivo Herramienta de clonacin. Permite corregir imperfecciones y hacer trucos. 10 < Y > Pincel de historia Pincel de historia de arte El primero permite recuperar, en zonas determinadas, estados anteriores de la imagen. Usa la prestacin Historia del programa, que guarda varios pasos anteriores de la imagen. El segundo realiza efectos artsticos. 11 < E > Borrador Borrador de fondo Borrador mgico Borra partes de la imagen. Borrador mgico borra aprovechando las diferencias de tono. 12 < G > Degradado Bote de pintura

Degradado realiza degrads en diferentes estilos. Bote de pintura pinta aprovechando las diferencias de tono. 13 < R > Desenfocar Enfocar Dedo Desenfocar y Enfocar modifican precisin en los detalles de las imgenes. Dedo desparrama los colores de las imgenes como si fuera pintura fresca. 14 < O > Subexponer Sobreexponer Esponja Subexponer y sobreexponer modifican el tono de las imgenes, oscurecindolo o aclarndolo. Esponja: satura o desatura los colores.

Herramientas vectoriales:
15 < A > Seleccin de trazados Seleccin directa Para seleccionar trazados realizados por la herramienta Pluma. 16 < T > Texto Incorpora textos. 17 < P > Pluma Pluma de forma libre Aadir punto de ancla Eliminar punto de ancla Convertir punto de ancla Conjunto de herramientas para crear y modificar trazados. 18 < U > Rectngulo Rectngulo redondeado Elipse Lnea Formas personalizadas Sirven para realizar formas vectoriales predeterminadas.

Herramientas varias:

19 < N > Notas Notas en audio Permite incorporar notas indicativas en la imagen, ya sea en texto o en audio. Pueden ser recordatorios o mensajes para otros operadores. 20 < I > Cuentagotas Muestra de color Medicin Herramientas de medicin y muestreo. El Cuentagotas permite tomar colores de determinadas zonas de la imagen. Muestra de color permite muestrear la composicin de color en cuatro puntos de la imagen en forma simultnea. Medicin permite medir distancias y ngulos. 21 < H > Mano Para desplazar la visualizacin de la imagen. 22 < Z > Zoom Permite aumentar o disminuir los porcentajes de visualizacin.

Otros elementos:
23 - Selector de color < D > restaura a los colores por defecto (Blanco de fondo y negro de frente). < X > invierte las posiciones de los colores frontal y de fondo. 24 < Q > Mscara rpida Herramienta de seleccin por medio de mscaras. 25 < F > Rota entre tres formas de visualizacin: 1. Ventanas mltiples y barra de men 2. Ventana nica y barra de men 3. Ventana nica sin barra de men 26 < Shift+Ctrl+M > Abre el documento activo en ImageReady, editor de imgenes para la web. Esto es slo para que tengas una nocin de qu son cada una de estas herramientas y para qu se usan, a lo largo del taller veremos cada una en profundidad. Esto es todo por hoy. Hasta la prxima!

Taller de Adobe Photoshop: Herramientas de seleccin (I)

PHOTOSHOP, TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 3

Bienvenidos otra vez, clase de Photoshop! Como venamos anunciando, por fin comenzaremos a practicar con imgenes. Hoy veremos qu implica hacer una seleccin en Photoshop, y qu diferentes tipos de seleccin nos permite realizar el programa. Antes de comenzar quera agradecer a todos mis alumnos que dejan sus dudas, sugerencias y comentarios, ayudando a mejorar este taller y el de Fotografa Digital. Tambin a todos los que me dan nimo! Ahora s. Vamos a clase! Seleccionar un objeto o porcin de imagen nos permitir trabajar directamente con ella, sin modificar el resto. Photoshop tiene herramientas diseadas para lograr efectos suavizados cuando seleccionamos pxeles. Veremos que segn la herramienta que usemos (y su configuracin), realizaremos diferentes tipos de selecciones, las que se basarn en la diferencia de colores, aproximacin u otros parmetros.

Herramientas de seleccin directa

Arriba, a la izquierda, encontramos el rectngulo. Abajo, el lazo y la varita mgica. Por medio de estas 3 herramientas realizaremos diferentes tipos de selecciones. Cada una tiene a su vez ciertos parmetros que podemos modificar a gusto de acuerdo con nuestras necesidades. Herramienta de seleccin rectangular: Haciendo clic y arrastrando el cursor sobre una imagen generaremos a gusto un rea de seleccin rectangular. Manteniendo pulsado shift luego de comenzar a arrastrar el puntero, haremos una seleccin cuadrada. Pulsando alt la seleccin se generar desde el centro. Podemos combinar estos dos comandos. Si mantenemos un segundo pulsado el botn de seleccin rectangular en la barra de herramientas, desplegaremos un panel con opciones alternativas, como hacer una seleccin en forma de elipse (o un crculo perfecto si pulsamos shift al arrastrar el puntero), o seleccionar filas nicas. Barra de opciones de las herramientas de seleccin:

1.

Personalizacin de la herramienta: Permite especificar un tamao determinado para la seleccin.

2.
o

Opciones de seleccin:

Seleccin nica: Modo por defecto de las herramientas de seleccin. Realiza selecciones de a una por vez, sin relacionarlas, borrando lo seleccionado anteriormente.

Sumar selecciones: Habilitando esta opcin agregaremos la nueva seleccin a una ya existente. Podemos accionarla directamente pulsando shift antes de comenzar a arrastrar el cursor.

Restar selecciones: Habilitando esta opcin restaremos la nueva seleccin a una ya existente, al contrario que el ejemplo anterior. Podemos accionarla directamente pulsando alt antes de comenzar a arrastrar el cursor.

Intersectar selecciones: Habilitando esta opcin generaremos una seleccin a partir del rea de encuentro de una seleccin anterior y una nueva.

3. 4. 5.

Calado (Feather, en ingls): Especifica el rango de suavizado de una seleccin. Veremos en detalle esta herramienta al final de esta clase. Suavizado (Anti aliasing): Por defecto viene seleccionada, permite suavizar los bordes de una seleccin para que no se note tanto el recorte. Estilo: Podemos elegir hacer una seleccin normal, proporcional o de medida fija.

Herramienta Lazo: Permite hacer selecciones irregulares. En su modo normal slo debemos arrastrar el cursor con el botn izquierdo del mouse presionado y movernos por donde queramos. Al volver al punto de inicio se cerrar la seleccin. En modo lazo poligonal, a medida que vamos haciendo clics en diferentes puntos, estos se van uniendo por lneas rectas formando un polgono. Trabaja igual que la anterior. El lazo magntico, selecciona tomando en cuenta las diferencias de color de una imagen. Sirve para seleccionar una figura usando los bordes diferenciados del fondo. Tenemos que hacer clic en alguna parte del permetro de la figura y seguir, en forma aproximada, ese permetro. Como estuviera magnetizada, la seleccin se va pegando a los bordes de la figura. Herramienta Varita Mgica: Esta herramienta aprovecha las diferencias de color para realizar sus selecciones.

Si hacemos un clic sobre un pxel de la imagen, seleccionar todos los pxeles de similar color. En su barra de Opciones, adems de las dos variantes comunes a todas las herramientas de seleccin, calado y suavizado, tiene las opciones siguientes:

1.

Tolerancia: Con este valor establecemos el rango de colores que sern seleccionados por la herramienta. Su valor se puede elegir entre 1 y 255. A valores pequeos seleccionar colores muy parecidos al de donde hicimos el clic. A medida que aumentamos este valor, el rango de colores aumenta y el rea seleccionada es mayor.

2.

Usar todas las capas: Con esta variante elegida en un documento con varias capas, la herramienta tiene en cuenta el color de todos las capas visibles. Si esta opcin no est seleccionada, la herramienta considerar los tonos de la capa activa.

3.

Pxeles contiguos: Permite que al hacer clic en un pxel, seleccione los pxeles adyacentes de tono similar. Si no elegimos esta opcin, seleccionar los pxeles de similar color, estn o no conectados con aquel sobre el cual hicimos clic.

Men de opciones de seleccin: Un comentario aparte merecen las opciones que se despliegan al hacer clic en Seleccin, en la barra de men, o al hacer clic derecho con el mouse sobre una seleccin (teniendo, a su vez, elegida una herramienta de seleccin). All encontraremos muchas opciones de utilidad:

Seleccionar todo: Con esta opcin o con su atajo de teclado (Ctrl+A), seleccionamos todos los pxeles del documento. Deseleccionar: Teniendo una seleccin activa la deseleccionamos, no queda ningn pxel seleccionado. Reseleccionar: Ejecutando este comando volvemos a cargar la ltima seleccin, no importa cuntas operaciones hayamos realizado desde que la perdimos.

Invertir seleccin: Teniendo una seleccin activa, pasamos a seleccionar el rea que no estaban seleccionada, mientras que deselecciona el rea que s lo estaba. Rango (o Gama) de color: Esta es una herramienta de seleccin que, al igual que la varita mgica, aprovecha las diferencias de color para realizar la seleccin. A diferencia de aquella herramienta, sta es mucho ms completa y personalizable. La clase que viene la veremos con ms detenimiento.

Calado: Permite suavizar los bordes de una seleccin ya realizada. Modificar: Permite modificar la seleccin de acuerdo a tres criterios diferentes: Borde: Transforma una seleccin dada en una seleccin en forma de marco de ancho personalizable.

Suavizado (Smooth): Simplifica una seleccin. til para simplificar selecciones realizadas por herramientas como la Varita mgica o la funcin Rango de color.

o
elegida.

Expandir y Contraer: Agranda o achica selecciones dadas en la cantidad de pxeles

Transformar seleccin: Cuando elegimos esta opcin aparecen unos manejadores que permiten cambiar de forma el rea seleccionada. Cargar y Guardar seleccin: Sirve para guardar selecciones o usar selecciones previamente guardadas. Estas funciones, vinculadas con el uso de mscaras, la veremos ms adelante.

La Pluma como herramienta de seleccin

Muchos usan la Pluma para realizar selecciones complejas. Esta herramienta, propia de los programas de dibujo vectorial, es muy verstil para contornear prcticamente cualquier silueta. Sumemos a esto que est presente en muchos programas de diseo (Illustrator, CorelDraw, Quark, etc.) y, si bien es necesaria cierta destreza para manejarla, los resultados que da son muy satisfactorios.Realmente es recomendable utilizarla cuando haya que realizar grandes recortes de calidad. Esto no significa que las herramientas anteriores no sirvan: tienen diferentes usos. Veremos el uso de la pluma con detenimiento en prximas clases.

Calado (Feather)
Las herramientas de seleccin directa tienen, en su barra de opciones, un parmetro llamado Calado (Feather) que define en cuntos pxeles se resolver la seleccin, es decir, que distancia habr entre los pxeles plenamente seleccionados y los que no lo estn. El efecto logrado es una especie de difuminacin en la seleccin. Por ejemplo, si seleccionamos un rectngulo con un grado de calado alto y lo copiamos y pegamos en un archivo nuevo veremos la diferencia en los bordes. Las siguientes imgenes sirven de ejemplo: la primera sin calado (calado grado cero) y la otra con calado alto (grado 20).

Imagen recortada sin calado.

Imagen recortada con calado. Podemos ver la notable diferencia en los bordes difuminados. Bueno, amigos y amigas, esto es todo por hoy (no les duele la cabeza ya ?). Como ven

Photoshop no por nada es lder en programas de retoque de imgenes, con tantas opciones de personalizacin de elementos. La clase que viene seguiremos viendo con detenimiento estas herramientas. Los espero, hasta la semana que viene!

Taller de Adobe Photoshop: Herramientas de seleccin (II)

PHOTOSHOP, TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 4

Hola, de nuevo, alumnos del Taller de Adobe Photoshop! Se dan cuenta que estamos a una sola clase de la primer prctica? (ver Temario). Por eso es importante que fijen bien todo lo aprendido hasta ahora y lo de hoy tambin, por supuesto. Hoy terminaremos de ver las herramientas de seleccin, ms puntualmente la Gama de colores o Rango de color, que nos haba quedado pendiente de la clase anterior. Tambin aprenderemos cmo transformar, guardar y cargar selecciones. Comencemos!

Rango de color/Gama de colores:

Esta herramienta nos permite realizar selecciones basadas en la diferencia entre un tono y otro de una imagen, es decir que sern mucho ms especficas. Para acceder a ella vamos al men Seleccin/Gama de colores (o Rango de color, segn la versin de Photoshop).

Las opciones que nos da son:

Seleccin (1): Con ella indicamos qu color queremos seleccionar. Si usamos el primer gotero de la derecha (5) elegiremos puntualmente el color al hacer clic sobre cualquier pxel de la imagen o de toda la pantalla. Con los goteros con el signo + y - podremos sumar o restar colores a la seleccin. Otros rangos de color que se despliegan desde este panel son: luces, medios tonos y sombras. Un buen ejercicio es tomar una foto nuestra y comenzar a modificar los valores, para ir viendo los cambios.

Tolerancia (2): Corriendo el ancla indicaremos qu tan estricta queremos que sea la seleccin de un color, es decir, la amplitud del rango o gama de colores. Un valor bajo selecciona menos colores (seleccin ms acotada). Un valor alto lo contrario.

Vista previa (3): Aqu podemos ver representada por el color blanco el rea a seleccionar. Previsualizar seleccin (4): Podemos elegir cuatro formas distintas, esto es a gusto de cada uno. Goteros (5): Como ya dijimos, nos sirve para elegir, agregar o restar colores a la seleccin. Tildando la casilla Invertir hacemos que lo seleccionado pase a estar deseleccionado y viceversa. Una vez que elegimos configuramos estas opciones, hacemos clic en OK para realizar la seleccin.

Guardar y cargar selecciones:

Esto es muy sencillo, una vez que tenemos una seleccin cualquiera ya realizada, hacemos clic con el botn derecho del mouse (o desde el Men/Seleccin) y elegimos Guardar seleccin. Nos pedir un nombre (cualquiera) y dndole a OK (notemos que dice canal nuevo en las opciones marcadas) nos guardar automticamente la seleccin. Para acceder a ella, desde el panel Canales, abajo a la derecha, tendremos que hacer Ctrl+clic en la capa correspondiente (que veremos que presenta una vista miniatura de nuestra seleccin). Listo! automticamente volver a aparecer la seleccin sobre la imagen.

Ms adelante veremos en detalle el uso del panel Canales, as como las Capas.

Transformar una seleccin:

De nuevo partimos de una seleccin ya hecha. Elegimos Transformar seleccin de la misma manera que en el punto anterior (desde el men o con clic derecho). Veremos que aparece un marco con unos cuadraditos en los bordes. Posando el cursor sobre ellos, veremos que se transforma en una serie de flechas, las cuales nos indicarn en qu sentido podemos mover o girar los bordes. En principio, con los cuadraditos del medio de cada uno de los lados podemos estirar o encoger la seleccin (haciendo clic y arrastrando el puntero). Desde los vrtices hacemos lo mismo, agrandando o achicando las esquinas. Si presionamos shift al mover los cuadraditos, la modificacin ser en escala (mantendr la relacin de aspecto). Un cuadrado seguir siendo un cuadrado, aunque ms grande o ms chico. Con alt+shift la reduccin o ampliacin ser desde el centro y no desde un borde (esto se entiende mucho mejor probando que leyendo esta aclaracin ).

Otra opcin es girar la seleccin, rotarla. Al alejar un poco el cursor de los cuadrados modificadores notaremos que cambia a una doble flecha curva. Haciendo clic y arrastrando giraremos la seleccin. De nuevo, con alt+shift giraremos teniendo como punto fijo el centro, mientras que con shift slo se girar de a tramos: 45, 90, etc. Bien, hasta aqu llega la clase de hoy, practiquen todo esto con sus fotos, hagan selecciones, etc. La clase que viene comenzaremos a diagramar nuestro sitio web! Hasta la prxima!

Taller de Adobe Photoshop: Prctica

PHOTOSHOP, TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 5

Hola, alumnos! El tiempo pasa volando y ya estamos en la quinta clase del Taller de Adobe Photoshop. Nuestra primer prctica! Pero quiz les sorprenda que haya tanta teora en la prctica, jejeje, esto es porque los que van a practicar son ustedes. Hoy comenzarn a diagramar sus sitios web, pero vern que hay muchos pasos previos al diseo en s. Comencemos! Photoshop es una excelente herramienta para disear la plantilla de nuestro sitio web. Al final del curso veremos que se puede hacer un sitio enteramente con Photoshop (aunque lo ms recomendable es usar DreamWeaver para optimizar la plantilla y terminar el sitio).Volviendo al tema, es importante conocer las herramientas que ofrece Photoshop a la hora de disear un sitio web, las cuales veremos a lo largo del taller. Pero un sitio web no slo es su estructura, tambin tiene contenido (imgenes, textos, etc). Por lo que tambin es importante saber cmo generar ese contenido.

Comenzando a diagramar tu Sitio Web

Si queremos hacer bien las cosas, el diseo de nuestro sitio comenzar en una hoja de papel. All volcaremos nuestras ideas. Hay que tener en cuenta que el sitio debera tener una buena esttica, pero sin descuidar la accesibilidad ni la usabilidad, es decir que el usuario pueda comprender de un vistazo todo lo que ofrece el sitio, cmo se accede a ello y que pueda usarlo (navegarlo) con facilidad. En los ejemplos que veremos no nos vamos a volver locos con diseos archi-complejos, porque sabiendo disear una pgina estndar tendremos los conocimientos para hacer despus algo ms creativo. La primera pregunta es: De qu tipo de sitio se trata? (Comercial, institucional, un portfolio, un blog, etc). La segunda: Cul ser el pblico de mi sitio? Teniendo en cuenta estas dos cuestiones bsicas, podemos tener una idea de qu tipo de diseo realizaremos, si ser ms o menos complejo (ojo! complejo no significa complicado), formal o informal, etc. Y tambin qu elementos voy a necesitar en l (carrito de compras, botoneras extras, conos, etc). Un sitio bsico puede tener una o ms barras horizontales superiores, barras verticales (columnas), un sector central para el contenido y una barra horizontal inferior (pi del sitio).

Elementos que lo conforman

No hay lmites para esto, pero generalmente se utiliza un banner principal, con una imagen, tal vez un texto integrado a la imagen o el logo de nuestro sitio, una barra de navegacin (dividida en botones, donde cada uno nos llevar a una seccin distinta del sitio), que puede ser horizontal o vertical, y el cuerpo o sector donde ir el contenido propiamente dicho. En base a esto podremos ir pensando cmo irn distribuidos estos elementos en el diseo de nuestra pgina. Luego de bocetarlos en papel, para tener una idea ms clara de cmo quedar finalmente, podemos dedicarnos a conseguir los recursos, imgenes, conos, tipografas, etc.,etc., etc., que incluiremos, ya sea que vayamos a retocarlos o no. Incluso podemos buscar varias fotos que nos interesen para (luego veremos cmo) fusionarlas en una sola imagen, una especie de collage (bien hecho) como se suele ver a menudo por la web. Tarea n 1: Piensen en lo explicado, creen un sitio (en una hoja de papel) y asgnenle un nombre de dominio (imaginario, estilo: pepito.com). Elijan la estructura que ms les convenga y los elementos que necesitarn (por el momento cntrense en la pgina de inicio). Tarea n2: Recolecten por la web todos los recursos necesarios (fotos, conos, etc.) que crean que pueden ser tiles. Nada est de ms en esta etapa. Pueden buscar imgenes desde Flickr o a travs de Google (como haremos un sitio para practicar, no importa qu tipo de imgenes usemos, pero luego tendremos que usar imgenes libres de derechos, al momento de publicar un sitio real).

La interfaz del Sitio

Todava no nos meteremos a disear la interfaz, pero a partir de esta clase comenzaremos a ver varios ejemplos prcticos que nos permitirn hacerlo ms adelante. Lo que s haremos es plantearnos qu elementos reaccionarn de una manera u otra frente a una accin del usuario (por ejemplo: un botn que cambia al pasarle el cursor por encima, un campo que se expandir al agregarle ms contenido, etc). Es importante que realicen este trabajo porque en base a esto haremos los ejercicios de las clases siguientes. Boceten todo en papel, miren infinidad de sitios por la web para aprender cmo se comportan, qu cosas estn buenas y cules no, etc. Para terminar la clase quisiera decirles que no se desanimen porque no van a usar Photoshop en esta primera prctica. Todo Diseador Grfico sabe que el trabajo principal se realiza fuera de la PC, sobre papel y en la cabeza. Pero sepan tambin que a partir de ahora comenzarn a trabajar con Photoshop ms intensamente. Ya estarn preparados. Hasta la prxima!

Taller de Adobe Photoshop: Ajustes de color

TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 6

Bienvenidos a otra clase del Taller de Adobe Photoshop. Cmo les ha ido con los bocetos de los sitios? Hoy veremos de qu manera configurar el color que usaremos en Photoshop para trabajos impresos o para disear nuestra web. Esto es clave, una mala gestin del color har que nuestros colores se vean muy mal o no se distingan detalles en las imgenes, nada menos. Sigan atentamente estas indicaciones y no tendrn ningn problema. Comencemos la clase! Hemos visto en clases anteriores que se asignan diferentes sistemas de color a una imagen segn su finalidad (como RGB para la web o la TV y CMYK para impresiones). De esta manera podemos especificar en Photoshop, antes de comenzar a trabajar con una imagen, qu ajustes de color preferimos aplicar teniendo en cuenta la utilizacin que se le dar a nuestro trabajo. Por qu hacemos esto? Simple. Imaginen que vamos a disear la portada de un libro o revista. Imaginen tambin que vamos a usar una foto generada digitalmente, con colores muy brillantes. Qu piensan que puede pasar cuando vayamos a imprimir la portada de la revista? Las tintas comunes no pueden reproducir un color luminoso, obviamente. El resultado de un mal manejo del color se puede apreciar en el siguiente ejemplo:

Esta imagen est en RGB

Esta imagen est en CMYK (como si estuviese impresa). Seguro notarn que los ptalos de la foto perdieron el degrad de color, achatando la imagen y quitndole detalles. Por esto debemos seleccionar con cuidado las imgenes que usemos (por ejemplo, si van a imprimirse, que estn en CMYK) y configurar el color de Photoshop antes de realizar un trabajo. Para configurar el color en Photoshop, vamos al men Edicin->Ajustes de color

Desde aqu accederemos a la siguiente ventana:

Si es la primera vez que abrimos esta ventana debera salir el texto Gestin de color desactivada. Debo decir que esta esta opcin salvar a los usuarios inexpertos de cometer algn error grueso. Si despliegan el men que dice Ajustes: vern una infinidad de opciones. Esto se debe a que cada pas utiliza distinto el color, sumado a las variantes que ya hay de por s. Yo prefiero configurarlos manualmente. Lo ms importante es elegir los colores para la web, PC o TV (colores luz) y los que usaremos para generar trabajos impresos (grficas, editoriales, packaging, etc). En el men Espacio de trabajo / RGB sugiero seleccionar Monitor RGB - sRGB IEC61 para trabajos en la web y Adobe RGB (1998) para la TV, cine, etc. En el men Espacio de trabajo / CMYK sugiero seleccionar Euroscale Coated (para imprimir en papel encerado, con cierto brillo) o Euroscale Uncoated (para impresos en papel que absorbe ms tinta, como el papel peridico). Las normas de gestin del color determinarn qu hacemos con las imgenes que abriremos con Photoshop, ya que muchas tendrn un perfil de color ya asignado. Yo dejara todo desactivado y seleccionara preguntar al abrir lo que har que pueda elegir si conservo el perfil de color o no al abrir una imagen o si quiero convertirlo automticamente al sistema que estoy usando. Perfecto! Ahora ya estamos preparados para realizar trabajos de toda ndole con Photoshop. Hasta la clase que viene!

Taller de Adobe Photoshop: Niveles y curvas

TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CLASE 7

Hola, queridos alumnos! Bienvenidos a una nueva clase del Taller de Adobe Photoshop. Hoy veremos qu herramientas tenemos para regular los colores, brillo y contraste de una imagen, en fin, cmo transformar una foto mal tomada en una obra de arte :). Photoshop nos sirve para hacer magia en algunos casos. Es increble el cambio que se puede lograr en una imagen. La mayora de las fotos alucinantes que aparecen en wallpapers, grficas y dems han pasado por estas herramienta. Hay herramientas que nos permiten calibrar una imagen, es decir, corregir el brillo, la luminosidad, el contraste y la saturacin de los colores. De esta forma una foto medio oscura, de colores apagados puede terminar con la iluminacin perfecta, resaltada con colores vivos. Antes de comenzar a ver estas herramientas debemos hacer una aclaracin: Si bien a veces Photoshop nos permite hacer verdadera magia, siempre estaremos trabajando con la informacin de color que haya en la imagen, no podremos inventar informacin. Y esto qu significa? Veamos un ejemplo para entender mejor esta aclaracin. Si tenemos una imagen cuyos pxeles tengan una mnima diferencia, puedo usar esa diferencia para ampliarla o modificarla, incluso reducirla.

Pero si en la imagen original no tengo datos de color, no tengo informacin, no puedo hacer nada. No puedo inventar una montaa donde no la haba. Esto quiere decir que una foto oscura o muy clara puede nivelarse para que ne vea bien, pero si la foto es tan oscura o tan clara que no se ve nada por ms que intentemos no habr qu nivelar. Se entiende?

Podemos apreciar en esta foto que donde haba informacin de color se resalt la imagen (la gente y el Big Beng), sin embargo el cielo qued exactamente igual. La primer herramienta que nos ayudar a hacer esta magia en las fotografas se llama Niveles. Vamos al Men Imagen->Ajustes->Niveles (debemos tener al menos una imagen abierta en Photoshop).

Veremos que se abre un panel como este:

El primer sector que he resaltado en amarillo sirve para elegir si queremos modificar toda la foto de una sola vez (es decir, todos los colores que la conforman) o por separado, pudiendo elegir rojo, verde, azul, cyan, magenta y amarillo (dependiendo si la imagen est en modo RGB o CMYK, como vimos la clase pasada). El segundo sector resaltado es donde modificaremos el espectro. Ven esa especie de montaa negra en el medio? Es la parte donde se encuentra la informacin de color. De esta manera nos damos cuenta de que la foto no est bien nivelada porque hay muchas partes sin informacin (los costados vacos de esa montaa). Moviendo las anclas de la lnea de base iremos acotando el rango tomado por la imagen, pudiendo acercarlo a la parte llena. Hagan su propia prueba para ver bien cmo cambia la imagen al acotar el rango. Aqu les dejo un ejemplo:

La imagen antes de ser nivelada.

Imagen nivelada. Noten cmo he acercado las anclas de la base del espectro. El ltimo sector resaltado, esa barra que va del negro al blanco, es donde ajustaremos la luminosidad del rango elegido. Practiquen con cualquier foto y entendern mucho mejor el manejo del color. La segunda herramienta de Photoshop para equilibrar el color y la nitidez de una imagen es Curvas.

Para acceder a ella vamos al Men Imagen->Ajustes->Curvas. Aqu tambin podemos elegir el canal a modificar (RGB o CMYK es toda la imagen, o un color por separado). En la caja del medio veremos una lnea diagonal. Esta lnea representa el rango tonal desde 0 en la esquina inferior izquierda hasta 255 en la esquina superior derecha. En la parte resaltada de abajo podremos elegir si queremos modificarla por medio de nodos o dibujarla nosotros mismos a mano alzada (cono del lpiz). El eje vertical representa los valores de entrada, y el horizontal los de salida.

Curvas nos permite modificar con mucha exactitud el equilibrio tonal de una imagen o incluso modificar un canal por separado, como ya vimos, logrando este efecto:

Hay ms herramientas de nivelado de la imagen, pero las veremos en las prximas clases. Eso es todo por hoy, recuerden practicar mucho y cualquier duda me consultan. Buena suerte!

Taller de Adobe Photoshop: Correccin selectiva

TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP CORRECCIN SELECTIVA, PHOTOSHOP CLASE 8

Hola, alumnos del Taller de Adobe Photoshop! La clase pasada vimos cmo equilibrar los tonos, colores, brillo y contraste en una imagen, por medio de la herramienta Niveles y la herramienta Curvas. En esta clase seguiremos con el tema. Aprenderemos cmo se hace una Correccin Selectiva, que es la manera ms profesional de corregir los colores de una imagen en Photoshop. No nos demoremos un segundo ms y comencemos. La herramienta Correccin Selectiva (Imagen/Ajustes /Correccin Selectiva) es otra forma de equilibrar los colores de una imagen, algo parecido a lo que vimos la clase pasada, pero mucho ms preciso y especfico. Es la herramienta que salva aquellas fotos que parecan inutilizables. Trabaja sobre un color en concreto o sobre el rango RGB o CMYK, al igual que las curvas y los niveles. Por medio de selectores y reguladores podemos determinar la cantidad de cada color (en tinta o luz) que formar un tono de color especfico. Para entender esto tomemos un ejemplo. Nunca les pas ver un color cualquiera, que tuviera tonalidades de otro color? Como la pintura blanca de una pared, que al envejecer comienza a ponerse amarillenta. Esto nos demuestra que ese color blanco de la pared no es un blanco puro sino que tiene otras tintas que lo conforman como el amarillo, en un porcentaje menor. Si pudiramos quitar un poco de amarillo de la pared, se vera un blanco ms puro. Esto es lo que logran los ajustes de la Correccin Selectiva, acomodar la cantidad de colores que forman un color final.

En esta foto vemos todos los colores que forman el rojo, y que podemos regularlos:

Veamos la diferencia en una imagen:

Como ven, es mucho ms especfica la correccin de una imagen con esta herramienta. Es lo ms profesional que tiene Photoshop a la hora de modificar el color. Eso es todo por hoy hasta la prxima!

Taller de Adobe Photoshop: Otras funciones de correccin

TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP TONO SATURACION, PHOTOSHOP CLASE 9

Hola, alumnos! Otra clase del taller de Adobe Photoshop Estn listos para aprender ms? El mircoles pasado continuamos viendo las herramientas de correccin y ajuste de una imagen. En la clase de hoy terminaremos de ver estas utilidades. Veremos una por una las herramientas que incluye el panel de Imagen/Ajustes en Photoshop ya que las ms importantes las vimos con detenimiento en clases anteriores. As podremos seguir adelante con otro tema el mircoles que viene. Comencemos! Las opciones de Ajuste de una imagen Haciendo clic en el men Imagen/Ajustes vimos que se despliega un panel de opciones, algunas de ellas las vimos en clases anteriores, como los niveles, la correccin selectiva y las curvas. Terminemos entonces de ver las dems opciones una por una. Tengamos en cuenta que hay opciones donde no hay mucho que explicar, slo dar algn consejo, tal vez.

Niveles (lo vimos en clases anteriores).

Niveles automticos Ajusta los niveles automticamente (no es recomendable porque no es nada preciso). Contraste automtico (igual que el anterior pero con el contraste). Color automtico (idem anteriores). Curvas (lo vimos en clases anteriores). Equilibrio del color Esta herramienta es similar a la correccin selectiva, pero menos especfica. Sin embargo es ms rpida, porque realiza cambios a nivel general y no tanto por colores determinados.

Brillo/Contraste (en fotos apagadas se puede subir un poquito el contraste y acomodar el brillo para que queden mejor). Tono/saturacin

sta es una herramienta muy til. Podemos ajustar el tono general de la imagen, que pasar por varios colores manteniendo la diferencia entre ellos, o cambiar el nivel de saturacin (menos sat. significa colores ms apagados y viceversa) y ajustar la luminosidad. Tambin podemos tildar la casilla colorear para dar un tono uniforme a la imagen (muy usado para generar fotos en sepia).

Desaturar Elimina la informacin de color convirtiendo la imagen a escala de grises. Igualar color Podemos ajustar el valor tonal para semejarlo a otro. Reemplazar color Nos permite elegir un color determinado y cambiarlo completamente, incluyendo su luminosidad y saturacin

Correccin Selectiva (este ya lo vimos en la clase pasada).

Mezclador de canales Fusiona los canales RGB para lograr efectos de color. Mapa de degradado Genera un degrad de un color determinado. Filtro de fotografa Muy til para retocar fotos escaneadas. Si la foto original est azulada o amarillenta podemos aplicar un filtro y corregirla.

Sombra/iluminacin

Podemos corregir los niveles de sobra e iluminacin en cada sector de la imagen.

Invertir Invierte los colores de la imagen.

Ecualizar Mejor vean uds. mismos este efecto, es medio raro, jejeje ^_^. Umbral Pasa la imagen a dos colores (duotono) blanco y negro. Posterizar Este efecto es un clsico, muy usado en los 90s con colores flo recuerdan? Variaciones Nos permite elegir de un abanico de la paleta de colores cmo quedar la imagen si la inclinamos hacia uno u otro color. Eso es todo por hoy, ya las prximas clases trabajaremos con la barra de herramientas. Hasta la prxima!

Taller de Adobe Photoshop: Acciones y lotes de imgenes

TALLERES, TALLER PHOTOSHOP, TUTORIAL PHOTOSHOP, CURSO PHOTOSHOP, PHOTOSHOP TONO SATURACION, PHOTOSHOP CLASE 10

Hola, mis alumnos del Taller de Adobe Photoshop! En esta clase veremos una herramienta poderosa, uno de los trucos mejor guardados por los diseadores (ok, estoy exagerando un poco ^_^). Se trata de hacer que Photoshop haga el trabajo pesado por nosotros. Las acciones nos permitirn grabar los pasos que llevamos a cabo al retocar una imagen, para poder aplicarlos a un montn de archivos de una sola vez, ahorrndonos horas de trabajo. Entrate cmo funcionan y cmo puedes aprovecharlas!

Las acciones en Photoshop

Hay trabajos que requieren realizar los mismos pasos una y otra vez. Si tenemos que convertir a CMYK toda una carpeta de imgenes RGB, o renombrar todos los archivos, o cambiarles la resolucin, el tamao, etc, etc, etc. Esto nos llevara un tiempo enooooorme, de no ser porque hay una manera de hacer que Photoshop trabaje slo. Las acciones.

En qu consisten las acciones en Photoshop?

En un instante veremos cmo llevarlas a cabo, pero antes quiero explicarles el sistema. Primero que nada creamos una accin nueva que llevar el nombre que queramos ( fotos a blanco y negro, por ejemplo). Luego comenzaremos a grabar la accin. Esto es tal cual como si presionramos el botn de grabar en un equipo de msica. Cuando queramos podemos poner stop y finalizar la grabacin. El panel de acciones tiene una botonera similar a la de un grabador de sonidos. Presionando el botn rec (grabar) todo lo que hagamos en Photoshop ser guardado, paso por paso. Luego, presionando stop (detener) finalizaremos la grabacin de nuestra accin, pudindola guardar o ejecutar con otro archivo. Atencin: Obviamente si grabamos el retoque de una imagen donde hemos corregido pxel a pxel un defecto o algo similar, esto no servir con otro archivo. La idea es que todo lo que se haga automticamente en Photoshop podamos grabarlo como accin. Veamos un ejemplo de los pasos guardados en la accin fotos a blanco y negro: Paso 1 Ir al men Imagen->Ajustes->Desaturar. Paso 2 Cambiar la resolucin de imagen a 72 dpi.

Paso 3 Guardar la imagen en la carpeta C:/Mis documentos/fotos blanco y negro. Guardar el archivo con formato .gif. Paso 4 Cerrar el archivo. Como ven, esto es muy til, con la accin grabada, ahora podemos abrir cualquier archivo y poner play (reproducir) en nuestra accin para hacer todos esos pasos automticamente.

Modificando mil archivos de una sola vez

Ahora, la buena noticia, es que podemos aplicar una accin cualquiera a todos los archivos de una carpeta. Esto es ms que muy usado en el mundo del diseo grfico y web, porque a veces tenemos una carpeta llena de fotos que queremos publicar en un sitio, una revista o un video clip y necesitamos que tengan cierto formato, nombre, resolucin, color, etc, etc, etc.

Ahora s Cmo hago todo esto?

Para grabar y ejecutar acciones: Acciones es un panel flotante, si no lo tienes visible ve a Ventana->Acciones (o pulsa F9).

All podrs hacer clic en la flechita de la derecha y seleccionar Accin Nueva o hacer clic en el anteltimo cono de abajo del panel. All le daremos nombre a la accin (slo para poder ubicarla en otro momento) y podemos asignarle un atajo de teclado, como por ejemplo Maysc + F2. Cliqueando en el botn grabar comenzaremos a registrar todo lo que hagamos. Para detener la grabacin presionamos stop.

Luego, con cada archivo podemos ejecutar estas acciones grabadas. Para modificar Lotes de imgenes:

Una vez que tengamos grabada una o ms acciones, vamos al men Archivo->Automatizar->Lote (Automate->Batch en la versin en ingls). Aqu elegiremos qu carpeta modificar (es decir, todos los archivos que contenga), la carpeta de destino (puede ser una nueva o la misma), etc, etc, etc.

Como pueden ver las Acciones son una poderosa herramienta, uno de los importantes trucos de Adobe Photoshop.