Autor Tema: Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon  (Leído 1383 veces)

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

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« en: 04 de Diciembre de 2012, 01:22:17 am »
Bueno, ya que algunos tienen curiosidad de como yo lo hago, he decidido hacer un tutorial de hacer Sprites Pokémon desde cero.

¿De qué nos sirve este tutorial? Bueno, lo principal de todo es que con esto podremos hacer sprites muy parecidos a los de los juegos reales, pero de nuestros Fakemon, o incluso podemos hacer otras posiciones de Pokémon ya existentes.

En este tutorial usaré la herramienta de dibujo Paint Tool SAI (Si no lo tienes, búscalo en Google). Me parece mejor para esto porque es de fácil manejo a la hora de... todo. Simplemente, su pro está en las capas, cosa que el Paint tradicional no tiene. Photoshop también es una buena herramienta por las mismas razones, pero le tengo más cariño a SAI.

Antes de nada, como siempre digo, no esperéis resultados perfectos desde el primer sprite, todo estilo de dibujo necesita su práctica, y esto no es una excepción, y más si es un estilo que calcamos de otro. Este tutorial es para principiantes, es decir, tiene pasos que pueden ser eliminados del proceso del sprite si tenemos práctica, pero han sido implementados en el tutorial para que vuestros primeros intentos os salgan mejor, por eso mismo el tutorial es un poco largo, pero no es tan complejo. Si queréis un resultado perfecto, hay que tomarse su tiempo. Ya irás mejorando tu marca si lo sigues practicando. Principalmente, tómate tu tiempo para adaptarte.

Dejando esto a parte, empezamos con el sprite. Para este tutorial voy a usar una COSA aleatoria que acabo de crear. Lo llamo El pincitas.


Lo llamo El pincitas porque es una FUCKIN' PINZA DE LA ROPA


Para hacer el sprite, lo primero que debemos saber es la posición. ¿Cómo conseguimos saberlo? Muy simple, dibujándola. Para ello, necesitaremos un boceto.

El boceto podéis hacerlo como queráis, tanto fuera del programa con una libreta y luego escanearlo o bien podemos hacer un boceto por tableta digital desde el programa. Eso será lo que yo enseñaré, puesto que usaré la misma posición del art de arriba.


Lo mismo que el anterior pero sin color. ¿Qué más decir?


Tras esta pausa de no hacer sprite, empezamos con dicho sprite. Sacamos el tamaño del lienzo que un sprite actual (Sprites de la quinta generación). Iré rápido, el tamaño del lienzo de uno de estos sprites será de 96x96, pero no vamos a ocupar TODO ese espacio, es demasiado.

Si queremos un resultado decente, no vamos a hacer algo que mide poco como un Wailord, ni algo gigantesco en el tamaño de un Joltik. Lo que haremos primero será medir el tamaño de los sprites reales, para basarnos en ellos:


Un Roggenrola de 0.4 m no mide lo mismo que un Probopass de 1.4 m


Claro está que siendo unos 649 Pokémon actuales y que cada uno tiene sus detalles y formas, es practicamente imposible que todos midan correctamente lo que deberían, pero al menos con esto no meteremos la pata como hemos dicho antes. Así pues, si El pincitas tiene un tamaño de 1.4 m, a lo mejor nos convendría basarnos en un Pokémon como Probopass, o al menos de uno que mida más o menos lo mismo (1.3 o 1.5).

Empezamos a hacer el sprite. Lo que yo he hecho en nuestro lienzo es señalar en una segunda capa con líneas lo que mide el Pokémon real (Probopass), para dibujar en en cuadrado que nos dará la medida de nuestro Fake. Seguimos con nuestra pinza cutre; adaptamos el boceto de nuestra COSA al cuadrado. Enseño imagen de los pasos dados aquí.


A la izquierda tenemos la capa del sprite y la capa de la señalización para enseñaros como saqué las líneas. En el centro he borrado el sprite y tengo solo la capa de la señalización. Finalmente a la derecha he adaptado el boceto a las líneas. Puedes pasarte un pixel de las líneas si ves que el fake tiene un diseño demasiado complejo como para tener un tamaño menor, eso a vuestro criterio.


Cogemos el Lápiz Binario para hacer el contorno del sprite en una capa nueva. Bajamos la opacidad de la capa del boceto a una que no nos moleste a la hora de hacer el lineart. Este paso es, simplemente, calcar el boceto, pero por píxeles. Una vez hecho eso, retocad el lineart, borrando y añadiendo píxeles hasta que quede estéticamente correcto. En este paso podemos aprovechar para adaptar el Fake en la señalización del paso anterior. Recordad, para borrar en forma de pixeles hay que utilizar el Lápiz Binario y pulsar al pequeño cuadro que se encuentra al lado del color actual señalado (uno que es blanco/gris/blanco/gris).

