101Level - Foro

Lección II: Paleta de colores, saturación y brillo

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado DevilEvil

  • *
  • *
  • 2.406
  • 599
  • Actividad:
    0%
  • Sexo: Masculino
  • ~The Evil One~
Lección II: Paleta de colores, saturación y brillo
« en: 07 de Noviembre de 2011, 03:48 »
Lección II: Paletting General
Profesor:
DevilEvil

En esta lección nos centraremos en conocimientos más concretos y orientados a Ragnarok Online. Sin embargo, el comprender los conceptos fundamentales de esta guía puede orientarnos el día de mañana a trabajar, de modo eficaz, en el desarrollo de otros diseños propios de un nuevo estilo, diferente al que aquí se estudiará.

Nuestro objetivo es ver desde una mirada más experta el uso de las paletas y conocer qué tenemos que tener en cuenta a la hora de trabajar, especialmente, en Ragnarok Online. Trabajaremos con Photoshop en esta lección, pero los resultados conseguidos pueden alcanzarse con cualquier otro programa que permita la edición y el guardado de paletas. Un ejemplo, es el programa GaleGraphics mencionado en la lección anterior.

Contenidos:
  • Edición de paletas en Photoshop
  • La paleta de colores
  • Colores en Ragnarok Online
  • Gradientes
  • Saturación y brillo
  • Metodología de creación de un recolor I

Material necesario:
  • Editor de imágenes con capacidad de edición de paletas (Recomendado: Adobe PhotoShop)
  • Imágenes de referencia del objeto de trabajo (bmp 8 bits)
  • Archivo .pal de la tabla de colores predeterminada
  • SPR Conview
  • Recomendado: Imagen referencial de los colores de RO



Edición de paletas en Photoshop

Muchos artistas coinciden en que hacer paletas a partir de la paleta general de Ragnarok con Photoshop es de lo más fácil que hay en este campo. Sin embargo, debo admitir que el manejo de las paletas en RO llega mucho más lejos en algunos casos. No toda paleta que funcione es una paleta bueno, al igual que no todo tinte que brille y llame la atención se le puede llamar “buen tinte”. No se trata únicamente de que nos guste o no, se trata de que esté en armonía con el resto del juego, que se encaje con el estilo en el que estamos trabajando. Todos los sprites oficiales, que siempre superarán en calidad y en número a los sprites custom en un server, poseen unos colores con características determinadas que se dan en casi todos ellos, sino en todos. Sin embargo, trataremos este tema más adelante, en esta misma lección.

Empezaremos ahora con el procedimiento básico que la mayoría ya conoce, y es el de abrir y editar una tabla de colores en Photoshop:

Abriremos primero Photoshop. Una vez abierto, cargaremos una imagen de 8 bits que será la misma imagen que queremos trabajar. Si quiero hacer, por ejemplo, una manzana de arquero con una manzana de color naranja, tendré que tener primero la imagen referencial de la manzana de arquero. Buscaremos una imagen (un frame del sprite) que contenga todos los colores, a ser posibles, de ese sprite. Sabemos que en ninguno de los frames de la manzana de arquero, aparece usado un color nuevo. Solamente se usa el color rojo y blanco (no hay interés en cambiar el color verde de la ramita), como se puede ver en la siguiente imagen:


En todo caso, aunque no hemos tenido problemas en el caso de la manzana de arquero, deberemos tener igual cuidado con todo sprite que desconozcamos los colores de sus frames. Un ejemplo problemático podría ser el bloody murderer, cuyo primer frame no es representativo de todos los demás frames (es decir, no incorpora todos los colores que todos los demás frames usan). Supongamos un personaje, que por dejante es blanco pero por detrás tiene un detalle rojo. Si queremos cambiar todos los colores, el primer frame no será representativo, pues solo muestra el gradiente del color blanco. Tendremos que coger una referencia trasera que incorporará en blanco y el rojo, o bien, usar dos referencias e ir trabajando la misma paleta en dos procesos. Más largo, pero así debe hacerse. Si nos sabemos los gradientes de color que debemos editar de memoria, no haría falta este proceso más largo.

