Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.

[Tutorial] Claves para entender el selout

Ver el tema anterior Ver el tema siguiente Ir abajo

[Tutorial] Claves para entender el selout

Mensaje por Wecoc el 2018-01-05, 23:15

Hoy entre varios makeros del foro hemos tenido una conversación sobre selout y he querido recuperar alguna de las cosas claves que se han comentado.
El selout (selective outline) es una técnica de pixelart. Antes que nada os aviso que es de lo más complicado de perfeccionar del pixelart, es difícil de hacer y muchas veces lo mejor es simplemente no usarlo.

Para poneros al corriente os pongo la definición de selout del Diccionario del RPG maker:

Método en pixelart que consiste en hacer que la línea de contorno del sprite no tenga siempre el mismo color sino que según la proximidad a la luz tenga un color u otro. En pocos casos ese efecto queda bien, hay que saber aplicarlo muy bien y además mientras que un contorno normal queda bien con cualquier color de fondo, una línea con selout muchas veces quedará bien con fondo claro y no con fondo oscuro. Es por esto que muchos pixelartistas recomiendan no hacer nunca selout.

En resumen, el selout es intentar representar los focos de luz y/o la debilidad (puntos ténues) de la línea mediante cambio de color en la misma. Es como un antialias aplicado en la propia línea de contorno del pixelart.

Selout en RPG maker

En el RTP hay poco selout propiamente dicho, lo que sí hay son outlines de distinto color según la zona general, y puntos donde simplemente no hay outline.

En el RTP del XP, el sitio donde vemos selout de modo más evidente es en los iconos. Hay que decir que ese selout es bastante simple y a veces no está demasiado bien aplicado.
[pixel]https://2img.net/h/s13.postimg.cc/i9n2gyhlz/021-_Potion01.png[/pixel]

También puedes ver selout en algunos tiles y charas de modo mucho más puntual.

La idea principal del selout es suavizar las líneas para que los sprites queden más mezclados con el fondo, y además eso se hace siguiendo los brillos y sombras del propio sprite (haciendo la línea de la parte de brillo más clara creas ese efecto "suave" del sprite respecto el fondo).

Eso tiene el gran inconveniente de que hace el sprite mucho más dependiente de lo que tiene de fondo, haciendo que quede bien en fondos claros pero no oscuros o al revés, mientras que con línea de color fijo (sin selout) esas diferencias no son importantes y suele quedar bien con cualquier fondo. Por eso muchos pixelartistas recomiendan simplemente no usar selout, o al menos usarlo muy poco y de modo muy controlado, y para que la línea no quede muy brusca usar antialias interno:


Sacado del tutorial de antialias.

Otra alternativa es no usar outline en absoluto, con lo que se logra un pixelart de estilo más de "bloques" y que igualmente queda bien mezclado con el fondo.
Sin outline, el antialias que apliques a los bordes a veces puede lograr un efecto como el de una espécie de selout, pero se sigue notando que se trata de antialias. Normalmente ese será de los más restrictivos en cuanto al color de fondo, quedando bien solo en unos pocos.



Cómo aplicar selout

El selout se aplica en líneas de pixelarts cuyo outline delimita el propio sprite. Si hablamos de un pixelart con fondo incluido y en el que salen figuras en las que se les aplicó antialias tanto interno como externo, igualmente a eso no se le puede llamar selout propiamente dicho.

Para aplicar selout hay que seguir la luz en toda la parte donde la línea quede afectada. También hay que evitar aplicar demasiado.

[pixel]https://2img.net/h/s13.postimg.cc/6ykesj5l3/selout01.png[/pixel]
En este ejemplo (cortesía de Orochii) se ve un caracol al que llamaremos Gary con versión sin selout, con selout mal aplicado y selout bien aplicado en cuanto a luz se refiere.

Tampoco hace falta hacer muchos cambios de tono en la línea, con unos pocos es suficiente.

[pixel]https://2img.net/h/s13.postimg.cc/erb2kkw5j/selout02.png[/pixel]
El primero tiene 10 cambios de tono en la línea, mientras que el segundo solo 4.

Cómo comprobar la calidad de un selout

Como ya se ha comentado antes uno de los problemas del selout si no se va con cuidado es que queda bien en fondos claros y no oscuros, o al revés.
El mejor modo de hacer pixelart es aplicarlo sobre fondo gris neutro (128, 128, 128) o similar. Luego si se ha aplicar selout se comprueba sobre fondos claros y oscuros si el sprite se ve bien.