Nos saldrá algo como esto:


Sí, nada que ver. Suele pasar si tras calcar has editado el lineart de forma que quede estéticamente correcto. Esto es por culpa de que el boceto es desproporcionado, y el dibujo de este engendro lo es, aunque a veces pasa con dibujos buenos también.


¡Hora de colorear! Esta COSA tiene de colores el verde, el naranja, el rojo (interior de la boca) y el blanco. Si queréis tirar para lo fácil, buscad sprites reales con los colores que buscas. Sobre todo recomiendo esto porque muchos Pokémon coinciden en los colores de Sprites porque se usa la misma paleta.


Garbodor verde, Scrafty naranja, Haunter rojo... Estos tres nos servirán.


Tras eso, nos creamos nuestra propia paleta. ¿Cómo hacemos esto? Pues capa nueva y a copiar los colores que necesitamos, uno por uno. No nos llevará mucho y nos ahorrará mucho trabajo a la hora de colorear e ir perfeccionando. Nos quedará algo así:


En general son 3 tonos por color (desde la 5ª generación). De izquierda a derecha serían: Color base, sombreado, lineart. Si es necesario, podéis añadir un 4º tono de color, que sería el brillo. Si necesitáis dicho color, os sugiero buscar entre los sprites de 4ª generación un Pokémon que lleve ese color.


Cabe destacar que el negro no es realmente negro, si no un gris muy fuerte, y esto es un dato importante porque a veces este pequeño detalle se carga nuestro sprite y hace que destaque su "falsedad". Así que sugiero poner en el listado el negro (copiadlo de un sprite real), el gris (para sombrear las partes blancas) y el blanco (aunque dicho color sí sea el blanco puro).

Si habéis observado, el fondo de la paleta es de color azul celeste. El porqué es porque al pintar un sprite (o incluso cualquier dibujo a digital) es necesario pintar una capa que hará función de fondo de un color que nuestro sprite no vaya a tener.

Tras preparar las herramientas y los colores, nos disponemos a pintar. Pillamos el Lápiz Binario y ponemos los colores base en nuestro dibujo. Recordad pintar el lineart, sustituyendo el negro negro por nuestro negro de la paleta de colores.

El resultado debería ser así:


Resultado base. Aún falta bastante recorrido y podremos aprovecharlo para arreglar cosas que no queden correctamente en el sprite, como ahora mismo la boca y los ojos.


Hay varias formas de colorear en estos sprites dependiendo de si son peludos, brillantes, robustos, suaves, planos... Nosotros buscamos la que mejor nos funcione, basándonos en un sprite real si no estamos seguros de como lo estamos haciendo. Hay dos pasos a tener en cuenta cuando coloreamos:

  • haciendo una línea (ya sea ondulada, recta, deformada... adaptándose a la forma del Fakemon que pintemos) y coloreando todo lo que se encuentre debajo de dicha curva.
  • Tras el paso anterior, hacer puntitos de dos colores distintos uno detrás de otro de forma que a la lejanía parezca que existe un tercer color. Este método dejó de usarse en la quinta generación, al igual que el cuarto tono de color mencionado anteriormente. Probablemente se saltaron ambas cosas para facilitarles el trabajo al animar los sprites, por eso mismo yo sigo usando ambas técnicas si me son necesarias.

Dado que sé que muchos no habréis entendido ni pío os pongo un ejemplo para que lo entendáis:


Ejemplo cutre del segundo punto.


Primero nos centraremos en pintar nuestro sprite en los colores con mayor proporción (en este caso el verde). Lo coloreo y os lo dejo aquí explicandoos qué he hecho.

*pinta*

*repinta*

*pule las cosas*

¡Listo!




¿Qué? ¿No ves bien lo que he hecho? Bueno, pues doy el zoom.

*saca una lupa*





Ahora la pregunta del millón. ¿Porqué cambié los colores de una forma tan surrealista a la derecha? Pues para que veáis bien la diferencia de colores y lo que he hecho.


Explico. Como bien veis en la imagen, he cogido un 4º tono para hacer el brillo. Dicho va por la zona superior (obviamente). En esta ocasión no he necesitado el método de los puntitos, pero si lo que estáis haciendo véis que el brillo no va quedando bien, prueba a seguirlo. Al ser esta cosa bastante fina, se lo puse tocando el lineart, pero aconsejo que, si es un Fakemon redondo o acercándose a una superficie curva, hagáis el brillo con una distancia del lineart. Podéis poner a Gastly de ejemplo en ese caso.