Bien, entonces, abriremos con Photoshop o nuestro programa de edición de imágenes, el primer frame o un frame cualquiera de la manzana de arquero. En el menú de Photoshop, iremos a Modo > Image > Tabla de colores (dado que la imagen es de 8 bits/256 colores, estará ya indexada, de no ser así, no podremos pulsar en “Tabla de colores”). En la imagen se muestra el procedimiento seguido:


Suponiendo que de la manzana de arquero se trate, un objeto equipable de Ragnarok, veremos la tabla de colores estándar de Ragnarok. La imagen siguiente nos ilustra con los 256 colores de esta paleta estándar:


Observamos a mano derecha de esta ventana que hemos abierto que hay un icono de un cuentagotas propio de la tabla de colores. Usaremos este cuentagotas para localizar el gradiente de color que debemos editar. Debemos coger el cuentagotas y pinchar en la manzana, procurando pinchar en el rojo. Veremos que una de las tonalidades del gradiente rojo de la propia tabla de colores acaba de desaparecer, tanto en la tabla como en la propia imagen. Lo vemos como un “color” transparente, vacío. Observamos que este rojo pertenecía a una tira de 8 tonalidades rojas. Así que cliquearemos en el color más claro de esta tira hasta el octavo tono, el más oscuro. El color transparente debe estar entre ellos, o ser uno de los extremos de esta tira. Recordad que está compuesta de 8 colores, ni más, ni menos (para todos los gradientes estándar de Ragnarok Online, aunque varía en diseños personales o pertenecientes a otra estética). Cliqueamos y arrastramos para tener seleccionados todos los 8 tonos, y el resultado debe ser el siguiente:


No os asustéis, sabemos que en realidad se os ha abierto una ventana, no la cerréis. Es lo que debe de ocurrir. En esta ventana, debemos seleccionar el color más claro que deseamos, y luego pulsar en “Aceptar”. Se abrirá otra idéntica, y deberemos seleccionar el color más oscuro, y luego pulsar en “Aceptar”. Así, ya habremos editado nuestra tabla de colores, y podemos guardar, en esa misma ventana de la tabla de colores, nuestra paleta. Para guardarla, debemos asegurarnos de que la guardamos como archivo .pal.


De este modo, ya hemos creado una paleta para editar el color rojo. Sin embargo, nosotros no queríamos cualquier color, queríamos el naranja en concreto. Y no un naranja cualquier, sino el naranja estándar, el color oficial.

Para ello, debemos copiar el código del color naranja e ir sustituyéndolo por el rojo. En teoría es fácil, porque tan solo sería coger el código de color del naranja claro, pulsando un click en la tabla de colores en ese mismo naranja claro. La tira naranja deseada la encontraremos 4 filas más abajo que el color rojo de la manzana de arquero. Pinchamos un click en el primer color, sin arrastrar nada, y se nos abrirá una ventana.


De aquí, nos tendremos que fijar abajo, debemos copiar el código del color que aparece abajo a la derecha en el espacio. Este es el código #ffdec4. El naranja claro del gradiente de color estándar del naranja de RO. Pero no es tan sencillo. Ahora, clickearemos en el primer color rojo, el más claro, sin arrastrar. Aquí, en el espacio #, pegaremos el código del color naranja claro: ffdec4. Después, le damos a “Aceptar”.

A continuación, no hay que coger el octavo color naranja, sino el cuarto. Esto se debe a que, aunque no lo parezca a simple vista, no es un degradado de color real compuesto por 8 tonos. Es un conjunto de dos degradados de color naranja, compuestos por 4 tonos cada uno. De hecho, si nos fijamos bien, veremos que los 4 primeros tienen una saturación mayor que los 4 últimos, independientemente del brillo. Esto es porque el naranja, por naturaleza, es un color saturado, y tiene que ser necesariamente construido de esta manera. Hay más gradientes así, que luego estudiaremos. El proceso es más largo, el doble en concreto:

Copiaremos el código del cuarto color naranja, en lugar del octavo. A continuación, cliquearemos el primer color rojo (que en realidad ya es naranja claro porque lo cambiamos antes) y arrastraremos hasta el cuarto color rojo, no el octavo. En la primera ventana, dado que ya lo cambiamos correctamente, no haremos nada, le damos directamente a “Aceptar”. En la segunda ventana, nos preguntará por el cuarto color, y pegaremos nuestro código de cuarto tono naranja, y le damos a “Aceptar”. Con esto, ya tendremos uno de los dos gradientes hechos. El mismo procedimiento deberemos repetir, pero ahora con el quinto y octavo color. Es lo mismo, pero copiando el quinto color naranja y pegándolo en el quinto color rojo.

Una vez hecho todo, guardamos la paleta como archivo .pal y ya podremos cerrar todo.



La paleta de colores

Observamos que la tabla de colores está compuesta por exactamente 256 casillas, que en el caso del RO, todas están ocupadas por los diferentes colores (aunque muchos de ellos son simplemente negros). Sin embargo, debemos conocer ciertos aspectos propios de la tabla de colores de RO, además de los errores generales que solemos tener.

El primer color de la tabla de colores (esquina superior izquierda) es el color de transparencia, por lo que si lo usamos en nuestra imagen, al formar el sprite, no se podrá observar. Pero en este punto se pueden generar muchos problemas. Entre ellos, imaginemos que el primer color se repite en la tabla de colores, lo cual es algo frecuente. Generalmente, se usa el color magenta "#ff00ff" para el fondo (dado que, aunque todos los sprites del RO se observa la transparencia, en el caso de las imágenes item de inventario, es obligatorio que el fondo sea ff00ff, de lo contrario no se verá transparente).

La imagen siguiente ilustra cómo debe ser el fondo de un item de inventario. Se trata de una imagen de una pokeball bmp 8 bits, de tamaño 24 x 24 px, de fondo ff00ff, con la tabla de colores de RO estándar vigente.


Si cambiásemos el color de fondo de esta imagen cambiando el primer color de la tabla de colores, el sprite seguirá leyendo ese color, sea cual fuere, como color de fondo, y lo dejaría en transparente. Sin embargo, esto no se aplica a las imágenes de inventario, y el color de fondo no sería transparente. Solo es válido el color #ff00ff en el caso de imágenes de inventario.

Sin embargo, debemos añadir más información a este punto del color #ff00ff. Habría que mencionar que para el caso de equipables, enemigos, ropas, cabellos y NPCs, es posible usar como color de fondo el #ff00ff sin que sea este necesariamente el primer color de la tabla de colores. Cuando compilemos el sprite, no lo veremos transparente desde el visor de SPR Conview, sin embargo, tendrá un fondo transparente dentro del propio juego. Lo más recomendable, para salvarnos de cualquier problema, es que usemos siempre el primer color de la tabla de colores y que éste sea exactamente el color #ff00ff (tendremos que cambiar el código de color desde la ventana de la tabla de colores, pinchando en el primer color de la misma).

