Curso de Pixel-Art

Curso de Píxel-Art Hechos por MATRIAX Recopilado por Cr_Pk

Índice.1. Piscina isométrica para niños 2. Reflejos 3. Pasando Imágenes 2D a isométricas 4. Rayos Solares 5. Aprendiendo Píxel-Art 6. Smiles isométricos 7. Estados de Píxel-Art 8. Video-tutoriales

Piscina Isométrica para niños Lo primero de todo decir que este va a ser mi primer tutorial, y espero hacer muchos, pero de momento esto es lo que hay. Además es el primer dibujo que realizo en perspectiva isométrica, por lo que con estos tutoriales aprenderé yo y vosotros o eso espero :) Para este tutorial utilizaremos el Paint y Paint Shop Pro.

1 - Paso Lo primero que vamos ha hacer será crear un cubo en perspectiva isométrica (1), luego se le da la idea que tenemos en mente de la iluminación a nuestro cubo usando colores por defecto de Windows (2). Y por ultimo le damos un color mas adecuado a lo que vamos a construir (3). Utilizaremos una paleta de 7 colores de tono azulado (4), la cual nos dará para 3 c ubos de 3 intensidades diferentes (5)

2 - Paso Ahora con el cubo anterior crearemos las dimensiones de la piscina. Para ello debereis ir copiando y pegando el cubo para hacer la forma que deseeis, ya sea rectangular, cuadrada, etc.. (6)

Luego tendréis que crear 2 niveles mas cada uno con los 2 cubos de diferente intensidad que quedan, y cada uno será 2 cubos menos de longitud de cada lado, tal que al sobreponer uno con el otro quede así:

3 - Paso Y ahora vamos con el suelo, la cosa mas fácil. Claro esta el suelo es la parte que mas fondo esta, por lo que será la mas oscura ( que inteligente soy, si e s que hay veces que me asusto y todo...)

Así pues, hacemos el suelo de cuadrados, alternando uno claro y otro oscuro ( si queréis podéis hacer dibujitos o palabras alternando 2 colores para darle un toque personal.)

4 - Paso Bien, esto va muy bien, ya tenemos una piscina!! , aunque creo que nos falta algo mmm.. el agua!. El agua le va a dar a nuestra piscina un toque especial y de calidad o al menos si lo hacéis como yo os lo digo :) . Ahora la idea es conseguir el área donde estaría el agua, ponerlo sobre una textura que crearemos, ponerla como transparencia como una capa a nuestra piscina y le daremos una transparencia, le bajaremos el numero de colores y listo..... tranquilos ahora lo explico. Con la imagen de la piscina del paso 2 (6) y llenáis su interior de un color de la paleta del MS Paint, el que queráis, seleccionáis la imagen y la lleváis al Paint Shop Shop Pro, Pro, le dais a este icono y pulsáis sobre el color que habéis puesto de relleno, os lo seleccionara pulsáis Control+C y en una hoja en blanco del Paint pulsáis Control+V y deberíais de tener esto pero con el color que le habréis aplicado:

Y vosotros diréis bien, mu chulo, pero que hago y que es este pegote verde? . Esto es la zona donde ira la textura del agua y lo que tenéis que hacer es crear una textura de agua con los menos colores posibles, yo he utilizado 6, pero perfectamente se puede hacer con menos (como mínimo 3 y máximo 7). Y tenéis que hacer la textura lo suficientemente grande para que quepa dentro ese "pegote verde". Yo como soy muy listo he creado un tile y lo he repetido muchas veces hasta tener el tamaño que deseaba.

Y vosotros diréis, ¿ que has hecho? , pues después de crear la textura de grandes dimensiones lo que he hecho ha sido con Paint, seleccionar el color que quiero que se transparente, seleccionar el "pegote verde" y sobreponerlo en la textura y os saldrá lo mismo que a mi.

5 - Paso Bien, ahora abrir el PsP, y copiar por un lado la imagen del paso 3 y la imagen anterior, la de la zona que nos interesa con textura y la insertáis en la otra como una capa, la ajustáis bien en su sitio y le dais un 24% de opacidad y veréis que transformación jejeje. Luego le bajáis el numero de colores ( colors->decrease color depth) y ya ta!, tendréis algo parecido a esto:

whoooaa!!

Y si el color no os convence lo podéis ajustar con "brightnes and contrast" o "Gamma correction", además de añadirle algún que otro detalle etc... y ale a disfrutar, si es que dan ganas de bañarse jejejej

Como veis es una piscina pequeña, para los niños. Creo que con e ste tutorial una vez aprendido no habría problema en hacer una piscina mas grande y con mas profundidad etc.. , pero en fin si eso ya c reare un tutorial para hacer una piscina olímpica :) . Otra cosa es que me gustaría, que si hacéis el tutorial me enviéis vuestra piscina (EMAIL) para subirla a la Web  junto con vuestro nombre etc, para que la gente vea las diferentes formas de hacer la piscina y se anime también ha hacer una propia.

Fin del tutorial Otra variante con diferente color de agua, forma y "brightnes and contrast" :

Y una piscina hecha por un usuario (Zer0) siguiendo el tutorial:

Reflejos Bien pues empezamos el año con otro tutorial :) . Esta vez trata de hacer reflejos o brillos en las imágenes.

Para este tutorial solo utilizaremos el Paint.

1 - Paso Para este tutorial partimos de que ya tenemos hecho el logo, dibujo etc.. Yo he cojido una paleta de 8 colores y he pintado las letras de un tono claro y el fondo oscuro (1).

Así que primero empezamos el reflejo por las letras y las pintamos de un color de la paleta del Paint (en mi caso rojo) (2). Por otra parte vamos ha hacer los reflejos. Como veis son líneas diagonales de 1,2 o mas pixeles ( esto dependerá de lo grande que sea el dibujo y del tipo de reflejo que le queramos dar) y uno lo pintaremos un tono mas claro que las letras y el otro un tono mas claro que el fondo.

Como veis haremos el mismo reflejo coloreado de 2 maneras diferentes. El mas claro será para las letras y el mas oscuro para el fondo  (3).

2 - Paso En esto paso lo que vamos ha hacer es aplicar a la imagen los 2 tipos de reflejo. Seleccionamos el color rojo como transparente y lo ponemos encima del reflejo mas c laro y seguidamente pintamos las letras blancas en el color que tenia al principio, o mas rápido creáis un rectángulo, lo ponéis encima y listo (4) .

Y hacemos lo mismo con el fondo, lo pintamos de un color de la paleta del paint y lo ponemos encima del reflejo que nos queda pero poniéndolo de forma que coincida con e l reflejo anterior (5).

Y ya esta se acabo el tutorial...... y vosotros diréis si muy bonito pero no acaba de convencerme, el color es un poco apagado y no se ve muy bien el reflejo.... . Bueno al final para letras, fondo y reflejo he usado 5 c olores, pues bien cambiadlos por unos con mas contraste ( como me gusta el contraste..) y a ver si te gusta mas :) . Os pongo 3 ejemplos, es el mismo pero cambiando esa paleta de 5 colores.

Bien pues ya tengo logo para la sección de tutoriales si es que por aprovechar no será :)

Bien, pues como dice el tutorial, vamos ha crear reflejos pero esta vez aplicadas en perspectiva isométrica. Para este tutorial solo utilizaremos el Paint.

1 - Paso Como ejemplo he creado una valla publicitaria. He hecho un rectángulo isométrico (1), lo he recortado por la mitad de su diagonal (2), luego le he cambiado la paleta de colores (3) y he puesto mi nombre (4).

2 - Paso Ahora pintamos de un color de la paleta de Windows (rojo en este caso) a lo que vamos a aplicar el brillo (5). A continuación hacemos el brillo que en este caso no será en diagonal si no recto (6). Con el color rojo seleccionado como transparente lo ponemos encima del reflejo que hayamos hecho y nos quedara esto (7). Luego rellenamos el vacío de la valla con el color correspondiente (8) y listo.

3 - Paso Por ultimo con un color mas brillante pintamos la parte de las letras afectadas por el brillo minuto listo)

(9) (en menos de 1

Pues ya esta, espero que con esta parte del tutorial ya sepáis aplicar este efecto a imágenes isométricas. Os pongo otro ejemplo:

Bien, en esta tercera parte explicaremos como hacer que se vea reflejado un objeto isométrico en e l suelo. Para este tutorial utilizaremos el Paint y el Pain Shop Pro.

1 - Paso Tenemos un objeto isométrico al que queramos hacer un reflejo e n el suelo. Voy a coger como ejemplo la valla publicitaria anterior. Y la pondremos en el fondo que veréis a continuación:

Lo primero que vamos ha crear es el reflejo mediante la imagen que ya tenemos. Así pues empezamos por las 2lineas de la base (1) y luego las 2 líneas restantes (2) y con esto tendremos el reflejo que se vera en el suelo. Luego aplicamos los colores de la imagen (3) y hacemos unas rayas que serán parte del reflejo de las letras (4). Decir que si se hiciera el reflejo perfecto no se llegarían a ver nada de las letras pero lo haremos así para que os acostumbréis a detallar mejor las cosas. Por ultimo haremos las rayas de brillo pero esta vez si serán en diagonal (5).

2 - Paso Bien pues ya tenemos en nuestras manos el reflejo (6). Pero para ser un reflejo debería ser mas tenue y de un color parecido al suelo donde se refleja ¿Como lo hacemos? , pues aquí entra el PsP y claro esta usaremos capas como en el tutorial de la piscina. Si os fijáis en el fondo que hemos elegido el reflejo estará, la mayor parte e n los azulejos blancos y otro en los azulejos azules, por l o que nos va a tocar hacer el reflejo de 2 tonalidades distintas. Un reflejo para los azulejos B y otro para el A .

Aquí tenéis el reflejo de 2 tonalidades distintas (7) y con un 70% de opacidad. Color (A) y Color (B) corresponden a las letras de la baldosa.

3 - Paso En este paso aplicaremos nuestro reflejo al fondo y te ndremos la imagen final. ¿ Como lo hacemos ? (parece mentira que me preguntéis eso...). Primero pintamos la baldosa de un color (verde en este caso), seleccionamos dicho color como transparente y lo ponemos encima. Lo mismo con e l reflejo del otro tipo de baldosa. Con esto hecho nos quedara la imagen (8) pero deberemos de cambiar el color de la s baldosas al original y obtendremos la imagen (9).

¿Que os ha parecido? , yo creo que ha quedado bastante realista y detallado y espero que vosotros a partir de ahora también lo podáis hacer.

Y bueno os pongo 2 ejemplos mas :)

