epelpad

El post que buscas se encuentra eliminado, pero este también te puede interesar

[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!

[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!

arquitectura

PIXEL ART


El Pixel Art es una forma de diseño y arte digital que se crea por medio del ordenador usando programas de edición de gráficos, desde el más sencillo Microsoft Paint hasta el complejo pero efectivo Adobe Photoshop.

diseño


Las creaciones en Pixel Art consisten en ir constituyendo las imágenes por medio de colores ilustrándolas pixel a pixel y valiéndonos de la herramienta Zoom, un largo trabajo pero con resultados excelentes!!!


pixel


Otras características que se pueden resaltar de esta tendencia de diseño son el uso de la perspectiva isométrica para representar escenas o imágenes en tres dimensiones, combinado con una buena combinación de colores dando resultado aun ambiente agradable y lleno de vida.

da click en la imagen para verla en mejor calidad ;D


Punto

tutorial

arte

habbo

[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!

arquitectura

diseño

APRENDE A CREAR TU PROPIO PIXEL ART

El pixel art se divide comúnmente en isométrico y no-isométrico. El estilo isométrico es dibujado casi en una proyección dimétrica isométrica. Esto se vé mucho en juegos para producir la sensación de un entorno tridimensional sin usar una computadora con verdadero potencial para producir gráficos en 3D. Técnicamente, un ángulo isométrico debería ser de 30 grados desde la horizontal.

Isometrico

pixel

No-isometrico


Punto

TEXTURIZAR OBJETOS


Hacer un edificio con un color plano puede quedar bien si buscáis un efecto acartonado, pero generalmente queda un poco soso, por lo que lo suyo es crear una textura de ladrillo en sus paredes.

A continuación os dejamos los pasos para crear dicha textura:

Paso 1. Creamos un cuadrado horizontal, (iso-horizontal), con el color que queramos para nuestro edificio, (nosotros hemos puesto este: D05F3E). A continuación creamos líneas más oscuras que el color seleccionado, (por ejemplo 77321E), en una de los lados o paredes.

Paso 2. Una vez hechas las líneas horizontales, creamos pequeñas líneas verticales en, saltando cada línea horizontal, para crear el efecto del ladrillo.

Paso 3. Para conseguir que la apariencia del ladrillo sea más real, podemos añadir también unos brillos en cada uno de los ladrillos, con un color más claro que las líneas, (por ejemplo A44428)

Como podéis apreciar en la imagen que os dejamos a continuación, la textura no es tan complicada de realizar y el resultado es mucho mejor que en color plano.

tutorial

TEXTURIZAR HIERVA


Es muy diferente a texturizar ladrillos. A continuación os dejamos los pasos para crear dicha textura:

Paso 1. Seleccionamos el color plano que queramos usar para nuestra textura de hierba y lo ponemos sobre nuestro cuadrado isométrico plano, (nosotros hemos usado 3C8822).

Paso 2. Aplicamos varios píxeles con un color más oscuro que el que habíamos utilizado para el color plano, (por ejemplo 306C1B).

Paso 3. A continuación creamos unos brillos para nuestra hierba, para ello, encima de cada punto o píxel oscuro anterior, ponemos un punto o píxel más claro que nuestro color plano original, (por ejemplo 4BAC2A).

Paso 3. Por último y para darle un efecto de mayor masa a nuestra textura de hierba, aplicamos varios píxel o puntos aleatoriamente, del mismo color que en la paso número 2.

arte

TRANSPARENCIA


A continuación más que un efecto de textura, vamos a ver un efecto de transparencia, que puede quedar muy bien para cristales y ventanas.

Este efecto es muy sencillo, si lo hacemos con el Photoshop, simplemente tenemos que crear nuestro edificio en una capa o imagen y poner encima una capa con la forma del cristal o ventana, al poner no veremos más que el color del cristal, pero si bajamos la opacidad de la capa, dentro del cuadro de capas, conseguiremos un efecto de transparencia.


habbo


Muchas texturas pueden crearse de maneras diferentes, el mejor consejo es que observéis las texturas reales, estudiando sus reflejos o composición.

Ahora un tutorial mucho mas avanzado

CASA ISOMETRICA


Utilizando algunas técnicas que hemos ya repasado arriba, comenzaremos a utilizar nuestras habilidades para dibujar un edificio isometrico. para eso tomaremos como muestra una pequeña tienda de videojuegos pero ustedes pueden hacer el edificio les apetezcan xD por supuesto harán algo mucho mejor, eso espero xDD

Paso 1. Comenzamos creando el contorno del edificio en este caso un cuadrado basico.
[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!


Paso 2. Para dar mas detalle a la estructura procedemos a añadir partes superiores que complementan. en este caso se añade una sección de 3 trozos cuadrados delgados uno sobre otro, uniendo los bordes para que quede mas estético.
arquitectura


Paso 3. Ya tenemos la forma básica de nuestra estructura, ahora podemos rellenar con el color que mas nos guste.
diseño


Paso 4.Ahora vemos que la parte superior esta algo simple, para darle algo de detalle colocaremos una terraza
pixel


Paso 5. Ya va tomando forma nuestro trabajo y tendremos que agregar iluminación a la maqueta para darle mucho mas realismo. para esto simulamos los rayos del sol iluminando nuestro edificio, debemos detectar estas zonas donde el sol puede llegar y donde no, dando un color diferencial para estas zonas color azul claro para zona iluminada y color azul oscuro para zona no iluminada, también podemos variar en las escalas de colores para dar mas detalle.

Punto


Paso 6. Ahora vamos a añadir algunos toques de luz a los bordes. tras destacar los bordes interiores del edificio da un efecto frío, los bordes negros pueden generar la sensación de algo fuerte,exagerado, pero la adición de estos realmente ayudan a redondear nuestro edificio. Sustituir algunos de los bordes negros con un tono azul más oscuro ayuda a dar mucho mas detalle.

tutorial


Paso 7. Ahora añadiremos una ventana para que el espacio interior pueda ser visualizada, creando un rectángulo y luego otro mas pequeño dentro de el, se obtiene un efecto de profundidad y crea una repisa para la ventana.

arte


Paso 8. Usando una técnica similar a la ventana podremos crear fácilmente puerta.

habbo


Paso 9. En este caso la tienda tiene un gran letrero en la parte superior con el nombre de Marsh loft, por que tendré que pasar de este tutorial a otro que nos enseñara a editar texto para convertirlo en signos isometricos

Paso 10. Elija un tipo de letra cualquiera, en este caso un 3, preferiblemente tipografía tipo bit map, puede buscar por internet.
[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!


Paso 11. Desde la barra de menú de photoshop seleccione Edicion / Transformación libre. tendrás la libertad de inclinar tu texto teniendo encenta el angulo que tiene tu edificio.
arquitectura


Paso 12. Ahora con la varita mágica seleccionamos el texto y creas una nueva capa y nos dirigimos a Edición / Contornear, se abrir una ventana, dejaremos anchura 1 px, color negro, posición interior y el resto como esta y daremos en ok, eliminamos la capa del texto y nos quedara lo siguiente.
diseño


Paso 13. Duplicamos la capa y la movemos de manera isometrica, las uniremos con algunos pixeles.
pixel


Paso 14. Ahora rellenamos de color a cada lado y limpiamos los píxeles que no se deben mostrar a través de nuestro carácter isométrico.
Punto


Paso 15. Usamos el efecto de iluminacion, dando detalles con algunos niveles de color dependiendo la posición del sol en edificio que estamos realizando.
tutorial


Paso 16. Ahora destacaremos los bordes usando un tono más ligero de nuestro color
elegido.
arte


Paso 17. Bien, ahora que hemos aprendido a hacer tipografía isometrica, podemos crear una muestra usando esta técnica. Como se ve continuación, un letrero bastante bonito para un elegante edificio de videojuegos xD.

habbo


Paso 18. Haremos algunos toques finales, en este caso unos toques de luz en el cristal (ustedes pueden agregar transparencia y colocar algunos estantes en su interior) también se ha agregado algunas pegatinas y señales por encima de la puerta y ventanas.

[Megapost]Pixel Art mas que un simple pixel Tutoriales!!!

TAMAÑO REAL

arquitectura



PROGRAMAS PARA CREAR TU PIXEL ART

1. MOAI

Si eres de la vieja escuela y traes encima horas y horas de experiencia y costumbre con clásicos del MSDOS como el Autodesk Animator, este programa te encantará. Se trata de un remake del mencionado Autodesk Animator, software de edición de los 90, introduciendo algunas mejoras adicionales así como la posibilidad de guardar en formatos más actuales como JPG o PNG (e incluso manteniendo el viejo formato LBM).

MOAI

2. Grafx2

Grafx2 también pertenece al grupo de los editores de la vieja escuela. En este caso, absorbe parte del espíritu del Deluxe Paint (ver más adelante) y otro antiguo editor para Amiga llamado Brilliance. Es un software open source (GPL) y está especialmente diseñado para pixel Art con herramientas clásicas, pero también introduce técnicas más actuales como la incorporación de capas o soporte de transparencias.

Grafx2

3. Paint.NET

Esta vez, avanzamos en el tiempo y analizamos un software más actual, que también brinda posibilidades como editor gráfico (y no sólo como editor pixel art). Sin embargo, debido a sus cómodas y sencillas opciones, puede ser ideal para el diseño de gráficos pixelados.

Paint.NET

4. GIMP

Otro de los editores gráficos más famosos es el conocido GIMP, instaurado como alternativa al todopoderoso Photoshop. Aunque a priori, su interfaz pueda resultar algo complicada, se puede configurar para crear geniales diseños pixel art sin esfuerzo alguno.

GIMP

PAGINAS DE PIXEL ART

http://gas13.ru/

http://www.pixelsmil.com/2011/03/aprendiendo-pixel-art-tutorial-de.html

http://www.desarrollomultimedia.es/articulos/manual-pixel-art-plantas.html

http://hello.eboy.com/eboy/

http://http://fortytwopixels.net/

diseño

pixel

Punto


Gracias por ver el porst!!!

seria un gustazo ver algunos de sus pixels, compártelos en los comentarios si os gusta!!!

les comparto mi primer pixel que hice hace poco xD

tutorial


hasta la próxima...


Comentarios Destacados

8 comentarios - [Megapost]Pixel Art mas que un simple pixel Tutoriales!!!

paulie1989 +3
Excelentes trabajos. Soy fanático de este arte.
IZANAGI2011 +1
Tremendo post, me lo guardo en favs para probarlo. Saludos.
plcuervo +1
buen post! debe ser tremenda tarea crear algo asi de detallado

Shout GifGIF
edwar203 +1
Buen post me gusto mucho me recuerda mucho a habbo
Carlitrosccs
El mejor de venezuela http://iloveui.com/ y de los mejores de mundo.. chequenlo