color digital en photoshop

16
calidad. INDICE Día 1: descárgate el dibujo para empezar Día 2: extraemos las lineas Día 3: hacemos la plantilla de colores planos Día 4: pintando areas simples Día 5: pintando areas complejas: el pincel histórico Día 1: descárgate el dibujo para empezar A aquellos que ya hayais coloreado el personaje les sugiero que lo vuelvan a hacerlo siguiendo este tutorial, después compararemos las dos versiones y vereis cuanto habeis mejorado. Los que aún no lo hallais intentado y esteis interesados en seguir el tutorial pueden descargar la imagen aquí:

Upload: vihurt

Post on 16-Jan-2016

239 views

Category:

Documents


0 download

DESCRIPTION

Diseño

TRANSCRIPT

Page 1: Color Digital en Photoshop

calidad.

INDICE

Día 1: descárgate el dibujo para empezar Día 2: extraemos las lineas Día 3: hacemos la plantilla de colores planos Día 4: pintando areas simples Día 5: pintando areas complejas: el pincel histórico

Día 1: descárgate el dibujo para empezar

A aquellos que ya hayais coloreado el personaje les sugiero que lo vuelvan a hacerlo siguiendo este tutorial, después compararemos las dos versiones y vereis cuanto habeis mejorado. Los que aún no lo hallais intentado y esteis interesados en seguir el tutorial pueden descargar la imagen aquí:

Page 2: Color Digital en Photoshop

Y sin más, estamos listos para empezar Nos vemos en un par de días, permaneced atentos y no olvideis hacer tweet de este post si os gustó la iniciativa.

Día 2: extraemos las lineas

Page 3: Color Digital en Photoshop

El mejor método para colorear un dibujo es extrayendo las lineas, porque nos da la posibilidad de colorearlas fácilmente como luego veremos. Descargarte el dibujo, abrelo en Photoshop y sigue estos pasos:

1. Abrimos nuestra imagen en Photoshop.2. Vamos al panel Canales y hacemos CTRL+click en el canal azul.3. Seleccionamos la Varita Mágica (W) y hacemos click derecho, elegimos Selección

inversa.4. Vamos a Editar> Copiar (CTRL+C) y luego Editar> pegar (CTRL+V) y ya

tenemos las lineas separadas del fondo.5. Nos ponemos en la capa "Background" y vamos a Imagen> Ajustes>

Hue/saturación (CTRL+U) y ponemos la iluminación al +100 para quedarnos con una capa totálmente blanca.

6. Renombramos la capa nueva a "Lineart" y volvemos a hacer CTRL+U, esta vez ponemos la iluminanción a -100 para quedarnos con unas lineas complétamente negras.

Page 5: Color Digital en Photoshop

Cómo ves el dibujo está ultralimpio porque lo dibujé digitalmente, en este tutorial nos centraremos sólo en el color, si estás interesado en obtener lineas limpias puedes visitar el post para aprender cómo entintar un dibujo con Photoshop.

Algunos consejos para conseguir un dibujo limpio.

Lo mejor es entintar digitalmente, ya sea con una tabla digitalizadora o con las herramientas de dibujo vectorial.

Trabaja siempre en alta resolución, cuanta más mejor, asegúrate al menos unos 2.500 x 2.500 píxeles.

Si decides trabajar a partir de un dibujo en papel, escanéalo en escala de grises o conviértelo a escala de grises en Photoshop antes de extraer las líneas.

Echa un ojo a este post acerca de cómo entintar un dibujo con Photoshop.

Día 3: hacemos la plantilla de colores planos

Entre la capa "Background" y la capa "Lineart" creamos una nueva capa que llamaremos "Flat colors". Esta capa con colores planos tiene 2 misiones:

1. Elegir nuestro esquema de color.2. Tener aisladas las diferentes areas para hacer selecciones rápidas con la varita

mágica (W).

Para pintar nuestra plantilla usamos la Varita Mágica (W) sobre la capa "Lineart" (esta es una ventaja de tener unas lineas bien limpias), después expandimos la selección para que no nos deje bordes dentados (Select > Modify > Expand: 3px), elegimos un color y hacemos click con el bote de pintura (G) en la capa "Flat colors":

Page 6: Color Digital en Photoshop

Algunos consejos para hacer una buena plantilla de colores planos:

Aunque siempre estás a tiempo de hacer cambios, visualiza el diseño acabado e intenta definir tu esquema de color.

Usa colores medios, ni muy saturados/desaturados, ni muy claros/oscuros. Renombra la capa cómo "Flat colors".

Page 7: Color Digital en Photoshop

Bloquea los píxeles de la imagen en la capa "Flat colors", así no pintarás en ella por accidente.

Resumen del día

Hoy hemos hecho una plantilla de colores planos para hacer selecciones rápidas y acelerar el flujo de trabajo, además de decidir nuestro esquema de color.

Esta es mi plantilla de colores planos.

Nos vemos pronto!!

Page 8: Color Digital en Photoshop

Día 4: pintando areas simples

Por fin tenemos nuestro diseño listo para colorear

