Recursos de sitios web basados en píxeles, tutoriales y ejemplos
Diseñar una interfaz web utilizando ilustraciones de estilo pixel es relativamente oscuro en comparación con las tendencias modernas. Realmente necesitas buscar en un puñado de sitios web en Internet para encontrar algunos buenos ejemplos; es dificil pero no imposible.
En este artículo he recogido. Una mega compilación de todo lo que necesitará para el diseño de sitios web basados en píxeles.. Hay docenas de tutoriales saludables para principiantes y expertos por igual. También he incluido algunas herramientas y recursos útiles con los que puedes jugar para explorar más el tema. Si te interesan los gráficos de videojuegos o las ilustraciones de píxeles isométricos, te encantará esta colección..
Recursos
Estos son algunos recursos de desarrollo únicos para scripts web y gráficos digitales. A medida que profundiza en la creación de diseños de sitios web de píxeles, no siempre sentirá la necesidad de seguir todo al punto. Esta colección de recursos basados en la web puede ser útil una y otra vez.
Spritely
Me he acostumbrado a trabajar con código fuente abierto. Es por eso que encontrar un complemento jQuery como Spritely siempre es una situación emocionante. Puede incluir este script en su sitio web para obtener una animación rápida de sprites dinámicos y fondos de desplazamiento.
Todo el complemento está alimentado por JavaScript y HTML / CSS; No se requiere Flash ni ningún otro lenguaje de fondo. La página de documentación es simple pero suficiente para comenzar. Los desarrolladores tienen un montón de demostraciones de muestra que también puedes descargar.
La versión de lanzamiento estable actual es 0.6.1 que se actualiza moderadamente. Los efectos de animación son compatibles con Opera, Chrome, Safari, Firefox e Internet Explorer 6+. Además, los navegadores de teléfonos inteligentes que se ejecuten en Android o iOS deberían mostrarse perfectamente.
FatPixels
Este es un poderoso script de código abierto desarrollado por Matías Martínez. FatPixels solo requiere que la biblioteca jQuery se ejecute correctamente. Aunque diría que Spritely es una biblioteca de animación más compleja, FatPixels tiene un nicho en el mercado para desarrolladores web..
Puedes crear fácilmente sprites animados sin crear una imagen .gif. De hecho, podrás exportar todas las imágenes como .jpg y crear una cola de sprites para un efecto animado largo. La página de inicio de FatPixels tiene una excelente demostración junto con el bloque de código jQuery utilizado para construirlo. Si estás buscando algo ligero para animar tus sprites, entonces FatPixels es el camino a seguir..
SmartSprites
Cuando se usa la palabra "sprite" hay un par de significados diferentes. Los personajes de videojuegos o los sprites animados son generalmente imágenes más pequeñas renderizadas con muy pocos píxeles. Sin embargo, en CSS, el término sprite se refiere a una sola imagen que actúa como una hoja de iconos para su sitio web.
La razón por la que debe usar una única hoja de sprite en lugar de imágenes individuales es reducir los recursos del servidor. Es mucho más rápido descargar una imagen más grande con todos sus iconos en lugar de muchas imágenes más pequeñas pero separadas. Pero poner todos estos iconos juntos en Photoshop puede ser una verdadera molestia; Ni siquiera necesariamente difícil, solo repetitiva y lenta..
Afortunadamente, SmartSprites CSS Generator es un recurso fantástico para esta situación. Puede generar rápidamente una hoja de píxeles perfectos con todas sus imágenes en formato GIF o PNG. Además, puede determinar rápidamente lo que su posición de fondo Las coordenadas x / y deben ser para cada ícono individual..
Squidfingers BG Patrones
Diseñar un buen conjunto de imágenes de fondo repetidas es muy difícil. Pueden pasar días antes de que puedas crear imágenes sin costura. Pero afortunadamente hay recursos en línea para descargar mosaicos de fondo gratis..
La galería de patrones de Squidfingers es uno de esos recursos. Ofrece más de 150 patrones diferentes de estilo de píxel que puede descargar y usar en sus proyectos. Los estilos son muy dinámicos y coloridos, y para tal variedad, es un excelente recurso para tenerlos a mano. Los enlaces de descarga están en formato .zip, lo que los hace más pequeños y más fáciles de transferir entre computadoras.
Los Spriters Resource
No puedo decir lo suficiente sobre The Spriters Resource. Es un sitio web en el que puede buscar hojas de sprites en todos los sistemas de juegos. Estos pueden incluir mapas, edificios, pantallas de menú, sprites de personajes, iconos y prácticamente cualquier cosa.!
Han estado en línea desde 2001 y el catálogo de videojuegos ha crecido enormemente. Hay toda una comunidad detrás de TSR con diseñadores gráficos que pueden copiar estos diferentes sprites de juego. Si estás interesado en algún tipo de diseño de videojuegos o sitios de fans en línea, tendrás que visitar esta increíble galería..
Aún más interesantes son algunos de los sitios web hermanos que generaron TSR. Los fanáticos de los juegos también ayudaron a extraer texturas de base y renderizar modelos de personajes. En general, es una gran comunidad que apoya el trabajo con sprites en arte digital.
400 píxeles
Esta es una aplicación web realmente genial que no proporciona un valor esencial, pero definitivamente es nítida. 400 píxeles le permite crear un documento de píxeles en línea y almacenar la imagen en su cuadrícula. El sitio está diseñado de manera similar a la página de inicio de un millón de dólares con cada foto ocupando un bloque cuadrado en la imagen general.
Puedes jugar en su interfaz web creando algunas ilustraciones realmente ridículas. No es algo que aprenderás de inmediato, pero es divertido jugar con él una vez que lo aprendes. Y es una buena herramienta con la que puede trabajar desde cualquier computadora que tenga acceso a Internet..
Salida mayor
En una línea similar a 400 píxeles, puede utilizar Major Output como un estudio personal en línea para ilustraciones de píxeles. Todavía está en las primeras etapas de desarrollo, pero toda la funcionalidad del usuario principal ya está disponible. Puedes registrarte para obtener una cuenta gratuita y comenzar a crear pixel art de inmediato..
Cada imagen se almacena localmente en sus servidores, que puede enlazar en sitios web y foros. Muchas de las imágenes están abiertas al público y puede consultarlas haciendo clic en diferentes autores o etiquetas. También hay un cuadro de búsqueda, pero creo que la calidad de los resultados de búsqueda no siempre es excelente.
Major Output parece ser otra herramienta comunitaria que es divertido de conocer, pero que probablemente no puede ofrecer mucho valor educativo para los artistas de píxeles..
Tutoriales
Ahora que tiene los recursos, echemos un vistazo a los tutoriales proporcionados por los numerosos centros educativos y las útiles publicaciones de blogs repartidas por Internet. He reunido un pequeño conjunto de muy útil Tutoriales de Pixel Art para principiantes y diseñadores intermedios.. Muchos de estos tutoriales se centran en Adobe Photoshop, pero puede seguir casi cualquier editor de imágenes avanzado.
El tutorial de Pixel Sprite por Derek yu
Obviamente, hay decenas de cientos de tutoriales de pixel-sprite en Google, pero este tutorial en particular en el sitio web de Derek Yu atraviesa muchos pasos diferentes para educar cómo crear sprites de píxeles. Gran parte del proceso se ha simplificado y explicado de una manera que permite a los principiantes saltar rápidamente a la acción.
A los fanáticos de los videojuegos les encantará este tutorial, ya que puede ver estos gráficos específicos tras bambalinas. Me encanta encontrar un diseño de sitio web con ilustraciones de píxeles de videojuegos esparcidas por todo el diseño. Proporciona un sentido único de nostalgia, y es algo que no se encuentra en todas partes. Cualquiera que busque crear sus propios sprites de píxeles por cualquier motivo puede comenzar en la serie de tutoriales de 10 pasos de Derek..
Configurando Photoshop para Pixel Art por Brandon Treb
Aquí hay otro tutorial perfecto dirigido a los principiantes en el campo de las ilustraciones de píxeles. La publicación del blog está escrita por Brandon Treb, que es un fantástico diseñador y desarrollador de dispositivos móviles. Puede encontrar todo tipo de información útil en esta guía detallada del arte de Photoshop basado en píxeles..
Debe saber cómo configurar las preferencias en Photoshop para que la ilustración de su píxel no se vea incómoda o pierda calidad al exportar. Es posible que se sorprenda al saber que se requiere mucha personalización para obtener realmente una buena calidad de imagen.
Dibujo de píxeles hechos a mano por Russell Tate
Aquí hay otro tutorial increíble lleno de técnicas para dibujar a mano pixel art en Photoshop. Esta colección de técnicas de arte de píxeles es simplemente sorprendente. Cualquiera que hojee el contenido probablemente encontrará algo que no había conocido antes.
Hay explicaciones detalladas sobre la creación de texturas en el césped y la corteza; también sobre cómo clonar las ilustraciones de píxeles que has dibujado y convertirlas en un diseño de icono. Todo se reduce a la práctica y la precisión en cada área. Aquellos que son verdaderamente apasionados lo seguirán y en pocos meses encontrarán una técnica sólida para sus ideas de estilo pixel.
Desarrollando una cartera de juegos CSS / JS por Daniel Sternlicht
Aquí hay un tutorial de Smashing Magazine sobre cómo codificar una cartera de juegos con CSS / JS que utilizó muchos sprites de la serie de juegos Pokémon. El autor es Daniel Sternlicht, quien también maneja su cartera personal en este diseño basado en juegos..
El sitio web actúa como un mundo RPG en el que controlas un personaje sprite con el teclado. Puede ingresar a diferentes edificios que luego mostrarán información como detalles de contacto y entradas de cartera..
Realmente me encanta este tutorial, y es una manera emocionante de combinar el diseño de píxeles con el desarrollo de sitios web. Incluso si no sabes mucho sobre JavaScript, este es un artículo muy interesante. He revisado parte del código y debo felicitar a Dan por este tutorial tan creativo. Cualquier fanático de Pokémon seguramente se enamorará de sus ideas..
Tutoriales de píxeles isométricos por matriax
Este pequeño sitio web gas13.ru tiene algunos de los tutoriales de píxeles más excéntricos y profesionales que he visto. En el tutorial de piscinas isométricas se te presenta la creación de bloques brillantes y textura de agua. Además, encontrará recursos para todos los otros píxeles isométricos en la barra lateral..
Hay mucho que aprender: puedes diseñar un escaparate, un sprite de píxeles o incluso texturas detalladas para videojuegos y fondos de sitios web. No estoy seguro de si este autor todavía está publicando contenido activamente, pero los artículos existentes son más que suficientes para que los principiantes aprendan lo básico.
Studio Purloux Pixel Tutorial por Kevin Chaloux
Ahora que estoy enumerando todos los mejores tutoriales de píxeles, definitivamente incluiría esto al principio. Este tutorial completo sobre ilustraciones de píxeles es un excelente artículo de seguimiento para novatos. Se le presentará desde el principio al software de código abierto como GIMP o Paint.NET..
Aprenderá cómo exportar imágenes y las muchas facetas del diseño de píxeles, como el difuminado y el suavizado. Hay tantas técnicas diferentes para seguir junto con. Debería recoger algunas ideas de diseño mirando videojuegos retro de 8 y 16 bits..
El autor Kevin Chaloux acredita el tutorial de píxeles de Derek Yu (mencionado anteriormente) y menciona que esto es una fuente de inspiración cuando comenzó..
Crear un mejor Favicon Por Kayla Knight
Los diseñadores web a menudo olvidan que una imagen de favicon (icono favorito) es una parte importante de cualquier esquema de marca. Todos los sitios web más populares pueden ser reconocidos por su favicon de 16 × 16. Cuando trabaja con un lienzo tan limitado, se ve obligado a lidiar con ilustraciones e ilustraciones con gran densidad de píxeles. Este tutorial de favicon de OXP hace un excelente trabajo al combinar ambas ideas.
Desde este punto, puedes entender por qué el arte de píxeles es tan beneficioso al crear favicons. También hay herramientas y técnicas sólidas para exportar un archivo .ico. También se incluye una pequeña muestra de favicons populares de toda la Web..
Este es otro recurso que creo que puede beneficiar a todos los diseñadores web. Es empoderante educarse sobre cómo crear un favicon y trabajar con estrictas limitaciones de píxeles..
Galería de escaparates
Me gustaría cerrar el artículo con una bonita galería de diseños de sitios web de estilo píxel. He incluido 40 ejemplos de varios diseños con muchas visiones artísticas diversas. La tendencia de las ilustraciones pixeladas apenas comienza a resurgir dentro de los sitios web convencionales. Espero que este escaparate distinto de sitios de píxeles pueda ofrecer una fuente de inspiración para los desarrolladores web de todo el mundo..
Central terrestre
PixelJam
Red Rokk Marketing interactivo
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
Ciclo de lienzo HTML5 de 8 bits
Daniel Sternlicht
Ejército de trolls
Aplicación BlockHead Pix
madPXL
supertott 2.0
ClassicGaming
Tutoriales del kit de herramientas de RPG
Creador de la ciudad
Final Fantasy XIII-2
KawaiiHannah Pixel Art
La caja de arena
Senor Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Patas arriba
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
Dulcepix
Megapont
Mini metrópolis
Hayo van Reek
Estudio pixeltemple
Adepto Vormgeving
Museo del pixel
QuickHoney
Polpo.net
spiv.cz
4 masa real
