Jake Rocheleau . Archivado en Diseño Web
Diseño de una interfaz web con estilo pixel-arte es relativamente oscuro en comparación con las tendencias modernas. Usted realmente necesidad de excavar a través de un puñado de sitios web en Internet para encontrar algunos buenos ejemplos, es difícil pero no imposible.
En este artículo he recogido una recopilación mega-de todo lo necesario para el diseño de sitio web basado en píxeles . Hay docenas de tutoriales saludables para principiantes como para expertos. También he incluido algunas herramientas prácticas y recursos que usted puede jugar un poco con explorar el tema más a fondo. Si usted está interesado en absoluto en gráficos de videojuegos o ilustraciones pixel isométrico, entonces te encantará esta colección.
Lectura recomendada: 30 excelentes tutoriales para los amantes del arte del pixel del pixel
Recursos
Estos son algunos de los recursos de desarrollo únicas para scripts web y gráficos digitales. Al profundizar en la creación de sitios web de píxeles presentaciones que no siempre se siente la necesidad de seguir todo el punto. Esta colección de recursos web puede venir muy bien en tiempo hábil y otra vez.
Spritely
Me he acostumbrado a trabajar con código fuente abierto. Es por eso que la búsqueda de un plugin de jQuery como spritely es siempre una situación excitante. Usted puede incluir este script en su sitio web para la animación rápida sprites y fondos dinámica de desplazamiento.
El plugin funciona con toda JavaScript y HTML / CSS, sin Flash o cualquier otro idioma backend es necesario. La página de documentación es simple pero suficiente para empezar. Los desarrolladores tienen un montón de demos de muestra que se puede descargar también.
La versión actual versión estable es la 0.6.1, que es moderadamente actualizada. Los efectos de animación son compatibles con Opera, Chrome, Safari, Firefox e Internet Explorer 6 +. También los navegadores de teléfonos inteligentes que se ejecutan en Android o iOS debe hacer perfectamente.
FatPixels
Este es un poderoso guión abierto duende fuente desarrollado por Matías Martínez . FatPixels sólo requiere la biblioteca jQuery para funcionar correctamente. Aunque yo diría que spritely es una biblioteca de animación más compleja, FatPixels tiene un nicho en el mercado para los desarrolladores web.
Usted puede construir fácilmente sprites animados sin crear una imagen. Gif. De hecho, usted será capaz de exportar todas las imágenes como. Jpg, y crear una cola de sprites para un efecto animado mucho. FatPixels La página web cuenta con una excelente demostración junto con el bloque de código jQuery usado para construirlo. Si usted está buscando algo ligero para animar tus sprites entonces FatPixels es el camino a seguir.
SmartSprites
Cuando se utiliza la palabra "sprite" hay un par de diferentes significados a la misma. Personajes de videojuegos o sprites animados son generalmente pequeñas imágenes renderizadas con muy pocos pixeles. Sin embargo, en CSS, el sprite término se refiere a una sola imagen, que actúa como una hoja de iconos para tu sitio web.
La razón que usted debe usar una hoja de sprites único lugar de imágenes individuales es reducir los recursos del servidor. Es mucho más rápido para descargar una imagen más grande celebración de todos los iconos en lugar de muchas imágenes pequeñas pero separadas. Pero poner todos estos iconos juntos en Photoshop puede ser una verdadera molestia, ni siquiera necesariamente difíciles, repetitivas justo y consume mucho tiempo.
Afortunadamente, el generador SmartSprites CSS es un recurso fantástico para esta situación. Usted puede generar rápidamente una hoja de pixel-perfect con todas tus imágenes, ya sea en formato GIF o PNG. Además, usted puede determinar rápidamente cuáles son sus
posiciones de fondocoordenadas X / Y debe ser para cada icono individual.Squidfingers Patrones BG
El diseño de un buen conjunto de imágenes de fondo repetición es muy difícil. Pueden pasar días antes de que usted puede crear imágenes sin costura. Pero por suerte hay recursos en línea para la descarga de fichas libres de antecedentes.
La galería Squidfingers Patterns es uno de esos recursos. Cuenta con más de 150 diferentes modelos de píxeles de estilo que se puede descargar y utilizar en sus proyectos. Los estilos son muy dinámicos y coloridos, y por tal variedad, es un excelente recurso para tener a mano. Los enlaces de descarga están en formato zip., Que los hace más pequeños y más fáciles de transferir entre las computadoras.
El Recurso Spriters
No puedo decir suficientes cosas buenas sobre el recurso Spriters. Es un sitio web donde se puede buscar a través de todos los sistemas de juego diferentes para las hojas de sprite. Estos pueden incluir mapas, edificios, pantallas de menú, sprites de personajes, iconos, y casi cualquier cosa!
Ellos han estado en línea desde el año 2001 y el catálogo de los videojuegos ha crecido enormemente. Hay toda una comunidad detrás de TSR con diseñadores gráficos que pueden rasgar los sprites de juegos diferentes. Si usted está interesado en cualquier tipo de diseño de videojuegos o sitios de fans en línea, usted tendrá que echa un vistazo a la galería de fotos increíble.
Aún más interesante son algunos de los sitios web asociados que generó fuera de TSR. Fans de los videojuegos también ayudó con extracción de bases texturas y renderizar modelos de los personajes . En general, es una comunidad muy grande un gran apoyo para 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 sin duda es limpio. 400 píxeles le permite crear un documento en línea pixel y almacenar la imagen en su red.El sitio está diseñado de una manera similar a la página de millones de dólares con cada cuadro que toma un bloque cuadrado en toda la imagen.
Puedes jugar en su interfaz web crear alguna obra de arte realmente ridículo. No es algo que va a retomar de inmediato, pero es divertido para jugar una vez que el cuelgue de ella. Y es una buena herramienta que puede trabajar con cualquier computadora que tenga acceso a Internet.
Producto Principal
En la misma línea de 400 píxeles se puede utilizar como producto principal de un estudio personal en línea de obras de arte pixel. Todavía está en las primeras etapas de desarrollo, pero toda la funcionalidad del usuario núcleo está ya disponible. Usted puede registrarse para obtener una cuenta gratuita y empezar a crear arte pixel de inmediato.
Cada imagen se almacena localmente en sus servidores que puede hotlink en sitios web y foros.Muchas de las imágenes están abiertas al público y se puede comprobar a cabo accediendo a los 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 genial.
Producto principal parece otra herramienta de la comunidad que es divertido conocer, pero probablemente no puede ofrecer mucho valor educativo para los artistas de píxeles.
Pixelart Tool
En halfshag.com encontrará una aplicación web muy bizzare isométrica pixel art. Para una herramienta en línea, pixelart es un ejemplo muy poderoso de un software basado en navegador.Algunos de los archivos más viejos están simplemente alucinante si tenemos en cuenta cómo estos fragmentos de obras de arte se crean. Si usted tiene un interés en cualquier cosa isométrica a continuación, dar este recurso de unos minutos de su tiempo.
Al hacer clic en el "Get Started" enlace abrirá la herramienta en una nueva ventana emergente .Registrar una cuenta nueva o entra a una ya existente, antes de iniciar un proyecto. Alternatiely, puedes probar la demo como invitado, pero usted no será capaz de guardar cualquier trabajo o diseños de exportación. El registro es totalmente gratuito, así que vale la pena crear una cuenta si usted está interesado.
Tutoriales
Ahora que usted tiene los recursos, vamos a echar un vistazo a los tutoriales proporcionados por los centros de educación de muchos blogs y mensajes útiles repartidos por toda la Internet. He reunido un pequeño grupo de realmente útiles tutoriales de pixel art para principiantes intermedios y diseñadores . Muchos de estos tutoriales se preparan enfoque hacia Adobe Photoshop, pero se puede seguir a lo largo de casi cualquier editor avanzado de imágenes.
El Tutorial Sprite Píxeles Por Derek Yu
Es obvio que hay decenas de cientos de píxeles de sprites tutoriales en Google, pero este tutorial especial en el sitio web de Derek Yu pasa por muchas etapas diferentes en la educación de cómo crear sprites pixel. Gran parte del proceso se ha simplificado y se explica de una manera que permite a los principiantes pasar rápidamente a la acción.
Los fans de videojuegos les encantará este tutorial ya que echar un vistazo detrás de las escenas en la creación de estos gráficos específicos. Me encanta encontrar un diseño de página web con obras de arte pixel del juego video lleno todo el diseño. Proporciona una sensación única de nostalgia, y es algo que no se encuentra en todas partes. Alguien que busque crear sus propios sprites pixel por cualquier motivo puede comenzar en la serie de Derek tutorial de 10 pasos.
Configuración De Photoshop Para Pixel Art Por Brandon Treb
He aquí otro tutorial perfecto dirigido a los principiantes en el campo de la obra de arte pixel. El blog está escrito por Brandon Treb que es un fantástico diseñador y desarrollador móvil. Usted puede encontrar todo tipo de información útil en esta guía detallada basada en píxeles arte Photoshop.
Usted debe saber cómo configurar las preferencias de Photoshop para que su obra de arte pixel no aparecerá torpe o pierden calidad al exportar. Es posible que se sorprenda al saber demasiada personalización es necesario para obtener una calidad de imagen realmente agradable.
Dibujos Hechos A Mano Píxeles Por Russell Tate
He aquí otro tutorial increíble gama de técnicas de dibujado a mano del arte del pixel en Photoshop. Este conjunto de técnicas de pixel art es simplemente asombroso. Cualquiera que roza a través del contenido más probable es encontrar algo que no había conocido antes.
Hay explicaciones detalladas acerca de cómo crear textura en el césped y corteza; también sobre cómo clonar arte pixel que has dibujado y convertirla en un icono del diseño. Todo se reduce a la práctica y precisión en todas las áreas. Los que son verdaderamente apasionado que se pegue a través y dentro de unos meses encontrar una técnica sólida para su estilo de píxeles ideas.
El Desarrollo De Una Cartera De Juegos CSS / JS Por Daniel Sternlicht
Aquí está un tutorial de Smashing Magazine sobre cómo codificar una cartera de juegos con CSS / JS que utilizan muchos sprites del juego de la serie Pokemon. El autor es Daniel Sternlicht que también pasa a ejecutar su expediente personal en este esquema de juego basado en.
El sitio web actúa como un mundo RPG en el que controlas un sprite personaje con el teclado.Usted puede entrar en edificios diferentes que a su vez aportan información complementaria como datos de contacto y las entradas de cartera.
Realmente me encanta este tutorial, y es una manera emocionante de combinar arte con píxeles de desarrollo de sitios web. Incluso si usted no sabe mucho acerca de JavaScript es aún un artículo interesante super. He pasado por algunos de los códigos y debe dar tremendos elogios a Dan para un tutorial creativo. Los fanáticos de Pokemon seguramente se enamorará con sus ideas.
Tutoriales Isométricos Pixel Por Matriax
Este pequeño sitio web gas13.ru cuenta con algunos de los tutoriales de píxeles más excéntricas y profesional que he visto nunca. En el tutorial piscina isométrica que está introducido en la creación de bloques brillantes y la textura del agua. Además encontrará recursos para todos los demás tuts píxeles isométricos en la barra lateral.
Hay tanto que aprender: usted puede diseñar un escaparate, sprite pixel, o incluso texturas detalladas para videojuegos y fondos sitio web. No estoy seguro de si este autor sigue siendo activamente el contenido editorial, pero los artículos que son más que suficientes para que los principiantes aprendan lo básico.
Studio Tutorial Purloux Pixel Por Kevin Chaloux
Ahora que estoy enumerando todos los mejores tutoriales píxeles duda, incluir este derecho hacia el principio. Este tutorial todo en obras de arte pixel es un gran seguimiento de artículo para novatos. Se le presentó desde el comienzo mismo software de código abierto como GIMP oPaint.NET .
Usted aprenderá cómo exportar las imágenes y las múltiples facetas del diseño de los píxeles, como el tramado y suavizado. Hay técnicas muy diferentes a seguir junto con. Usted debe tomar algunas ideas de diseño retro mirando en los videojuegos de 8-bit y 16-bit.
Autor Kevin Chaloux créditos Derek Yu pixel tutorial sprite (mencionados anteriormente) y menciona que esta como una fuente de inspiración cuando él primero comenzó.
Cree Un Favicon Mejor Por Kayla Knight
Los diseñadores web a menudo olvidamos que un favicon (icono favorito) la imagen es una parte muy importante de cualquier régimen de la marca. Todos los sitios web más populares se pueden reconocer por su 16 × 16 favicon. Cuando se trabaja con un lienzo limitada, que se ven obligados a hacer frente a pixel-denso ilustraciones y los ejemplos. Este tutorial favicon de OXP hace un excelente trabajo de combinar ambas ideas.
A partir de este tut, se puede entender por qué el arte pixel es tan beneficioso al crear favicons.También existen herramientas y técnicas sólidas para exportar un archivo. Ico. También se incluye un pequeño escaparate de favicons populares de todo el Web.
Este es otro recurso que creo que puede beneficiar a todos los diseñadores web. Es alentador que se informe sobre la creación de un favicon y el trabajo con las limitaciones estrictas de píxeles.
Showcase Gallery
Me gustaría cerrar el artículo con una linda galería de diseños de sitios web de píxeles de estilo. He incluido 40 ejemplos de diseños diferentes con muchas visiones artísticas diversas. La tendencia de la obra de arte pixelado recién está empezando a resurgir dentro de los sitios web tradicionales.Espero que este escaparate distinto de sitios de píxeles puede ofrecer una fuente de inspiración para los desarrolladores web de todo el mundo.
No hay comentarios:
Publicar un comentario