Ressources de sites Web, tutoriels et exemples basés sur les pixels

La conception d'une interface Web utilisant des illustrations de style pixel est relativement obscure par rapport aux tendances modernes. Vous devez vraiment parcourir une poignée de sites Web sur Internet pour trouver de bons exemples. c'est dur mais pas impossible.

Dans cet article, j'ai rassemblé une méga-compilation de tout ce dont vous aurez besoin pour la conception de sites Web à base de pixels. Il existe des dizaines de tutoriels sur la santé pour les débutants et les experts. J'ai également inclus des outils et des ressources pratiques avec lesquels vous pouvez jouer pour explorer le sujet plus en profondeur. Si vous êtes intéressé par les graphismes de jeux vidéo ou les illustrations de pixels isométriques, alors vous allez adorer cette collection..

Ressources

Voici quelques ressources de développement uniques pour les scripts Web et les graphiques numériques. Lorsque vous vous impliquerez dans la création de présentations de sites Web en pixels, vous ne ressentirez pas toujours le besoin de tout suivre à la lettre. Cette collection de ressources Web peut très bien s'avérer utile à maintes reprises.

Spritely

Je me suis habitué à travailler avec du code open source. C'est pourquoi la recherche d'un plugin jQuery comme Spritely est toujours une situation excitante. Vous pouvez inclure ce script sur votre site Web pour une animation rapide de sprite dynamique et le défilement d'arrière-plans..

L'ensemble du plugin est alimenté par JavaScript et HTML / CSS; aucun flash ni aucun autre langage de base n'est requis. La page de documentation est simple mais suffisante pour vous aider à démarrer. Les développeurs ont de nombreux exemples de démos que vous pouvez télécharger..

La version actuelle de la version stable est la 0.6.1, qui est modérément mise à jour. Les effets d'animation sont compatibles avec Opera, Chrome, Safari, Firefox et Internet Explorer 6+. De plus, tous les navigateurs de smartphones fonctionnant sous Android ou iOS devraient rendre parfaitement.

FatPixels

Il s'agit d'un puissant script de sprite open source développé par Matías Martínez. FatPixels ne nécessite que la bibliothèque jQuery pour fonctionner correctement. Bien que je dirais que Spritely est une bibliothèque d’animation plus complexe, FatPixels a un créneau sur le marché des développeurs Web..

Vous pouvez facilement créer des sprites animés sans créer d’image .gif. En fait, vous pourrez exporter toutes les images au format .jpg et créer une file d’images-objets pour un long effet animé. La page d'accueil de FatPixels contient une excellente démonstration ainsi que le bloc de code jQuery utilisé pour le construire. Si vous cherchez quelque chose de léger pour animer vos sprites, alors FatPixels est la solution..

SmartSprites

Lorsque vous utilisez le mot "sprite", cela a plusieurs significations. Les personnages de jeux vidéo ou les sprites animés sont généralement des images plus petites avec un très petit nombre de pixels. Cependant, en CSS, le terme sprite fait référence à une image unique qui agit comme une feuille d’icônes pour votre site Web..

Vous devez utiliser une seule feuille de sprite plutôt que des images individuelles pour réduire les ressources du serveur. Il est beaucoup plus rapide de télécharger une image plus grande contenant toutes vos icônes au lieu de nombreuses images plus petites mais séparées. Cependant, assembler toutes ces icônes dans Photoshop peut être un véritable casse-tête. même pas nécessairement difficile, juste répétitif et prenant beaucoup de temps.

Heureusement, le générateur de CSS SmartSprites est une ressource fantastique pour cette situation. Vous pouvez rapidement générer une feuille parfaitement pixelisée avec toutes vos images au format GIF ou PNG. De plus, vous pouvez déterminer rapidement ce que votre position de fond Les coordonnées x / y doivent correspondre à chaque icône.

Patterns BG Squidfingers

Concevoir un bon ensemble d'images d'arrière-plan répétitives est très difficile. Cela peut prendre des jours avant que vous puissiez créer des images sans soudure. Mais heureusement, il existe des ressources en ligne pour le téléchargement de tuiles de fond gratuites.

La galerie Patterns Squidfingers est une telle ressource. Il propose plus de 150 modèles de style pixel que vous pouvez télécharger et utiliser pour vos projets. Les styles sont très dynamiques et colorés, et pour une telle variété, c'est une excellente ressource à garder à portée de main. Les liens de téléchargement sont au format .zip, ce qui les rend plus petits et plus faciles à transférer entre ordinateurs..

La ressource Spriters

Je ne peux pas dire assez de bonnes choses à propos de la ressource Spriters. C'est un site Web où vous pouvez rechercher dans tous les systèmes de jeu différents les feuilles de sprite. Ceux-ci peuvent inclure des cartes, des bâtiments, des écrans de menu, des sprites de personnage, des icônes et pratiquement tout!

