Créer une série d'icônes Pixel Art de petit-déjeuner dans Adobe Photoshop

Ce que vous allez créer

Commencez la journée en beauté avec quelques pixels au thème du petit-déjeuner! Dessinées dans Adobe Photoshop, ces douces créations servent d’icônes de bureau, d’avatars ou d’icônes de jeux. Apprenez les bases de la création de formes, de l'anti-aliasing et du choix des couleurs.

1. le faire griller!

Étape 1

Nous allons commencer simple et lent, avec le contour de base de la forme de pain grillé. Créer un Nouveau document dans Adobe Photoshop. J'ai tendance à travailler des dessins d'art pixel dans un 200 x 200 l'espace, avec l'arrière-plan défini sur Transparent. Utilisez le Outil Crayon (B) fixé à 1 pixel et commencez à dessiner ce qui suit:

  1. Sept pixels sur.
  2. Un en haut de chaque côté, en diagonale.
  3. 11 les pixels, de chaque côté, forment le reste du bord supérieur. Arrondir les coins avec deux pixels diagonaux de chaque côté. Dix vers le bas de chaque côté avant d'entrer dans la base de la forme du pain.
  4. Deux vers le bas, un en diagonale, et 20 vers le bas de chaque côté.
  5. Deux vers le bas et deux à travers afin de compléter le fond. 
  6. Remplissez le reste de l'espace avec 23 à travers.

Étape 2

Quatre couleurs sont utilisées dans la conception de base du pain:

  • Marron foncé pour les contours: R: 108 G: 013 B: 003.
  • Brun moyen pour l'extérieur de la croûte: R: 182 G: 090 B: 020.
  • marron pour le reste de la croûte: R: 214 G: 123 B: 027.
  • bronzer pour l'intérieur du pain: R: 250 G: 211 B: 127.

Placer le Brun moyen sur les bords du pain grillé. marron va remplir davantage dans les limites de la croûte. À ce stade, utilisez le Outil seau de peinture (G) remplir le morceau de pain avec bronzer.

Étape 3

  1. Ce pain ne sera tout simplement pas complet sans une touche de beurre fondant. Faire un Nouvelle Couche, dans le Couches panneau, avant de tirer votre beurre.
  2. Utilisez un brillant, bouton d'or jaune dessiner la forme du beurre fondu avec le Outil Crayon
  3. À la différence du pain grillé, ses bords doivent être définis avec les marrons utilisés lors de la dernière étape.. 
  4. Remarquez comment les couleurs les plus sombres sont ajoutées autour des coins et des bords verticaux. 
  5. Placez le beurre au centre du pain grillé.
  6. On utilise de la crème blanche et légère pour souligner le beurre et le pain.
  7. Sélectionner Marron foncé pour la couleur de votre crayon, et réduire l'opacité à 30-50%. Décrivez le pain grillé, avec des couleurs plus sombres placées dans les coins de la forme de pixel, afin d’adoucir le bord net.

2. Je suis Makin 'Gaufres!

Étape 1

La forme de la gaufre est assez simple: un carré arrondi. Au départ, j'ai choisi de garder les angles serrés deux pixels diagonaux la gaufre a donc gardé une forme très carrée. Plus tard, je l'ai changé pour deux horizontales, une diagonale, et deux pixels verticaux pour les coins. 

Étape 2

Pour la couleur de remplissage de la gaufre, j'ai choisi R: 241 G: 180 B: 99. Les couleurs de l'ombre sont marron et Brun moyen de Section 1, étape 2. dans le Couches panneau, faire un Nouvelle Couche et dessine petit six par six carrés, avec le pixel de coin supprimé, afin de former le motif gaufré.

Étape 3

Je trouve cela plus facile, dans un design comme celui-ci, de Copier (Control-C) et Coller (Contrôle-V) les carrés forment une grille autour de la base de la gaufre. Utilisation bronzer mettre en évidence autour du motif, et Brun moyen pour indiquer la profondeur. 

Étape 4

La méthode de dessin au beurre et l’anti-aliasing du bord extérieur de la gaufre sont les mêmes que celles appliquées au pain grillé Section 1, étape 3.

3. Faire griller cette pâtisserie

La conception de la pâte à pain est également assez simple: un rectangle arrondi (notez le deux en bas, deux en travers coins) avec le coin supérieur droit composé de six diagonales des pixels qui formeront une "morsure" de la pâte.

Étape 2

Tout comme la conception de pain grillé, cette pâte pour grille-pain commencera par les bords extérieurs marron et bronzer. J'ai commencé à décrire la "morsure" dans marron ainsi afin de s'assurer que la zone est définie ainsi que de créer une zone d'ombre pour le remplissage "gelée" imminent.

Étape 3

Le glaçage est blanc, les ombres sur le glaçage sont donc d'un bleu très clair. Notez comment certaines des lignes sont "tramées". Le dithering, en pixel art, est une technique permettant de créer un motif (semblable au bruit) afin d'ombrer ou de mettre en évidence une zone sans augmenter le nombre de couleurs..

