Cómo configurar Adobe Illustrator para trabajar y crear Pixel Art, Parte 1

Cómo configurar Adobe Illustrator para trabajar y crear Pixel Art, Parte 1

  11:41    LydiaPerán

---

Illustrator es un gran programa especializado en el diseño vectorial.
Se usa para la creación de: anuncios, tarjetas de agradecimiento, posters, portadas o ilustraciones de libros, novelas gráficas, storyboards, diseño de camisetas... y todo lo que alcance tu imaginación.
En concreto, la aplicación no está pensada para el uso de Pixel Art. Aún así, si quieres crear un icono o favicon o cualquier dibujo en Pixel art, puedes configurar el programa para que realice esta función.

En este tutorial, encontrarás cómo configurar y crear Pixel Art con Adobe Illustrator.

Pasos previos

Lo primero tras abrir un nuevo documento en Illustrator (Archivo > Nuevo) es especificar una serie de parámetros para que documento se cree con la siguiente configuración:

✔ Anchura y Altura (Width y Height) al tamaño que desees el documento. Cuando trabajamos con píxeles hay que tener más o menos pensado previamente el tamaño final de la imagen porque para hacer más chico o ampliar el dibujo hay que hacerlo escalando en x2 (multiplicando o dividiendo en múltiplos de 2. ej: si mide 100 y quieres ampliar tendrás que multiplicar x2, x4, x6...).
✔ Unidades (Units): Píxeles.
✔ Sangrado (Bleed): 0px en todas las opciones (esta opción sale en versiones superiores a CS3).

En las opciones avanzadas:
✔ Modo de color (Color mode): RGB.
✔ Efectos de Rasterizado (Raster Effects): Pantalla (72ppp).
✔ Modo de Previsualización (Preview Mode): Pixel.
✔ La opción: Alinear nuevos objetos con cuadrícula de píxeles seleccionada.

Configura las preferencias:

✔ Desactiva el Anti-aliasing:
A continuación dirígete a:
              Edit > Preferences > General
              Editar > Preferencias > General
Para evitar que los bordes de los objetos creados se vean borrosos debes desmarcar la casilla que ponga "Anti-Aliased Artwork".

Ejemplo de objetos Con Anti-aliasing y sin AA.

✔ Cuadrícula
A continuación Configura la Cuadrícula (Grid) para mostrarse cada 1px con subdivisiones cada 1.
También puedes deseleccionar o seleccionar Grid in Back (la cuadrícula se muestra detrás de tu dibujo si está marcada la casilla o frente al dibujo si está desmarcada).

              Edit > Preferences > Guides & Grid
              Editar > Preferencias > Guías y Cuadrícula






✔ Medidas en píxeles
Ahora asegúrate de que todas las medidas estén en píxeles.
              Edit > Preferences > Units & Display Performance
              Editar > Preferencias > Unidades




✔

Ajusta la Cuadrícula

              View > Snap to Grid
Ajustar la Cuadrícula sirve para que cada objeto que creemos se alinee con la cuadrícula de Illustrator (esta opción no es la misma que Alinear a Píxeles).


Después, utilizando la flecha blanca de selección directa, selecciona los 2 nodos del lado izquierdo del objeto


Presiona la tecla -> del teclado para desplazar los nodos y verás cómo los nodos se alinean a la cuadrícula.





✔

No uses decimales.

Al crear un objeto, observa "Option Bar" y asegúrate que no haya números decimales, si los hubiera, significaría que los objetos no están perfectamente alineados a los píxeles y se crearían problemas.





✔

Regla en píxeles

Botón derecho sobre la regla y selecciona Pixels.






Por fin hemos terminado de configurar Illustrator, ahora comienza el tutorial para crear Pixel Art.
Existen dos maneras de hacerlo: una es con la herramienta "Rectangle Tool" y otra con la herramienta "Rectangular Grid Tool".
En este tutorial veremos la primera y en más adelante explicaré la segunda forma.

Crear el dibujo a pixel con la herramienta "Rectangle Tool"

Selecciona la herramienta "Rectangle Tool" y crea un rectángulo que ocupe todo tu documento.

Dirígete a
              Object > Path > Split into Grid

Elige el número de columnas (Columns) y de filas (Rows) que quieres que tenga la cuadrícula.
En las casillas "Gutter" escribe 0px.




Ya está todo listo para pintar usando la herramienta "Bote de pintura interactiva" o "Live Paint Bucket".

Selecciona la herramienta de bote de pintura interactiva, el color que quieras usar y arrastra el bote de pintura sobre la cuadrícula.



No olvides que cuando trabajas en pixel art, a veces es necesario ver el dibujo muy ampliado y pierdes el norte.
Por eso, puedes abrir una ventana nueva con el proyecto en el que estás trabajando y ponerla a distinto tamaño para orientarte mejor.
Para ello ve a:
              Window > New Window
Y pon al tamaño que desees la nueva ventana de tu obra.


Puedes ver más en la segunda parte del artículo cómo configurar Adobe Illustrator para dibujar Pixel art

Leer Más

Conoce al maestro del Pixel Art, Fool y sus mejores obras

Conoce al maestro del Pixel Art, Fool y sus mejores obras

  8:57    LydiaPerán

---

Yuriy Gusev es Fool o como me gusta llamarlo: el dios del Pixel Art.


Fool es un aclamado artista nacido en Rusia (en la actualidad vive en Cleveland) que ha producido bellísimas obras tanto en isométrico como en no-isométrico.
Fool visualiza lo que quiere expresar e intenta plasmarlo en sus ilustraciones procurando contar siempre una historia.
Sus dibujos son complejos y el nivel de detalle es máximo. Además, sus animaciones delatan sus profundos conocimientos artísticos y capacidad de observación (aunque él no se considera artista ni tiene aspiraciones de serlo).









Se inició en este complejo mundo del Pixel Art a raíz de un accidente que le dejó en cama durante unas semanas.
Es un autodidacta que ha aprendido todo lo relacionado con el Pixel Art en comunidades como:
PixelJoint
Pixelation
y cuando necesita algo concreto para una obra (ya sea técnica o color...) se sumerge en Internet para informarse.






Photoshop y Graphics Gale son sus programas preferidos a la hora de realizar sus obras a pixel teniendo mayor predisposición por Graphics Gale por ser más específico para el Pixel Art.






Es un artista reservado, la atención del público y sus muestras de cariño y respeto, le sobrepasan pero aprecia los comentarios e intenta superarse así mismo y encontrar tiempo para responderlos.

Premio para quien pinche en esta imagen.

Nombre: Yuriy Gusev
Nick: Fool
Web: Fool's House, foolstown.com actualmente no operativa : (

Otros perfiles:

Perfil de Fool en pixeljoint (donde tiene nada más y nada menos que 76 medallas).
Fool en DevianArt


Para mí, Fool es un dios, para mí es el artista más completo y el mejor que existe en este momento de la técnica del pixel art y le aprecio muchísimo, pero algo me dice, tras mucho tiempo siguiéndole, que es una persona pesimista que tiende a abandonar proyectos y pasa años sin subir un solo trabajo.

Leer Más

Tributo a Los Simpsons con un vídeo realizado a pixel art por Paul Robertson e Ivan Dixon

Tributo a Los Simpsons con un vídeo realizado a pixel art por Paul Robertson e Ivan Dixon

  8:40    LydiaPerán

---

No es de extrañar que el animador australiano Paul Robertson nos deleite con una obra de arte.
En este caso ha creado, junto con Ivan Dixon, la secuencia de apertura (comúnmente llamado Opening o intro) de los Simpsons utilizando la técnica del Pixel Art. Y además han contado con la ayuda de Jeremy Dower para crear la música estilo 16-bits del mismo.

Escena del vídeo a pixel art. Planos de cerca animados por P. Robertson y planos abiertos por Ivan Dixon.

Paul Robertson e Ivan Dixon han reemplazado todos los gráficos originales por animaciones pixeladas de los mismos y han añadido alusiones a montones de capítulos de la mítica serie como Homer obeso o Homer en el espacio, Mr Sparkle... Y todo esto con un toque que recuerda a los video juegos de los 80 y guiños al propio arte del Pixel (Bart deja escrito en la pizarra de la escuela la frase: "El arte de los píxeles no es arte real").

En un principio, la intro fue creada como tributo a la serie y la colgaron en Internet. Gustó tanto a los fans y a los creadores de Los Simpsons éstos se pusieron en contacto con Robertson y Dixon para licenciar la obra que, finalmente, fue emitida en Febrero del 2015.

No es la primera vez que los creadores de Los Simpsons recurren a artistas del momento tales como Banksy, Don Hertzfeldt y Sylvain Chomet que también han tenido el honor de contribuir con la serie creada por Matt Groening.

No te pierdas el divertido y delirante momento del sofá ; )

El divertido vídeo "couch gag" de The Simpsons a pixel art

Personajes diseñados por P. Robertson y animados por Ivan Dixon:





Además un vídeo entrevista a los tímidos autores que explican todos los entresijos sobre cómo surgieron las ideas, el proceso y cuánto les gustó realizar el tributo a Los Simpsons:


Dirigido y animado por Paul Robertson e Ivan Dixon.
Música por: Dower.

Leer Más

Pixel Art Editor aplicación gratuita para Android

Pixel Art Editor aplicación gratuita para Android

  6:01    LydiaPerán

---

¿Qué es Pixel Art Editor

Se trata de una app muy ligera (123k) para Android para crear tus propias obras de pixel art tal y como lo harías con MS Paint.

Logo aplicación Pixel Art Editor

Esta app gratuita tiene una serie de características que te ayudarán a crear logos, favicons e imágenes a nivel de pixel.
También puedes crear o modificar texturas, skins, mapas y tunear tus capas de Minecraft EP y Minebuilder.

Personaliza tu capa de Minecraft o texturas de Minebuilder

Características a destacar de la app Pixel Art Editor:

Herramientas como: pincel, brocha, goma de borrar, selector de color, y herramienta rellenar, zoom, cuadrícula...
Formas como línea, rectángulo, círculo, círculo relleno.
Paletas de color.
Además soporta pantalla multi-táctil a la hora de hacer zoom o usar el pincel.

Edita a nivel de pixel con una interfaz secilla

Lo más importante es que los desarrolladores de esta herramienta escuchan las críticas de sus usuarios y mantienen la aplicación actualizada. Tal es el caso, que en esta versión de Pixel Art Editor 1.0.3, han añadido la herramienta de clonar y han corregido los cierres inesperados por falta de memoria.

Esta app te permite elegir colores para tus creaciones pixel art

Se echa en falta un botón de rehacer, una mejoría en la paleta de color y en la herramienta de zoom (que es un poco difícil de usar). También estaría mejor si se pudieran escalar las imágenes x2, x4... y seleccionar una zona de la imagen para recortarla y poder moverla.
Otras características a mejorar: añadir edición por capas, creación de gifs animados y la posibilidad de guardar en más formatos (actualmente guarda la imagen con la extensión .png transparente o no, depende de tu dibujo).
Aún así, es una aplicación muy completa para ser gratuita.

Desarrollador: DevSpace

Para mí, nada mejor que coger la tableta en mis ratos libres o mi móvil y garabatear con estilo a pixel. Si lo que me sale merece la pena, guardo la imagen y le meto más caña en el Pc.

Leer Más

Los inicios y evolución del Pixel Art en la informática

Los inicios y evolución del Pixel Art en la informática

  8:50    LydiaPerán

---

Los amantes del Pixel Art tenemos suerte porque existen miles de artistas y, muchos de ellos, son realmente buenos.
Me resulta imposible realizar una lista de los mejores o una que recopile a los más destacados (y menos por orden cronológico).
Por eso, empezaré por el principio y, en posteriores entradas, haré todo más improvisado, más a lo loco.

Poco se sabe sobre quién fue realmente el creador de este arte aunque todo apunta a Susan Kare. Esta señora, fue la encargada, en 1984, de crear los primeros iconos gráficos de Macintosh que, por supuesto, fueron pixelados (debido a las limitaciones tecnológicas existentes).