Ils sont en ligne depuis 2001 et le catalogue de jeux vidéo a considérablement augmenté. TSR regroupe toute une communauté de graphistes capables de déchirer ces différents sprites de jeu. Si vous êtes intéressé par n'importe quelle forme de conception de jeux vidéo ou de sites de fans en ligne, vous devrez consulter cette galerie incroyable..

Certains sites Web soeurs qui ont engendré TSR sont encore plus intéressants. Les fans de jeux ont également aidé à extraire les textures de base et à rendre les modèles de personnage. Dans l’ensemble, c’est une très bonne communauté qui encourage le travail avec les sprites dans les illustrations numériques..

400 pixels

Ceci est une application web vraiment cool qui ne fournit pas une valeur essentielle, mais qui est vraiment chouette. 400 pixels vous permet de créer un document pixel en ligne et de stocker l'image dans leur grille. Le site est conçu de la même manière que la page d'accueil d'un million de dollars, chaque image occupant un bloc carré dans l'image globale..

Vous pouvez jouer dans leur interface Web pour créer des illustrations vraiment loufoques. Ce n'est pas quelque chose que vous allez prendre tout de suite, mais c'est amusant de jouer avec une fois que vous maîtrisez la chose. Et c’est un bon outil avec lequel vous pouvez travailler à partir de n’importe quel ordinateur disposant d’un accès Internet..

Sortie majeure

Dans la même veine que 400 pixels, vous pouvez utiliser Major Output comme studio en ligne personnel pour les illustrations en pixels. Il en est encore aux premiers stades de développement, mais toutes les fonctionnalités utilisateur essentielles sont déjà disponibles. Vous pouvez vous inscrire pour un compte gratuit et commencer à créer du pixel art tout de suite.

Chaque image est stockée localement sur leurs serveurs, ce qui vous permet de créer un lien direct sur des sites Web et des forums. La plupart des images sont ouvertes au public et vous pouvez les vérifier en cliquant sur différents auteurs ou étiquettes. Il existe également un champ de recherche, mais j'estime que la qualité des résultats de recherche n'est pas toujours excellente.

Major Output semble être un autre outil de communauté amusant à connaître, mais qui ne peut probablement pas offrir une grande valeur éducative aux artistes pixelistes..

Tutoriels

Maintenant que vous avez les ressources, jetons un coup d’œil aux didacticiels fournis par les nombreux centres d’éducation et aux articles de blog utiles disséminés sur Internet. J'ai mis en place un petit ensemble de très pratique tutoriels pixel art pour les débutants et les concepteurs intermédiaires. Bon nombre de ces didacticiels s’adressent à Adobe Photoshop, mais vous pouvez suivre presque tout éditeur d’image avancé..

Le tutoriel Pixel Sprite par Derek yu

Il existe évidemment des dizaines de centaines de didacticiels pixel-sprites sur Google, mais ce didacticiel sur le site Web de Derek Yu décrit différentes étapes pour expliquer comment créer des sprites pixel. Une grande partie du processus a été simplifiée et expliquée de manière à permettre aux débutants de se lancer rapidement dans l'action..

Les fans de jeux vidéo apprécieront ce didacticiel, car vous aurez un aperçu des coulisses de la création de ces graphismes spécifiques. J'aime trouver une mise en page de site Web avec des illustrations de pixels du jeu vidéo jonchant tout au long de la conception. Cela procure une sensation unique de nostalgie et c'est quelque chose que l'on ne trouve pas partout. Quiconque cherche à créer ses propres images-objets de pixels pour une raison quelconque peut commencer sur la série de tutoriels en 10 étapes de Derek.

Configuration de Photoshop pour Pixel Art par Brandon Treb

Voici un autre tutoriel parfait destiné aux débutants dans le domaine des illustrations en pixels. Le blog est écrit par Brandon Treb, concepteur et développeur mobile fantastique. Vous trouverez toutes sortes d’informations utiles dans ce guide détaillé de l’art Photoshop basé sur les pixels..

Vous devez savoir comment configurer les préférences dans Photoshop afin que votre illustration en pixels ne paraisse pas gênante ou ne perde pas en qualité lors de l'exportation. Vous serez peut-être surpris d'apprendre que beaucoup de personnalisation est nécessaire pour obtenir une belle qualité d'image.

Dessin de pixels fabriqués à la main par Russell Tate

Voici un autre didacticiel étonnant regorgeant de techniques pour le pixel art dessiné à la main dans Photoshop. Cette collection de techniques de pixel art est tout simplement étonnante. Toute personne parcourant le contenu trouvera très probablement quelque chose qu'ils ne savaient pas auparavant.