Les pépites sont juste quatre par quatre des boîtes de couleur ou des pixels simples dispersés autour. N'oubliez pas de remplir en blanc toute la zone de glaçage au cas où vous sauvegarderiez ultérieurement le graphique en tant que fichier transparent..

La garniture "gelée" est rose vif, avec des accents rose foncé et rose vif. N'oubliez pas de décrire votre pâte en brun foncé à 30-50% Opacité afin de laisser les coins se mélanger plus facilement.

4. Œufs, Sunnyside Up!

Étape 1

La forme de l'icône représentant un œuf est un compromis entre un œuf au plat (qui serait partout) et un cercle parfait (qui semble trop artificiel, même pour ces petits dessins de pixels). Le nombre de pixels est comme suit:

  • Dix pixels sur.
  • Ignorer un pixel et en placer trois de chaque côté de la ligne suivante.
  • Deux pixels en diagonale des trois derniers et un de plus en diagonale. 
  • À ce stade, vous allez répéter ce qui a déjà été fait. Tout d’abord, placez quatre pixels sur 50% d'opacité dans les coins manquants (voir ci-dessous). Compléter le cercle.

Étape 2

Commençons facilement avec le jaune, car il y a beaucoup à faire pour rendre l'œuf comparé aux autres icônes dessinées jusqu'à présent. Trois couleurs composent le motif jaune.

  • Brun moyen sur la moitié inférieure: R: 182 G: 090 B: 020.
  • Ocre jaune sur les côtés: R: 255 G: 150 B: 57.
  • Jaune pour le reste: R: 251 G: 208 B: 59.

Étape 3

Les images ci-dessous peuvent sembler plus compliquées qu'elles ne le sont réellement. J'ai utilisé le même bleu clair de la pâte à pain Section 3, mais a varié son opacité en nuançant et en tramant. C'est la même chose pour Marron foncé, qui se situe dans Opacité de 20% à 50% et est superposé sur blanc ou bleu (sur le fond de l'oeuf). J'ai continué à éclairer l'œuf avec Jaune, crème et blanc.

L'anti-aliasing sur les bords extérieurs de l'œuf se fait en trois étapes: les coins sont 50% d'opacité, un couple de pixels à côté de chaque coin est 30% d'opacité, et le reste est 10-20% Opacité.

5. Faire frire du bacon

Étape 1

J'ai opté pour un morceau de bacon épais et court, plutôt que quelque chose de plus réaliste. Bien que cette icône soit plus fine et plus haute que les autres icônes, je ne voulais pas rendre cette disparité plus extrême quand elles sont rassemblées.

Utilisez le Outil Crayon dessiner quatre pixels, puis trois vers le bas et au droite sur le diagonale, et quatre pixels encore. 

Le coin gauche est brusque à six pixels vers le bas, quatre diagonales au la gauchesept pixels vers le basTrois vers le bas, et enfin, quatre bas.

Le côté droit est Trois au droiteun sur le diagonale,six vers le bas, deux sur le diagonale au la gauche, quatre bas, et huit vers le bas au droite.

Copie et Coller cette section supérieure, aller à Édition> Transformer> Retourner verticalement pour le retourner et le connecter à la moitié supérieure. Fusionner vers le bas (Control-E) la couche copiée dans la couche d'origine et passons à rendre l'icône de bacon.

Étape 2

Utilisez le Outil Pot De Peinture à remplir le bacon avec Rouge brique (R: 204 G: 0 B: 0). Dessiner des rayures de wiggley avec du blanc à 50% d'opacité. Ombrez les bords du bacon avec Marron foncé à 50% d'opacité.

Étape 3

Ajouter des rehauts aux rayures avec blanc à 30%, 20% et 100% Opacité. Pour les petits morceaux brillants au bacon, ajoutez quelques pixels sur les bords à 80% d'opacité.

Étape 4

Pour un moyen plus facile d'ajouter un contour, Utilisez le Outil Baguette Magique (W) sélectionner en dehors de l'icône de bacon. Aller à Sélectionnez> Modifier> Contrat et entrez 1 pixelInverser la Sélection (Shift-Control-I). Créer un Nouvelle Couche sous la couche de bacon, dans le Couches panneau et remplissez votre sélection avec Marron foncé à 30% Opacité. Empilez les pixels marron translucides dans les coins pour adoucir les bords de l'icône de bacon. Quand satisfait, Fusionner (Contrôle-E) bacon sélectionné, dans le Couches panneau.

Bonjour, vous avez terminé!

Développez les icônes de votre petit-déjeuner avec fruits, café, jus de fruits, etc. Cet ensemble est faussé en faveur des petits déjeuners américains. Si vous êtes en dehors des États-Unis ou que votre vie a été influencée par d'autres cultures (la vôtre ou celle d'autres), je vous mets au défi de créer de petites icônes de ces plats délicieux. Allez encore plus loin et créez des icônes de chaque aliment dans votre cuisine. Bonne lecture, lecteurs!