Curso de Pxel-Art
Hechos por MATRIAX
Recopilado por Cr_Pk
ndice.1. Piscina isomtrica para nios
2. Reflejos
3. Pasando Imgenes 2D a isomtricas
4. Rayos Solares
5. Aprendiendo Pxel-Art
6. Smiles isomtricos
7. Estados de Pxel-Art
8. Video-tutoriales
Piscina Isomtrica para nios
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. Adems es el primer dibujo que realizo en perspectiva isomtrica, 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 isomtrica (1), luego se le da la idea que tenemos
en mente de la iluminacin 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 cubos 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 tendris 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 fcil. Claro esta el suelo es la parte que mas fondo esta, por lo que ser la
mas oscura ( que inteligente soy, si es que hay veces que me asusto y todo...)
As pues, hacemos el suelo de cuadrados, alternando uno claro y otro oscuro ( si queris podis 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 hacis como yo os lo digo :) .
Ahora la idea es conseguir el rea donde estara 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 llenis su interior de un color de la paleta del MS Paint, el que queris,
seleccionis la imagen y la llevis al Paint Shop Pro, le dais a este icono
y pulsis sobre el color que habis
puesto de relleno, os lo seleccionara pulsis Control+C y en una hoja en blanco del Paint pulsis Control+V y
deberais de tener esto pero con el color que le habris aplicado:
Y vosotros diris 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 tenis 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 mnimo 3 y mximo 7). Y tenis 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 tamao que deseaba.
Y vosotros diris, que has hecho? , pues despus 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 insertis en la otra como una capa, la ajustis bien en su sitio y le dais un 24% de opacidad
y veris que transformacin jejeje. Luego le bajis el numero de colores ( colors->decrease color depth) y ya ta!,
tendris algo parecido a esto:
whoooaa!!
Y si el color no os convence lo podis ajustar con "brightnes and contrast" o "Gamma correction", adems de
aadirle algn que otro detalle etc... y ale a disfrutar, si es que dan ganas de baarse jejejej
Como veis es una piscina pequea, para los nios. Creo que con este tutorial una vez aprendido no habra problema
en hacer una piscina mas grande y con mas profundidad etc.. , pero en fin si eso ya creare un tutorial para hacer una
piscina olmpica :) .
Otra cosa es que me gustara, que si hacis el tutorial me enviis 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 tambin 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 ao con otro tutorial :) . Esta vez trata de hacer reflejos o brillos en las imgenes.
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 lneas 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 claro y seguidamente pintamos las letras blancas en el color que
tenia al principio, o mas rpido creis un rectngulo, lo ponis 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 ponindolo de forma que coincida con el reflejo anterior (5).
Y ya esta se acabo el tutorial...... y vosotros diris 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 colores, 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 seccin 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 isomtrica.
Para este tutorial solo utilizaremos el Paint.
1 - Paso
Como ejemplo he creado una valla publicitaria. He hecho un rectngulo isomtrico (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
continuacin 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
vaco 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 (9) (en menos de 1
minuto listo)
Pues ya esta, espero que con esta parte del tutorial ya sepis aplicar este efecto a imgenes isomtricas.
Os pongo otro ejemplo:
Bien, en esta tercera parte explicaremos como hacer que se vea reflejado un objeto isomtrico en el suelo.
Para este tutorial utilizaremos el Paint y el Pain Shop Pro.
1 - Paso
Tenemos un objeto isomtrico al que queramos hacer un reflejo en el suelo. Voy a coger como ejemplo la valla
publicitaria anterior. Y la pondremos en el fondo que veris a continuacin:
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 lneas 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 sern parte del reflejo de las letras (4). Decir que
si se hiciera el reflejo perfecto no se llegaran a ver nada de las letras pero lo haremos as para que os acostumbris
a detallar mejor las cosas. Por ultimo haremos las rayas de brillo pero esta vez si sern en diagonal (5).
2 - Paso
Bien pues ya tenemos en nuestras manos el reflejo (6). Pero para ser un reflejo debera 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 fijis en el fondo que hemos elegido el reflejo estar, la mayor parte en los azulejos
blancos y otro en los azulejos azules, por lo que nos va a tocar hacer el reflejo de 2 tonalidades distintas. Un reflejo
para los azulejos B y otro para el A .
Aqu tenis 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 tendremos la imagen final. Como lo hacemos ? (parece
mentira que me preguntis eso...). Primero pintamos la baldosa de un color (verde en este caso), seleccionamos
dicho color como transparente y lo ponemos encima. Lo mismo con el reflejo del otro tipo de baldosa. Con esto
hecho nos quedara la imagen (8) pero deberemos de cambiar el color de las 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
tambin lo podis 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 aadimos 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 IMGENES 2D A ISOMTRICAS
En esta ocasin lo que haremos ser pasar de imgenes "planas" a imgenes en perspectiva isomtrica. En esta
primera parte empezaremos con lo bsico rectngulos, tringulos...
Para este tutorial utilizaremos el Paint y el Paint Shop Pro solo para el "Skew".
PASOS A SEGUIR....
Pues vamos ha crear un rectngulo normal y corriente (1). Luego le aplicamos un filtro llamado Skew (2) de
26.565 que lo podris encontrar tanto en paint shop pro como en Photoshop. Ya tenemos el rectngulo en
perspectiva isomtrica pero le falta profundidad. As pues dibujamos una lnea desde uno de sus vrtices (en
perspectiva isomtrica claro) que marcara la profundidad que le queremos dar del rectngulo (3). Entonces lo que
haremos ser copiar el rectngulo al final de la lnea (4) y posteriormente nos quedara unir los vrtices que quedan
mediante una lnea y eliminar aquellos trazados que no se vern (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 pxel horizontales del dibujo 1 pxel hacia arriba, con lo
que si queris o si la imagen es pequea podis hacerlo vosotros mismos con Paint.
Adems tambin podremos aplicarlo a otras figuras geomtricas etc.. :
Y para el triangulo tendremos que hacer esto:
Despus de ver esta primera parte del tutorial podris pensar que es fcil o difcil pero que no sirve de mucho
debido a que nadie utilizara para un juego estos cubos tan grandes etc, y para que veis 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 teora la he inventado yo, por lo que puede que tenga algn que otro fallo que se ira corrigiendo segn vaya la
gente haciendo el tutorial. Me ha llevado toda una semana de pruebas con crculos etc.. hasta que descubr la
composicin de un circulo isomtrico 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 difcil de explicar que de hacer.
Para este tutorial solo utilizaremos el Paint con el cual crearemos los 2 tipos de crculos isomtricos.
1 - Paso
He creado una plataforma y a partir de ella lo que haremos ser crear los 2 crculos isomtricos. Empecemos por el
mas sencillo el de la parte superior de un cubo. Este es muy sencillo, simplemente tendris que crear con la
herramienta de circulo uno que tenga de ancho el doble de pxeles que de altura y listo.
Sencillo verdad?, pues esperar a ver como conseguir un circulo isomtrico de un lado de un cubo.
2 - Paso
Este es el 2 tipo de circulo isomtrico que nos podemos encontrar el cual es mucho mas difcil que el 1 (ni os lo
imaginis)
Decir que para el 2 tipo no se conseguir un circulo isomtrico perfecto, pero es debido a que Paint no crea crculos
2d perfectos, ni paint ni otros, os pongo ejemplos y comprobadlos vosotros mismos.
Bien para este ejemplo hemos creado un circulo de 73x73 pxel. Pues segn mi teora para crear el circulo
isomtrico de estas dimensiones necesitaremos 2 crculos, uno del doble de tamao y el 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 errneo,
podris ver al lado, la curva del circulo creada con paint (1) y la curva del circulo que debera 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 isomtrico (4) .
Eso por un parte y ahora vamos a conseguir el otro trozo del circulo que nos falta con ayuda del circulo pequeo.
Lo que haremos ser cojer siempre un cuarto del circulo pequeo como vereis en la imagen (5) y lo pondris 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 isomtrico
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 isomtrico.
Ahy queda explicada mi teora del circulo isomtrico para el que le quiera dar un vistazo.
Rayos Solares
Bien pues en este tutorial aprenderemos ha crear los rayos de sol en nuestras imgenes.
Para este tutorial utilizaremos Paint y Paint Shop Pro.
He cogido como ejemplo la piscina del anterior tutorial, podis coger cualquier imagen.
PASOS A SEGUIR....
Como veris 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 tendris que hacer los rayos que utilizaremos en la imagen con un color de windows (en este
caso rojo) (2), los copiis y pegis (teniendo como transparente el color rojo) en la imagen sabiendo claro esta que
dichos rayos salgan de los cristales y os saldr esto (3) . Seleccionis las rayas convertidas ahora en trozos de la
imagen (4) y las llevis a Paint Shop Pro donde le aplicis "brightness and contrast/brillo y contraste" y segn la
intensidad que queris ponis unos u otros valores, en mi caso he puesto 40 de brillo y 10 de contraste.
Y pegis 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 Pxel-Art
PIXELART : Tcnica de dibujo realizada punto por punto donde se pueden crear dibujos, imgenes, animaciones
etc..
Line-Art : Es el dibujo o imagen hecho con lneas en blanco y negro.
Sel-Out : Tcnica 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 lneas 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 lnea que rodea al
dibujo.
Paleta De Colores : Sern 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 sensacin de suavidad y se utiliza un color medio entre el
color que queremos suavizar y el fondo.
Grficos Isomtricos : Son aquellos grficos hechos en perspectiva isomtrica vistos a 26.565
Sprite : Los sprites son las imgenes de los personajes, bichos, etc. Por ejemplo los personajes del Streets of
fighter son Sprites, el mueco que manejas en los rpg es un sprite, se podra 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 animacin de un "sprite" al andar, correr, saltar... por lo cual
gracias a los frames podemos ver al personaje moverse por la pantalla. Tambin decir que cuando mas frames tenga
una animacin mejor suavidad le dara a los movimientos y mas realista ser el Sprite.
Con esto ya tenis unos conocimientos "tcnicos" por decirlo de alguna manera del Pixel-Art, as que ahora no os
extraareis si os dicen "Si le aplicas Sel-out al sprite quedara mejor" "Eh! eso esta hecho en perspectiva isomtrica"
"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 fcil crculos 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 tenis que estar pendientes de los pxeles que se marcan abajo.
Truco 2:
Con la herramienta de crear polgonos, si mantenis presionado "Shit izquierda" podris 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 hacis es seleccionar parte de una imagen "Control+C" copiis y
"Control+V" para pegarlo donde queris. Pues para mas rapidez simplemente seleccionis la parte de la imagen,
presionis la tecla "control" y con ella presionada arrastris la copia a otro lugar, as de sencillo.
Truco 4: Efectos Paint.
Si queris hacer un efecto extrao con Paint, seleccionar una imagen cualquiera, mantener presionada la tecla "Shit
izquierda" y al comenzar a arrastrar la imagen veris que cosa mas chula :) .
Truco 5 : Cambio de color
Imaginaros que estis trabajando con paint, y tenis un circulo con 2 colores que se alternan rojo y blanco... como
cambiis el color de rojo a azul? pxel a pxel ?.... mejor hacer esto que os digo:
Ponis el color rojo de primer plano y el color azul de 2 plano. seleccionis la goma, y dejando pulsado el botn
derecho del ratn y pasando la goma por el circulo rojo, veris 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 cosas!! (ni os lo imaginis)
Truco 6 :
Imaginaros que dentro de un cuadrado, circulo o seleccin de una imagen queris poner una textura hecha con paint
etc... y que pasa si hacemos lo que ocurre en el 1 caso?, pues que nos tocara quitar pxel a pxel 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 fcil 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 tenis hecha una palabra con una plantilla isomtrica, Como la sacarais? borrando con la goma
cuidadosamente?. Como borraras el contenido en color rojo del circulo superior? Tambin 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, seleccionis como color de 2 plano el que queris eliminar,
seleccionis la imagen, pulsis control y la llevis a otro sitio con lo cual tendris el mismo dibujo pero sin el color
de 2 plano. Claro esta si queris eliminar 3 o 4 colores tambin podris hacerlo de esta manera.
Tambin como podis ver en la segunda imagen lo podis utilizar para eliminar el outline negro despus de haber
acabado una imagen, o si despus de hacer un resize o una imagen donde habis cometido un error y en un circulo
os salgan unos colores molestos que queris eliminar haced esto.
CRITICAS CONSTRUCTIVAS
1- Aadiendo 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 veris 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 pxeles pues bien. Ya que si pusiera un buen contraste le
quedara 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 :) .
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 estn bien detallados. Claro esta, si es un dibujo para un fondo etc tendr que tener
poco contraste.
Si pinchis en el link, podris 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 tenis que
habituaros a crear vuestras propias paletas de colores cuando antes, ya que una imagen puede cambiar muchsimo si
utilizis colores Windows o una hecha por vosotros. A colores Windows me refiero a todos los colores que tenis
en la paleta de Windows y sus variantes de tono.
3- Quitar el contorno negro "Outline" y sustityelo 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 tambin para juegos es preferible quitarlo. ej:
4- Aadiendo AA /Anti-Alias a las lneas de Dentro/Fuera.
Lo que hay que hacer es simplemente lo que se dice aadirle AA a las lneas 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 aadir 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 perdern calidad y
para el Pixel-Art se debe mostrar la imagen sin perdida de datos.
PROGRAMAS PARA PIXELAR
PAINT
Pues este podramos decir que es el programa mas sencillo que hay para hacer dibujos pxel a pxel.
Para la gente que empieza en esto del pxel-Art y no tengan ni idea de que programa utilizar usen el Paint. Si usis
programas de diseo para otras cosas como photoshop, psp donde tenis amplios conocimientos y facilidad para
dibujar podis usarlo tambin.
MICROANGELO
Este es un programa para crear iconos o cursores animados de tamaos 32x32 y 48x48.
Yo he utilizado bastante ese programa y lo sigo utilizando en su versin 5.58, que lo podis encontrar por ejemplo
en [Link]
Suelo usarlo para crear colores para el Anti-Alias ya que tiene una opcin "Color Blend" que te crea una serie de
colores que van desde uno a otro de forma gradual. Y gracias a esto seria fcil elegir el color para el antialias ya que
seria +o- el color del centro.
tambin tiene una opcin en la ventana "Paint modifiers" llamada Anti-Alias con la que conforme pixelemos el
programa automticamente nos ira poniendo el solito el Anti-Alias jeje.
PAINT SHOP PRO
Bueno, pues este es otro programa que podis utilizar para pixelar. A diferencia de Photoshop este programa es ms
bien para retoque fotogrfico pero que perfectamente os puede servir para crear vuestros pxel-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, adems tambin para conseguir colores mas saturados o conseguir colores para aplicar
luego el Anti-Alias.
Lo podis encontrar en [Link]
PHOTOSHOP
podramos decir que el programa para crear pxel-Arts profesionales seria Photoshop ya que con este programa no
necesitaramos de programas externos para aplicar el efecto skew, capas ni nada y lo podramos hacer todo con el.
Claro esta todo es cuestin de gustos, habilidad y conocimientos que se tengan de cada programa el cual deberemos
elegir para crear nuestros pxel-Arts, pero sin duda photoshop seria la mejor opcin.
Lo podis encontrar en [Link]
GRAPHICS GALE
Este es otro programa mas con el que poder hacer pxel-Arts que yo no conoca pero que tiene cosas bastante
curiosas e interesantes. Decir tambin que sirve tanto para crear imgenes como animaciones dentro del mismo
programa.
Lo podis encontrar en [Link]
Yo para mis pxel-Arts uso el Paint de Windows y cuando tengo que hacer algo con capas (rara vez) uso el PsP
(Paint Shop Pro) adems de para conseguir nuevos colores con mas contraste o un color para crear Anti-Alias.
PREGUNTAS:
ENTONCES, CON QUE PROGRAMA EMPIEZO ?
Si no tienes ni idea de ningn programa pero te gusta el pxel-Art sin duda abre el Paint y ponte a practicar. Si por
el contrario usis habitualmente el Photoshop, PaintShopPro etc.. o cualquier otro programa con el que poder crear
imgenes pxel a pxel 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 fcil y el que te da una total libertad para crear lo que se te ocurra. Adems
con todo el tiempo que llevo he adquirido bastante rapidez en mis creaciones adems de aprender truquillos o atajos
con paint con el cual hacer las cosas mas rpidamente.
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 pequeos e ir poco a poco haciendo cosas mas grandes etc...
Tambin participar en temas de Pixel-Art haciendo tus creaciones 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 IMGENES
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 dems colores creando el volumen del objeto.
2 - Aadimos como detalle 2 lneas y haciendo en los laterales un efectos de redondeo para que no se vea tan plano
el dibujo.
3 - Coloreamos esas rayas pintndolas 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 aadir anti-alias, retocar algunas lneas, 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 - Aadimos 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 despus juntarlo. Como
podis 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 dems.
El pxel-Art requiere mucha paciencia y claro esta no siempre encontraremos rpidamente 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 tambin soy un ser humano os pongo lo que hice cuando empezaba con el pxel-art y no
sabia detallar, ni usar colores ni nada... simplemente lo rellenaba todo de un color y luego 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 despus vas por a calle y no paras de ver puntitos por
todos lados o verlo todo en perspectiva isomtrica pero vale la pena
AA / ANTI-ALIAS
Aadiendo AA (Anti-Alias).
Para aadir este efecto no debis tocar el dibujo original. Me explico, para aadir los pixels de colores que harn
suavizar la imagen deben de ser aadidos fuera, no dentro, ya que de esta forma deformarais el dibujo original (1).
Tambin como se dijo en el apartado anterior podis 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 sucesin de colores que va desde 1 al otro, y solo queda elegir cual es el que queda mejor. La otra forma es
coger y poner los 2 colores juntos, copiarlo y llevarlo al PSP, y all aplicar "Resize" y los valores deberan de ser
+o- "width= 40" "height=2" y os saldr algo como esto (4).
Smiles isomtricos
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 isometrica 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 (2)
. Despues de esto solo hay que sustituirlo por el cubo negro, por lo que tendremos por asi decirlo el line-art
isometrico del smile .
2 - Paso
Ahora rellenis de color negro los huecos que hay entre los cubos y rodeis la imagen con un cuadrado azul, rojo el
que queris (4). Tambin con el cubo amarillo tenis que construir un cuadrado como el que veis (5). Con esto
terminado ponis 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 pequeo (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 Pxel-Art
En este tutorial aprenderemos como aplicar varios efectos a nuestro pxel-Art.
Para este tutorial solo necesitaremos el MsPaint.
PASOS A SEGUIR....
Como veris 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 harn que parezca que tenga muchos aos. Si os
fijis entre la imagen (1) y la (2) veris que esta ultima esta mas destrozado, ya que para ello hemos borrado trozos
del puente y aadido entre las roturas algunos pxeles. En la imagen (3) como se ve a simple vista se ha aadido
vegetacin, musgo etc... y en la (4) hemos oxidado el puente. Y aadiendo el estado de destrozo, el de vegetacin y
el de oxidacin hemos conseguido que el puente parezca unos cuantos aos mas viejo :) .
Como veris mas abajo hay 2 ejemplos mas del puente, y en la imagen (5) veris los colores que he usado para la
hierva y para oxidar el puente. Tambin os puede servir de ayuda hacer la hierva fuera de la imagen (6) y hacer
algunas pruebas y despus sobreponerlas en el puente haber que tal quedan.
CONSEJOS....
Si vais a empezar con este tutorial y no tenis aun mucha practica os aconsejo lo siguiente. Crear un cubo del
tamao que queris (tampoco os pasis, como mximo el que tengo 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 luego podr aplicar el efecto a
pxel-Arts mas complejos. Imaginate que tienes un fondo para un juego de dimensiones 512x128, y quieres
aplicarle el efecto invierno, o primavera etc... Si te pones ha hacerlo tal vez te cueste mucho porque no sepas como
empezar o a esta montaa que le hago, a este rbol, etc.... Coge un cubo que es pequeo y sencillo y empieza a
cambiarle a un color mas fri, anadele estalactitas, alguna transparencia, nieve etc... cualquier cosa que se te
ocurra y cuando ya tengas practica aplcalo a la imagen y de seguro que te ser mas fcil.
Para hacer el puente yo tampoco sabia como aplicar el efecto de oxidacin 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 grficos
Video-tutorial 2: Refinando grficos isomtricos
Video-tutorial 3: Coloreando grficos isomtricos
Para crear Fuentes
Video-tutorial 4: Creando Fuentes con paint
Video-tutorial 5: 12minutos de Pixel-art de un Dragon Robotico
Esto fue:
Curso de Pxel-Art
Hechos por MATRIAX
Recopilado por Cr_Pk
Agradecimientos a:
Matriax
por los tutoriales
Web original de los tutoriales:
[Link]
Cr_Pk
por haberlo juntado y transformado a PDF
ADOBE
Porque sin su programa nunca lo hubiera logrado
ComunidadGM
Porque sin el no hubiera encontrado estos tutoriales
