Técnica/Efecto [taller] coloring 101 [v.2]

Yoru

under and over
Registrado
28 Mar 2008
Mensajes
2,188
Offline
Hola a todos :3 y bienvenidos a mi taller:

Sé que cuando me ofrecí a realizar este taller dije en primera instancia que sería coloring + icons pero decidí enfocarme solamente en la colorización por dos motivos:
  • Primero: los tutoriales para hacer icons e inclusive los PSDs de muchos de ellos son fáciles de conseguir por todo el internet; cualquiera puede mostrarles una serie de valores a seguir y con eso decir que está aprendiendo, cuando en realidad lo único que hacen es repetir lo de otros. Mi objetivo es el de enseñarles a manejar las herramientas necesarias para esto, de manera profunda y bien explicada; así los resultados les serán úiles no sólo para sus icons, sino para cualquier edición en general.
  • Segundo: Como dije antes, este taller se basará en el aprendizaje del manejo de las herramientas de modificación de color que posee el programa Photoshop*, las cuales muchos sabemos utilizar; pero poseen un potencial más grande del que imaginamos y que puede ser explotado mediante su conocimiento. Para citar un ejemplo: ¿alguien sabe qué rayos son los niveles? bueno, aprenderemos sobre esa herramienta y todas las demás aquí

*Si supiera manejar en forma el GIMP probablemente hubiera hablado sobre éste también, pero elegí concentrarme en el Photoshop por ser el más popular.

mecánica del taller
Iré posteando de a poco pequeños tutoriales desglosando y explicando las herramientas una por una; ¿que a cuáles me refiero? well:

barra de herramientas > capa > nueva capa de ajuste
Como podrán ver, son MUCHAS; así que les mostraré las más importantes primero y luego iremos al resto. Y also, mi Photoshop está en castellano pero adjuntaré un traductor al final del thread.​

Comenzamos:

brillo/contraste

apariencia inicial de la ventana de trabajo ▲

En pocas palabras, en Photoshop el brillo se refiere a qué tanta luz tiene una imagen y el contraste a qué tantas sombras hay en la imagen. En este caso, si modificamos los valores de brillo estamos aclarando u oscureciendo (de acuerdo a los valores) TODOS los pixeles de la imagen; esto quiere decir, iluminar la imagen de forma absoluta.

EJEMPLO: Originalmente tenemos un stock cualquiera, en este caso yo elegí uno un poco oscuro; así puedo aplicarle los cambios con propiedad y estética (?)



Luego, desde la ventana de trabajo hice a la imagen 30 pixeles más clara (brillo +30) :



Por supuesto, si agregamos el signo menos ( - ) puedo volver la imagen 30 pixeles más oscura (brillo -30) :


¿...comprenden?​

Ahora, sobre el contraste: esta herramienta también modifica la iluminación de la imagen en una manera global, pero lo hace en forma distinta; ¿porqué? porque mientras que el brillo trabaja solamente con las luces de la imagen - ya sea acentuándolas o "devorándolas" - el contraste utiliza tanto los brillos como las sombras; unificándolas o "devorándolas" según sea el caso.

EJEMPLO: Tenemos nuestro segundo stock, esta imagen tiene mayor cantidad de pixeles oscuros, así los cambios realizados se notan más:



Aumentando el contraste en 50 pixeles (contraste +50) la imagen queda oscurecida de esta manera :



Disminuyendo este contraste en 50 pixeles (contraste -50), sin embargo, unifica las sombras en 50 puntos, disminuyendo la variación de tonos also:


Un pequeño tip al aplicar esta herramienta es la relación inversamente proporcional entre el brillo y el contraste, mientras más brillo, menos contraste. ¡Pruébenlo!
Aparte de eso queda mencionar que esta es la herramienta de gama tonal más sencilla e intuitiva de utilizar; es fácil aprender a entenderla.

niveles

ventana de trabajo ▲

