Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.
Conectarse

Recuperar mi contraseña

Temas importantes
----------------------------------------
Páginas con recursos RPG Maker
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
Afiliados
Estadísticas
Tenemos 3819 miembros registrados.
El último usuario registrado es MaikelNox.

Nuestros miembros han publicado un total de 86273 mensajes en 12298 argumentos.

[Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Ver el tema anterior Ver el tema siguiente Ir abajo

¿Qué estilo de los citados te gusta más?

33% 33% 
[ 5 ]
13% 13% 
[ 2 ]
0% 0% 
[ 0 ]
13% 13% 
[ 2 ]
40% 40% 
[ 6 ]
 
Votos Totales : 15

[Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por Wecoc el 2014-11-12, 22:40

[TUTORIAL] Estilos de pixelart diversos


Voy a haceros una master class de esas que si fueran un cursillo valdrían una pasta pero como sois vosotros pues os lo hago gratis, jejejeje.

Hay muchos tipos de pixelart. En éste tutorial os explicaré qué tener en cuenta al hacer algunos de ellos tomando de ejemplo a Alexis. Procuré poner de ejemplo 5 estilos de pixelart muy distintos, si alguien tiene alguna petición de otro que lo diga. También pongo pros y contras por si no os decantáis por alguno en concreto.

Éstos son los estilos usados:


ESTILO 1 - RTP (XP)



Link tinypic

Pros:
- Se ve bastante realista y detallado
- Su paleta ya viene definida, y es bastante completa (raramente habrá que ampliarla)
- Atractivo visualmente
- Usa selout (colores de la línea distintos según su interior) por lo que queda bien con el fondo

Contras:
- Difícil de hacer por la gran cantidad de detalles y antialias
- Solo queda bien con tilesets bien detallados, por lo tanto también difíciles de hacer
- Tiene mucho antialias por lo que es fácil hacer banding o pillowshading sin querer
- Resalta poco frente al fondo por lo que es fácil "perderlo de vista" (hay quien lo prefiere y hay quien no)
- Sobre-usado en RPG maker

Éste estilo gusta bastante, aunque si precisamente lo que buscáis es hacer un estilo propio, cuanto más alejado esté de éste, que es el que hay por defecto, mejor.

El proceso a seguir al usar éste, es limitarse a su paleta de entrada, y no solo a ella sino a sus "escalas", que pocas veces se rompen. Para entendernos, si nos fijamos en el naranja del pelo y el de la armadura, son totalmente distintos y solo un color coincide en ámbos. Esa separación de las rampas de colores entre las distintas partes tiene una gran ventaja, que es que luego recolorear por partes es más sencillo, pero un inconveniente óbvio, que es el aumento de colores en la paleta.

El proceso a seguir para hacer un pixelart de éste estilo es comenzar por la línea externa (outline), y no limitarla al exterior sinó también al interior para marcar ya los detalles que como ya dije son elevados. El flechón del pelo respecto a todo el pelo en sí, sería un ejemplo de ello.



Una vez hecho el outline hay que aplicar antialias del color más cercano al outline hasta el menos cercano, evitando el banding. No se tiene mucho en cuenta el foco de luz, sinó que quede bien el antialias (he explicado cómo evitar banding en tutoriales anteriores), pero una manera intuitiva de evitar el pillowshading es aplicando antialias más grueso en la parte más lejana de la luz que en la más cercana. Añadir los detalles de modo que quede bien es cuestión de prueba y error.

El antialias puede "sobrepasar" la línea, haciendo el outline aún más ténue (más selout) para que quede todo con un aspecto más suave. También se puede usar un poco de dithering si es necesario.



Luego los retoques finales son poner tanto los colores más claros, como los más oscuros, pero muy poco, solo en zonas más puntuales para dar un poco más de profundidad. Esa es una particularidad de éste estilo; los colores más claros y los más oscuros quedan poco esparcidos por el sprite.



Link tinypic

ESTILO 2 - "LA LUZ ES LO IMPORTANTE"



Link tinypic

Pros:
- Es simpático (atractivo visualmente) puesto que da un efecto tridimensional
- No requiere tilesets muy detallados, de hecho queda mejor con tilesets simples
- No requiere una paleta muy ámplia
- No está demasiado usado así que es una alternativa original al estilo por defecto
- Al no haber outline, es "selout" en la máxima expresión, de modo que requiere poco antialias (y por lo tanto habrá pocos problemas de pillowshading y banding)
- Queda bien en fondos casi negros

Contras:
- No se ve muy realista
- No tiene outline por lo que hacer antialias es menos intuitivo
- En fondos muy claros el antialias sin línea queda demasiado resaltado y se ve mal
- En zonas en las que el foco de luz no se parece nada al típico de día (mazmorras en las que llevas una vela, cuevas de magma en las que la luz viene de debajo...) te ves obligado a hacer otro sprite del mismo personaje para que cuadre

Éste estilo básicamente dice "Déjate de detalles y céntrate a la luz para hacer la forma, que ya es suficiente", lo que en definitiva se traduce a un nivel de complejidad menor.

El proceso a seguir más recomendado es hacer el sprite por "bloques", el cual es un planteamiento bastante distinto al lineart. También es el más fácil de aplicar si partes de un vectorial reducido al que quieres indexar y convertir en pixelart, puesto que al reducir imágenes grandes a tamaño de pixelart quedan sin outline.


(sprite por bloques --> pixelart)
Link tinypic

El paso siguiente es fijar un foco de luz bien claro, normalmente desde totalmente arriba para así tener el sprite lo más simétrico posible (lo cual lo hace más simple de animar)
Luego se empieza a poner antialias, discreto porque no hay línea así que no es necesario suavizar mucho las formas, y se dejan en sombra (color prácticamente plano) las partes que más lo convengan (en éste caso los brazos, las piernas y la cinta de la cabeza entre otros).


(Las flechas indican algunos de los muchos puntos con antialias discreto)
Link tinypic

En las partes más oscuras, normalmente las de más abajo puesto que están más alejadas del foco de luz, se pone con un color propio una outline, algo así como una "outline discontínua o puntual", sin antialias, solo para dar más profundidad. Es opcional pero lo recomiendo mucho, ya que una diferencia de luminosidad más alta entre los colores proporciona una atractividad visual más alta.

El color más claro suele ocupar gran parte de la forma que ocupa, tal y como representé. Aún así hay excepciones, y eso se puede ver en el pelo en el que le hice una línea de amarillo claro para resaltar el detalle en esa zona concreta. Lo más habitual hubiera sido no aplicarlo, podéis probar a quitar esa línea y mirar cómo el resultado sigue siendo el esperado.

ESTILO 3 - EARTHBOUND



Link tinypic

Pros:
- El más simple y el que usa tilesets más simples
- Casi no quiere técnica, es prácticamente lineart coloreado
- Muy pocos colores en la paleta
- En cierto modo recuerda a juegos más clásicos, así que tiene un plus de nostalgia RPGera

Contras:
- Muy poco nivel de detallado, se ve muy plano y no logras la misma sensación de profesionalidad que con otros
- No es realista, de hecho es prácticamente se puede considerar simbolismo
- Aún teniendo un outline muy marcado a veces no se diferencia del fondo puesto que éste también lo tendrá
- Usa colores muy vivos por lo que puede cansar la vista del jugador
- Al no haber antialias y una línea tan marcada, es fácil que ésta se vea entrecortada según como (véase la parte más superior de la cabeza por ejemplo)
- No queda bien con fondos muy oscuros

Éste estilo, de juegos como Earthbound o Mother, es ideal para los que no quieren complicarse mucho la vida con las dificultades técnicas del pixelart

El proceso es intuitivo y no haría falta ni que lo explicara xD Se parte del lineart, se colorea por dentro y se añaden algunos detalles "monocolorados", como el cinturón, las cosas naranjas, la bandana... Se puede omitir ese outline en algunas partes concretas, como hice con la parte de arriba de las botas o en la separación entre torso y brazo para dar más continuidad al pixelart, pero lo que es externamente, la outline nunca queda omitida. Para emfatizar aún más la diferencia entre el sprite y su entorno, se le suele poner una sombra elíptica debajo.


Link tinypic

ESTILO 4 - PROYECTO SERIO (Y AZULADO)



Link tinypic

Pros:
- Sus colores ténues y apagados lo hacen buena opción para un proyecto con una temática seria o también romántica
- No daña mucho la vista al jugador, puede jugar varias horas sin cansarse de contemplar el proyecto
- Tiene un nivel de detallado intermedio, ni muy difícil de aplicar ni muy soso para el jugador
- Al tener los colores cercanos en cuanto a luminosidad, uno se puede permitir hacer más banding sin que se note en el resultado final

Contras:
- Tanto la paleta como la poca linealidad entre los colores requieren ser creativo a la hora de diseñar las rampas y aplicar los píxeles para que quede bien, por lo que se necesita experiéncia para lograr un resultado aceptable
- Solo queda bien con tilesets de paleta y estilo muy parecidos a los del mismo sprite; es un estilo bastante restrictivo
- A algunos jugadores no les gusta tanto como otros estilos, puesto que no es muy habitual ni llamativo
- Al usar colores cercanos, es más fácil que en conjunto se vea muy plano, sin volumen
- No en todos los mapas quedará igual de bien el efecto azulado y morado, por lo que posiblemente se requiera un sprite con colores alternativos no tan fríos
- No queda bien con fondos más oscuros que el color principal del outline, y con fondos más saturados que el mismo sprite, éste se verá aún más gris de lo habitual por efecto óptico cromado (percepción de los colores respecto su entorno)

De hecho éste estilo es como el del RTP en muchos sentidos; hay selout y bastante antialias, un detallado alto (aunque no tanto en general), colores un tanto redundantes... Por lo que se hará de forma muy similar. Lo que varía respecto al RTP es que está hecho de un estilo más como el de los tilesets que el de los charas, por lo que no resaltará tanto con el fondo. Eso implica cierto uso de dithering, como se puede ver en el pelo y en las hombreras, un antialias un tanto especial para suplir esos cambios de la tonalidad en la paleta.

En algunas partes no acabas de quedar nunca del todo contento en cómo quedó pero eres incapaz de mejorarlo con los colores actuales. Por ejemplo en mi caso, es poco intuitivo que el pelo es naranja, podría ser considerado marrón como la armadura ya que usa los mismos colores en la misma proporción más o menos. Tampoco queda muy clara la separación entre las muñequeras y las manos, ni el cinturón respecto la armadura.

Está bien ser original a la hora de aplicar los efectos de degradado en vez de tendir a un dithering demasiado regular. Eso es lo que hice para la textura del pelo. Como los colores se parecen, será necesario recurrir a diferentes modos, uno para hacer cada textura para que sean más fácilmente identificables.


(dithering regular contra texturizado customizado)
Link tinypic

Mi recomendación personal es no usar éste estilo excepto si estáis muy seguros de que es lo que vuestro proyecto necesita, porque es muy fácil que no quede bien.

ESTILO 5 - CHARA RESALTADO



Link tinypic

Pros:
- Se ve profesional debido a su paleta dinámica y poco lineal (aunque en realidad no muy compleja) y su alto nivel de detallado
- Es el que más resalta con el tileset de fondo debido a su outline sin selout
- Queda bien con varios tipos de tileset distinto. Usar un tileset no tan marcado de líneas y saturación hará que el jugador no se canse de ver tanta saturación
- Queda bien con fondos de prácticamente cualquier color

Contras:
- Difícil de hacer por la gran cantidad de detalles y antialias
- Tiene mucho antialias por lo que es fácil hacer banding o pillowshading sin querer, además éstos se ven mucho (por ejemplo me quedó banding en los bordes inferiores de la cara)
- Puesto que todos los colores son muy saturados, es difícil hacer resaltar uno respecto los demás en caso que se quiera (por ejemplo el azul de los ojos)

El modo de hacer el antialias es el mismo que en el RTP pero más random a la hora de situar los píxeles. El foco de luz casi no se tiene en cuenta porque no vale la pena para dar volumen con un estilo así en el que ya lo tendrá de sobras gracias a ese antialias múltiple. Un truco es intentar evitar las partes planas, pero sin recurrir al dithering para evitarlas, sinó a un degradado puntual de los colores, como se puede ver a lo largo de la armadura. Si nos fijamos en los pantalones, la mayoría de estilos vistos los tienen con un color monocromo plano por el hecho de estar en plena sombra, pero en éste se resalta evitando eso como ya he dicho. Igual con la cinta de la cabeza. Esa "tontería" augmenta la sensación de detallado de una forma poco laboriosa.

Recomiendo usar colores cercanos entre los claros y entre los oscuros, y más diferencia en medio para dar una separación de luminosidad mayor. También recomiendo usar en algunas partes el color más claro de forma muy puntual como se hace en el caso del RTP, para que me entendáis, lo que hice con el amarillo en la parte alta del pelo.

Finalmente quiero daros la recomendación de que si es por practicar no os quedéis con solo un estilo sinó que lo intentéis con todos, así aprenderéis pixelart más ámpliamente, pero si es por un proyecto obviamente quedaos solo con un único estilo.


Última edición por Wecoc el 2015-01-14, 08:51, editado 1 vez
avatar
Wecoc
Administrador
Administrador



Créditos 12104

Gracias : 522

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por xX Kyubey el 2014-11-13, 01:08

El estilo del RTP es muy, muy raro. Podría jurar que eso no es pixelart si no usara dithering ocasional (al menos en las tilesets) y trazas de selouts, pillowshading y antialias. Es una mezcla muy extraña de todo junto, me alegra que al menos tenga una idea de por dónde empezar para imitar ese estilo, muchas gracias por éste tutorial, wecoc.
avatar
xX Kyubey
Principiante
Principiante

0/3

Créditos 266

Gracias : 54

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por comgerde05 el 2014-11-13, 05:34

Wecoc, estoy seguro que subiste las imagenes por postimg ¿verdad? porque por desgracia no puedo ver ninguna imagen.

Si no es mucha molestia las podrias subir a un servidor como imgur o tinypic? Asi podria disfrutar más de el tutorial.
avatar
comgerde05
Principiante
Principiante

0/3

Créditos 653

Gracias : 32

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por Marina el 2014-11-13, 12:46

Muy buen tutorial, me ha gustado mucho cómo has explicado las distintas maneras de hacer un mismo personaje. Creo que de cara a plantearse cómo será el estilo gráfico de nuestros juegos, es muy importante pensar cuál de estos estilos nos conviene usar para no terminar frustrándote en un desarrollo interminable y más por la falta de experiencia en ciertos campos.

PD= xX Kyubey el estilo del RTP sí es pixelart, en toda regla.

Marina
Principiante
Principiante

0/3

Créditos 326

Gracias : 36

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por comgerde05 el 2015-01-14, 03:55

Hola wecoc, Veo que te gusta ignorar los mensajes de los demas (?)

Veras, estoy empezando aprender las tecnicas, estilos, formas y colores del pixel-art, y cualquier tutorial/consejo/guia/manual me sirve, pero el tuyo tiene un fallo fatal (para mí) y es postimage. Ver imagen.

Mi pregunta seria, ¿Puedes y serias tan amable de resubir las imagenes? Realmente lo agradeceria muchisimo.

Saludos y perdón por molestar.
avatar
comgerde05
Principiante
Principiante

0/3

Créditos 653

Gracias : 32

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por Wecoc el 2015-01-14, 08:53

Ya he puesto links alternativos a todos los que necesitas.
No lo había hecho porque creí que sería un problema temporal... A mí (y a la mayoría) también me falló postimage durante un tiempo pero luego volví a verlo.

En fin, saludos. Espero que te sirva el tutorial.
avatar
Wecoc
Administrador
Administrador



Créditos 12104

Gracias : 522

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por luistop12 el 2015-01-14, 16:12

Que que precioso, ¿Puedes creer que tardo 30 mins por lado del chara xDDDD (izquierda, derecha, abajo, arriba). en fin muchas gracias por el tuto. me ha gustado mucho el ultimo estilo, hice un edit de alex cambiandole el sexo para que sea más sexy xD.

avatar
luistop12
Veterano
Veterano

0/3

Créditos 770

Gracias : 30

Volver arriba Ir abajo

Re: [Tutorial] Estilos de pixelart diversos (aplicados a Alexis)

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.