Introducción
En nuestra andadura como "marcianos", más tarde o más pronto, nos vemos en la necesidad de editar una imagen. A veces tan solo queremos cambiarle el brillo y el contraste a una captura de pantalla para usarla como snapshot y en otros casos nos surgirá la necesidad de diseñar el arte de un panel de control o un bezel para colocárselo a nuestra maca.
Hoy por hoy, una de las herramientas más extendidas y más completas para este tipo de trabajos es "Adobe Photoshop 7". Sus grandes posibilidades y versatilidad hacen que sea un programa de amplio uso profesional, si bien no deja de ser cierto que con unos mínimos conocimientos podemos obtener excelentes resultados.
LECCIÓN 1: Tamaño de la imagen
Antes de entrar de lleno con el programa en sí, vamos a explicar de un modo breve lo que se conoce como tamaño de la imagen. Veremos que en realidad se esconden varios conceptos detrás de él y que confundirlos puede llevarnos a obtener resultádos inútiles para nuestros propósitos.
Además, por si esto fuera poco, se comercializan paquetes con nuevos filtros que se pueden añadir a photoshop. Por ejemplo yo uso (y tal vez abuso) de unos filtros para la realización de rayos eléctricos.
1.1.- Tamaño de "visualización en pantalla"
Photoshop trabaja con imágenes de mapa de bits. Esto quiere decir que las imágenes que podemos emplear serán aquellas formadas por un mosaico de cuadraditos de color. Cada uno de estos cuadros de color se conoce como pixel.
Nuestro monitor, por otra parte, trabaja mostrando cuadros de color y el número de cuadros que se muestran en pantalla se conoce como "resolución de pantalla"
Es obvio entonces que, zoom aparte, cuanto mayor sea el número de pixels de nuestras imágenes, mayor se verán en pantalla. Así, por ejemplo, EN PANTALLA veremos de mayor tamaño una imagen de 200x100 pixels que una de 50x20 pixels.
Sin embargo, la resolución de pantalla es variable, es algo que windows y otros programas nos dejan elegir y que por tanto, una imagen de 320x240 pixels se verá mayor a una resolución de 640x480 que a una resolución de 1024x768
(IMG:http://img254.echo.cx/img254/8608/grande6hr.gif) (IMG:http://img254.echo.cx/img254/3807/peque6ui.gif)
1.2.- Tamaño de impresión
Hay otro modo de definir el tamaño de una imagen, se trata del tamaño de impresión. Podemos definir el tamaño de una imagen asignádole unidades métricas como pueden ser centímetros o milímetros. ¡Pero ojo!, cuando definimos el tamaño de una imagen de este modo, hace falta un tercer parámetro, la resolución de impresión que normalmente se mide en DPI (dots per inche, puntos por pulgada).
Este tercer parámetro nos indica A LA HORA DE LA IMPRESIÓN cuántos pixels habrá por pulgada impresa. Así, por ejemplo, si imprimiésemos dos imágenes en una hoja A4 (297x210mm) una a 75ppp y otra a 200ppp veríamos algo así.
(IMG:http://img68.echo.cx/img68/6707/mal0pq.jpg) (IMG:http://img68.echo.cx/img68/4279/bien3ek.jpg)
1.3.- Relación entre el tamaño de impresión y el tamaño en pixels de una imagen
De lo explicado, vemos que basta con multiplicar el tamaño de una imagen (en pulgadas) por su DPI para conocer su tamaño en pixels.
Por ejemplo, una imagen de 10x15cm a 200dpi tendría de resolución:
...........................PONER IMÁGENES DE UN CÁLCULO DE EJEMPLO
Y si lo que queremos es averiguar el DPI que tendrá una imagen cuya resolución conocemos a un determinado tamaño, bastará con dividir.
Una imagen que tenga de resolución 640x480 pixels y que imprimamos a 10x15cm tendría de DPI:
...........................PONER IMÁGENES DE UN CÁLCULO DE EJEMPLO
1.4.- ¿Qué tamaños son los recomendables?
Como vimos, el tamaño en pantalla de una imagen depende de la resolución a la que esté el monitor. En este sentido, no podemos generalizar ya que dependiendo de para qué queramos la imagen nos interesará un tamaño u otro. No es lo mismo un icono que puede medir 32x32pixels que un fondo de pantalla de 1024x768pixels.
En cuanto a la impresión, ocurre otro tanto de lo mismo, no es lo mismo una foto de carnet que un poster. Pero hay que tener una cosa clara, para obtener impresiones de calidad, deben tener un DPI de al menos 200 (entre 200 y 300 suele ser lo normal).
LECCIÓN 2: Entrando por primera vez al programa. Funcionamiento general
Nada más entrar al programa, esto es lo que veremos en pantalla:
(IMG:http://img172.echo.cx/img172/2946/photoshop9mt.gif)
De un modo general podemos ver:
- Barra superior de menús - Típico de casi todos los programas.
- Herramientas de dibujo - Están situadas en una ventana a la izquierda aunque podemos situarla donde nos venga mejor
- Navegador, paleta de color e historial - Con estas ventanas podemos ver un esquema que nos indica en qué parte de la imagen estamos trabajando, elegir un color para dibujar y ver un historial de los últimos comandos que hemos aplicado por si quisiéramos deshacerlos.
- Capas - En esta ventana podemos ver un listado de las capas que tenemos en nuestra imagen y como se relacionan entre ellas. Imaginemos que dibujásemos en plásticos transparentes, tal y como se hace con los dibujos animados. Así, en animación, tenemos un dibujo que sirve de fondo y los personajes dibujados en un plástico transparente, de modo que al superponer dichos plásticos sobre el fondo, componemos el dibujo final. En photoshop, cada uno de esos plásticos transparentes es lo que se conoce como capa. Trabajar en capas es MUY importante para obtener buenos resultados y además para poder modificar fácilmente nuestros dibujos.
Y nos falta la ventana más importante, la ventana de dibujo propiamente dicha... pero para ello hay que crear una imagen previamente. Eso lo vemos en la siguiente mini-lección.
LECCIÓN 3: Creando nuestra primera imagen
Para empezar con photoshop, vamos a hacer algo muy sencillo pero que sea visualmente atractivo. Y para no complicarnos la vida, lo mejor es hacer un fondo de pantalla. Intentaré mostrar algunas de las funciones más interesantes del programa y próximamente ya nos detendremos más detenidamente en ellas. Ahora solo se trata de hacer una demostración rápida.
3.1.- Crear un nuevo archivo
Abrimos el programa y en la barra superior, vamos al menú archivo, elegimos la opción "Nuevo..." y nos debería salir algo parecido a esto:
(IMG:http://img254.echo.cx/img254/4185/sinttulo12cg.gif)
(IMG:http://img254.echo.cx/img254/9664/sinttulo27oo.gif)
Rellenamos las opciones tal y como aparece en la imagen. Vamos a crear un fondo de pantalla que medirá de ancho 640pixels y 480pixels de alto. No tendría sentido definir una imagen que está destinada al monitor usando cm u otra unidad métrica. Como NO vamos a imprimir la imagen, la resolución en pixels por pulgada (también llamada ppp o dpi) nos da igual y podemos poner cualquier número.
Le damos a aceptar y ya tenemos ante nosotros el entorno de trabajo de adobe photoshop al completo, con nuestra ventana de dibujo en el centro de la pantalla.
(IMG:http://img254.echo.cx/img254/8307/sinttulo19gk.jpg)
3.2.- Las herramientas de dibujo
Están en la ventana de la izquierda. Algunos de los iconos tienen una pequeña flecha en su zona inferior derecha, eso nos indica que manteniendo pulsado el botón izquierdo del ratón encima de ellos se abre una ventana con otras "sub-herramientas"
Vamos con una breve descripción de las herramientas, posteriormente veremos en más detalle las más utilizadas.
- (IMG:http://img68.echo.cx/img68/5237/h18tx.jpg) Marco - Sirven para seleccionar zonas del dibujo, rectangulares, elípticas y filas o columnas únicas. Esta herramienta se usa por ejemplo para seleccionar la zona que nos interesa al hacer capturas de pantallas, como yo al hacer
este tutorial ;) - (IMG:http://img251.echo.cx/img251/3376/h23iw.jpg) Mover - Pues sirve para mover las distintas capas o selecciones.
- (IMG:http://img276.echo.cx/img276/5868/h37sz.jpg) Lazo / Lazo magnético / Lazo poligonal - Sirve para seleccionar partes de la imagen, usando el ratón para desplazarnos y así poder ajustarnos a formas no geométricas.
En modo LAZO, la selección se realiza con un trazo irregular, a modo de mano alzada.
Para realizar dicho trazo, debemos pulsar el botón izquierdo del ratón y desplazarnos.
Al soltar el botón izquierdo, se cerrará el lazo (selección)
Una vez tengamos la selección realizada, si pulsamos la tecla Mayúscula, aparecerá un símbolo más, con lo que podremos añadir o realizar más selecciones.
Pulsando la tecla Alt.Izquierda, aparecerá un símbolo menos, con lo que sustraeremos una parte de selección.
La herramienta LAZO POLIGONAL, es básicamente lo mismo, sólo que le trazo es uniforme y geométrico, basándose en trazos rectos.
Se utilizan los mismos comandos y la misma forma de uso que el LAZO.
La herramienta LAZO GEOMETRICO, es idéntica al LAZO, sólo que realiza la selección basandose en el contraste de la imagen.
La selección se ajusta automáticamente a la imagen.
Es la manera menos precisa de trabajar. - (IMG:http://img189.echo.cx/img189/7629/varitamgica6zi.th.jpg) Varita mágica - Sirve para seleccionar partes de una imáen de manera automática.
Se ajustan los valores de tolerancia, para ser más o menos preciso...de 0 a 255.
Yo desaconsejo el uso de esta herramienta por ser poco precisa.
Sólo es útil cuando la imagen tiene buena calidad y muy buena resolución...aparte de que la zona a seleccionar esté bien contrastada. - (IMG:http://img189.echo.cx/img189/8476/recorte7hx.th.jpg) Recorte (CROP) - Sirve para recortar y modificar atributos de alguna parte o totalidad de la imagen.
Así se puede seleccionar un tamaño fijo de ancho y alto, especificado en cm/mm/px (pixeles), y especificar una resolución determinada...o bien en PPP (Puntos por pulgada) tambien conocidos como DPI (Dot per Inch), o bien en en pixeles por centimetro. - (IMG:http://img189.echo.cx/img189/1283/sector5nh.th.jpg) Sector - Herramienta destinada para especificamente para el diseño de páginas web.
Selecciona tantas partes de la imagen como queramos, para así poderlas exportar a programas como DREAMWEAVER o similares, para poder crear página web.
Con la HERRAMIENTA SECTOR, se pulsa con el botón izquiero del ratón y se arrastra.
Con la HERRAMIENTA SELECCIONAR SECTOR...se selecciona.
Se pueden crear y borrar tantos sectores como uno quiera.
Una vez creados, se GUARDA PARA WEB. - (IMG:http://img152.echo.cx/img152/2398/h74yy.jpg) Pincel Corrector - Con esta herramienta podemos seleccionar una zona de la imagen como origen (presionando alt en el teclado y click izquierdo con el ratón) y luego corregir otra zona de la imagen utilizando la anterior. Por ejemplo la usaríamos para eliminar manchas en la piel, como origen señalaríamos una zona de piel limpia, corrigiendo posteriormente las zonas manchadas.
Con la HERRAMIENTA PARCHE se opera de un modo ligeramente diferente. Primero marcamos la zona completa a corregir y luego moviendo la selección a las zonas "limpias", el programa mezclará esas segundas zonas sobre la primera. - (IMG:http://img152.echo.cx/img152/9119/h84bj.jpg) Pincel - Bueno, pues creo que aquí no hay mucho que explicar. Básicamente se comporta como en la realidad (podemos elegir su ancho y transparencia) y además algunas opciones extra, como tipo de mezcla con la capa en la que se aplica (esto lo veremos más adelante).
Con la HERRAMIENTA LAPIZ operaremos de un modo parecido, pero no podremos variar su difuminado ni su forma, siendo un trazo redondo. - (IMG:http://img199.echo.cx/img199/205/sinttulo21mx.jpg) Tampón de clonar - Esta herramienta funciona de un modo similar al pincel corrector solo que ahora la zona que usamos como origen sustituye totalmente a la que "corrijamos".
La segunda sub-herramienta es el TAMPÓN DE CLONAR. Con él, en lugar de definir una zona de la imagen como "origen de datos", utilizamos un motivo previamente definido (ya veremos lo que son los motivos).
[........................Aquí falta terminar de describir las herramientas...............................]
3.3.- Ajustes básicos de una imagen
Antes de avanzar un poco más y empezar a ver los distintos efectos especiales, modificaciones, etc... que le podemos aplicar a una imagen, conviene que expliquemos cómo realizar los ajustes básicos a una imágen. Ejemplos de este tipo de ajustes son el cambio de tamaño, ajuste de brillo y contraste, variación tonal, etc...
Para acceder a estos ajustes, debemos abrir el menú "Imagen" en la parte superior de la ventana.
(IMG:http://img65.imageshack.us/img65/8752/imagen0uj.jpg)
Los submenús más interesantes que nos encontramos son:
- Modo - Aquí podemos elegir cómo se define el color de la imagen. Para trabajos en pantalla lo normal es usar RGB, sin embargo, para ver en pantalla un resultado más próximo al que tendremos a la hora de imprimir, usaremos CMKY. Tenemos también la opción de trabajar en blanco y negro o con colores indexados (número limitado de colores, 2, 4, 8... los que deseemos)
- Ajustes - Son una serie de ajustes básicos que nos permitiran cambiar el aspecto general de nuestras imágenes; brillo y contraste, por ejemplo.
- Tamaño de la imagen - Nos permite redimensionar nuestra imagen al tamaño que deseemos. Pero ojo, de donde no hay, no se puede sacar. Así que si tenemos una imagen de 96x96 pixels y la queremos ampliar para forrar el lateral de nuestra maca, photoshop ampliará con la consiguiente pérdida de calidad y nos dejará un gran borrón.
- Rotar lienzo - Nos permite girar la imagen. Por ejemplo si hemos utilizado la cámara fotográfica en vertical y queremos ver la foto correctamente orientada.
- Recortar - Si de una imagen solo queremos conservar un trozo, primero seleccionaremos lo que deseamos con la herramienta de selección (en barra de herramientas de la izquierda) y luego elegiremos esta opción.
Vamos a explicar un poco más ampliamente los ajustes, y como una imagen vale más que mil palabras, le aplicaré los ajustes a una imagen base.
(IMG:http://img311.imageshack.us/img311/8671/base0wl.jpg)
Imagen base
- (IMG:http://img311.imageshack.us/img311/4603/niveles0ro.jpg)
Niveles - Creo que el modo más rápido de definir a esta función es decir que es una especie de ecualizador gráfico. Nos permite definir un nuevo color más oscuro y un nuevo color más claro de modo que nuestra imagen se ajuste al nuevo rango. Lo podemos aplicar al color completo o a sus diferentes componentes (Rojo, Verde o Azul), pudiendo lograr que los brillos se vuelvan más azules, por ejemplo. - Curvas - Es una especie de versión avanzada del ajuste anterior y ahora nos da la opción de definir la curva que define cómo se aplica el ajuste.
- (IMG:http://img183.imageshack.us/img183/2632/equilibrio6bp.jpg)
Equilibrio de color - Nos permite hacer que los colores de nuestra imagen tiendan hacia el color que deseemos. Además nos deja elegir tres colores a los que tenderán las sombras, los tonos medios y las iluminaciones. A la imagen de ejemplo le aumenté el rojo en las sombras y el azul en los brillos. - (IMG:http://img183.imageshack.us/img183/6549/contraste4wr.jpg)
Brillo y Contraste - Este es probablemente el ajuste que conoce todo el mundo. El brillo define la cantidad de "luz" que tiene la imagen y el contraste la "fuerza" que tiene la diferencia entre las sombras y las zonas brillantes de la imagen. Al ejemplo le he bajado el contraste. - (IMG:http://img183.imageshack.us/img183/549/saturacion0ih.jpg)
Tono/Saturación - En realidad aquí tenemos tres ajustes. El tono nos permite hacer que los colores "roten" entre sí (como si en un arcoiris los fueramos haciendo avanzar a cada uno a la posición del siguiente). La saturación define la cantidad de color que tiene la imagen y la luminosidad es como el brillo. En el ejemplo le he aumentado la saturación y le he rotado los colores hacia el rojo para darle un tono más cálido a la imagen. - Desaturar - Simplemente elimina todo el color dejándonos una imagen en blanco y negro, es como si entraramos en el ajuste anterior y pusiéramos al mínimo la saturación.
- Reemplazar color - No tengo ni idea de para qué sirve ????????????????????????
- Corrección selectiva - Se parece al ajuste "Equilibrio de color", pero aquí, en lugar de ajustar la tendencia del color en las sombras, medios tonos y brillos, lo haremos por colores. Así, podemos variar el tono del rojo, verde, azul, amarillo...
- (IMG:http://img306.imageshack.us/img306/2375/mezcla9pm.jpg)
Mezclador de canales - Nuestra imagen está formada por tres canales o tres imágenes, cada una de un solo color. Una sería roja, otra verde y otra azul. La suma de las tres nos da la imagen que vemos. Este ajuste nos permite mezclar a nuestro gusto los tres canales de color. Así, podemos decir que el nuevo canal azul se forme como la suma del 50% del rojo y el 50% del verde. ¿El resultado? el de la imagen... jugando podemos conseguir consas interesantes - (IMG:http://img306.imageshack.us/img306/2694/degradado5jf.jpg)
Mapa de degradado - En photoshop podemos definir degradados de color. Este ajuste aplica uno de esos degradados a la imagen, de modo que las zonas más oscuras correspondan al primer color del degradado y las más claras al último. - Invertir - Simplemente invierte los colores de una imagen.
- (IMG:http://img45.imageshack.us/img45/3954/ecuaalizar8rj.jpg)
Ecualizar - No estoy muy seguro de lo que hace ??????????????? - (IMG:http://img45.imageshack.us/img45/294/umbral1ou.jpg)
Umbral - Nos convierte la imagen a dos colores blanco y negro, simplemente definimos el nivel de brillo a partir del que queremos que un color se convierta en blanco. - (IMG:http://img45.imageshack.us/img45/9119/posterizar8lm.jpg)
Posterizar - Permite reducir el número de colores que tiene nuestra imagen. - Variaciones - Nos permite ir variando la tonalidad de nuestra imagen a la vez que vemos el efecto que tienen diferentes variaciones sobre la misma.
3.4.- Los filtros
Los filtros, en Photoshop, heredan su nombre de la fotografía tradicional. Un filtro suele ser un cristal que se pone delante del objetivo y que hace que las fotos sufran algún "efecto especial". Por ejemplo, un filtro común suele ser uno con un tintado en degradado de modo que si sacamos una foto a una playa, veamos el cielo más violaceo y la arena más amarilla. Otro filtro bastante común es el que produce destellos "tipo diamante" en los lugares más brillantes de una imagen (este filtro era muy utilizado para fotografiar joyas).
Con la llegada de la informática y de nuestro querido (u odiado ;) ) photoshop, tenemos una reproducción digital de esos filtros tradicionales y un nuevo abanico de efectos antes imposibles de obtener.
Para aplicar un filtro, simplemente debemos ir al menú correspondiente de la parte superior de la ventana y elegir el deseado. Veremos como tenemos todos los filtros agrupados según el tipo de efecto que producen.
(IMG:http://img302.imageshack.us/img302/8172/filtros3zx.gif)
No tiene demasiado sentido explicar pormenorizadamente todos y cada uno de los filtros que vienen con photoshop. Son muy numerosos y cada uno tiene un menú de aplicación totalmente diferente. Lo mejor es que experimentemos con ellos para ver los distintos efectos de sus parámetros y de qué modo pueden servirnos para nuestros propósitos artísticos.
Veamos aquí algunos ejemplos de la aplicación de filtros:
(IMG:http://img25.imageshack.us/img25/4451/original5rq.jpg)
Imagen original
(IMG:http://img25.imageshack.us/img25/2227/fresco2jm.jpg)
Fitro fresco
(IMG:http://img25.imageshack.us/img25/5998/granulado7yt.jpg)
Filtro película granulada
(IMG:http://img25.imageshack.us/img25/465/ondas2ib.jpg)
Filtro ondas marinas
(IMG:http://img25.imageshack.us/img25/2971/gauss1if.jpg)
Desenfoque gaussiano
Naturalmente, podemos aplicar múltiples filtros a una misma imagen y aplicar A y luego B no es lo mismo que B y luego A... así que aquí se nos abren infinitas posibilidades. Pero como en todo, un poco de cabeza viene bien y conviene tener claro de antemano qué es lo que pretendemos para luego elegir los filtros adecuados y no al revés.
EJEMPLOS PRÁCTICOS
Para terminar con el tutorial (o quizás empezar su parte más interesante), vamos a ir explicando cómo combinar las distintas herramientas para obtener los deseados resultados útiles.
EJEMPLO 1: Composición básica (¡pero muy bonita y muy bien hecha!) de imágenes... por ChispaMaster
En esta guía, ChispaMaster explica por un lado cómo recortar un personaje desde una imagen para luego insertarlo en un nuevo fondo y por otro la creación de un excelente fondo que resultará en una excelente composición muy válida como wallpaper de windows o fondo para un layout de nuestro front-end favorito.
http://www.forumcommunity.net/?t=1809065
EJEMPLO 2: Composición de imágenes a base de degradados... por ChispaMaster
Nuevamente ChispaMaster explica como combinar imágenes con resultados espectaculares. En esta ocasión se emplean degradados en la transparencia de las capas para conseguir una transición suave.
http://www.forumcommunity.net/?t=1817843