En esta cuarta parte explicaremos como crear reflejos en el agua tanto usando un filtro en PSP como simplemente con Paint.

Para este tutorial utilizaremos el Paint y el Paint Shop Pro.

1 - Paso Para el ejemplo utilizare como veis la 1 imagen (1) del tutorial que aprendimos ha hacer y luego en este caso lo que sera nuestro mar (2) donde se vera reflejado la imagen anterior. Al ser solo un ejemplo no me he parado ha dibujar olas o detallarlo, ya que eso es cosa de cada uno y para explciar el metodo sobra.

Ahora cogemos la 1 imagen y la llevamos al PSP. Alli es donde le vamos a aplicar el efecto de "Ripple" que se encuentra en "geometric efeects" y luego le aplicamos una reduccion de colores igual a la de la imagen original tal que quede asi (3). Luego cogemos la imagen y como en apartados anteriores aplicamos una trasnparencia del 50% sobre el color del agua (4) y nos deberia quedar asi (5)

2 - Paso Ahora simplemente lo que tenemos que hacer es hacer el montaje de las imagenes:

Y ya esta ya lo tenemos. Aunque como siempre le podeis agregar mas cosas y dejarlo mejor detallo, por ejemplo yo he hecho esto :

Imagen final:

Y en esta quinta parte haremos lo mismo que en la anterior pero todo con Paint.

Para este tutorial utilizaremos el Paint.

1 - Paso Tenemos una imagen (1) y queremos que se vea reflejada en el mar, y queremos hacerlo todo con paint y no sabemos como, pues este es vuestro tutorial. Primero cogemos el arbol lo separamos de la imagen y le cambiamos con paint la paleta (2) . Luego lo volteamos verticalmente y comenzamos a sesgarlo por una part u otra tal que quede asi (3) . Igualmente hacemos lo mismo con la luna (4).

2 - Paso Ahora montamos las imagenes, y como en el tutorial anterior añadimos detalles para diferenciar la imagen real del reflejo.

Pues nada espero que os haya gustado el tutorial y mas que nada os haya servido de ayuda.

Fin del tutorial

PASANDO IMÁGENES 2D A ISOMÉTRICAS En esta ocasión lo que haremos será pasar de imágenes "planas" a imágenes en perspectiva isométrica. En esta primera parte empezaremos con lo básico rectángulos, triángulos... Para este tutorial utilizaremos el Paint y el Paint Shop Pro solo para el "Skew".

PASOS A SEGUIR.... Pues vamos ha crear un rectángulo normal y corriente (1). Luego le aplicamos un filtro llamado Skew (2) de 26.565º que lo podréis encontrar tanto en paint shop pro como en Photoshop. Ya tenemos el rectángulo en perspectiva isométrica pero le falta profundidad. Así pues dibujamos una línea desde uno de sus vértices (en perspectiva isométrica claro) que marcara la profundidad que le queremos dar del rectángulo (3). Entonces lo que haremos será copiar el rectángulo al final de la línea (4) y posteriormente nos quedara unir los vértices que quedan mediante una línea y eliminar aquellos trazados que no se verán (5). Y para acabar lo pintamos como siempre con el color que queramos (6) .

Como vereis el filtro Skew lo que hace es mover cada 2 píxel horizontales del dibujo 1 píxel hacia arriba, con lo que si queréis o si la imagen es pequeña podéis hacerlo vosotros mismos con Paint.

Además también podremos aplicarlo a otras figuras geométricas etc.. :

Y para el triangulo tendremos que hacer esto:

Después de ver esta primera parte del tutorial podréis pensar que es fácil o difícil pero que no sirve de mucho debido a que nadie utilizara para un juego estos cubos tan grandes etc, y para que veáis que si tienen utilidad, cogiendo el triangulo del ejemplo anterior podremos hacer esto:

Pues nada espero que os haya gustado este tutorial y espero que os sirva de utilidad.

En la 1 parte hemos visto como pasar figuras geometricas simples como el cuadrado, triangulo.. y en esta parte vamos a complicar las cosas un poquillo mas. Para este tutorial utilizaremos el Paint y el Paint Shop Pro.

PASO - 1 Lo primero es convertir la imagen en vista isometrica, ya sabeis en PsP mediante el filtro " Skew" y utilizando 26.565º (1) . En otra imagen hacemos lo mismo (aplicamos skew) y lo pintamos todo de negro (2) y le aplicamos otro filtro "trace contours" con lo que conseguiremos esto (3). Luego hacemos como en el apartado de " Geometria basica" y dibujamos una linea en perspectiva isometrica para decidir el ancho del dibujo (4) y ponemos la imagen del punto (2) de cara (5) . Y para acabar dibujamos una linea isometrica en los puntos clave que le daran la forma de la imagen (6) .