El ajuste de niveles sirve para designar en forma manual los pixeles claros u oscuros de una imagen. Dicho de otra manera: fija los puntos de iluminación en la imagen. Cualquiera que alguna vez haya tomado alguna clase de dibujo técnico sabe que todos los objetos poseen una "luz" que proviene desde algún punto en el espacio; con los niveles es posible "cambiar" esa luz.

EJEMPLO: Una vez más, abrimos nuestro stock. La ventana de trabajo automáticamente se carga con el histograma* de la imagen:


*Histograma: Representación gráfica de los tonos en una imagen.

En la parte superior aparecen los niveles de entrada, que están relacionados con los tres deslizadores del histograma: El de la izquierda controla las sombras, el central los medios tonos y el derecho las luces.


En la parte inferior, tenemos los niveles de salida, vinculados a los dos deslizadores inferiores del histograma: Con el de la izquierda disminuimos las sombras y con el de la derecha las luces.


Entonces, si desplazamos los punteros de la parte superior podemos ver como cambia la iluminación de la imagen. En este caso, lo que hice se llama recortar los valores de entrada; mientras que los punteros en los extremos limitan el rango de pixeles correspondientes a las luces u sombras, el puntero en medio se utiliza para definir la compensación de la imagen: si una imagen sufre una descompensación de luces se ve demasiado clara, o si sufre una descompensación de sombras se ve demasiado oscura; el puntero medio establece un balance.

Mi stock estaba descompensado en luces, así que moví el puntero hacia la derecha, aumentando el rango de pixeles oscuros:


Nótese que al abrir una nueva capa de niveles ésta viene con ciertos valores de regulación predeterminados:
  • Sombras: 0
  • Mediotonos: 1,00
  • Luces: 255

Y ahora que modifiqué los mismoss éstos se volvieron:
  • Sombras: 0
  • Mediotonos: 0,79
  • Luces: 224

Cambiando estos valores se puede modificar de forma manual (y más precisa) el contraste de una imagen.

▲▲▲▲▲

Los punteros de la barra inferior, por otro lado, sirven para limitar la gama de tonos cuando no interesa que llegue al negro y al blanco absolutos. Si recortar valores de entrada da más contraste a la imagen, recortar los de salida o de destino tiene el efecto contrario.


Una vez más, los valores predeterminados de estos niveles son:
  • Sombras: 0
  • Luces: 255

Y como se ve en la print, después de haberlos alterado:
  • Sombras: 31
  • Luces: 195

¿Se fijaron en la lista desplegable sobre el histograma que dice "RGB"? Si damos clic para abrirla veremos que se puede realizar el mismo procedimiento por separado en cualquiera de los canales de la imagen.


Si escogemos el canal verde y lo incrementamos hará que la imagen se muestre más verdosa, si lo disminuimos tomará el color de su opuesto y se enrojecerá. Sirve para hacer correcciones especiales en imágenes de colores MUY desequilibrados.

~ curvas ~ ▼

ventana de trabajo ▲

Con esta herramienta podemos ajustar la gama tonal completa de la imagen; igual que hacíamos con la herramienta niveles, pero con un control mucho mayor. Podemos realizar el ajuste de las luces y las sombras para todos los canales a la vez, o para cada uno de ellos por separado. También podemos asignar valores numéricos de entrada y salida si quedremos tener mayor control que con el modo gráfico.

Se trata de una caja de diálogo que representa la información de color y tono de la imagen mediante una línea que atraviesa un gráfico XY. El eje vertical representa los valores de entrada, y el horizontal los de salida.

La diferencia principal y que otorga aún más precisión que los niveles se trata de que mientras los niveles poseen tres puntos de iluminación, con las curvas se pueden trabajar cinco; e inclusive más:


  • 1 Punto negro
  • 2 Sombras
  • 3 Punto medio
  • 4 Altas luces
  • 5 Punto blanco
Y éstos pueden subdividirse en tantos como se sepa manejar, cuestión de hacer un pequeño clic sobre cualquier parte de la línea que atravieza la diagonal principal para crear un nuevo punto de manejo. Así mismo, esta herramienta posee el mismo tipo de lista desplegable que la de niveles; convirtiéndola en una versión - aún - más precisa de la herramienta anterior.

