Apprenez à faire à la main pixel art dessiner dans photoshop

Les illustrations en pixels sont idéales pour créer des icônes d'ordinateur, des images isométriques et même des scènes entières. Ils peuvent être créés rapidement et facilement à l'aide de Photoshop avec quelques modifications rapides des préréglages.

Le seul inconvénient, cependant, est que le pixel art semble mieux avec chaque pixel placé à la main par opposition à l'utilisation d'un filtre Photoshop. C'est vrai, placé à la main - je sais que cela semble un peu fou, surtout lorsque certaines scènes de pixels contiennent des milliers de pixels. Mais sans le placement de la main, la vôtre peut pixel art ressembler à une mauvaise image lo res alors soyez prudent!

Je pense qu'une bonne règle de base avant de commencer est que vous devriez être capable de voir clairement votre création comme un groupe de pierres carrées de différentes couleurs, mais si vous plissez les yeux et que vous vous tachez les yeux, vous pouvez les voir comme une image de reconnaissance. Imaginez faire une mosaïque de carreaux, seulement vous n'avez pas besoin de coulis.

Vous trouverez ci-dessous une illustration complète en pixels, nous allons créer certaines des parties les plus basiques de ce travail.

Logiciels

OK, préparons-nous à dessiner. Si vous n'avez pas de copie de Photoshop, il existe des programmes gratuits de dessin de pixels spécialisés disponibles en téléchargement gratuit :

• Pixels (Mac)
• Coup de vent graphique (Victoire)
• Plus d'applications peuvent être trouvées ici.

J'ai joué avec les deux programmes, mais je suis revenu à Photoshop parce que je suis habitué aux raccourcis clavier.

Ok, créons une page

1. Tout d'abord, ouvrez les préférences dans Photoshop et définissez l'interpolation de l'image sur Voisin le plus proche.
2. Créez une nouvelle page de 300 pixels sur 300 pixels à 72 dpi.
3. Sélectionnez l'outil Crayon à 1 pixel. Les outils crayon et gomme sont les seuls outils dont vous avez vraiment besoin.
4. De temps en temps, vous pouvez utiliser la baguette magique pour sélectionner une zone à remplir, mais assurez-vous que l'anti-alias est désactivé.

Si vous avez utilisé l'outil pinceau avec un énorme 9 pixels au lieu de 1, un anti-crénelage se produit, ce qui gâche l'effet de pixel à bords durs. Tenez-vous donc à 1 pixel. "Restez maigre, restez méchant", comme disait ma mère.

Lorsque votre dessin en pixels est affiché à 100 % (taille réelle), l'outil Plume est très petit à 1 pixel de large, il peut donc être difficile à voir et à modifier. Une idée est de zoomer à 800% pour voir ce que vous faites. J'ai souvent une deuxième fenêtre ouverte dans Photoshop avec la même vue d'écran à 200% afin que je puisse voir rapidement à quoi ressemble mon dessin de près et en même temps d'un peu plus loin.

Nous pouvons enregistrer notre document de travail sous forme de fichier PSD et l'exporter ultérieurement sous forme de fichier GIF pour une utilisation Web. Nous pouvons également agrandir ultérieurement le fichier et le convertir en TIF pour l'impression CMJN.

Commençons à dessiner

OK, essayons de dessiner quelque chose comme ce livre ouvert. Dessinez autour du bord avec l'outil Plume pour créer votre contour noir. Remplissez ensuite les aplats de couleurs de la page et du signet.

Créez l'idée de texte sur la page avec quelques lignes d'un seul pixel. Voyez comment nous ajoutons un léger pli à la ligne pour donner l'impression d'une légère courbe sur la page.

Enfin, ajoutez des marqueurs au milieu des pages et sur le côté du signet. Une petite touche agréable est un surlignage d'un seul pixel dans le coin extérieur inférieur de chaque page, cela donne juste un indice d'une bordure de page plutôt que d'être un bloc solide.

Une fois que vous avez maîtrisé les bases des contours, des couleurs, des reflets et des ombres, vous pouvez essayer de créer d'autres formes simples.

Lignes de pixels inclinées

Les icônes de pixels comme celles ci-dessus peuvent être conçues comme une série de lignes qui ne sont qu'à 90º les unes des autres et sont en grande partie des carrés et des rectangles. Cependant, il se peut que vous ayez parfois besoin d'une ligne en biais.

Il convient de noter que les lignes inclinées sont plus belles lorsqu'elles forment un motif régulier. Lorsqu'ils sont irréguliers (comme ceux illustrés ci-dessous), ils peuvent apparaître grumeleux et grossiers lorsqu'ils sont vus petits. Le deuxième exemple ci-dessous présente des angles isométriques beaucoup plus lisses qui ont fière allure avec le pixel art, mais ce n'est pas l'angle "Iso" de 30º que vous avez utilisé dans le cours de dessin technique - c'est en fait un peu plus proche de 26,5º. Malheureusement, 30º donne une ligne grumeleuse à 100%. Si vous tracez une ligne qui va régulièrement de 2 points au-dessus et de 1 point au-dessus, vous obtenez 26,5º.