El sombreado va siendo lo que dije, puntitos. Es una superficie plana salvo por los "pies", asi que no he necesitado hacer mucha sombra. Simplemente, lo que dije antes, haz una línea que se adapte al diseño y pinta por debajo. Yo he utilizado la técnica de los puntos para que se note la curvatura del diseño. En el lado no he utilizado los puntos dado que es una superficie plana y no quedaría bien. Por debajo, la sombra es completa porque la luz no llega.

El color más fuerte viene a ser el lineart, especialmente por la zona superior de nuestra izquierda. Yo suelo aplicar los puntos sobre todo por esa zona y también para zonas en las que el lineart se acabe (y así se difumina con el color del Fakemon), o bien para hacer menos oscura una parte en la que haya un grosor del lineart mayor al resto (como en la zona de la supuesta oreja). También pinté con este color la zona menos iluminada de la pinza. Son toques que se pueden perdonar si se usan con extremo cuidado (no hay que abusar de este color).

Con este ejemplo, me dispongo a pintar todo lo que queda del engendro.



Tachán. Vuelvo a daros el zoom para que lo veáis mejor.




Como observaréis, he seguido usando el verde para arreglar cosas. Con esto os digo que no por dar por acabada una zona o un color deba ser realmente así. Una zona está acabada cuando un sprite está acabado, no deis por acabado nada hasta que no acabéis de retocar todas las zonas.

El método efectuado para los demás colores ha sido el mismo, no hay más que decir. Añado que las sombras en todos los sprites Pokémon van hacia la misma dirección. Si queréis hacer los sprites de espaldas, las sombras van para la dirección contraria a las de los sprites de frente.

Supongo que tras decir eso podría darse por acabado este tutorial. Espero que no se os haya hecho muy pesado por los datos extra que he añadido, realmente no es tan complicado.

Practicad, seguid las instrucciones o probad nuevas técnicas (sin salirse del estilo del juego, claro).

« Última modificación: 05 de Enero de 2013, 12:37:46 am por Vicky »



Nsuprem

  • Gurú Pokémon
  • ****
  • Mensajes: 3021
  • Karma: +7/-1
  • // ♥ // ♦ // ♣ // ♠ //
    • Ver Perfil
    • Email
  • FC - 3DS: 3866-8202-8282

  • Total Badges: 30
    Badges: (View All)
    Usuario de Windows Profecía Usuario de Linux
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #1 en: 04 de Diciembre de 2012, 03:01:25 am »
Ya lo sabía todo porque lo sabía o porque me lo dijiste anteayer e.e
Podrías haber hecho un engendro menos feo, esa pinza parece estar diciendo 'mátame'.
(No es que esté mal, es que el/la pobre nació feo y con ganas de morir).
lol, pues muy buen tuto, creo que todo se entiende bien, y supongo que para quien no tenga ni idea es de gran ayuda. Desde luego, es muy diferente a hacer quimeras a paint e.e

¡Gran tuto, gracias!~
       <- ¡Oreo! :;3D
¡Tortitas de Muslito!~  //  Regalito de Ray :3  //  Regalo de cumple de Isma~
¡Visitad mi DA!  //  Regalo de poke-xavi.
¡Gracias a todos por las firmas! (todos los que me hayan hecho firmas :ph43r: (y los que no, pues gracias por el resto ::33))

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #2 en: 04 de Diciembre de 2012, 03:19:22 am »
Ya lo sabía todo porque lo sabía o porque me lo dijiste anteayer e.e
Podrías haber hecho un engendro menos feo, esa pinza parece estar diciendo 'mátame'.
(No es que esté mal, es que el/la pobre nació feo y con ganas de morir).
lol, pues muy buen tuto, creo que todo se entiende bien, y supongo que para quien no tenga ni idea es de gran ayuda. Desde luego, es muy diferente a hacer quimeras a paint e.e

¡Gran tuto, gracias!~

Justamente lo hice así porque no quise hacer un tutorial demasiado serio, y sí, lo hice de forma que se imaginase perfectamente diciendo "KILL ME PLEASE"  :ph43r:

Luispako

  • Usuario de honor
  • Pokéxperto Alpha
  • *
  • Mensajes: 6507
  • Karma: +33/-0
  • // Padre de PxP //
    • Ver Perfil
    • DA
    • Email
  • FC - 3DS: 0516-7250-7318

  • Total Badges: 55
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #3 en: 04 de Diciembre de 2012, 05:53:42 am »
Con lo manco que soy no creo que lo haga, pero buen tuto c:

Raykon

  • Sabio Pokémon
  • ***
  • Mensajes: 2669
  • Karma: +6/-0
    • Ver Perfil
    • Email

  • Total Badges: 25
    Badges: (View All)
    Súper combo Combo Alborotador
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #4 en: 09 de Diciembre de 2012, 01:39:05 am »
Buen aporte ^^

IsmaPkm

  • Sabio Pokémon
  • ***
  • Mensajes: 2652
  • Karma: +4/-0
    • Ver Perfil
    • https://ismapkm.deviantart.com/art/Open-Commission-information-696981170

  • Total Badges: 43
    Badges: (View All)
    Décimo aniversario Noveno aniversario Nivel 7
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #5 en: 10 de Diciembre de 2012, 06:51:55 am »
Lo que no entiendo es el paso para hacer más pixelado. :I

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #6 en: 10 de Diciembre de 2012, 06:52:37 am »
Lo que no entiendo es el paso para hacer más pixelado. :I
... cual? :ph43r:

IsmaPkm

  • Sabio Pokémon
  • ***
  • Mensajes: 2652
  • Karma: +4/-0
    • Ver Perfil
    • https://ismapkm.deviantart.com/art/Open-Commission-information-696981170

  • Total Badges: 43
    Badges: (View All)
    Décimo aniversario Noveno aniversario Nivel 7
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #7 en: 10 de Diciembre de 2012, 06:53:59 am »
... cual? :ph43r:


Cuando haces que esté pixelado.

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #8 en: 10 de Diciembre de 2012, 07:03:14 am »


Cuando haces que esté pixelado.
Haces capa nueva y empiezas a repasar el boceto con el Lápiz Binario.

IsmaPkm

  • Sabio Pokémon
  • ***
  • Mensajes: 2652
  • Karma: +4/-0
    • Ver Perfil
    • https://ismapkm.deviantart.com/art/Open-Commission-information-696981170

  • Total Badges: 43
    Badges: (View All)
    Décimo aniversario Noveno aniversario Nivel 7
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #9 en: 10 de Diciembre de 2012, 07:05:10 am »
Haces capa nueva y empiezas a repasar el boceto con el Lápiz Binario.
¿Nada más? Como en SAI no suele haber esos pixelacos... :ph43r:

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #10 en: 10 de Diciembre de 2012, 07:10:57 am »
¿Nada más? Como en SAI no suele haber esos pixelacos... :ph43r:
A ver.



Esa es la herramienta del Lápiz Binario. Ponla al tamaño 1 y listo.

IsmaPkm

  • Sabio Pokémon
  • ***
  • Mensajes: 2652
  • Karma: +4/-0
    • Ver Perfil
    • https://ismapkm.deviantart.com/art/Open-Commission-information-696981170

  • Total Badges: 43
    Badges: (View All)
    Décimo aniversario Noveno aniversario Nivel 7
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #11 en: 10 de Diciembre de 2012, 07:45:40 am »
A ver.



Esa es la herramienta del Lápiz Binario. Ponla al tamaño 1 y listo.
:o

Ah, muchas gracias. :)

Vicky

  • Usuario de honor
  • Pokéxperto Alpha
  • *
  • Mensajes: 6017
  • Karma: +50/-0
  • | ♥ | ♠ | ♣ | ♦ |
    • Ver Perfil

  • Total Badges: 43
    Badges: (View All)
    Nivel 7 Nivel 6 Nivel 5
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #12 en: 05 de Enero de 2013, 12:28:15 am »
Añadido al Index.

MerúM

  • Usuario de honor
  • Pokéxperto Omega
  • *
  • Mensajes: 10129
  • Karma: +39/-0
  • El Moái cartero de Mayla
    • Ver Perfil
    • deviantART de MerúM
  • FC - 3DS: 3007-8193-4112

  • Total Badges: 59
    Badges: (View All)
    Décimo aniversario Noveno aniversario Octavo aniversario
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #13 en: 05 de Enero de 2013, 12:35:55 am »
Añadido al Index.
Edítame los sprites de abajo a estos, anda, que están caidos :ph43r:


Vicky

  • Usuario de honor
  • Pokéxperto Alpha
  • *
  • Mensajes: 6017
  • Karma: +50/-0
  • | ♥ | ♠ | ♣ | ♦ |
    • Ver Perfil

  • Total Badges: 43
    Badges: (View All)
    Nivel 7 Nivel 6 Nivel 5
Re:Hacer sprites de Fakemon parecidos al estilo de los juegos Pokémon
« Respuesta #14 en: 05 de Enero de 2013, 12:37:56 am »
Edítame los sprites de abajo a estos, anda, que están caidos :ph43r:

Hecho.