Como su función es casi lo misma no voy a poner ningún ejemplo u explicación fancy ni nada, me imagino que ya no es necesario.

Las tres primeras herramientas vistas consisten el grupo de ajuste tonal, las tres sirven para modificar la iluminación en cualquier imagen y son particularmente útiles trabajando con aquellas que están en blanco y negro, aunque sirven para todas.

No mencioné la herramienta exposición por una cuestión de tiempo -es algo que más bien se utiliza para la fotografía HDR, que a menos que sean diseñadores o fotógrafos profesionales no es nada de interés- si interesan, pueden leer un poco sobre la misma aquí.

equilibrio de color

ventana de trabajo ▲

Esta herramienta se utiliza principalmente para normalizar el color. No sólo elimina los colores que pueden ser desfavorecedores en una imagen, sino que también se puede utilizar para corregir o reparar sus matices. En pocas palabras, sirve para variar el porcentaje de color en toda la imagen. A diferencia de las anteriores herramientas que trabajaban con canales, ésta trabaja de acuerdo a la iluminación; siendo que la modificación se subdivide entre luces, medios tonos y sombras y NO en base a un color en específico.

El uso de esta herramienta no es muy complicado, basta con mover cada uno de los punteros hacia una dirección u otra para que la imagen tome el color señalado.

EJEMPLO: Tengo mi stock, el cual, en este caso posee un tono muy azul para mi gusto. Así que moviendo la barra amarillo/azul hacia el amarillo logro neutralizar eso, ¿porqué porque el amarillo funciona como color opuesto al azul, y así mismo con el cyan/rojo y el magenta/verde.


tono/saturación

ventana de trabajo ▲

En Photoshop, el tono se refiere a los colores que aparecen en la imagen y la saturación a qué tan fuertes o profundos son estos colores. El blanco y el negro tienen una saturación de cero.
También, como las anteriormente mencionadas niveles y curvas, esta herramienta posee la funcionalidad de trabajar la imagen en conjunto o cada canal por separado.


El tono ( 1 ), nos permite cambiar el color de partes de la foto. Específicamente si elegimos un canal podemos alterar el color de exclusivamente los pixeles seleccionados. La saturación ( 2 ) sirve para apagar u encender los colores de la imagen (que se vean más fuertes o débiles) y la luminosidad ( 3 ) reemplaza los pixeles seleccionados por otros blancos o negros, dependiendo de los valores.

EJEMPLO: En este caso tomar・como referencia el cabello rosa del personaje en mi stock (Hayato - Starry✰Sky) y trabajaré solamente con el canal rojo.

+ ( 1 ) =


+ ( 2 ) =


+ ( 3 ) =

Y eso, esta es una herramienta sencilla pero que debe manejarse con cuidado, porque al elevar demasiado la saturación los colores se descomponen; y el encontrar un valor adecuado para cambiar los tonos puede ser complicado.

filtro de fotografía

ventana yadayada ▲

Esta herramienta imita la técnica de colocar un filtro coloreado delante de la lente de la cámara, para corregir el equilibrio y temperatura del color. Los dos tipos principales de filtros de compensación de color son cálido y frío.
  • Los filtros cálidos oscilan entre el color naranja y el ámbar, y excluyen los azules y el cian.
  • Los filtros fríos son de color azul y excluyen los rojos, verdes y amarillos.
Y eso, si la imagen que van a editar tiene cierta desproporción en el color pero ésta no es muy notoria pueden usar esta herramienta como una versión más sencilla del equilibrio de colores. Consiste de dos controles principales:


Si abrimos la lista desplegable en ( 1 ) podemos ver la galería de filtros predeterminados que trae el PS, en algunas versiones éstos varíann (el CS3 sólo viene con el filtro "azul", por ejemplo) pero si buscan pueden conseguir una infinita cantidad de colores para descargar.
En ( 2 ), sin embargo, tenemos acceso directo a la paleta de colores y podemos elegir el que se nos antoje ya sea para neutralizar algún color predomintante que no nos guste o para aplicarlo como si fuera un verdadero filtro fotográfico. De todas maneras se pueden lograr cambios sencillos pero interesantes ~ La densidad sirve para determinar la cantidad de color aplicada sobre la imagen y el control de preservar luminosidad -como su nombre indica /captainobvious- sirve para que la imagen no se oscurezca al aplicar el filtro.

EJEMPLO: No les mentiré, cuando escribir por primera vez este tutorial había tenido problemas con mi Photoshop, por lo cual tuve que mudarme a una versión anterior. El único filtro fotográfico que tenía en aquel entonces es el azul, así que decidí probarlo con mi stock:



Aunque se ve bien, no terminó de convencerme, así que decidí ir a la ventana de capas y cambiar el modo a multiplicar, quedando así:


Recuerden tambiién que las capas de ajuste son en gran parte como cualquier otro tipo de capa, así que tambiién pueden jugar con ellas al subir/bajar la opacidad, cambiar el modo, borrar ciertas partes de la máscara y etc. ~

mezclador de canales

a zimbawe hemos de ir, donde está la fiesta ~ ▲

Esta herramienta combina los valores de los canales RGB. Funciona en imágenes con o sin canal alfa. Tiene modo monocromo y éste se utiliza para convertir una imagen a blanco y negro con el máximo control sobre su iluminación. Como muchas herramientas tiene la ya conocida lista desplegable que nos permite trabajar cada canal por separado; pero si marcamos la casilla de "Monocromo" podemos trabajar la imagen exclusivamente en blanco y negro.

Mientras que los canales RGB determinan la contribucioエn del canal rojo, verde o azul al resultado el monocromo convierte la imagen a escala de grises. También el indicador "preservar luminosidad" cumple la misma función que la vista anteriormente.

Al utilizarla, luego de darle al indicador "monocromo" primero que nada es necesario igualar todos los valores (por default vienen : Rojo +40, Verde +40 y Azul +20) a 0. A partir de aquí moviendo los punteros de un lado a otro se pueden tomar valores aproximados.

EJEMPLO: Noten las variaciones en cuanto a luz del stock. Y cómo el manejo de la herramienta puede variar esto.



y/o

 
Última edición por un moderador:

Yoru

under and over
Registrado
28 Mar 2008
Mensajes
2,188
Offline
Estúpido nuevo DZ y su límite de caracteres >:

mapa de degradado

ya saben :V ▲
Este ajuste modifica los colores de la imagen a partir de una muestra de degradado a nuestra elección; esto pasa gradualmente a lo largo del histograma, es decir, las sombras son coloreadas por el color inicial del degradado y las luces por el color final del degradado.
Aunque haya varios tipos de degradados - e inclusive se pueden descargar más de la web - el primero en aparecer siempre que utilicemos esta herramienta se formará mediante los colores que escojamos aquí:

el color inicial es definido por el color frontal y el color final por el del fondo

EJEMPLO: Tenemos nuestro stock, recortado, puesto and such:


En este caso usé negro [ #000000 ] como color frontal y [ #d0eaf5 ] como color secundario. Aunque basándonos en las paletas solamente hay tantas combinaciones como estrellas en el cielo, lo que yo recomiendo es ir fijándose en los colores que posee la imagen e ir trabajando de acuerdo a eso. Aprender a elegir buenas combinaciones para gradients toma su tiempo, ¡pero no se desanimen! más que nada se basa en el ensayo y error.


Luego, si volvemos a la ventana de gradients veremos que ésta ha cambiado y ahora representa el que actualmente estamos utilizando; la mía se ve así:


Al dar clic sobre la barra misma, se abre el editor de degradados, aquí es donde realmente se explota el potencial de la herramienta:


En la parte de arriba pueden ver los degradados preinstalados que vienen con el Photoshop, es ahí donde deben aparecer todos los degradados preconfigurados instalados -en caso de que descarguen más y quieran usarlos-, mientras que en la parte de abajo podemos ver más detalladamente el degradado actual.


En la parte izquierda de la barra se ve el color en primer plano (en este caso el negro, duh); este color se asigna a las áreas más oscuras de la imagen. El color que vemos hacia el lado derecho es asignado a los píxeles más claros, y el color que se forma en medio es utilizado para los medios tonos. Podemos recortar o aumentar el porcentaje de cada color moviendo los punteros que se ven alrededor de la barra; a partir de ahí es cuestión de ir probando, ayudándonos siempre con la vista previa.

Luego de modificarlo un poco mi gradient quedó así:

Y mi stock ahora se ve así:



Como ya les he dicho antes, siempre intenten jugar con los modos en las capas de ajustes si no se sienten 100% a gusto con lo que les sale. Obviamente los colores en mi stock estaban desproporcionados así que cambié el modo a luz suave, logrando este resultado:


Un truco bonito y que acabo de aprender (créditos a Bruno/Valentine, tybby) es el de utilizar los degradados preestablecidos a una baja opacidad para dar tonalidades suaves a las imágenes, en este caso yo utilicé este degradado


Puesto a una opacidad del 11% da a la imagen una leve coloración amarilla. Lo suficiente para neutralizar un poco tanto cyan pero no demasiado como para estorbar al resto del histograma:


Y finalmente, combinado con nuestro degradado anterior:


corrección selectiva

pikachu (?) ▲

Esta herramienta es la manera más específica que posee el Photoshop para equilibrar los colores en una imagen. Trabaja de forma selectiva (como su nombre lo indica, duh) sobre las tintas que componen a un color, basándose en los canales RGB/CMYK así como otras herramientas vistas anteriormente.
Dicho en palabras más breves, la herramienta sirve para acomodar la cantidad de colores que forman un color final al mismo tiempo que ayuda a conseguir una mayor variedad de tonos, manteniendo la luminosidad de la textura original en una imagen.

Al abrir la herramienta ésta separa automáticamente los colores que componen la imagen, y se puede acceder a sus reguladores individuales por medio de esta lista:


De aquí en adelante el uso de esta herramienta no tiene mucha ciencia, solamente consiste en mover los reguladores de acuerdo al ajuste que sea necesario o tengamos en mente; el aprender a sacarle provecho es lo más complicado, pero eso se logra solamente con práctica. Las tintas se agregan/restan de acuerdo a la misma relación que vimos anteriormente al trabajar con el equilibrio de color:
  • El aumentar los valores de Cyan reduce la presencia de los Rojos.
  • El aumentar los valores de Magenta reduce la presencia en Verdes.
  • El aumentar los valores de Amarillo reduce la presencia de Azul.
Y viceversa.​

En caso de colores neutros ( Blanco, Negro, Gris ) Las tintas se añaden directamente encima de los colores, aunque también aplica lo de arriba se manifiesta la mayor parte de las veces en menor grado.

EJEMPLO: En este caso les mostraré como afecta la herramienta a los colores exclusivamente elevando el valor de los negros en +100.


Por último queda señalar que marcando los indicadores esta herramienta puede utilizarse en dos modos:
  • Relativo: Cambia la cantidad existente de cyan, magenta, amarillo o negro en un porcentaje del total existente. Por ejemplo, si comienza con un píxel que tiene 50% de magenta y añade un 10%, se añade el 5% al magenta (10% del 50% = 5%).
    Esta opción no puede ajustar el blanco especular puro, que no contiene ningún componente de color.


    negros +50 @neutros / modo relativo
    sghdfhsfrellenoahgsdf
  • Absoluto: Para ajustar el color en valores absolutos. Por ejemplo, si comienza con un píxel que tiene un 50% de magenta y añade un 10%, la definición de la tinta magenta es un total del 60%.


    negros +50 @neutros / modo absoluto

Bueno, esta es la versión 2 del taller que llevé a cabo como parte de la actividad Design Workshops, la cual fue idea original de la usuaria Hayley. Si mal no recuerdo la actividad en sí comenzó en Marzo de este año y duró hasta la caída del foro; sin embargo, varios de los otros talleres murieron ya por el camino ): igual se perdieron tutoriales de mucho valor.