Empezaremos por algo tan fácil como los ojos para explicar la técnica, conforme avancemos el tutorial se hará más complejo. Como hay mucha gente que no tienen una tabla Wacom, hoy usaré el ratón y las herramientas de diseño vectorial y degradados, cómo vereis el resultado es el mismo sólo que invertiremos más tiempo, el resto de días usaré mi Wacom para ir más rápido, si necesitais ayuda podeis echar un vistazo a este post sobre cómo dibujar con las herramientas de dibujo vectorial en Photoshop.

Antes de nada dejame explicarte un poco de teoría que te será muy útil a la hora de aplicar una iluminación correcta:

Como veis en la imagen he puesto la fuente de luz arriba y ligéramente a la izquierda, esto quiere decir que las zonas iluminadas estarán arriba y las sombras abajo. Por encima de las sombras añadiremos un poco de luz reflejada para dar volumen. No buscamos un acabado realista pero si que sea coherente.

Page 9: Color Digital en Photoshop

Paso 1: sombras.

Creamos un nuevo grupo de capas que llamaremos "Eyes" y dentro creamos una nueva capa donde vamos a pintar las sombras, la llamamos "Shadows" y la ponemos en modo de fusión Multiply.

Hacemos una selección de los ojos usando la Varita Mágica (W) sobre nuestra capa de colores planos (Flat colors), volvemos a la capa "Shadows" y pintamos un contorno con el mismo color azul de fondo (#92b6e6), se ve más oscuro porque la capa está en modo Multiply. Como dijimos la luz viene de arriba, así que las sombras serán más gruesas por abajo.

TIP: las lineas punteadas de las selecciones a veces resultan un poco molestas, podemos esconderlas con CTRL+H.

Suavizamos el contorno que hemos creado, para eso usamos un pincel grueso con bordes suavizados. La clave es pintar desde lejos, para que el contorno se difumine pero no desaparezca. Cuando termines vuelve a poner la capa en modo Normal.

Los ojos son fáciles de hacer porque su forma es muy simple, por desgracia no todo es así de sencillo, para formas más compleja tendremos que aprender a usar el Pincel historia (eso lo veremos el próximo día).

Page 10: Color Digital en Photoshop

Paso 2: luz.

Creamos una nueva capa por debajo de la capa "Shadows", que llamaremos "Lightness", donde haremos un degradado de blanco a transparente, desde arriba a la izquierda hasta abajo a la derecha. La clave es hacerlo suave, sin cubrir de blanco todo el ojo.

Paso 3: luz reflejada.

Ahora creamos luz reflejada para darle volumen al ojo, para esto creamos una nueva capa que llamaremos "Reflected light". Hacemos un contorno blanco que no cubra todo el area de la sombra, después difuminamos el contorno interior, pero esta vez usamos el borrador (E) con cuidado de no borrarlo del todo, sólo queremos que se haga un poco transparente.

Page 11: Color Digital en Photoshop

Paso 4: pintamos pupilas.

Para pintar las pupilas del personaje creamos un nuevo grupo de capas llamado "Pupils"por encima de la capa "Lineart".

Pintaremos las pupilas en 3 capas como vemos en la imagen:

Page 12: Color Digital en Photoshop

Imagen 1: capa que llamaremos "Glow", creamos un circulo ligeramente ovalado y le aplicamos un gradiente de blanco a transparente, procuramos que el ovalo no quede completamente blanco si no con un poco de transparencia.

Imagen 2: creamos una nueva capa que llamaremos "Glow 2", pintamos un gradiente circular con azul saturado (#10a4fa) y ponemos la capa en modo Linear Dodge.

Imagen 3: creamos una nueva capa que llamaremos "Pupil", pintamos el mismo color azul algo como lo que ves en la imagen.

Imagen FINAL: esto es lo que obtenemos al activar las 3 capas.

Paso 6: coloreamos las lineas.

Por último creamos una capa por encima de la capa "Lineart" que llamaremos "Color hold", esta capa la usaremos para colorear las lineas.

Hacemos CTRL+Click en el icono de la capa "Lineart" para hacer una selección de las lineas, y nos vamos a la capa "Color hold". Seleccionamos un color azul un poco más oscuro (#223171) que el que usamos para el globo ocular, así conseguimos que la linea se funda con el diseño pero todavía sea distinguible.

Resumen del día

Hoy hemos pintado una forma tan simple como los ojos de nuestro personaje, el próximo día pintaremos los dientes, al ser más complejo tendremos que aprender a usar el pincel historia.

Page 13: Color Digital en Photoshop

Hasta pronto!!

Día 4: pintando areas complejas: el pincel histórico

Muy buenas amiguetes, mañana vuelo hacia Berlín y me tomaré algunos días de descanso pero antes de salir quería postear el último video del Tutorial de coloreado con Photoshop más detallado del mundo.

Por ahora no hay tutorial, sólo el video donde puedes ver como coloreo zonas más complejas gracias a nuestro buen amigo el Pincel Histórico, puse mucho cuidado para

Page 14: Color Digital en Photoshop

hacerlo lo más sencillo posible, con suerte entedereis como funciona por vosotros mismos, de todas maneras postearé el tutorial en los próximos días, hasta entonces disfrutad del video.