En el ejemplo no se ve demasiado bien, se ven como bloques mal hechos o en el peor de los casos, la línea parece recortada (comparad con el caso sin selout de la izquierda).

[pixel]https://2img.net/h/s13.postimg.cc/9fw5zws3b/selout03.png[/pixel]

Cuanto mejor hecho esté el selout, mejor quedará en fondos claros/oscuros.
Por lo tanto la clave para que el sprite tenga un buen selout y quede bien sobre cualquier fondo, es pixelarlo en gris neutro y luego comprobarlo en claro y oscuro y hacer los retoques con esos. También, como todo, es cuestión de práctica.
Nota: Fijaos que no uso totalmente negro... ahí hasta el selout bueno tiende a parecer malo. Uno en plan el fondo del foro es lo ideal.

Eso es todo, ojalá os ayude.
avatar
Wecoc
Administrador
Administrador



Créditos 12234

Gracias : 638

Volver arriba Ir abajo

Re: [Tutorial] Claves para entender el selout

Mensaje por xXIsrael0499Xx el 2018-01-06, 11:54

Esto me hace pensar que si le metes Selout en tu proyecto, pero en plan bien, luego no te pueden ripiar los recursos porque se va a ver mal en fondos oscuros xDD, que empaquetadores ni que nada Selout xD.

Pero bueno toda esta trifulca se armo por mi, así que bueno yo me tome mi tiempo de hacer una simulación de concha de estas de caracol e intentar hacer el selout haber si pillo este mundillo.

Le había hecho el cuerpo, pero quedo muy feo, así que se lo mutile Silva-style:

[pixel]https://media.discordapp.net/attachments/367111137931821056/399167047453376512/image.png[/pixel]

Se ve un poco de Bading por allí... pero meh; se supone que es un caparazón, pero luego de verlo un rato mi pareidolia me dice que es una cara, de un fantasma regordete... Ya basta david (?).

Solo use 3 cambios, pero ahora mi pregunto como seria el bicho este que hice pero con outlines de distinto color según la zona general, y puntos donde simplemente no hay outline. Wecoc otro tuto :3 xD "Como hacer Selerrepegue".

Pero bueno llegados a una conclusión es mejor dejar el Selout para pruebas que para cosas que vaya a utilizar xD.
avatar
xXIsrael0499Xx
Veterano
Veterano

0/3

Créditos 2046

Gracias : 112

Volver arriba Ir abajo

Re: [Tutorial] Claves para entender el selout

Mensaje por Wecoc el 2018-01-06, 17:20

Si vas mirando referencias (por ejemplo al hacer charas, mirar otros del RTP) aunque haya selout en algunos puntos, no es tan liado como parece hacerlo bien. Es más liado a la hora de hacerlo sin tomar referencias. En tu caso el selout no está demasiado bien aplicado: has tenido en cuenta lo de pocos colores (solo 3) pero no el foco de luz ni los puntos de cambio de color.

Además no es muy buen ejemplo porque también se da bastante banding por cuestiones de aplicación del antialias, y en el sprite en sí el foco de luz no es muy evidente... Este es uno de los casos en los que recomendaría no hacer selout.

[pixel]https://2img.net/h/s13.postimg.cc/m4qx35hs7/banding_isra.png[/pixel]

Fíjate en que algo que hice fue reusar uno de los colores internos del sprite para aplicar el selout claro. Eso es bastante habitual.
avatar
Wecoc
Administrador
Administrador



Créditos 12234

Gracias : 638

Volver arriba Ir abajo

Re: [Tutorial] Claves para entender el selout

Mensaje por Vala Arumi el 2018-01-06, 19:36

Yey~

No creí que lo fueras a hacer, pero estoy muy contenta. ¡Gracias, Wecoc!

Con mi nivel kinder garden apenas estoy trabajando linearts negras, pero seguramente si sigo practicando llegaré algún día a querer hacer selout. Entonces, volveré sobre este tutorial.

Tenés mi voto positivo (me siento como en un programa de talentos diciendo eso, jaja).

Saludos,
Vala.
avatar
Vala Arumi
Iniciado
Iniciado

0/3

Créditos 38

Gracias : 13

Volver arriba Ir abajo

Re: [Tutorial] Claves para entender el selout

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.