Icono pixelado creado por Susan Kare.

Susan Kare es llamada "la artista que dio a las computadoras una cara humana" pero hay gente que apunta que esto no es cierto ya que existen videojuegos creados en estilo Pixel Art de antes de los 80'.

Space Invaders.

En ese caso, se podría decir que Susan Kare dio un aspecto bonito a los sistemas operativos pero no que sea la creadora del movimiento Pixel Art.
Susan Kare también fue la encargada de crear una tipografía proporcionalmente espaciada que permitía al texto ser tan natural en una pantalla como lo era en los libros de texto. Creó las fuentes New York, Chicago, Geneva y Monaco.

Tipografía creada por Susan Kare

En la actualidad, no existe limitación de datos así que el arte del pixel ha sido retomado por artistas amantes de lo retro y por desarrolladores de videojuegos que buscan la complicidad del que se crió con los primeros videojuegos o, simplemente, abaratar costes de desarrollo (cosa que no tiene por qué suceder con esta técnica).
Un juego puede ser llevado a cabo con pocos recursos y eso no se consigue con el tan de moda 3D. En cambio, sí se puede conseguir con otros estilos visuales como puede ser: a base de vectores en Flash, sprites en Photoshop e incluso pintando a mano y escaneando.
El método preferido, en este blog, es el Pixel Art por pura estética. Para mí es un mero recurso estilístico y me encanta ver lo que pueden llegar a crear los artistas con tan poca resolución y colores. La originalidad y el carisma de algunas obras es impresionante.

En anteriores entradas hemos explicado qué es el Pixel Art: Se trata de un arte creado a nivel de pixel. Es decir, se trabaja con imágenes muy pequeñas para así ahorrar recursos gráficos.
En los inicios de la informática, esto se hacía por necesidad porque no existía mucha memoria para hacer gráficos pesados y atractivos a la vista. Por eso, se usaban sprites de baja resolución (192 x 160 a 4 colores por fila de la Atari) y la libertad creativa era limitada.


Las grandes compañías de videojuegos comenzaron una guerra entre ellas y eso ayudó a la mejora de los gráficos tanto en color como resolución.
Nintendo Entertaiment System, desarrolló un poco más la tecnología de momento permitiendo la resolución de los televisores de tubo: 256 x 224 y mejoró el sistema de color permitiendo una paleta de 56 colores (de los cuales sólo 25 se mostraban de golpe en la pantalla). Aquí comenzó la era del 8-bit (y la moda de fases de lava, hielo, bosque y desierto que aprovechaban esos 25 colores que se podían mostrar en la pantalla).

Los gráficos de Sega Master System permitían una paleta de 64 colores totales de los cuales 32 se mostraban a la vez en la pantalla. También podían desarrollar sprites de mayor tamaño y más complejos.

Sega Mega Drive, tenía una resolución: 320 x 224 con una paleta total de 512 colores de los cuales sólo se podían mostrar simultáneamente 64 (o más si activaba el modo shadow-highlight).

Super NES tenía una paleta de 32,768 colores, 128 colores en pantalla y una resolución de 256 x 240 puntos (en la mayoría de sus juegos) pudiendo alcanzar 512 x 448.

Así fueron compitiendo unas empresas contra otras hasta llegar a día de hoy donde, por ejemplo, la PlayStation 4 tiene una resolución de 1920 x 1080 píxeles y, al menos (no he conseguido la cifra exacta), una paleta de 16,7 millones de colores.

Evolución del pixel art en los videojuegos.
Clic para ampliar

En la actualidad, si quieres dibujar al estilo Pixel Art, la resolución puede ser la que quieras y tu paleta puede ser tan grande como imagines (dependiendo de lo purista que seas, claro).
Si eres desarrollador, solo añadiría que hay que saber cuándo, y cuándo no, usar la técnica Pixel art; si sólo es un recurso para apelar a la nostalgia sin que la jugabilidad se adapte consecuentemente a la de la época que pretende evocar, en mi opinión, es mala idea usar esta técnica.

Leer Más