PASO - 2 Y por ultimo solo queda rellenar los huecos con un color, oscuro o claro dependiendo de la zona y dibujo de la imagen y detallarlo dependiendo del estilo que utilize.

Ha quedado bastante bien no? . Pero queda algo solitario, asi que para acabar este tutorial vamos a ponerle mas cosas.

Y esto es el resultado de juntarlo todo:

Pues nada espero que os haya gustado este tutorial y espero que os sirva de utilidad.

Esta teoría la he inventado yo, por lo que puede que tenga algún que otro fallo que se ira corrigiendo según vaya la gente haciendo el tutorial. Me ha llevado toda una semana de pruebas con círculos etc.. hasta que descubrí la composición de un circulo isométrico y sus partes, pero lo que mas me ha costado ha sido explicarlo y que quede lo mejor expresado posible. Antes de nada decir que esta parte del tutorial como he dicho es mas difícil de explicar que de hacer. Para este tutorial solo utilizaremos el Paint c on el cual crearemos los 2 tipos de círculos isométricos.

1 - Paso He creado una plataforma y a partir de ella lo que haremos será crear los 2 círculos isométricos. Empecemos por el mas sencillo el de la parte superior de un cubo. Este es muy sencillo, simplemente tendréis que crear con la herramienta de circulo uno que tenga de ancho el doble de píxeles que de altura y listo.

¿Sencillo verdad?, pues esperar a ver como conseguir un circulo isométrico de un lado de un cubo.

2 - Paso Este es el 2 tipo de circulo isométrico que nos podemos encontrar el cual es mucho mas difícil que el 1 (ni os lo imagináis) Decir que para el 2 tipo no se conseguirá un circulo isométrico perfecto, pero es debido a que Paint no crea círculos 2d perfectos, ni paint ni otros, os pongo ejemplos y comprobadlos vosotros mismos.

Bien para este ejemplo hemos creado un circulo de 73x73 píxel. Pues según mi teoría para crear el circulo isométrico de estas dimensiones necesitaremos 2 círculos, uno del doble de tamaño y e l otro de su mitad, en fin uno de 146x146 y otro de 37x37. Como vereis en el circulo grande creado mediante paint ya se crea un circulo erróneo, podréis ver al lado, la curva del circulo creada con paint (1) y la curva del circulo que debería ser correcta.

3 - Paso Por otra parte crearemos digamos lo que será nuestra plantilla (2) que nos servirá para cojer el tramo de curva del circulo grande (3) que será igual a un cuarto de un circulo isométrico (4) .

Eso por un parte y ahora vamos a conseguir el otro trozo del circulo que nos falta con ayuda del circulo pequeño. Lo que haremos será cojer siempre un cuarto del circulo pequeño como vereis en la imagen (5) y lo pondréis en la plantilla (6). Bien ya queda menos solo nos falta la ultima parte que será igual a la parte final de la plantilla del circulo grande (7) (es muy lioso explicarlo ya lo he dicho) con lo que conseguiremos la mitad del circulo isométrico como vereis en la imagen final.

Por lo que ahora con paint solo queda aplicarle "Voltear y girar" horizontalmente y verticalmente, juntamos las 2 mitades y tendremos un circulo isométrico.

Ahy queda explicada mi teoría del circulo isométrico para el que le quiera dar un vistazo.

Rayos Solares Bien pues en este tutorial aprenderemos ha crear los rayos de sol en nuestras imágenes. Para este tutorial utilizaremos Paint y Paint Shop Pro. He cogido como ejemplo la piscina del anterior tutorial, podéis coger cualquier imagen.

PASOS A SEGUIR.... Como veréis a la piscina le he puesto una pared y 3 cristales por los cuales entrara la luz del sol

(1).

En un bmp a parte tendréis que hacer los rayos que utilizaremos en la imagen con un color de windows (en este caso rojo) (2), los copiáis y pegáis (teniendo como transparente el color rojo) en la imagen sabiendo claro esta que dichos rayos salgan de los cristales y os saldrá esto (3) . Seleccionáis las rayas convertidas ahora en trozos de la imagen (4) y las lleváis a Paint Shop Pro donde le aplicáis "brightness and contrast/brillo y contraste" y según la intensidad que queráis ponéis unos u otros valores, en mi caso he puesto 40 de brillo y 10 de contraste.

Y pegáis el resultado de PsP en la imagen y os quedara algo así.

Otros ejemplos:

Pues nada espero que os haya gustado este tutorial y espero que os sirva de utilidad.

Aprendiendo Píxel-Art PIXELART : Técnica de dibujo realizada punto por punto donde se pueden crear dibujos, imágenes, animaciones etc..

Line-Art : Es el dibujo o imagen hecho con líneas en blanco y negro.

Sel-Out : Técnica aplicada mayoritariamente en sprites de lucha tipo Strets Fighters, pero que puede ser aplicada a cualquier imagen y que como veis en el ejemplo, este donde este el dibujo parece como si estuviera hecho para ese color fondo pero no es así.

Gradient  : Efecto que usa las variantes de tono de un color para llenar espacios, etc..

Pillow Shading -> es cuando haces líneas consecutivas de color para simular sombras variantes de tono de un color para llenar espacios, etc..

: Efecto que usa las

Dithering : Efecto parecido al Gradient con la salvedad de que este a lterna los tonos de colores.

OUTLINE : Esto seria el contorno del grafico, a diferencia del Line-art es simplemente la línea que rodea al dibujo.

Paleta De Colores :

Serán todos los colores que usemos para nuestro dibujo. Hay gente que selecciona los colores, hacen sus propias paletas para luego dibujar u otros hacen el dibujo probando colores a 24bits luego reducen etc...

Vocabulario General AA/Anti-Alias : Efecto que proporciona a una imagen sensación de suavidad y se utiliza un color medio entre el color que queremos suavizar y el fondo.

Gráficos Isométricos : Son aquellos gráficos hechos en perspectiva isométrica vistos a 26.565º

Sprite : Los sprites son las imágenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of fighter son Sprites, el muñeco que manejas en los rpg e s un sprite, se podría decir que todo lo que puedas manejar/controlar es un sprite (un coche en el gta1, un personaje del final fight....). Como ejemplo esto serian los frames del sprite de un juego.

Frames : Los frames son los componentes de la animación de un "sprite" al andar, correr, saltar... por lo cual gracias a los frames podemos ver al personaje moverse por la pantalla. También decir que cuando mas frames tenga una animación mejor suavidad le dara a los movimientos y mas realista será el Sprite.

Con esto ya tenéis unos conocimientos "técnicos" por decirlo de alguna manera del Pixel-Art, así que ahora no os extrañareis si os dicen "Si le aplicas Sel-out al sprite quedara mejor" "Eh! eso esta hecho en perspectiva isométrica" "Mejor será que le cambies el Outline negro por otro color..." "Has usado demasiado dithering" etc....

TRUCOS DEL PAINT DE Windows Truco 1 : Como hacer de manera fácil círculos y cuadrados perfectos? Con la herramienta del cuadrado o elipse seleccionada se mantiene presionada la tecla "Tab" mientras se arrastra el puntero del Mouse. De esta forma no tenéis que estar pendientes de los píxeles que se marcan abajo.

Truco 2: Con la herramienta de crear polígonos, si mantenéis presionado "Shit izquierda" podréis crear ángulos de 45º y 90º de una forma sencilla.

Truco 3: Basta de tanto "Control+C" y "Control+V" Ahora para copiar y pegar un grafico lo que hacéis es seleccionar parte de una imagen "Control+C" copiáis y "Control+V" para pegarlo donde queráis. Pues para mas rapidez simplemente seleccionáis la parte de la imagen, presionáis la tecla "control" y con ella presionada arrastráis la copia a otro lugar, así de sencillo.

Truco 4: Efectos Paint. Si queréis hacer un efecto extraño con Paint, seleccionar una imagen cualquiera, mantener presionada la tecla "Shit izquierda" y al comenzar a arrastrar la imagen veréis que cosa mas chula :) .

Truco 5 : Cambio de color Imaginaros que estáis trabajando con paint, y tenéis un ci rculo con 2 colores que se alternan rojo y blanco... ¿como cambiáis el color de rojo a azul? píxel a píxel ?.... mejor hacer esto que os digo: Ponéis el color rojo de primer plano y el color azul de 2 plano. seleccionáis la goma, y dejando pulsado el botón derecho del ratón y pasando la goma por el circulo rojo, veréis como en lugar de borrar cambias a color azul todo lo que haya en rojo.

Este ejemplo esta hecho con muy mala leche, pero os puede servir en multitud de c osas!! (ni os lo imagináis)

Truco 6 : Imaginaros que dentro de un cuadrado, circulo o selección de una imagen queréis poner una textura hecha con paint etc... y que pasa si hacemos lo que ocurre en el 1 caso?, pues que nos tocara quitar píxel a píxel hasta recortar toda la textura que sobra del circulo lo que nos llevara un ratito y mas si el circulo fuera de dimensiones mayores. Una forma mas fácil seria ponerle al circulo un cuadrado azul como veis y ponerlo encima de la textura y luego borramos el color azul y en un segundo tenemos el circulo listo.

Truco 7 : Eliminar colores molestos Imaginaros que tenéis hecha una palabra con una plantilla isométrica, ¿Como la sacaríais? borrando con la goma cuidadosamente?. ¿Como borrarías el contenido en color rojo del circulo superior? ¿También con la goma despacio para no borrar parte del circulo?, ¿ Y en el circulo de abajo ?. Pues bueno se puede hacer en menos de 5 segundos, seleccionáis como color de 2 plano el que queráis eliminar, seleccionáis la imagen, pulsáis control y la lleváis a otro sitio con lo cual tendréis el mismo dibujo pero sin el c olor de 2 plano. Claro esta si queréis eliminar 3 o 4 colores también podréis hacerlo de esta manera.

También como podéis ver en la segunda imagen lo podéis utilizar para eliminar el outline negro después de haber acabado una imagen, o si después de hacer un resize o una imagen donde habéis cometido un error y en un circulo os salgan unos colores molestos que queréis eliminar haced esto.

