Manual de Graficación de Vestimentas

Argentum Online

Índice

Introducción..................................................................................................2Herramientas necesarias....................................................................................................2

GIMP............................................................................................................................................2Ganas...........................................................................................................................................2

Empezando a Graficar....................................................................................3Objetivo y primer paso.......................................................................................................3Elección de colores.............................................................................................................3Colores base y dibujo.........................................................................................................4Sombreado.........................................................................................................................5

Brazos..........................................................................................................................................6Botas............................................................................................................................................6Pantalón......................................................................................................................................6Chaleco........................................................................................................................................7Terminado...................................................................................................................................7

A moverla...........................................................................................................................8Movimiento sur (primera fila).....................................................................................................8

Frame 1-2...............................................................................................................................8Frame 1-3...............................................................................................................................9Vuelta y vuelta........................................................................................................................9

Movimiento norte (segunda fila)..............................................................................................10Frames 2-2 y 2-3...................................................................................................................10

Movimientos hacia la derecha y la izquierda............................................................................11Piernas y brazos....................................................................................................................11

Graficando el ítem............................................................................................................12Todo listo!........................................................................................................................13

IntroducciónHay mucha gente dando vueltas por los foros que quiere aprender a graficar, pero, sin

embargo, muchos no intentan por falta de alguien que les explique.