Il existe des explications détaillées sur la création de texture sur l'herbe et l'écorce; Il explique également comment cloner une illustration de pixel que vous avez dessinée et la transformer en icône. Tout se résume à la pratique et à la précision dans tous les domaines. Ceux qui sont vraiment passionnés persévéreront et, en quelques mois, trouveront une technique solide pour leurs idées de style pixel.

Développer un portefeuille de jeux CSS / JS par Daniel Sternlicht

Voici un tutoriel de Smashing Magazine sur la manière de coder un portefeuille de jeux avec CSS / JS qui utilisait de nombreux sprites de la série de jeux Pokemon. L'auteur est Daniel Sternlicht, qui gère également son portfolio personnel sur cette disposition basée sur les jeux..

Le site Web agit comme un monde RPG dans lequel vous contrôlez une image-objet avec le clavier. Vous pouvez entrer dans différents bâtiments qui amènent ensuite des informations telles que les coordonnées et les entrées de portefeuille..

J'aime vraiment ce tutoriel, et c'est un moyen excitant de combiner les illustrations au pixel avec le développement de sites Web. Même si vous n'en connaissez pas beaucoup sur JavaScript, cet article reste très intéressant. J'ai parcouru une partie du code et je dois féliciter Dan pour son tutoriel aussi créatif. Tous les fanatiques de Pokemon tomberont sûrement amoureux de ses idées.

Didacticiels Pixels Isométriques Par Matriax

Ce petit site web gas13.ru contient certains des didacticiels de pixel les plus excentriques et professionnels que j'ai jamais vus. Dans le didacticiel sur les piscines isométriques, vous apprendrez à créer des blocs brillants et une texture d’eau. De plus, vous trouverez des ressources pour tous les autres pixels isométriques dans la barre latérale..

Il y a tant à apprendre: vous pouvez concevoir une vitrine, un sprite de pixel ou même des textures détaillées pour les jeux vidéo et les arrière-plans de sites Web. Je ne sais pas si cet auteur continue de publier activement du contenu, mais les articles existants sont amplement suffisants pour que les débutants puissent apprendre les bases.

Tutoriel Studio Purloux Pixel Par Kevin Chaloux

Maintenant que je liste tous les meilleurs tutoriels sur les pixels, j'inclurais certainement ce droit au début. Ce tutoriel complet sur les illustrations en pixels est un excellent article de suivi pour les débutants. Vous serez initié dès le début aux logiciels open source tels que GIMP ou Paint.NET..

Vous apprendrez à exporter des images et les nombreuses facettes de la conception des pixels, telles que le dithering et l'anti-aliasing. Il y a tellement de techniques différentes à suivre. Vous devriez trouver des idées de design en regardant dans les jeux vidéo rétro 8 et 16 bits.

L’auteur Kevin Chaloux attribue ce tutoriel au pixel sprite de Derek Yu (mentionné précédemment) et mentionne le fait qu’il s’agit là d’une source d’inspiration lorsqu’il a commencé.

Créer un meilleur favicon Par Kayla Knight

Les concepteurs de sites Web oublient souvent qu'une image de favicon (icône favorite) fait partie intégrante de tout système de personnalisation. Tous les sites Web les plus populaires sont reconnaissables à leur favicon 16 × 16. Lorsque vous travaillez avec un canevas aussi limité, vous devez gérer des illustrations et des illustrations denses en pixels. Ce tutoriel sur les favicon d’OXP fait un excellent travail en combinant les deux idées..

À partir de cela, vous pouvez comprendre pourquoi le pixel art est si bénéfique lors de la création de favicons. Il existe également des outils et des techniques éprouvées pour l’exportation d’un fichier .ico. Vous y trouverez également une petite vitrine des favicons populaires du Web..

C’est une autre ressource qui, selon moi, peut profiter à tous les concepteurs Web. Il vous permet d'apprendre à créer un favicon et de travailler avec des limitations de pixels strictes..

Galerie Vitrine

J'aimerais clôturer l'article avec une belle galerie de conceptions de sites Web de style pixel. J'ai inclus 40 exemples de diverses mises en page avec de nombreuses visions artistiques. La tendance des images pixélisées commence tout juste à réapparaître dans les sites Web traditionnels. J'espère que cette vitrine distincte de sites de pixels pourra constituer une source d'inspiration pour les développeurs Web du monde entier..

Earthbound Central

PixelJam

Marketing interactif de Red Rokk

Blog eBoy

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

Cycle de toile HTML5 8 bits

Daniel Sternlicht

Armée de trolls

BlockHead Pix App

madPXL

Supertott 2.0

ClassicGaming

Didacticiels RPG Toolkit

Créateur de la ville

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Le bac à sable

Monsieur Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Fou amoureux

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini métropole

Hayo van Reek

Studio Pixeltemple

Adepte Vormgeving

Musée Pixel

QuickHoney

Polpo.net

spiv.cz

4 vraie pâte