CRITICAS CONSTRUCTIVAS 1- Añadiendo mas contraste!!!! ¿Porque la gente que empieza hace los dibujos sin contraste ?. Hay varias razones, pero la mayor de ellas es porque no saben detallar. Lo voy a explicar de una forma simple. Como veréis en la imagen la pelota esta hecha con 6 colores pero parece que solo haya 2 o 3 como mucho, pero queda como suave y bien hecha y mientras no se vean los píxeles pues bien. Ya que si pusiera un buen contraste le quedaría de la otra manera, digamos algo "horrible" j eje. Pero cuando una persona sabe detallar los objetos etc, ponle el contraste que quieras que en global quedaran bien :) .

A mi me encanta que haya mucho contraste en los dibujos ya que les da vida y son bastante resultones y "agradables de ver" siempre que estén bien detallados. Claro esta, si es un dibujo para un fondo etc tendrá que tener poco contraste. Si pincháis en el link, podréis ver un edit (texto e imagen) que hice sobre el contraste donde creo que lo dejo bastante claro. Foro Potasiomen

2- Evitar siempre los colores de la paleta de Windows. Cuando se empieza en el Pixelart se suele usar mucho los colores de la paleta de Windows, así que tenéis que habituaros a crear vuestras propias paletas de colores cuando antes, ya que una imagen puede cambiar muchísimo si utilizáis colores Windows o una hecha por vosotros. A c olores Windows me refiero a todos los colores que tenéis en la paleta de Windows y sus variantes de tono.

3- Quitar el contorno negro "Outline" y sustitúyelo por un color oscuro dependiendo de la zona donde este. Esto ya depende del dibujo, por ejemplo si quieres hacer un juego y te gusta que los objetos tengan contorno negro se lo puedes poner, pero si es un dibujo normal y corriente o también para juegos es preferible quitarlo. ej:

4- Añadiendo AA /Anti-Alias a las líneas de Dentro / Fuera. Lo que hay que hacer es simplemente lo que se dice añadirle AA a las líneas de dentro de la imagen para que queden suaves y quede el dibujo mejor detallado. Dependiendo del dibujo podremos hacer el AA con colores que usa la imagen (1), en otros caso necesitaremos añadir 1 o 2 colores para crear este efecto  (2).

DENTRO

FUERA

Tranquilos que en otra parte del tutorial explicare como conseguir unos colores adecuados a cada caso y como aplicar un buen AA :) .

Y por ultimo recuerda grabar tus creaciones en formato GIF o PNG ya que si lo hacen en jpg perderán calidad y para el Pixel-Art se debe mostrar la imagen sin perdida de datos.

PROGRAMAS PARA PIXELAR  PAINT  Pues este podríamos decir que es el programa mas sencillo que hay para hacer dibujos píxel a píxel. Para la gente que empieza en esto del píxel-Art y no tengan ni idea de que programa utilizar usen el Paint. Si usáis programas de diseño para otras cosas como photoshop, psp donde tenéis amplios conocimientos y facilidad para dibujar podéis usarlo también.

 MICROANGELO Este es un programa para crear iconos o cursores animados de tamaños 32x32 y 48x48. Yo he utilizado bastante ese programa y lo sigo utilizando en su versión 5.58, que lo podéis encontrar por ej emplo en www.softonic.com Suelo usarlo para crear colores para el Anti-Alias ya que tiene una opción "Color Blend" que te crea una serie de colores que van desde uno a otro de forma gradual. Y gracias a esto seria fácil elegir el color para el antialias ya que seria +o- el color del centro.

también tiene una opción en la ventana "Paint modifiers" llamada Anti-Alias con la que conforme pixelemos el programa automáticamente nos ira poniendo el solito el A nti-Alias jeje.

 PAINT SHOP PRO Bueno, pues este es otro programa que podéis utilizar para pixelar. A diferencia de Photoshop este programa es más bien para retoque fotográfico pero que perfectamente os puede servir para crear vuestros píxel-Arts. Suelo usarlo mas que nada para cuando tengo que aplicar una capa o transparencia por ejemplo en el tutorial de la piscina o en el de reflejos, además también para conseguir colores mas saturados o conseguir colores para aplicar luego el Anti-Alias. Lo podéis encontrar en www.softonic.com

 PHOTOSHOP podríamos decir que el programa para crear píxel-Arts profesionales seria Photoshop ya que con este programa no necesitaríamos de programas externos para aplicar el efecto skew, capas ni nada y lo podríamos hacer todo con el. Claro esta todo es cuestión de gustos, habilidad y conocimientos que se tengan de cada programa el cual deberemos elegir para crear nuestros píxel-Arts, pero sin duda photoshop seria la mejor opción.

Lo podéis encontrar en www.softonic.com

GRAPHICS GALE Este es otro programa mas con el que poder hacer píxel-Arts que yo no conocía pero que tie ne cosas bastante curiosas e interesantes. Decir también que sirve tanto para crear imágenes como animaciones dentro del mismo programa. Lo podéis encontrar en www.softonic.com

Yo para mis píxel-Arts uso el Paint de Windows y cuando tengo que hacer algo con capas (rara vez) uso el PsP (Paint Shop Pro) además de para conseguir nuevos colores con mas contraste o un c olor para crear Anti-Alias.