Ocurre también, aunque rara vez, un error a la hora de intentar seguir los últimos pasos antes mencionados, y este error está explicado en detalle en la FAQ de "Designer's Vademecum". Haremos una cita de este apartado:
Citar
Suele generar errores incluso a la hora de intentar solucionarlo. Siempre se ha dicho que el color de transparencia de un sprite debe ser el primer color de la tabla de colores (puede ser cualquier color, excepto en una situación*).
[...]* Esta situación es la de las imágenes bmp de la carpeta texture/item. El fondo debe ser necesariamente el color #FF00FF.
A veces, lo que hacemos es directamente coger el fondo y hacerlo magenta (ff00ff), manualmente (no desde la tabla de colores). Para los sprites funciona, pero no para las imágenes de inventario. Esto se debe a que, aunque el color ff00ff exista en la tabla de colores, NO es el primer color de la tabla de colores. Dentro del juego encontraremos que se da un error muy extraño, donde se ve que el fondo no de la imagen del inventario, sino del propio dibujo del interface del inventario en esa posición se vuelve transparente. Obviamente es un bug gráfico que no se puede permitir, y uno debe corregirlo de la siguiente manera:
  • Abrimos nuestra imagen y posteriormente la tabla de colores de la misma
  • Hacemos click en el color #ff00ff de la tabla de colores, o en los colores #ff00ff de la tabla de colores que no se encuentren en la casilla del primer color de la tabla
  • A todos estos les cambiaremos el color a otro bien diferenciado, que no esté presente en ningún otro lugar de la imagen, solamente en el fondo
  • En el primer color, cambiaremos el código de color a #ff00ff para que sea de color magenta
  • Pinchamos en "Aceptar" y cambiamos, manualmente, el fondo de la imagen al color #ff00ff (podríamos seleccionar por gama de colores en Photoshop, con tolerancia 0, dado que no es más que un color que además, como dijimos antes, no está presente en ningún otro lugar de la imagen más que en el fondo que queremos que sea transparente)
  • Ya podemos guardar la imagen, el error ya esta corregido

Por lo demás, no tenemos que saber mucho más del funcionamiento de la tabla de colores. Es obvio que para cargar la tabla, simplemente tendremos que darle a cargar desde la ventana de la tabla de colores y seleccionar la paleta deseada. Cuando queremos crear una imagen sobre la que trabajar un diseño para Ragnarok Online, seleccionamos la paleta estándar de RO a la que hemos podido acceder en la anterior lección. En la paleta de RO, todos los colores están formados por 8 tonalidades de la más clara a la más oscura. Para mantener este estilo, procuraremos seguir la misma tradición creando colores a partir de gradientes que sumen un total máximo de 8 tonalidades. No obtendremos un resultado mucho mejor añadiendo más tonalidades.



Colores en Ragnarok Online

En todos los juegos 2D, se suele ser fiel a unos colores con ciertas características, y el Ragnarok Online no es la excepción. Tenemos una tabla de colores estándar, pero además, una tabla expandida que incluye colores que son fieles a la estética del juego pero no suelen aparecer frecuentemente. Un ejemplo es el color rosa, negro, amarillo, etc.

En la guía de RO Pixeling colors, se hace una buena introducción a esto que comentamos:
Citar
En el RO siempre hemos hablado de una serie de colores que, con mucha frecuencia, aparecen en los sprites oficiales. Estos son los colores comunes, los aconsejados para los diseñadores. Sin embargo a veces sentimos la necesidad de usar otros colores, como el negro o el rosa, que no tenemos entre esos colores. Sin embargo, si que existen en los sprites oficiales, aunque no son comunes. Son los colores no comunes del RO.

La tabla de colores estándar fue compartida en la anterior lección, aunque dada su popularidad, se podrá encontrar frecuentemente en cualquier lado. Si no tenemos acceso a ella, siempre podremos abrir un sprite normal de RO y, a partir de uno de sus frames, extraer la paleta desde la tabla de colores, guardándola como archivo .pal.

Una compilación de los colores estándar es la siguiente, que es recomendable que tengáis a mano a la hora de diseñar:


La tabla de colores expandida fue compilada por Usako, una diseñadora de RO que recogió algunos degradados de color de esos sprites poco comunes oficiales. No podemos decir que aquí estén todos, pero confiamos en que fueron recogidos la mayoría de esos colores. La recopilación data del año 2008, así que es de esperar que hayan aparecido nuevos colores, teniendo en cuenta especialmente el cambio de equipo gráfico de RO.


