Comunidad PHPeros
Imagen y Diseño => Pixel Art => Mensaje iniciado por: lMaikyM en 26 de Mayo de 2010, 18:36:30 pm
-
Hola PHPer@s! Aqui os dejo el tutorial que acabo de finalizar sobre el pixel art:
Introducción:
Lo que habitualmente denominamos Pixel Art es una forma mas de diseño grafico digamos avanzada. El Pixel Art es una tecnica muy minimalista, se trata de ir canviando colores pixel a pixel para formar un objeto o forma que despues al hazerse grande se vera muy bien. Se mide en Pixeles normalmente pero algunos de los nuevos editores graficos tambien miden en centímetros.
Requisitos:
- Un editor grafico, a ser posible, Paint.
- Una paleta de colores propia sin colores muy chillones.
- Mucha imaginación.
- Paciencia.
- Y finalmente y mas importante, TIEMPO.
Primeros Consejos:
Estos consejos sirven para dar un toque especial a vuestro pixel art, digamos para hazerlo mas perfecto:
- Necesitaremos una paleta de colores propia, no utilizes nunca la de Windows.
- Utiliza lineas regulares (Para mas información visita este tutorial (http://"http://www.phperos.net/foro/index.php/topic,5955.0.html"))
- No abuses del color negro, dejalo para interiores y fondos. Los bordes quedaran mejor si utilizas una tonalidad mas oscura del color del interior de tu figura.
- Intenta no utilizar colores chillones, suelen quedar mal.
- Intenta no utilizar demasiados colores, utiliza tambien tonalidades de un mismo color.
Primer Ejercicio: Cuadrado Isometrico Regular:
Este cuadrado es lo mas senzillo y por eso empezaremos con esto:
- Abrimos Paint y hacemos un cuadrado con todos los lados iguales:
(http://i47.tinypic.com/ae8xu9.jpg) - Lo coloreamos de algun color:
(http://i45.tinypic.com/b6tr3p.jpg) - Buscamos un color 20 tonos mas claro que el interior del cuadrado y hacemos una linea de 1 pixel en los lados izquierdo y arriba:
(http://i50.tinypic.com/6hhons.jpg) - Buscamos un color 20 tonos mas oscuro que el cuadrodo y hacemos una linea de un pixel en los dos lados que quedan:
(http://i47.tinypic.com/2e1d84y.jpg) - Del color anterior buscamos un color 20 o 30 tonos mas oscuro y con el pintamos el borde:
(http://i47.tinypic.com/2e1d84y.jpg) - Ahora de cada vertice dibujamos una linea regular (larga) de 1 pixel en diagonal a la derecha:
(http://i46.tinypic.com/14aziic.jpg) - Despues de esto calculamos la mitad de un lado del cuadrado y marcamos ese numero de pixeles en las diagonales y juntamos los puntos; si yo tengo un cuadrado de 100 x 100 contare 50 pixeles en la diagonal:
(http://i47.tinypic.com/34jdfd0.jpg) - Ahora realizamos estos pasos otra vez en los dos cuadrados resultantes pero sin trazar otra vez las lineas, ya tenemos el cuadrado:
(http://i48.tinypic.com/24lqvbk.jpg) - Ahora podemos poner cada cara de un color y hacer sombras y asi trminamos el primer ejercicio:
(http://i49.tinypic.com/2w2enuu.jpg)
En los proximos tres dias acabare este tutorial puesto que va estar bastante completo ;)
-
Me gusto mucho ;) aunque yo en diseño soy malisimo jaja!!
Saludos!
-
Muy bueno el tutorial
Tal vez esta pagina los pueda ayudar con las tonalidades : www.0to255.com
-
Gracias Omar asi ayudas a todos los aprendices ^^ Pero recordad: teneis que "fabricaros" vuestra propia paleta de colores.
Mañana añadire otro ejercicio.
-
En W7 no pueden guardarse los colores que editas, yo lo doy a ADD TO CUSTOM BARD y nada.. ensima si le das a OK despues de editarlos..cierras paint y lo habres de new.. no se guarda..
Saludos!
-
Te explico amigo, con paleta de colores me refiero a un documento de Paint guardado con todos los colores que te gustan y tonos, por ejemplo esta era mi paleta cuando era noob por eso la barra de la izquierda estan los colores de paint :S
(http://i46.tinypic.com/535oxg.png)
-
Gracias ;)
-
Magnifico tutorial para los iniciados, es bastante sencillo de aprender de esta forma no como lo hice yo xD.
Saludos
-
Está bueno tu tutorial; me diste una idea para un pixel art. Gracias :D
-
??? ??? ???
gracias por el tutorial
tio me encanta gracias de unos trazos a la combinacion de colores se saca algo excelente, saludos
-
Deberías seguir con el tutorial maiky
-
muy bueno el tuto grax :)
-
Excelente.
Aunque no se entiende mucho el proceso, es de fácil caracterización y se detalla hasta imágenes. :B
-
¡BUENISIMO POST! Me sirvió muchisimo, si pudiera darte karma te daria (: