Recursos, Tutoriais e Exemplos de Websites Baseados em Pixel

Projetar uma interface da Web usando arte-final em estilo de pixel é relativamente obscuro em comparação com as tendências modernas. Você realmente precisa vasculhar um punhado de sites na Internet para encontrar alguns bons exemplos; é difícil mas não impossível.

Neste artigo eu colecionei uma mega-compilação de tudo que você precisa para o design do site baseado em pixel. Existem dezenas de tutoriais saudáveis ​​para iniciantes e especialistas. Também incluí algumas ferramentas e recursos úteis com os quais você pode brincar para explorar melhor o tópico. Se você está interessado em gráficos de video game ou em pixel art isométrico, então você vai adorar esta coleção.

Recursos

Estes são alguns recursos exclusivos de desenvolvimento para scripts da web e gráficos digitais. À medida que você mergulha na criação de layouts de website em pixels, nem sempre sente a necessidade de seguir tudo até o ponto. Esta coleção de recursos baseados na web pode muito bem vir em tempo útil e outra vez.

Spritely

Eu me acostumei a trabalhar com código aberto. É por isso que encontrar um plugin jQuery como o Spritely é sempre uma situação empolgante. Você pode incluir este script em seu site para animação de sprite dinâmica rápida e rolagem de fundos.

O plugin inteiro é alimentado por JavaScript e HTML / CSS; Não é necessário Flash ou qualquer outro idioma de back-end. A página de documentação é simples, mas suficiente para você começar. Os desenvolvedores têm muitas demonstrações de amostras que você também pode baixar.

A versão de lançamento estável atual é 0.6.1, que é moderadamente atualizada. Os efeitos de animação são compatíveis com o Opera, Chrome, Safari, Firefox e Internet Explorer 6+. Além disso, qualquer navegador de smartphone em execução no Android ou iOS deve renderizar perfeitamente.

FatPixels

Este é um poderoso script sprite de código aberto desenvolvido por Matías Martínez. O FatPixels requer apenas que a biblioteca jQuery seja executada corretamente. Embora eu diria que o Spritely é uma biblioteca de animação mais complexa, a FatPixels tem um nicho no mercado para desenvolvedores web.

Você pode criar facilmente sprites animados sem criar uma imagem .gif. Na verdade, você poderá exportar todas as imagens como .jpg e criar uma fila de sprites para um longo efeito de animação. A homepage do FatPixels tem uma excelente demonstração juntamente com o bloco de código jQuery usado para criá-lo. Se você está procurando algo leve para animar seus sprites, então FatPixels é o caminho a percorrer.

SmartSprites

Ao usar a palavra "sprite", há um par de diferentes significados para ela. Personagens de videogame ou sprites animados geralmente são imagens menores renderizadas com pouquíssimos pixels. No entanto, em CSS, o termo sprite refere-se a uma única imagem que funciona como uma folha de ícones para o seu site..

O motivo pelo qual você deve usar uma única folha de sprite em vez de imagens individuais é reduzir os recursos do servidor. É muito mais rápido baixar uma imagem maior contendo todos os seus ícones, em vez de muitas imagens menores, mas separadas. Mas colocar todos esses ícones juntos no Photoshop pode ser um aborrecimento real; nem mesmo necessariamente difícil, apenas repetitivo e demorado.

Felizmente, o SmartSprites CSS Generator é um recurso fantástico para esta situação. Você pode gerar rapidamente uma folha de pixels perfeitos com todas as suas imagens no formato GIF ou PNG. Além disso, você pode determinar rapidamente o que posição de fundo coordenadas x / y devem ser para cada ícone individual.

Padrões BG Squidfingers

Projetar um bom conjunto de imagens de fundo repetidas é muito difícil. Pode levar dias até que você possa criar imagens perfeitas. Mas, felizmente, existem recursos on-line para fazer o download de blocos de fundo gratuitos.

A galeria Patterns Squidfingers é um desses recursos. Ele oferece mais de 150 padrões diferentes de estilo de pixel que você pode baixar e usar em seus projetos. Os estilos são muito dinâmicos e coloridos, e para tal variedade, é um excelente recurso para manter à mão. Os links para download estão no formato .zip, o que os torna menores e mais fáceis de transferir entre computadores.

O Recurso Spriters

Eu não posso dizer grandes coisas sobre The Spriters Resource. É um site onde você pode pesquisar através de todos os vários sistemas de jogos para folhas de sprite. Estes podem incluir mapas, edifícios, telas de menu, sprites de personagens, ícones e praticamente qualquer coisa!

Eles estão on-line desde 2001 e o catálogo de videogames cresceu enormemente. Existe toda uma comunidade por trás da TSR com designers gráficos que podem ripar esses diferentes sprites de jogos. Se você estiver interessado em alguma forma de design de videogames ou sites de fãs on-line, você terá que conferir esta incrível galeria.

Ainda mais interessantes são alguns dos sites irmãos que geraram a TSR. Os fãs de jogos também ajudaram a extrair texturas básicas e renderizar modelos de personagens. No geral, é realmente uma grande comunidade muito favorável ao trabalho com sprites em obras de arte digital.

400 pixels

Este é um aplicativo da web muito legal que não fornece um valor essencial, mas é definitivamente legal. 400 Pixels permite criar um documento de pixel online e armazenar a imagem em sua grade. O site é projetado de forma semelhante à página inicial de um milhão de dólares, com cada foto ocupando um bloco quadrado na imagem geral.

Você pode brincar em sua interface web criando algumas obras de arte realmente patetas. Não é algo que você vai pegar de imediato, mas é divertido de se jogar assim que você pegar o jeito. E é uma boa ferramenta que você pode trabalhar com qualquer computador que tenha acesso à Internet.

Saída Principal

Em uma veia semelhante a 400 Pixels, você pode usar o Major Output como um estúdio on-line pessoal para trabalhos com pixel. Ainda está nos estágios iniciais de desenvolvimento, mas toda a funcionalidade principal do usuário já está disponível. Você pode se inscrever para uma conta gratuita e começar a criar pixel art imediatamente.

Cada imagem é armazenada localmente em seus servidores, que você pode hotlink em sites e fóruns. Muitas das imagens são abertas ao público e você pode vê-las clicando em diferentes autores ou tags. Existe também uma caixa de pesquisa, mas sinto que a qualidade dos resultados de pesquisa nem sempre é excelente.

A saída principal parece ser outra ferramenta da comunidade que é divertida de conhecer, mas provavelmente não pode oferecer muito valor educativo para artistas de pixel.

Tutoriais

Agora que você tem os recursos, vamos dar uma olhada nos tutoriais fornecidos pelos muitos centros educacionais e nos posts úteis espalhados pela Internet. Eu coloquei um conjunto pequeno de realmente útil Tutoriais em pixel art para iniciantes e intermediários. Muitos desses tutoriais se concentram no Adobe Photoshop, mas você pode acompanhar praticamente qualquer editor de imagens avançado.

O tutorial de Pixel Sprite por Derek yu

Obviamente, existem dezenas de centenas de tutoriais de pixel-sprite no Google, mas este tutorial em particular no site de Derek Yu passa por muitas etapas diferentes na educação de como você cria sprites de pixel. Grande parte do processo foi simplificada e explicada de forma a permitir que os iniciantes pularem rapidamente para a ação..

Os fãs de videogames vão adorar este tutorial, pois você terá uma prévia dos bastidores da criação desses gráficos específicos. Adoro encontrar um layout de site com arte de pixel de videogame em todo o design. Ele fornece uma sensação única de nostalgia e é algo que você não encontra em todos os lugares. Qualquer um que queira criar seus próprios sprites de pixel por qualquer razão pode começar na série de tutoriais de 10 passos de Derek.

Configurando o Photoshop para Pixel Art por Brandon Treb

Aqui está outro tutorial perfeito voltado para iniciantes no campo de pixel artwork. O post do blog é escrito por Brandon Treb, que é um designer fantástico e desenvolvedor de dispositivos móveis. Você pode encontrar todos os tipos de informações úteis neste guia detalhado de arte do Photoshop baseado em pixels.

Você deve saber como configurar preferências no Photoshop para que o trabalho artístico de pixel não apareça estranho ou perca a qualidade ao exportar. Você pode se surpreender ao saber que muita personalização é necessária para realmente obter uma boa qualidade de imagem.

Desenho de Pixels Artesanais de Russell Tate

Aqui está outro incrível tutorial cheio de técnicas para pixel art desenhados à mão no Photoshop. Esta coleção de técnicas de pixel art é simplesmente surpreendente. Qualquer um que percorra o conteúdo provavelmente encontrará algo que não conhecia antes.

Há explicações detalhadas sobre a criação de textura na grama e na casca; também sobre como clonar arte-final de pixel que você desenhou e transformá-la em um design de ícone. Tudo se resume à prática e precisão em todas as áreas. Aqueles que são verdadeiramente apaixonados vão aguentar e dentro de alguns meses encontrar uma técnica sólida para suas ideias em estilo pixel.

Desenvolvendo um portfólio de jogos CSS / JS por Daniel Sternlicht

Aqui está um tutorial da Smashing Magazine sobre como codificar um portfólio de jogos com CSS / JS, que utilizou muitos sprites da série de jogos Pokémon. O autor é Daniel Sternlicht, que também administra seu portfólio pessoal neste layout baseado em jogos..

O site funciona como um mundo de RPG onde você controla um sprite de personagem com o teclado. Você pode inserir diferentes edifícios que, em seguida, trazem informações, como detalhes de contato e entradas de portfólio.

Eu realmente amo este tutorial, e é uma maneira empolgante de combinar arte-final de pixel com desenvolvimento de website. Mesmo que você não saiba muito sobre JavaScript, este é um artigo super interessante. Eu passei por um pouco do código e devo dar elogios tremendos a Dan por um tutorial tão criativo. Qualquer fanático por Pokemon certamente se apaixonará por suas idéias.

Tutoriais de Pixel Isométrico Por Matriax

Este pequeno website gas13.ru tem alguns dos tutoriais de pixel mais excêntricos e profissionais que eu já vi. No tutorial de pool isométrico você é apresentado para criar blocos brilhantes e textura da água. Além disso, você encontrará recursos para todos os outros cortes de pixels isométricos na barra lateral..

Há muito o que aprender: você pode criar uma vitrine, pixel sprite ou até mesmo texturas detalhadas para jogos de vídeo e fundos de sites. Não tenho certeza se esse autor ainda está publicando conteúdo, mas os artigos existentes são mais do que suficientes para que os iniciantes aprendam o básico.

Studio Purloux Pixel Tutorial Por Kevin Chaloux

Agora que estou listando todos os melhores tutoriais de pixel, eu definitivamente incluiria esse direito no começo. Todo este tutorial sobre pixel artwork é um ótimo artigo de acompanhamento para iniciantes. Você será apresentado desde o início ao software de código aberto, como o GIMP ou o Paint.NET..

Você aprenderá a exportar imagens e as várias facetas do design de pixels, como o pontilhamento e o anti-aliasing. Existem tantas técnicas diferentes para seguir junto. Você deve pegar algumas idéias de design examinando videogames retrô de 8 e 16 bits.

Autor Kevin Chaloux créditos tutorial tutorial de Derek Yu do pixel (listado anteriormente) e menciona que isso como uma fonte de inspiração, quando ele começou.

Crie um Favicon melhor por Kayla Knight

Os web designers muitas vezes esquecem que uma imagem de favicon (ícone favorito) é uma grande parte de qualquer esquema de branding. Todos os sites mais populares podem ser reconhecidos pelo seu favicon 16 × 16. Quando você está trabalhando com uma tela tão limitada, você é forçado a lidar com ilustrações e ilustrações em pixels densos. Este tutorial de favicon da OXP faz um excelente trabalho ao combinar ambas as ideias.

A partir disso, você pode entender por que a pixel art é tão benéfica ao criar favicons. Há também ferramentas e técnicas sólidas para exportar um arquivo .ico. Também está incluída uma pequena vitrine de favicons populares da Web..

Este é outro recurso que eu sinto que pode beneficiar todos os web designers. É empoderador educar-se sobre a criação de um favicon e trabalhar com limitações rígidas de pixel.

Galeria de vitrines

Eu gostaria de fechar o artigo com uma boa galeria de designs de sites em estilo pixel. Eu incluí 40 exemplos de vários layouts com muitas visões artísticas diversas. A tendência da arte pixelizada está apenas começando a ressurgir nos sites tradicionais. Espero que esta mostra distinta de sites de pixel possa oferecer uma fonte de inspiração para desenvolvedores web em todo o mundo.

Central terrestre

PixelJam

Marketing Interativo Red Rokk

Blog do eBoy

Tamago Pixel

pixelHugger

Gráficos do Deviant Pixel

Ciclo de lonas HTML5 de 8 bits

Daniel Sternlicht

Exército de Trolls

App BlockHead Pix

madPXL

supertott 2.0

ClassicGaming

Tutoriais do RPG Toolkit

Criador da cidade

Final Fantasy XIII-2

KawaiiHannah Pixel Art

O Sandbox

Senhor Wong

Pixel Freak

Arte Nasc Pixel

Paxjah

FoolsTown

Cabeça sobre calcanhares

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metrópole

Hayo van Reek

Estúdio Pixeltemple

Adepto Vormgeving

Museu Pixel

QuickHoney

Polpo.net

spiv.cz

4 Massa Real