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] Aprendiendo pixelart desde la base

Ver el tema anterior Ver el tema siguiente Ir abajo

[Tutorial] Aprendiendo pixelart desde la base

Mensaje por Wecoc el 2011-12-25, 22:05

Espero que este tutorial sirva a los que quieren hacer pixelart, para mejorar desde un principio.
El él explicaré las bases del pixelart sin ir demasiado lejos, espero no extenderme mucho, aunque es bastante probable que así sea.

1) INTRODUCCIÓN DE HERRAMIENTAS, LAS TRES CAPAS Y LA PALETA

Para empezar quiero especificar que cada artista tiene sus herramientas y programas que le van mejor para hacer pixelart. Yo personalmente uso el programa Corel Paint Shop Pro y otro muy conocido es el MS-Paint, pero no tenéis por qué usar esos; el tutorial no lo centraré en ningún programa concreto.

Eso sí, empezaré hablando de las herramientas de los programas que más suele usar un pixelartista. Son los siguientes:

Lápiz (Pencil) o Pinzel (Paint Brush) según el programa, Goma de borrar (Eraser), Cuentagotas (Eyedropper o Dropper Tool), Bote de pintura (Paint-can / Flood Fill Tool) y Lupa (Zoom).

Fijaos que entre ellos no constan efectos que pueda hacer el programa, como ya sea difuminar, biseles, filtros, efectos de pinzel raros, etc. ya que como comprenderéis eso no es considerado pixelart. Indexar imágenes o tomar una imagen directamente como referencia, tampoco.

Algunos pixelartistas usan también estas otras herramientas: la Selección, las Líneas y la de Cambiar Color (Color Replacer). Los recomiendo, en algunos casos son útiles.

En cuanto a capas es muy relativo. Muchos artistas no las usan, de hecho no son necesarias pero yo hago algo que recomiendo bastante: creo una primera capa con lineart (el lineart es hacer una espécie de esbozo que se suele hacer para poder tener una referencia con la que trabajar). Luego encima, el coloreado simple en una nueva capa y con todos los colores de la paleta en un lado, y en otra las luces, sombras y detalles. (Si se detalla por partes puede variar el número de capas). Esas son las tres capas principales. El fondo si se le quiere añadir, irá debajo del todo en una cuarta capa.

Las tres capas mencionadas:


La paleta siempre tiene que ser reducida, y la imagen normalmente será de poco tamaño. Para la paleta en concreto, no hay norma general (como en todo, el pixelart es un arte muy libre) aunque recomiendo algunas cosas a tener en cuenta.
http://www.mundo-maker.com/t4595-vx-xppaleta-de-colores-de-427008#38612
Ya hablé de ello aquí pero lo resumo ya que estamos:
- Que los colores estén atados entre sí, como una red (véase los ejemplos del link).
- Que no haya colores puros, incluídos blanco y negro puros.
- El negro totalmente puro (0, 0, 0) es el menos recomendado por temas de transparencia.
- En vez de negro, un color oscuro liloso suele quedar bien tanto para pixelart de colores fríos como de colores calientes.
- Que entre distintos colores de un mismo grupo, es bueno no solo aumentar la luminosidad sinó también variar los matices como se indica en la imagen de abajo.


(no tiene por qué seguirse al pie de la letra)

- Como punto extra para tu obra, aunque sean muy fuertes, si queréis hacer un favor a algunos xD se pueden usar colores cercanos a los que un daltónico puede distingir mejor que los otros. Según un estudio aún en proceso, parece ser que son estos:



- No hay que guardar la imagen como jpg porque se carga la paleta y la imagen en general al perder calidad. El más recomendado es el png, como ya sabréis.


2) USO DE LAS HERRAMIENTAS PRINCIPALES

- Lápiz o Pinzel


