Manual de Graficación de Vestimentas

Argentum Online

Índice
Introducción..................................................................................................2
Herramientas necesarias....................................................................................................2
GIMP............................................................................................................................................2
Ganas...........................................................................................................................................2
Empezando a Graficar....................................................................................3
Objetivo y primer paso.......................................................................................................3
Elección de colores.............................................................................................................3
Colores base y dibujo.........................................................................................................4
Sombreado......................................................................................................................... 5
Brazos..........................................................................................................................................6
Botas............................................................................................................................................6
Pantalón......................................................................................................................................6
Chaleco........................................................................................................................................7
Terminado...................................................................................................................................7
A moverla........................................................................................................................... 8
Movimiento sur (primera fila).....................................................................................................8
Frame 1-2...............................................................................................................................8
Frame 1-3...............................................................................................................................9
Vuelta y vuelta........................................................................................................................9
Movimiento norte (segunda fila)..............................................................................................10
Frames 2-2 y 2-3...................................................................................................................10
Movimientos hacia la derecha y la izquierda............................................................................11
Piernas y brazos....................................................................................................................11
Graficando el ítem............................................................................................................12
Todo listo!........................................................................................................................ 13
Introducción
Hay 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 paso
Para 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 dibujo

Para 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 ítem
Todos 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.-