PREGUNTAS:  ENTONCES, ¿ CON QUE PROGRAMA EMPIEZO ?

Si no tienes ni idea de ningún programa pero te gusta el píxel-Art sin duda abre el Paint y ponte a practicar. Si por el contrario usáis habitualmente el Photoshop, PaintShopPro etc.. o cualquier otro programa con el que poder crear imágenes píxel a píxel utilizadlo no pasa nada.

SI UTILIZAS EL PAINT ¿QUIERES DECIR QUE ES EL MEJOR PROGRAMA PARA PIXELAR?

No, pero si es para mi el mas sencillo y fácil y el que te da una total libertad para crear lo que se te ocurra. Además con todo el tiempo que llevo he adquirido bastante rapidez en mis creaciones además de aprender truquillos o atajos con paint con el cual hacer las cosas mas rápidamente.

 BIEN YA SE EL VOCABULARIO DE PIXEL-ART, SE QUE PROGRAMA UTILIZAR, PERO.. ¿POR  DONDE EMPIEZO? ¿QUE HAGO?

Puedes empezar por practicar con tu programa a ver que eres capaz de hacer, por ejemplo creando Smiles, personajes pequeños e ir poco a poco haciendo cosas mas grandes etc... También participar en temas de Pixel-Art haciendo tus c reaciones con las normas que indican, o cuando alguien pide ayuda en un grafico editarlo e intentar mejorarlo para recibir criticas, sugerencias etc... o subir tus propios dibujos.

COLOREANDO NUESTRAS IMÁGENES

1 - EJEMPLO Os voy a poner algunos ejemplos de como colorear nuestros pixelarts y pasos a seguir.

1 - Seleccionamos la zona que queremos colorear y la apartamos de la imagen que estamos haciendo, aplicando el color mas brillante y utilizando los demás colores creando el volumen del objeto.

2 - Añadimos como detalle 2 líneas y haciendo en los laterales un efectos de redondeo para que no se vea tan plano el dibujo.

3 - Coloreamos esas rayas pintándolas de un color intermedio y creando con un color el brillo y con el otro la sombra.

4 - Retocamos partes de la imagen donde podemos añadir anti-alias, retocar algunas líneas, mejorar el efecto de profundidad del objeto como se ha hecho en este c aso etc...

2 - EJEMPLO

1 - Se hace un primer intento de sombreado para darle forma al objeto. 2 - Añadimos todos los colores que creamos c onvenientes para que quede un buen contraste sin sobrecargarlo detallando mejor las zonas de brillo y sombras.

3 - Aplicamos detalles y un poco de dithering a la imagen. 4 - Cambiamos el color de las partes del objeto que no nos gustan hasta dejarlo perfecto.

3 - EJEMPLO Para hacer dibujos mas grandes es mejor separarlo por partes e ir coloreando una por una y después juntarlo. Como podéis ver poco a poco se va formando lo que será la imagen final, podemos empezar una idea de color y que no nos guste y cambiarla o hacer varias pruebas, combinarlas etc y seguir el estilo usado en todas las demás.

El píxel-Art requiere mucha paciencia y claro esta no siempre encontraremos rápidamente la manera perfecta de rellenar alguna parte de un dibujo debido a que no sepamos detallarla o que hacer.

4 - EJEMPLO Para demostrar que yo también soy un ser humano os pongo lo que hice cuando empezaba con el píxel-art y no sabia detallar, ni usar colores ni nada... simplemente lo rellenaba todo de un color y l uego le hacia brillos y sombras a todo con dithering y así quedaban los objetos jejeje que ahora los veo y dan pena. Pero claro esta con el tiempo, paciencia y mucha practica uno va cogiendo ideas, sabiendo trucos y los va aplicando a todo lo que hace, se inventa sus trucos, su metodo de trabajo de manera que poco a poco sin darte cuenta uno mismo se va metiendo de lleno en el Pixel-Art. Lo malo que después vas por a calle y no paras de ver puntitos por todos lados o verlo todo en perspectiva isométrica pero vale la pena

AA / ANTI-ALIAS Añadiendo AA (Anti-Alias). Para añadir este efecto no debéis tocar el dibujo original. Me explico, para añadir los pixels de colores que harán suavizar la imagen deben de ser añadidos fuera, no dentro, ya que de esta forma deformaríais el dibujo original (1). También como se dijo en el apartado anterior podéis crear AA con colores usados ya en la imagen (2). Pero que pasa si queremos crear un AA y necesitamos conseguir uno o 2 colores intermedios para aplicar el efecto?. Pues yo tengo dos formas, 1 es con el programa Microangelo (3) que pones un color a una parte y el otro en otra y creara una sucesión de colores que va desde 1 a l otro, y solo queda elegir cual es el que queda mejor. La otra forma es coger y poner los 2 colores juntos, copiarlo y l levarlo al PSP, y allí aplicar "Resize" y los valores deberían de ser +o- "width= 40" "height=2" y os saldrá algo como esto (4).

Smiles isométricos En este tutorial aprenderemos como crear nuestros smiles isometricos con relieve. Para este tutorial solo utilizaremos el Paint. ( Se recomienda haber leido antes el apartado " trucos de Paint" del tutorial "Aprendiendo Pixel-Art" )