Allons-nous essayer de dessiner quelque chose d'autre qui soit un peu plus géométrique et utilise davantage ces motifs de lignes ?

La ligne irrégulière semble grumeleuse à 100 %.

Motif de ligne lisse à différents angles.

Dessinons un journal de pixels

Les lignes sur la longueur sont faciles, nous savons comment les faire maintenant, mais qu'en est-il de ces extrémités arrondies ?

Ces deux motifs sont réguliers mais passent de larges lignes horizontales à des carrés puis à des lignes verticales. Il a l'air en lambeaux, mais si vous pliez les yeux, cela semble bien !

La courbe supérieure droite à l'extrémité du tronc est également le motif inverse de la section inférieure gauche. Je compte souvent les pixels ou mémorise certaines combinaisons. La combinaison de pixels sur le cercle est…

• 3 carrés (à travers)
• 2
• 111
• 222 (un dix)
• 6
• 2
• Erste

C'est un peu difficile à maîtriser au début, comme l'utilisation des courbes de Bézier dans Illustrator, mais vous en aurez bientôt la "sensation". La longueur de la bûche est facile, nous utilisons simplement le système 2 le long de 1 et rendons la bûche aussi longue ou courte que nous le voulons.

Des cercles concentriques plus petits à l'extrémité créent un joli motif en anneau et certaines zones d'ombrage plus sombres au bas de la bûche lui donnent de la profondeur. Nous donnons d'abord au tronc de l'arbre une couleur de sapin plat, puis pour créer de la profondeur, nous pouvons créer un tramage en plaçant des pixels de couleur contrastée de chaque côté de nos lignes de haute lumière/basse lumière.

Vous pouvez construire les modèles et les rendre plus complexes. Soyez prudent cependant - plus vous essayez d'être réaliste et délicat, plus l'image peut apparaître floue lorsqu'elle est destinée à être reproduite à une petite taille.

J'ai ajouté quelques pixels aléatoires supplémentaires dans le journal n ° 3 car je voulais qu'il ait un aspect rugueux et se démarque un peu de l'écureuil.

Pour la dernière bûche, j'ai travaillé dans une zone avec une écorce dépouillée et une petite branche. J'ai trouvé préférable de terminer d'abord une zone ou un style, puis de travailler dessus plus en détail. Je ne pense pas que j'aurais pu dessiner le tronc d'écorce dépouillé avec un motif de tramage à partir de zéro - à la place, j'ai juste continué à ajouter des couches et des couches. Les étapes simples fonctionnent mieux !

Dessin de pixels irrégulier

Passons à quelque chose de plus irrégulier, comme un écureuil perché sur notre bûche. Pour quelque chose de compliqué comme celui-ci, il est préférable de commencer avec un crayon et du papier.

J'ai d'abord dessiné un carré isométrique sur ma page pour obtenir les bonnes dimensions. Puisque nous utilisons cet exemple à des fins éditoriales, j'ai utilisé une photo comme source d'inspiration. Puis je commence à dessiner. Je porte une attention particulière à l'angle des oreilles et des pieds car je veux qu'ils suivent les lignes isométriques.

Comme vous pouvez le voir, les détails sont très minimes - je veux juste d'abord travailler sur la forme de base et les angles droits. Nous faisons le reste dans Photoshop.

Apportez l'esquisse, mettez un nouveau calque et activez l'opacité afin que vous puissiez voir clairement les pixels que vous souhaitez créer. Ce n'est pas une règle stricte, mais je trouve que le pixel art est plus beau lorsqu'il a des contours noirs.

Ici, je fais le tour de mon écureuil avec l'outil Plume et crée le contour noir. Une chose à éviter est l'agglutination, où les pixels de contour se touchent sur plus d'un côté. Si vous dessinez un carré supplémentaire, effacez-le simplement avec votre gomme (également maintenu à 1px de largeur, voir cercle rouge), il aura l'air plus net et votre public vous remerciera.

Il a toujours l'air un peu désordonné, mais il prendra forme! Les lignes de repère dans l'illustration contribuent également à lui donner un aspect audacieux. Assurez-vous simplement qu'ils sont d'une couleur sombre qui n'est pas noire pour ajouter un peu de contraste. Appelez-moi un radical, mais j'ai choisi le marron.

Lorsque la forme est terminée, remplissez la zone intérieure d'une belle couleur mi-ton (marron doux) et utilisez peut-être une couleur claire pour faire ressortir quelques reflets.

La règle du contour noir n'est pas dure et rapide, j'ai laissé quelques lignes noires clés sous la mâchoire et la patte avant car il devenait difficile de voir ce qui se passait.

Conclusion

Placer, supprimer et manipuler manuellement des pixels est l'endroit où la compétence entre en jeu. De temps à autre. Mais une fois que vous avez compris, vous pouvez dessiner à peu près n'importe quoi - tout ce dont vous avez besoin est un peu de patience. J'espère que cela vous aidera et vous inspirera pour créer vos propres œuvres !