Bueno para comenzar una definición de nuestro amigo wikipedia

Pixel art

El pixel art es una forma de arte digital, creada a través de una computadora mediante el uso de programas de edición de gráficos en raster, donde las imágenes son editadas a niveles de pixeles. Las imágenes de la mayor parte de viejos videojuegos para ordenadores, videoconsola, y muchos juegos para teléfono móvil son consideradas obras de pixel art. Posee similitudes con el puntillismo, difiriendo principalmente en las herramientas para la creación de estas imágenes, computadores y programas en lugar de pinceles y lienzos.

Bueno ahora unas cosas basicas

Vocabulario Especifico

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 : Efecto que usa las variantes de tono de un color para llenar espacios, etc..


Dithering : Efecto parecido al Gradient con la salvedad de que este alterna 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 es 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 copada.


Truco 5 : Cambio de color

Imaginaros que estáis trabajando con paint, y tenéis un circulo 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.


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 color 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" jeje. Pero cuando una persona sabe detallar los objetos etc, ponle el contraste que quieras que en global quedaran bien  .


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 colores 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


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.

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 caso etc...

2 - EJEMPLO



1 - Se hace un primer intento de sombreado para darle forma al objeto.

2 - Añadimos todos los colores que creamos convenientes 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.

WOOW! Grandidimo post sobre el pixel art :-)

Muchas gracias por el post, he aprendido bastante.

Cuanta información en el post muchas gracias

Gracias, luego lo leo mejor. 

Gracias por el aporte ;)

Nunca pude hacer nada de esto T_T