1 - Paso Lo primero que deberemos hacer sera crear una plantilla i sometrica que nos servira para crear el smile que queramos (1). Para crearla debereis de cojer el cubo base e ir copiandolo y pegando hasta hacer un cuadrado de 16x16 por ejemplo. Luego con la opcion de "Relleno de color" de Paint vais dibujando lo que sera vuestro smile . Despues de esto solo hay que sustituirlo por el cubo negro, por lo que tendremos por asi decirlo e l line-art isometrico del smile .

(2)

2 - Paso Ahora rellenáis de color negro los huecos que hay entre los cubos y rodeáis la imagen con un cuadrado azul, rojo el que queráis (4). También con el cubo amarillo tenéis que construir un cuadrado como el que veis (5). Con esto terminado ponéis la cara encima de forma que quede bien cuadrado todo.

3 - Paso Para acabar podeis retocar el smile a vuestro gusto o con vuestro estilo etc..

Y como en todos los tutoriales aqui teneis unas variantes y ejemplos.

Smiles hechas por otros usuarios:

ZER0

En este tutorial aprenderemos como crear nuestros smiles isometricos sin relieve.

PASOS: Pues para crear smiles isometicos sin relieve lo que tendreis que ahcer es lo siguiente. Primero tendreis que crear el smile que quereis pasar a isometrico para que os sirva como guia (1). Luego, crear un circulo isometrico mediante cubos ( podeis cojer el que yo he hecho como plantilla) (2). Ahora teneis que crear los cuadros de colores que veis en la imagen de los colores que habeis usado para dibujar el smile pequeño (3). Y nada mas aora toca ir poniendo los cuadros de colores en el sitio que corresponda hasta hacer el smile dibujado al principio.

Y para acabar lo que he hecho es quitarle las lineas de color mas claro de los cubos negros, poruqe me parece que queda mejor, nose, eso ya segun vuestro gusto o estilo haceis una u otra cosa.

Estados de Píxel-Art En este tutorial aprenderemos como aplicar varios efectos a nuestro píxel-Art. Para este tutorial solo necesitaremos el MsPaint.

PASOS A SEGUIR.... Como veréis tenemos la imagen (1) que muestra un puente destrozado, pero no parece que haya pasado mucho tiempo. Lo que haremos será aplicarle varios estados que juntos harán que parezca que tenga muchos años. Si os fijáis entre la imagen (1) y la (2) veréis que esta ultima esta mas destrozado, ya que para ello hemos borrado trozos del puente y añadido entre las roturas algunos píxeles. En la imagen (3) como se ve a simple vista se ha añadido vegetación, musgo etc... y en la (4) hemos oxidado el puente. Y añadiendo el estado de destrozo, el de vegetación y el de oxidación hemos conseguido que el puente parezca unos cuantos años mas viejo :) .

Como veréis mas abajo hay 2 ejemplos mas del puente, y en la imagen (5) veréis los colores que he usado para la hierva y para oxidar el puente. También os puede servir de ayuda hacer la hierva fuera de la imagen (6) y hacer algunas pruebas y después sobreponerlas en el puente haber que tal quedan.

CONSEJOS.... Si vais a empezar con este tutorial y no tenéis aun mucha practica os aconsejo lo siguiente. Crear un cubo del tamaño que queráis (tampoco os paséis, como máximo el que te ngo yo aquí) e intentar personalizarlo a vuestro gusto. Yo he cogido el cubo (8) y lo he ensuciado, lo he texturizado, le aplicado invierno, efecto hielo.... . Ya que creo que si una persona es capaz de personalizar un cubo como los que veis aquí l uego podrá aplicar el efecto a píxel-Arts mas complejos. Imaginate que tienes un fondo para un juego de dimensiones 512x128, y quieres

aplicarle el efecto invierno, o primavera e tc... Si te pones ha hacerlo tal vez te cueste mucho porque no sepas como empezar o a esta montaña que le hago, a este árbol, etc.... Coge un cubo que es pequeño y sencillo y e mpieza a cambiarle a un color mas frió, anadéele estalactitas, alguna transparencia, nieve etc... cualquier cosa que se te ocurra y cuando ya tengas practica aplícalo a la imagen y de seguro que te será mas fácil.

Para hacer el puente yo tampoco sabia como aplicar el efecto de oxidación ni como poner la hierva colgando etc... así que dibuje un cubo (7) e intente aplicarle un efecto de viejo, primero ensuciarlo, luego oxidar, ponerle hierva etc... y me gusto como quedo así pues aplique lo mismo en la imagen y fue todo sobre ruedas :) .

Aquí os pongo juntos el cubo y la imagen:

Pues nada espero que os guste mi ultimo tutorial y sobre todo que os sirva de ayuda!!

Video-Tutoriales Video-Tutoriales para Remakes Video-tutorial 1: Coloreando y refinando gráficos Video-tutorial 2: Refinando gráficos isométricos Video-tutorial 3: Coloreando gráficos isométricos

Para crear Fuentes Video-tutorial 4: Creando Fuentes con paint Video-tutorial 5: 12minutos de Pixel-art de un Dragon Robotico