La mayoría de pixelart está hecho con esta herramienta. La función de ésta es poner píxeles individualmente. Con Photoshop difumina por lo que da problemas. Así pues, hay que trabajar con esta herramienta con el comando "Antialias" desactivado para que pinte de un solo color. Principalmente se usará en tamaño 1x aunque dependiendo de la zona a pintar o del trazo que se quiera conseguir, se puede cambiar a 2x, 3x ... En ese caso, la dureza del trazo (hardness) tiene que estar al 100%. Una densidad (density) baja hace que se escampen los píxeles "aleatoriamente" al pintar, como en el efecto aerógrafo del paint, cosa que en general no interesará, por lo que la densidad tiene que estar al máximo 100%. Si hay para indicar también el esperor, indica el ancho de la línea respecto a la altura. Normalmente, se usará a un 100% (redondo), por lo que la rotación de éste no tiene importancia. La opacidad en general será del 100%.
El lapiz pinta con el color seccionado. Pero en muchos programas, hay una opción de segundo color, con el que pintarás con el otro botón del ratón. Eso es muy recomendado para ir autocorregiéndose contínuamente hasta encontrar la forma deseada, y es mucho más útil que la goma. Como última combinación; pinzel y "Deshacer" (normalmente Control + Z). Yo cuando pixelo hago esa combinación contínuamente.

- Goma de borrar

Evidentemente, se usará cuando te equivoques. Es como pintar con el segundo color, aunque dependiendo de en qué capa estés trabajando, borrará todos los colores y lo dejará transparente, por lo que recomiendo más usar el pincel directamente e ir corrigiendo las cosas siempre por encima. Como es una paleta con pocos colores y sin opacidades, eso hace totalmente factible el ir corrigiendo encima sin perder calidad de color o de imagen. Las opciones de la goma deberán ser similares a las del lápiz/pincel: 100% opacidad, no anti-alias, etc.

- Cuentagotas

Para ir de la paleta al dibujo tendrás que usar esta aplicación contínuamente. No tiene mucho secreto, en general cuando clickeas encima del color que desees de la paleta, con un botón del ratón, ése color pasa a ser con el que pintarás con ése botón. Además en la mayoría de los programas de dibujo, el cuentagotas tiene un atajo; pulsando un botón del teclado se selecciona automáticamente y así no hay que ir a buscarlo cada vez en los iconos de herramientas.

- Bote de pintura

El bote de pintura rellena un color concreto de una área cerrada por otro color. Hacer con el pinzel grandes extensiones de color monótono sería una pérdida de tiempo, por lo que es mejor usar ésa aplicación. Normalmente, al tener hecho el lineart, se colorea cada una de las partes con el bote, y luego se hacen los detalles con el lápiz, combinado igualmente con el bote de pintura.

- Lupa o Zoom

Al trabajar a nivel de píxel, hacerlo a escala 100% sería difícil por lo que se hacen cambios de zoom contínuamente, según el detalle de lo que estés pixelando. La rueda del ratón suele servir para eso, sinó, con la misma herramienta lupa y con un click.

Ahora las herramientas más secundarias:
- Selección

Seleccionar una parte y copiarla cual tile, suele ser útil si el pixelart por ejemplo es un Mockup. Algunos pixelartistas usan esta herramienta de copiar y pegar mucho fuera de los Mockups, mientra que otros no tanto. Según parece, los grandes pixelartistas no suelen usarlo.

- Líneas

El pixelart isométrico, por ejemplo suele ir en base a líneas/tiles como una rejilla. Pintar cosas rectas con el pinzel directamente requiere buena puntería.

- Cambiar color

Es similar al bote de pintura, pero este cambia todos los colores iguales dentro de la selección por otro. Los dos colores del pincel son los que especifican qué color es remplazado y qué color lo remplaza. No es muy usual pero puede llegar a ser útil en algunos casos. Si por ejemplo quieres copiar un tile, pero en uno quieres que se usen los colores claros de la paleta y en otro los oscuros, solo hay que copiar y pegar al lado, seleccionar uno de los dos e ir cambiando.


3) DICHO ESTO, PIXELEMOS YA, ¿NO?

Con las herramientas explicadas presentes, toca empezar a pixelar. No puedo enseñar de estilos, porque cada uno tiene el suyo, pero sí de técnicas, más o menos.

((( Inciso: Cuanto más entrenes con los ojos más sabrás con las manos. Mirando pixelarts ya hechos de gente que sepa del tema, analizándolos, se aprende más que poniéndose uno mismo a intentarlo, sobretodo al principio. )))