Así que, en un intento por ayudar a crecer a esta pequeña zona de vuelta y agradeciendo la recuperación del tema original (porque sólo los perdedores hacen backups, duh /sarcasmo) me tomé el tiempo de ajustarlo y subirlo de vuelta. Aparte, realmente no iba a servir de mucha utilidad abandonado en sus notepads originales.

Por último, agrego:
brolinks
Photoshop Traduccion de comandos - iDIOTECA ― Traductor de comandos inglés/castellano. Incluye un archivo PDF con la lista extensiva.
https://forosdz.com/digital-art-tutorials-233/icons-dificultad-media-2954/ ― Tutorial de icons al estilo tradicional de mi autoría. También fue publicado en el taller.
https://forosdz.com/digital-art-tutorials-233/tutorial-avatar-icon-ajustes-y-decisiones-2783/ ― Tutorial añadido con el permiso de Izuzu/Vioectrolysis, su autora. Se centra en explicar el proceso para realizar icons.
Icon Tutorial ― Comunidad en Livejournal dedicada exclusivamente a ofrecer tutoriales de icons y efectos varios.

agradecimientos nacos (?)

▲ A doña Alex, nuestra mode, y al señor Aldebarán por recuperar el tema original. A todos los redactores de todos los sitios que leí para armar los tutoriales (LOL), a Franz Liszt por hacer mi vida más bella y miserable al mismo tiempo yyy, err, a ustedes (?) por su atención o algo así.​




Ya no tienen excusa, si no aprenden a hacer icons es nada más porque no quieren :> AHORA EXIJO MI LOGUITO!!1UNO /kicked
 
Última edición:
Registrado
7 Oct 2011
Mensajes
123
Offline
Impresionantemente útil y muy bien explicado. Aclaraste muchas de mis dudas habidas y por haber! Muchas gracias por los tutoriales.
 
Registrado
2 Oct 2011
Mensajes
159
Offline
I m p r e s i o n a n t e ~
Mis más sinceras felicitaciones, en un gran tutorial.
Muy buenos conocimientos de photoshop y una explación inmejorable, lo amé ~
Mil gracias <3
 

Apple

pink monsoon
Registrado
1 Jul 2007
Mensajes
1,869
Offline
te amo Yoru <3

gracias por los tutoriales ;3 los n00bs los apreciamos un monton
 
Registrado
7 Oct 2011
Mensajes
38
Offline
Muy bueno :3, ayudará a muchos a saber las funciones de estos ajustes, que sirven bastante para cualquier cosa que hagas <33
 

Yoru

under and over
Registrado
28 Mar 2008
Mensajes
2,188
Offline
Recién acabo de terminar de editar el tema -que abrí el sábado, derp- y ya está a disposición de todos en su lindis versión 2 :3 sin más que decir, se aprecian bastante los comentarios y, de nada hoygan (?)
 
Registrado
26 Jul 2008
Mensajes
1,005
Ubicación
Por ahí.
Offline
*A* gradiadddddddddddddddd! está todo tan organizado y tan genialosamente explicado @[email protected]
nunca habia visto un tuto asi :'3 debes tener mucha paciencia xDD
pondré en practica todo *u* gracias otra vez!
 
Registrado
8 Ago 2008
Mensajes
543
Offline
Genial.

Muchísimas gracias, Yoru<3 Ahora sabré cómo usar las opciones y dejaré el azar x'D
Se ve muy completo y es fácil de entender, great job ;O;
 
Registrado
26 Abr 2009
Mensajes
80
Offline
Esos nuevos ejemplos!! dayum! <3 mil gracias de nuevo por compartir y aclarar técnicamente las herramientas Yoru <3
 
Registrado
26 Nov 2013
Mensajes
9
Offline
Gracias━━(*v*)━━ !! no tenia casi nada de idea... ahora a practicar ( ̄" ̄)
 
Arriba Pie