Muchos creen que graficar es simplemente dominar bien el Photoshop... nada más errado. En este manual voy a intentar explicar paso por paso las técnicas que yo uso al momento de hacer un gráfico. Son técnicas que se pueden usar desde el Photoshop hasta el Paint, porque no requieren de herramientas específicas. Sin embargo, recomiendo el Gimp como programa de edición de imágenes, y los ejemplos que doy sobre cómo usar las diferentes herramientas (son herramientas básicas como rotar, seleccionar, etc., están basados en ese programa. Sin embargo, los mismos comandos están en el Photoshop y en otros programas de edición de imágenes.

Personalmente hace mucho que venía posponiendo el tema de hacer un manual de graficación. Ahora encontré el tiempo (en realidad encontré más tiempo del necesario) y las ganas.

El manual está dirigido exclusivamente a gráficos de vestimentas, porque ya la graficación de NPCs, casas, terrenos, etc., incluye conceptos más avanzados y, ahí sí, dominio Photoshop u otros programas.

Pueden copiar, cortar, pegar, rotar, modificar lo que quieran sin pedir permiso a nadie, sólo citandome como autor. Sean libres.

Dhinno.-

Herramientas necesarias

GIMP

Es un programa de edición de imágenes. Los ejemplos y las imágenes son tomadas de ese programa, por lo tanto, es más fácil de guiarse si lo usan. Sin embargo, las herramientas necesarias se encuentran en cualquier otro programa de edición de imágenes. Pueden descargarlo de acá:

http://www.gimp.org/windows/

También recomiendo que lean la documentación, sobre todo lo referente a las Capas (http://docs.gimp.org/es/).

GIMP es un programa libre y gratuito (no tienen que buscar ningún crack para hacerlo andar, ni nada parecido), es por eso que lo elegí como herramienta de graficación. A la vez, corre bajo Windows y Linux.

Ganas

Es indispensable tener Ganas: de aprender, de esforzarse, etc. No sé de dónde pueden descargar Ganas, pero una vez que lo encuentren se les va a hacer todo más leve =). También pueden probar con el plugin Paciencia; puede ser que las cosas no les salgan a la primera, pero todo es cuestión de práctica, nadie nació sabiendo y es cuestión de prueba y error.

Empezando a Graficar

Objetivo y primer pasoPara explicar los métodos básicos de graficación vamos a hacer una

nueva versión de la “vestimenta común” del Argentum. Para ello vamos a usar como base el cuerpo desnudo humano, hombre (graf. 24000).

Una vez abierto, vamos a guardarlo bajo el formato .bmp (es obligatorio este formato para cualquier gráfico del AO).

Elección de colores

Antes de empezar a graficar hay que elegir los colores que vamos a usar. Como vamos a hacer una nueva versión de la vestimenta común, necesitamos un verde oscuro para el chaleco, blanco para las mangas, beige para el pantalón y marrón para las botas y el cinturón.

Para que la ropa quede más realista (y evitar colores chillones como los de la ropa común azul y fucsia), la gama de colores debería estar dentro de este rango.

Con eso en mente, los colores base que elegí fueron:

Ahora lo que sigue es crear la “paleta de colores” (derecha). La paleta de colores es una “muestra” de todas las tonalidades de un color. Esto sirve para luego poder sombrear el gráfico.

Para crearla seleccionamos (con la herramienta “gotero”) el color que elegimos y luego hacemos click en los dos rectángulos . Aparecerá una ventana para cambiar las preferencias del color. De ese montón de barras sólo nos va a interesar la que tiene la letra “V” (valor).

Lo que hacemos es ir haciendo un píxel de cada tonalidad. Para hacer otra tonalidad, le restamos 5 al número del valor (en este caso, la nueva tonalidad tendría un valor de 51). Hacemos click y repetimos el proceso hasta tener 6 tonalidades.

Aclaración: el valor y la cantidad de tonalidades que tiene la paleta de colores varía con cada graficador. Yo considero que 6 tonos con una diferencia de 5 entre cada uno es un valor adecuado para graficar ropas, por el tamaño que tienen. Pero obviamente, es una opinión y no duden en ir variando los valores y la cantidad de tonalidades.

Una vez terminadas las 4 paletas nos debería quedar algo como esto:

El valor de los colores base (los primeros) son: verde (56), beige (85), marrón (65) y blanco (100).

Tip: Para los blancos, en este caso, la tonalidad va variando de 10 en 10. Eso es porque el color base es muy claro, y si la variación fuera de 5 en 5, la diferencia entre el color más claro y el más oscuro no se notaría.

Colores base y dibujoPara empezar vamos a trabajar sólo en el primer frame (movimiento) hacia adelante (el

gráfico cuando está parado).

Pintamos cada “sección” de la ropa con el color base. Esto nos va a servir como guía para después empezar a sombrearlo.

Tomando como guía la ropa común original, el gráfico me quedó así:

Lo que hice fue achicar un píxel de cada lado la cadera para que no quede tan abultada la ropa (abajo del cinturón).

Después agregué píxeles en los brazos, para darle un efecto “holgado”:

Para ubicar el cinturón me guié en el comienzo del pantalón:

En el caso de las botas, los píxeles de arriba son para darle un efecto de “dobladillo”. Se va a entender mejor una vez que esté sombreado.

Tip: no duden en hacerle recortes a la forma del cuerpo desnudo. Se pueden borrar y agregar píxeles a gusto (por “borrar” se entiende pintar el píxel de negro). Para algunas ropas de mujeres, sacar píxeles de la cintura ayuda a marcarla más. O incluso se pueden agregar píxeles a los brazos para hacerlos más musculosos.

Tip: Por el tamaño de los gráficos de ropa, un píxel tiene mucha influencia en el dibujo. Borrar o agregar un píxel puede cambiar mucho el dibujo, por eso recomiendo ir viendo el gráfico en escala real cada vez que se agregue algo.

Sombreado

Ahora es cuando el gráfico empieza a tener más realismo y forma. El sombreado del dibujo es fundamental para darle efectos de profundidad, pliegues, etc. a la ropa.

Para sombrear, mi técnica es ir pintando desde el tono más oscuro hacia el más claro. Para ello primero marcamos los puntos de mayor oscuridad, y a partir de ahí, vamos pintando los píxeles de alrededor en tonos cada vez más claros, hasta llegar al color base. No se preocupen si no se entiende, voy a ir explicando paso por paso cada parte del sombreado.

Aclaración: los puntos oscuros que elijo para empezar a graficar están seleccionados según mi criterio; nuevamente esto varía de graficador en graficador (he ahí la diferencia entre los gráficos). Prueben con ir cambiando el lugar de los puntos para lograr diferentes efectos.

Para sombrear recomiendo siempre hacerlo desde el exterior hacia el centro. Esto sirve, primero, para darle efecto de profundidad y volumen; y segundo, si se sombrea desde (por ejemplo) izquierda a derecha, la iluminación va a quedar dada vuelta una vez que hagamos los demás movimientos (si no entendieron no se preocupen, ya lo voy a tratar más adelante).

Brazos

En el segundo frame se ve el “punto de sombra”. Una vez marcado ese punto se empiezan a pintar los puntos alrededor. Obviamente, poco tiene esto de automático, no hay un patrón definido para el sombreado. Lo que yo considero a la hora de hacer el sombreado del brazo es que están inclinados un poco hacia adelante (por eso la sombra comienza en los hombros), y que se hace una pequeña sombra en la manga.

Como decía antes, esto varía mucho de graficador en graficador. Algunos iluminan los hombros porque la luz del sol viene de arriba.

Botas

En el caso de las botas el punto de sombra lo marqué con el segundo color más oscuro; a la vez, salteé el segundo color más claro, para que se note más la luz en los tres píxeles del empeine de la bota. Estos “efectos” se van dominando (o no) con el tiempo, es cuestión de prueba y error.

En el caso de los tres píxeles oscuros (los del segundo frame), son para darle el efecto “dobladillo” del que hablaba antes. Ahí se ve como con solamente tres píxeles oscuros la bota toma una forma diferente. Para ver si el efecto que buscan quedó bien, les recomiendo ir viendo el gráfico en escala real.

Pantalón

Lo que tengo en mente al sombrear las piernas es que tiene que quedar una zona iluminada (la zona que se ve en el 5to frame). En el último frame dejo iluminada las rodillas, porque sobresalen.

No hay que olvidarse de marcarle el bulto. Pobre pibe sino...

Chaleco

Otra vez. Puntos de sombra y empezamos a sombrear. Mi idea es que el pecho sobresale, por ende, debería estar más iluminado. Como ven, acá se nota mucho más el hecho de que no hay un patrón definido para sombrear.

Lo que intento evitar es que queden “lineas” de luz en este tipo de área. Osea, que no quede una linea, de un píxel de ancho, que vaya oscureciéndose.

El sombreado del cinturón es simplemente ir oscureciendo cada punto; y el del cuello de la camisa solo tiene 3 tonalidades para que se note contra el verde.

Terminado

Bien, así es como me quedó. Como ven, es muchísima la diferencia que le da el sombreado a un gráfico.

La técnica del sombreado es prueba y error. Uno va mejorando conforme va graficando y va encontrando otras formas de sombrear u otros ángulos desde donde sombrear.

A moverla

Bien, terminamos el primer frame! Sólo nos faltan otros 21!. Jaja, no es tan grave como parece, muchos frames son copias de otros. Los primeros tres frames de la primera fila son iguales a los frames 4, 5 y 6 de la misma fila, sólo que invertidos. Lo mismo pasa con los primeros tres de la segunda fila y los últimos tres de ésta. Iguales son también los frames que van hacia la derecha con los que van hacia la izquierda.

Por eso, si hacemos la cuenta, sólo es necesario graficar 11 frames (la mitad). Sólo faltan otros 10!.

Por razones obvias, no voy a detallar todos los demás frames que faltan hacer (o por lo menos, no al nivel que lo hice con el primer frame). La técnica de sombreado es la misma, la paleta es la misma, sólo me voy a detener en detalles específicos de cada movimiento.

De ahora en más, para nombrar los frames, voy a usar: “fila-columna-descripción”. Por ejemplo, si quiero hablar del pecho del segundo frame de la primera fila, sería: “1-2-pecho”. Aclarado eso, seguimos.

Movimiento sur (primera fila)

Frame 1-2

Este es el primer frame del movimiento. El pecho es bastante parecido al frame anterior, pero con un ligero cambio en el sombreado para dar un efecto de que la mano está por sobre el pecho. El brazo derecho (es decir, el que está a nuestra izquierda) casi no sufrió modificaciones.

El brazo izquierdo tiene una sombra en el medio, que sería el codo; además, la sombra en el hombro. A partir de esos dos puntos fue que empecé a sombrear, para dar el efecto de que el brazo estaba doblado.

La pierna izquierda tiene una pequeña luz que hace de rodilla; se va oscureciendo a medida que llega a los bordes de arriba y abajo, para dar, igual que en el brazo, el efecto de que está doblado.

La bota parece rara pero se ve bien, aunque no sé cómo explicar un patrón para hacerla, así que les dejo a ustedes que prueben

También hay un cambio en la parte del chaleco que sobra, abajo del cinturón. La idea es que parezca que está subido, porque la pierna está flexionada. Por eso es que también tiene una pequeña sombra, para dar ese efecto de que la ropa está doblada.

Recuerden siempre que si le sacaron algún píxel al primer frame, también lo tienen que sacar en los que siguen. Por ejemplo, en este caso es el píxel que estaba en la cadera. Es un pequeño detalle, pero

cuando el movimiento esté animado va a quedar raro que nuestro personaje engorde y adelgace a cada paso.

Frame 1-3

En el caso del pecho, ahora la mano hace una sombra más grande, haciendo que todo el lado izquierdo quede más oscuro.

El brazo izquierdo tiene el mismo efecto que en el frame anterior.

En el caso de las piernas, la idea es, nuevamente, que la rodilla se destaque, dando el efecto de que está más cerca. El problema con los colores claros es que tienen poca diferencia entre sí, por eso no es tan perceptible.

Vuelta y vuelta

Una vez hecho los tres primeros movimientos, vamos a copiarlos, pegarlos y rotarlos (arlos arlos arlos) para completar todos los movimientos de la primera fila.

El primer movimiento no hace falta rotarlo. Para los otros dos, seleccionamos un cuadrado alrededor del gráfico (lo más preciso posible, así no se nos dificulta al momento de pegarlo), copiamos la selección (Editar > Copiar), la pegamos (Editar > Pegar) la rotamos y la ponemos en su lugar; el segundo movimiento es equivalente al quinto, y el tercero, al sexto. Nos quedaría algo así:

Advertencia: para que un frame se pueda rotar tiene que tener un diseño simétrico. Supongamos que el gráfico tiene una capa que cubre sólo uno de sus hombros; si se rotaran los movimientos, la capa iría saltando de hombro en hombro mientras vamos caminando. En este caso se debe graficar movimiento por movimiento (también los movimientos de los costados, ya que sino la capa cubriría ambos hombros). Es por eso que uso un sombreado que va desde los costados hacia el centro, porque luego permite rotar el gráfico sin que cambie la dirección de la luz.

Movimiento norte (segunda fila)

El movimiento de atrás (hacia el norte) parece tener mucho en común con el movimiento de adelante (hacia el sur). Sin embargo lo único que copié íntegramente fueron los brazos, que son exactamente iguales.

Hice nuevamente la espalda para darle un aspecto más chato y cuadrado, diferente al de la panza. La parte del chaleco que está por debajo del cinturón también la acomodé, haciendo que sea más aplanada.

En el caso de las piernas, atrás no hay rodillas (o sí?), por lo tanto las sombras cambian ligeramente, ya no hay una luz tan marcada como en el movimiento de adelante.

Las botas tienen el talón iluminado y la punta de los dedos oscurecidos. A la vez tienen un píxel oscuro para dar una sensación de que está flexionada.

Frames 2-2 y 2-3

Los movimientos de espalda son bastante rápidos de hacer. Las espaldas de todos son, generalmente, iguales. Por eso, para hacer los otros dos movimientos copié la espalda del primer frame y la pegué en los otros dos. A la vez, siempre mantienen una pierna quieta, por lo tanto, esa también la copié de la original.

Sin embargo los brazos son completamente diferentes; al igual que la pierna que está flexionada.

En el caso de los brazos, dejé un punto de luz en cada uno, simulando el codo que está flexionado. La sombra es más intensa en el brazo izquierdo que en el derecho, para dar la sensación de que el derecho

está hacia atrás y el derecho, hacia adelante.

La pierna derecha tiene unos píxeles de sombra para dar, nuevamente, el efecto de “flexión”.

Los mismos efectos se repiten en el frame 2-3.

Terminados los tres movimientos, repetimos los pasos que hicimos en con la primera fila: copiar, pegar y rotar; en el mismo orden que los anteriores. Con eso deberíamos tener terminadas las dos primeras filas del movimiento de nuestro gráfico.

Movimientos hacia la derecha y la izquierda

Piernas y brazos

Cuando hacemos el movimiento hacia los lados es necesario marcar con sombras el lugar donde las piernas de cruzan, para “dar a entender” que una pierna está más cerca que la otra. Para aumentar más este efecto, la pierna izquierda está más iluminada (la zona con colores claros es mucho mayor que la que tiene colores oscuros) y la izquierda está sombreada sólo con los tonos más oscuros.

Lo mismo pasa para las botas. Para dar el mismo efecto, para sombrear la bota derecha usé sólo los tres colores más oscuros.

Es importante marcar bien la sombra entre las dos piernas, sino se pierde esa sensación de que una pierna está por encima de la otra.

El brazo nuevamente tiene píxeles agregados para dar el efecto de holgado de la ropa. Se puede usar el brazo del primer frame del costado en los otros 3 (excepto en el último) porque no cambia de posición.

En caso del último frame del movimiento del costado, los brazos cambian de posición, por ende es necesario volver a graficarlos.

Cuando graficamos las botas, los dobladillos quedan casi superpuestos. Para dar cuenta de la profundidad dibujé una línea de color más oscuro, delimitando el borde. Usé nuevamente la diferencia de tonos para diferenciar las botas. La

pierna derecha está coloreada con tonos más oscuros, mientras que la izquierda, con tonos más claros.

Para el movimiento Este (derecha), copiamos, pegamos y rotamos cada frame.

Advertencia: es necesario repetir el procedimiento de copiar, pegar y rotar para cada uno de los movimientos de costado. El primer movimiento hacia la izquierda es el mismo que el primero hacia la derecha; el segundo hacia la izquierda es el mismo que el segundo hacia la derecha, etc. Si se copia, pega y rota la fila completa, la animación va a quedar al revés.

Bien! Ya tenemos el movimiento completado, ya pasó todo lo peor, y ya completamos un 95% del proceso. Solamente nos quedaría hacer el ítem para cuando la ropa esté tirada o en el inventario.

Graficando el ítemTodos los ítems del juego (desde la ropa, armas, hasta el muñeco voodú satánico) tienen

un tamaño de 32x32 píxeles. Por lo tanto lo primero que vamos a hacer es abrir un archivo nuevo con este tamaño. Para ello vamos a: Archivo > Nuevo y nos va a aparecer una pantalla como esta:

Cambiamos donde dice “tamaño de la imagen”, la anchura y la altura por “32” cada una y hacemos click en “Aceptar”. Con esto se nos va a abrir una nueva ventana con un cuadrado blanco.

Lo primero que vamos a hacer es guardarlo bajo formato .bmp.

Tip: recomiendo guardar el objeto como “nombre_de_la_ropa-item.bmp”. Así la carpeta en donde tengan los gráficos les va a quedar organizada con el ítem al lado del gráfico de movimiento; es especialmente útil cuando ya tengan una carpeta grande de gráficos.

Ahora vamos a la herramienta de relleno ( ) habiendo seleccionado previamente el color negro, y clickeamos en el cuadrado, para pintarlo completamente.

Bien, una vez completado eso, abrimos el gráfico del movimiento y seleccionamos el frame 1-1, vamos a Edición > Copiar, luego nos trasladamos a la ventana donde tenemos abierto el archivo para el ítem y ponemos Edición > Pegar. Sin clickear en la ventana (es decir, sin perder el foco de la selección) vamos a Capa > Capa nueva.

Como ven, el frame no entra totalmente en nuestra imagen de 32x32, por ende, va a necesitar un recorte. A mi criterio, lo más importante es que se vea el pecho de la ropa, por ende, seleccionando la capa (para hacer esto más fácil vamos a Ventanas > Diálogos empotrables > Capas) la movemos hasta que el pecho quede centrado.

La línea amarilla que se ve en la imagen es del propio programa, que la usa para delimitar la capa, no tiene mucha importancia.

Lo primero a eliminar de la imagen es la parte en que se ve la piel.

Ahora eliminamos el pantalón. A mi criterio, queda mal la ropa entera en el ítem. Hay graficadores que prefieren poner el pantalón a un costado del objeto.

Una vez terminado de graficar, teniendo seleccionada la capa del gráfico (no la del fondo) vamos a Capa > Capa a tamaño de la imagen, y luego Capa > Combinar hacia abajo. Con estos dos procedimientos unificamos las dos capas

del gráfico.

Así quedó el ítem:

Otras opciones para el ítem pudieron haber sido:

Todo listo!Después de tanto trabajo, acá está:

Para poner el gráfico en un servidor es necesario indexarlo y datearlo. Hay muchas guías sobre esto, por lo tanto no voy a explicarlo acá.

Los métodos que expliqué para graficar y sombrear fueron los que usé durante mucho tiempo y me dieron buenos resultados al momento de hacer vestimentas. Sin embargo, puede que haya gráficos que requieran otros métodos, como por ejemplo, lograr el efecto de brillo en una armadura, o los pliegues de la capa o túnica, etc., que no voy a explicar en este manual.

Graficar no es nada automático, es como pintar, cada uno le da su estilo, y todo depende del gráfico y lo que se quiera lograr.

Espero que les haya sido útil.

Dhinno.-