Vamos a empezar por la creación de un lienzo en blanco, para trabajar en él. (Archivo - Nuevo). Elegiremos los píxeles que queramos. Si la duda es si ése lienzo es demasiado pequeño/grande una vez empezéis a pixelar deberíais notarlo comparativamente. Sinó, como referencia, ya sabréis que el XP por ejemplo hace 640x480 píxeles, el 2k creo que son la mitad, 320x240, y el VX 544x416. Una nota importante es que en la mayoría de gráficos, por ejemplo del mundo de los videojuegos, los lienzos suelen ir en poténcias de 2. Recomiendo empezar de buen principio con algo muy pequeño para acostumbrarse al trabajo a nivel de píxel... 16x16 por ejemplo. Luego, como saldrá una cosa pequeña en la pantalla, hacemos uso de la lupa. Luego, por ejemplo, podemos abrir una referencia, y se empieza a dibujar el lineart. Cogiendo una imagen prestada de don Google Images, hay que decir que habrá que adaptarse en todo momento a que ir a nivel de píxel es como usar una rajilla; si bien sin esa limitación se haría una línea fina, en este caso quedará restringida. Aún así es cuestion de práctica adaptar las formas y líneas imaginadas a pixelado.



Luego hay que tener en cuenta si lo que queremos hacer tiene que tilear o no. Si es que sí, luego hay que vigilar que cada uno de los píxeles laterales de la imagen no quede cortado con su píxel lateral opuesto (contrario). La mejor forma es copiarlo ya varias veces de lado e ir modificando/copiando para asegurarse que el tile quede bien.

Luego es cuestión de imaginar como queremos que se vea lo que queremos hacer con ayuda de la referencia, e intentar plasmarlo. Esto no es de lección teórica sinó que más bien, tiene que aprenderse con la práctica, como todo. A partir de aquí se hace el lineart. La imagen anterior sería un lineart de lo más sencillo. Hacer el lineart llevará un buen rato. Quizá solo para ello ya será necesario tener una referencia. Si al principio esta parte de incomoda mucho puedes llegar a buscar alguna plantilla, si por ejemplo el pixelart que quieres hacer es un sprite.

Una vez logrado el lineart y corregido, se colorea, con pocos colores al principio y con el uso del bote de pintura. Luego es cuestión de ir haciendo los detalles. Para ello, se utilizará dithering entre colores, es decir, efectos de "degradado" para pasar de un color a otro, como en esta imagen:



Luego, para las líneas, se utilizará algo similar, llamado antialias (¡manual, no automático!). Eso disimula las líneas y hace que el pixelart se vea más suave, y mucho más profesional.

No hay mucho más que eso para saber en este punto, es ir aplicando lo mismo muchas veces e ir prograsando con el dibujo hasta terminarlo.
Una vez esté medianamente bien detallado con antialias y todo se suelen hacer tres cosas (o al menos yo las hago):

1) Comprobar que no haya errores, como una zona sin antialias por descuido, mala perspectiva de una zona concreta, etc.
2) Comparar con la referencia. Si no se parece en nada y te ha salido un churro, habrá que volver a intentarlo. El pixelart es algo laborioso, pero en principio, no son matemáticas (igual eso anima a algunos xD)
3) Testear; si es un pixelart para un proyecto, para un mockup, etc. hay que probarlo que quede bien. Es bastante lógico creo yo.

------------


Y hasta aquí los tres primeros puntos del tutorial. Habría más cosas por decir. Tened en cuenta que de tutoriales hay muchos por lo que es conveniente leer no solo este sinó más, a ver qué se cuentan xD.
El tutorial no está entero pero lo dejo aquí de momento. Los próximos puntos iran sobre la creación de un sprite a partir de una referencia (con luces, sombras y detalles, que es lo que no expliqué demasiado en éste), la de un chipset básico, tiles y cosas así, siempre con pixelart. Es decir, algo un poco más práctico para el mundo del RPG maker; un post mas cortito. Saludos, y espero que de momento os haya gustado.

PD.- ¡¡Dios mío qué largo, es la fin del mundoou!!
avatar
Wecoc
Administrador
Administrador



Créditos 12104

Gracias : 522

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por Haku-Shinigami el 2011-12-25, 23:23

Diablos TwT excesivamente buen tutorial Wecoc-san...
Sempre hay algo nuevo que aprender
avatar
Haku-Shinigami
Principiante
Principiante

0/3

Créditos 1638

Gracias : 10

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por eolo32 el 2011-12-26, 13:59

Tutoriales FTW, al parecer, adelante, me ha gustado lo que has hecho y voy a seguir viendo (La verdad es que me interesa mucho) ¿Cuándo saldrá el siguiente? (Porque espero que salga y no lo dejes así)