Para usar estos colores, descargad esta tabla de colores expandidos y copiad los colores en Photoshop (mediante el código de color en la casilla #). A la hora de copiarlos, recordad que se tienen que hacer degradados, no copiar uno a uno los colores. Pero tened cuidado, pues algunos serán degradados formados por 8 casillas, y otros serán colores formados por dos degradados cada uno de 4 casillas.

La tabla de colores generales queda dividida en tres partes. A la izquierda, tenemos los colores comunes y abajo del todo los colores sólidos. Y a la derecha, tenemos dos columnas de degradados de 8 tonos de colores no comunes, pero que han aparecido en el RO.



Gradientes

Hemos hablado ya de los gradientes de color presentes en la paleta estándar, que eran gradientes de 4 u 8 tonalidades. Aunque con el tiempo las aprenderemos de memoria, dado que usaremos con frecuencia cada uno de los colores estándar de RO, por el momento tendremos que consultar esta tabla de gradientes:


Observamos que, a mano derecha de cada gradiente hay "2x4" y "1x8". Esto viene significando que hay unos colores formados con dos gradientes de cuatro tonalidades cada uno (es decir, 2x4), o bien, un gradiente de 8 tonalidades (1x8). También observamos, en la primera tira de colores, que pone al lado "skin color". Esto es, color de piel. A la hora de diseñar cualquier NPC, cuerpo o cabello, tendremos que usar este color para dibujar la piel. En caso de que queramos poner una piel morena, o cualquier otra idea que tengamos para otro color de piel, seguiremos usando esta misma tira de color para luego hacer una paleta (un recolor), modificando esos mismos colores. Con esto conseguimos que ningún otro posible color presente en la imagen que no tenga que ver con la piel salga sin ser afectado por el cambio.

En esta lección hablabamos del color naranja y sus dos gradientes. Para quienes consideraron que no habría problema en usar solo uno, tan solo os mostraré la gran diferencia entre usar dos gradientes y solamente uno:


Vemos que la diferencia no es poca. Ni siquiera llega a ser naranja, por eso decíamos antes que existen colores que necesariamente necesitan dos degradados para poseer 8 tonalidades en total. El naranja no es un caso excepcional, existen muchos colores como el naranja. Incluso colores que no necesitan dos gradientes, a veces los presentan, para conseguir una saturación mayor. Podemos hacer un rojo insaturado, apagado, o un rojo vivo, chillón. El primero le bastará un gradiente 1x8, el segundo rojo requerirá de dos gradientes 2x4.

Habrá colores que necesitarán ya no de gradientes, sino de edición de cada tonalidad una por una. Dependen mucho del diseño a trabajar y son muy específicos. Un ejemplo es el color bronce, diseñado para la mob bronzering:

Cada color fue seleccionado uno por uno. Por fácil que parezca, el trabajo acabó en una hora, simplemente para elegir los 8 tonos de color para el bronce que quedasen perfectamente en el RO y que tuvieran cierta viveza. No hay que ser perezoso para una obra que planeamos redistribuir y mostrar como una de nuestros trabajos. Nuestros trabajos son el signo de nuestra competencia, no estamos haciendo un enemigo simple para rellenar nuestro servidor, estamos diseñando. Cuando ponemos empeño, acabaremos alcanzando un buen nivel en este campo del diseño que consiste en la elección de los colores. Para que uno se inspire y vea ejemplos, busque colores concretos, se recomienda la siguiente página: www.colourlovers.com


Aquí, encontraremos colores para poder elegir en nuestros diseños. Tiene unas herramientas de búsqueda muy eficaces.

El truco de unos buenos gradientes y unos buenos colores es ser muy exigente y comparar, comparar muchas veces qué colores pueden ser los más apropiados. Ir deprisa y corriendo en el diseño de paletas puede funcionar, pero artisticamente el diseño final no tendrá mucho valor.

Aunque no sea aconsejable, se pueden extender los degradados de color, quizá a una construcción de 2x5. Sin embargo, un color precedente al color más claro podría ser perfectamente el blanco, al igual que un color más oscuro que el octavo tono podría ser el negro. En realidad, cada color, aparte de los 8 tonos que tiene, puede usar el blanco y el negro cuando diseñamos con él. Un rojo extremadamente claro es casi blanco, por ejemplo. A veces, sin embargo, como en el caso de los colores blancos, debemos usar colores más oscuros que el octavo tono, ya que ese sigue siendo claro frente a los octavos tonos de otros colores, como el marrón. Ante esta situación, podemos hacer dos cosas. O usar, después del octavo tono blanco, el séptimo y octavo tono marrón, o extender el gradiente blanco a un gradiente 2x5 (buscando un lugar inutilizado en la tabla de colores que se está usando.



Saturación y brillo

Como futuros diseñadores de RO que seréis, debéis tener en cuenta que no siempre os demandarán calidad artística en armonía con el propio juego. Es muy frecuente, en especial en la comunidad hispana, el gusto por los colores chillones y muy saturados (véase el campo de los tintes). Será vuestra decisión poner más o menos saturación, pero tened en cuenta que la alta saturación en tintes de ropa y cabello es considerado un error, dado que rompe con la estética del juego. Hay excepciones en ciertos NPCs y Mobs para conseguir efectos que no conseguiriamos con los colores estándar.

En el caso de los lingotrings (presentes en la imagen siguiente), dado que son porings con un brillo metálico, se ha aumentado la saturación para simular ese brillo. Esta situación es excepcional, no se trata de un sprite común, y por eso se ha creado un color plateado y dorado con mayor saturación de la esperada.

Estos casos, como ya hemos mencionado, rara vez aparecerán en cabellos y tintes de ropa. Ponemos aquí un ejemplo práctico de tintes diseñados para las ropas de una High Priest. Comparamos los colores saturados, con los colores insaturados:


De modo similar a la saturación, el brillo es otro peligro al que estamos expuestos. Muchas veces no pecamos de saturación, sino de brillo. En Ragnarok, hay un nivel de brillo en toda la estética del juego que habrá que respetar. Los tonos de color primeros y segundos se pueden usar, pero es frecuente que el primero ni siquiera llegue a usarse. Así, el color blanco rara vez se toca, a excepción de diseños muy claros. Un ejemplo, es la falda de la ropa de GameMaster, o el metal de algunas espadas. Lo mismo podemos decir de un brillo muy bajo. Los tonos séptimos se suelen usar casi siempre, sino siempre, para los bordes y zonas de oscuridad. Los bordes en Ragnarok siempre son oscuros, aunque puedan existir pequeñas excepciones, debemos procurar siempre hacerlos oscuros. Usamos los tonos sextos, séptimos y octavos, y en ocasiones incluso el negro. Sin embargo, para sombrear el interior, no solemos usar el octavo color, sino el séptimo en las áreas más oscuras. Quizá haya diseños que lo requieran y debamos usar el octavo tono de color para el interior. Excepcionalmente se usará el negro, y apenas uno o dos pixels de lejanía máxima del borde del diseño en el área más oscura. Preferiblemente, se deberá crear un noveno tono de color en lugar de usar el negro para sombrear el interior.

Debemos conseguir un constraste suave, y a veces el último tono de color queda en gran contraste con el negro. En estos casos, también, es preferible crear un noveno tono de color, aunque el negro solo estuviera en el borde. Contrastes altos se usarán en casos concretos.



Metodología de creación de un recolor I

<a href="http://www.youtube.com/watch?v=LVKbUXsEqSg" target="_blank">http://www.youtube.com/watch?v=LVKbUXsEqSg</a>


« última modificación: 07 de Agosto de 2013, 11:32 por DevilEvil »


 

Lección IV: Diseño de Act I

Iniciado por DevilEvil

Respuestas: 0
Vistas: 1562
Último mensaje 07 de Agosto de 2013, 11:29
por DevilEvil
Lección V: Line Art y Antialiasing

Iniciado por DevilEvil

Respuestas: 0
Vistas: 2407
Último mensaje 07 de Agosto de 2013, 11:31
por DevilEvil
Lección I: Introducción al Spriting y Pixel Art

Iniciado por DevilEvil

Respuestas: 0
Vistas: 6975
Último mensaje 23 de Octubre de 2011, 18:25
por DevilEvil