Pd: Me gusta la idea de la linea imaginaria... ahora sólo me falta la imaginación...
avatar
eolo32
Principiante
Principiante

0/3

Créditos 289

Gracias : 0

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por sanchez1994 el 2011-12-26, 14:08

Yo esperare los proximos porque la verdad que este está muy detallado y para alguién que se está iniciando son de mucha ayuda, creo que es el primero que veo tan detallado y tan clarito enseñando desd el principio.
avatar
sanchez1994
Principiante
Principiante

0/3

Créditos 160

Gracias : 11

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por Wecoc el 2011-12-26, 19:55

4) COMO HACER UN SPRITE CON REFERENCIA

Primero simplemente, se empieza buscando la referencia. En este caso, utilizaré un chara del 2k de referencia.
La razón para utilizar un sprite de referencia, es que nos permite tener una meta tangible que alcanzar.
Vamos a estudiar el sprite, para que podamos entender cuáles son los atributos que hace que se vea la forma en que está.



Este es Alex, y tiene 16 colores únicos y uno de ellos corresponde al transparente (en este caso, el verde). Tiene algunos colores muy similares, por ejemplo, dos de los azules oscuros por lo que el artista podría haberse ahorrado uno. Los colores están agrupados en azules, marrones, un blanco y un gris. El contorno es prácticamente siempre la línea de color marrón oscuro, cosa que también tendremos que tener en cuenta cuando queramos hacer el nuestro, pero hay que tener en cuenta que por ejemplo en la parte de los brazos ésa línea no está.

También hay que tener en cuenta las dimensiones de éste, 16x35, para que el resultado tenga unas dimensiones parecidas. Además, debemos hacer algunas mediciones relacionadas con las características específicas que definen el estilo. Por ejemplo, la cabeza hace 12x12 píxeles (en relación con el total eso nos da que es bastante "cabezón", un aspecto totalmente usual en los default de los RPG maker). Los brazos, 5x8, están 2 píxeles arriba respecto el final de la cara, y las piernas, también de 5x8 desde el cinturón, tienen una separación de dos píxeles y no de uno; eso es lógico sabiendo que el ancho total es 16, número par. Finalmente, siguiendo por dónde empezaremos, la distancia entre los ojos y el total de su altura es de 7 píxeles.
Así, siguiendo esas proporciones de la cabeza, nos queda de momento algo así:



Así, siguiendo las proporciones comentadas, hay que ir continuando el cuerpo. Hay que mantener las proporciones; para ello en este punto se pueden utilizar líneas horizontales entre la referencia y el nuevo (en este caso, líneas en rojo)



Esa sería la plantilla más básica. Si aún no has guardado ninguna vez, hazlo. En pixelart es importante ir guardando muchas veces.
Luego a partir de ahí habría que ir modificando un poco y jugando con la posición de los tiles para llegar a lo que queremos (una dama, un mercenario, un hechizero, etc). En este caro haremos un guerrero luchador. Un factor importante es la asimetría de la referencia, por lo que al nuestro también le haremos asimétrico.



Como ya dije, para hacer el color lo primero es pintar por partes con el cubo de pintura. Para esta parte seguramente lo que deberemos hacer es utilizar una paleta distinta a la original, así que lo mejor será hacer una paleta básica. Si luego necesitamos más colores (intentaremos no pasar de 12, los de la referencia) ya lo haremos cuando detallemos el sprite. En este caso, pero, como ya tenemos bastante bien definidos los colores, podemos ponerlos todos.



Luego es cuestión de ir coloreando y detallando siguiendo el estilo y siendo fieles a lo que tenemos en mente. Para ellos iremos añadiendo colores secundarios a los principales que ya pintamos con el bote. Aún somos a tiempo de retocar los colores si en algunas partes no nos gusta el que elegimos. Hacer las sombras no es tan difícil como puede parecer, y menos teniendo la referencia al lado, es solo ir imitando el estilo: como hace los brillos del pelo, los ojos, la ropa, etc.



En el juego se verá a este tamaño:



5) COMO HACER UN TILE

Como ya sabréis, los tiles son cuadros que se usan colectivamente para construir una imagen mas grande, como si fueran piezas de lego, y por lo tanto tienen que encajar entre ellos. Así, un tileset es un conjunto de tiles numerados/ordenados, y un tilemap (en el maker en general utilizaremos un tilemap de 2 dimensiones: x,y) tendrá en cada coordenada una correlación con el número de tile del tileset. Los tiles pueden tener distintos tamaños. Desde tiles de 8x8 hasta tiles de panoramas por ejemplo, muy extensos. Aún así nos centraremos en los más típicos, que son de 16x16 y 32x32. Se pueden encontrar juegos con tiles de 24x24, 48x48, 64x64 ... Hasta aquí bien. Pero claro, también hay juegos isométricos o con otras perspectivas, por lo que el tile no tiene por qué ser cuadrado. (En un juego isométrico podría ser de 32x16).

Los tiles, como ya se dijo anteriormente, tienen la particualidad de que "tilean", es decir, encajan; para ello hay que tener especial cuidado con los píxeles laterales del tile. Hay quien para intentar solucionar eso, hace el efecto mirror. En general ese efecto no queda bien lo mires por donde lo mires. Así que lo mejor es simplemente vigilar los contornos y a partir de ahí hacer el medio más arbitrariamente.



Hay una manera de hacer eso que puede llegar a ser de bastante utilidad: Se crea el tile sin tener en cuenta eso, por lo tanto no tileará, se divide en cuatro y se colocan las cuatro esquinas en el centro, se quita la parte donde las líneas quedan mal puestas y se vuelve a tilear encima (sin tocar lo que ahora son las esquinas). Es decir, como en la imagen siguiente:




Ahora que sabemos crear tiles, un problema puede ser cómo ponerlos de lado y que queden bien, o es más; como hacer autotiles.
Para ello es recomendado usar algunas plantillas, como serían estas (solo son ejemplos, en este caso de XP):



En cada color habría que poner uno de los tiles hechos y luego modificarlo un poco para disimular los cortes de los bordes.

---------------

Y eso es todo, espero que os haya gustado esta segunda (y última) parte del tutorial. En él no enseñé cómo hacer tiles isométricos o de perspectiva Boktai, nisiquiera a hacerlos tipo plataforma, pero porque en RPG maker son más comunes los otros. Aún así, en la red hay algunos tutoriales de estos otros estilos que también pueden servir.

PD.- ¡¡...Mundoooouououou!!
Bueno este no fue tan largo
avatar
Wecoc
Administrador
Administrador



Créditos 12104

Gracias : 522

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por eolo32 el 2011-12-26, 20:39

Tengo que decir que un tutorial que me va a ser bastante útil en una cosa (Hacer "Tiles" que se "Tileén") ya que es algo que desde hace tiempo quería hacer bien (Usualmente algo a lo cuadros o rectángulos para que quede parejo...)

Podría decir, que siendo el final de tutorial, muy bueno, aunque algo básico (Esperaba que fuese más largo y luego más complicado, la verdad) lo más raro es que este tutorial me ha motivado a conseguir otros en Internet, lo cual es curioso porque poco tiempo después de leer busqué hacer otra cosa... (Necesito inspiración ¡A jugar!)

De cualquier forma, buen aporte, haz hecho algo por las generaciones futuras de makeros, estoy seguro (Tururururu....)

Sigue haciendo aportes así (Aunque no sean tutoriales de estos...) Mientras yo... busco... hacer una buena paleta (Tututú-tutuú)
avatar
eolo32
Principiante
Principiante

0/3

Créditos 289

Gracias : 0

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por Poka el 2011-12-26, 21:30

Wecoc... ADMIRABLE!

Yo todavía uso el Charamaker, usando 256 colores... vaya tela marinera. No me he leído todo el tuto (lo del sprite y los tiles me lo leí entero), pero por lo poco que he leído, creo que varias de estos consejos me serán útiles...

¿También quieres jugar? Será Divertido...
avatar
Poka
Guerrero
Guerrero

0/3

Créditos 2555

Gracias : 83

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

Mensaje por Zombie Girl el 2011-12-27, 14:21

Hola, buenas.

He encontrado bastante interesantes estos tutoriales. ¿Existe la posibilidad de que haya una versión descargable en Word o PDF? Bueno, es que como no tengo interné en mi casa copio y pego a Word, jeje.

¡Un saludo y sigue así!
avatar
Zombie Girl
Soñador
Soñador

0/3

Créditos 170

Gracias : 7

Volver arriba Ir abajo

Re: [Tutorial] Aprendiendo pixelart desde la base

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.