Comment créer des voitures et des émoticônes à l'aide d'Adobe Photoshop

Ce que vous allez créer

Un emoji est un type spécifique d’icône picturale. Dans ce didacticiel, nous allons dessiner un ensemble d’emojis car and van dans Photoshop en utilisant sa fonction vectorielle étonnante. Nous allons commencer par dessiner une fourgonnette et une voiture standard, puis les transformer en d'autres voitures, telles qu'une ambulance, un camion de pompier, un taxi et une voiture de police. J'espère que tu aimes.

Pour vous inspirer, pourquoi ne pas consulter Envato Market pour des émoticônes et des icônes. 

1. préparation

Étape 1

Il est toujours judicieux de placer chaque élément dans un groupe de calques distinct. Chaque voiture et ses éléments (pare-chocs, pneus, etc.) doivent être placés dans un groupe de couches spécifique et porter un nom approprié. Je vous suggère également de commencer des recherches sur la conception d'icônes de voiture. En voyant le travail d'autres concepteurs d'icônes, vous apprendrez quel élément est essentiel dans la conception. 

Étape 2

Commencez par créer un nouveau document dans Photoshop. Frappé Contrôle-N ou cliquez Fichier> Nouveau. Nous n'avons pas besoin d'une grande toile. Définissez sa taille sur 320 pixels x 140 pixels. Cliquez sur D'accord.

Étape 3

Clique le Ajouter une couche d'ajustement icône puis sélectionnez Couleur unie. Sélectionnez une couleur gris foncé pour l'arrière-plan de la toile. Après cela, vous pouvez simplement supprimer le Contexte couche pour diminuer la taille du fichier.

Étape 4

Cliquez sur Arranger> Nouvelle fenêtre pour [nom du fichier]. Le même fichier est ouvert dans une fenêtre séparée. Les deux sont les mêmes. Vous pouvez éditer dans l'une des fenêtres et les modifications apparaîtront dans l'autre en même temps. Nous allons utiliser cela pour nous aider à voir le résultat réel, avec un grossissement de 100%, et en même temps, nous travaillons avec les détails.. 

Faites glisser l'un des onglets pour le détacher de l'espace de travail principal. Définissez son niveau de zoom sur 100%. Réglez l’autre fenêtre à un niveau de zoom supérieur.

2. Dessinez le van de base

Étape 1

Nous commençons par dessiner la forme de base du van. Activer le Outil Rectangle Arrondi, puis cliquez et faites glisser pour dessiner un blanc 14 px × 18 px forme. Du Propriétés panneau, définissez le rayon du coin supérieur gauche sur 10 px.


Appliquer Ombre intérieure et Lueur intérieure styles de calque au calque pour ajouter de l'ombre et un peu de profondeur. Utilisez les paramètres suivants.

Nous voulons garder chaque couche organisée. Habituez-vous à nommer chaque couche avec un nom logique.

Étape 2

Dupliquer la forme vectorielle de la cabine de la camionnette en appuyant sur Contrôle-j, puis tirez son côté inférieur et droit pour le transformer en pare-brise.

Ajouter ce qui suit Styles de calque ajouter un éclairage bleu à la forme. dans le Lueur intérieure boîte de dialogue, utilisez le bleu.

Étape 3

Dessine un Largeur 2 px rectangle blanc sur la partie inférieure de la fourgonnette. Ajouter Ombre intérieure et Incrustation en dégradé styles de calque pour ajouter un éclairage simple à la forme. Cette forme va être le pare-chocs et la base de la camionnette.

Étape 4

Tracez un rectangle arrondi avec un rayon de 2 pixels à chaque coin. Ici, nous utilisons le jaune pour sa couleur. Vous pouvez avoir une couleur préférée différente. Pour ajouter de la lumière à la forme, nous ajoutons simplement Ombre intérieure et Incrustation en dégradé styles de calque. Jouer avec le Les angles paramètres jusqu'à ce que vous obteniez un résultat satisfaisant.

Étape 5

La prochaine étape consiste à ajouter les roues. Bien sûr, il suffit d’ajouter une forme de cercle simple en Maj-glisser en utilisant le Outil de forme de cercle. Dans la barre des options, définissez son Remplir couleur au blanc et son Accident vasculaire cérébral couleur gris foncé avec une taille de 1 pt. Le diamètre de la roue doit être égal, tel que 8 px, 12 px ou 16 px. Cela facilitera les prochaines étapes. Appliquer Accident vasculaire cérébral et Lueur intérieure styles de calque pour ajouter un éclairage simple à la roue.

Étape 6

Nous allons utiliser deux jeux de roues, avant et arrière. Parce que les deux sont identiques, c'est une bonne idée d'utiliser un Objet intelligent. Cliquez avec le bouton droit sur le calque de la roue et choisissez Convertir en objet intelligent. Suivant, Alt-drag dupliquer la roue.

Étape 7

Nous allons ajouter un petit espace, largeur 1 px, entre la roue et le corps de la fourgonnette. Créez une autre forme de cercle sombre, avec un diamètre de 2 pixels plus grand que la roue. Placez-le au volant. Ajoutez un rectangle couvrant la moitié de la roue sous le pare-chocs de la voiture et définissez son mode de trajectoire sur Soustraire la forme avant. Ajouter du noir Accident vasculaire cérébral et Incrustation en dégradé.

Ajouter la même forme derrière l'autre roue.

Étape 8

Nous avons presque fini. La dernière étape consiste à ajouter l'ombre. Nous pouvons facilement peindre des ombres sous la camionnette en utilisant le Outil Pinceau. Mais l'inconvénient est que le résultat sera en pixels et que les images basées sur des pixels ont tendance à s'estomper de manière incontrôlable lors de leur redimensionnement. Vous ne voulez vraiment pas que cela se produise dans une petite image comme celle-ci. 

Notre approche consiste à dessiner un rectangle arrondi noir sous le fourgon, puis à le remplir avec Ombre intérieure et sombre Lueur externe styles de calque.

Voilà avec ombre.

Étape 9

Je suppose que nous venons de rater un petit détail: le rétroviseur. Tout ce que nous avons à faire est de dessiner un triangle et un carré. C'est tout. Nous avons maintenant la forme de base d'un van emoji. Vous pouvez vous arrêter à ce stade ou continuer à ajouter de petits ornements pour le rendre unique..

Étape 10

À partir de là, les étapes suivantes sont facultatives. Dessinez un rectangle de 1 pixel de hauteur sur la boîte. Maj-glisser ajouter une autre forme à la boîte. Pour sa couleur, choisissez un jaune plus clair.

Ajouter Ombre intérieure et Ombre portée styles de calque pour ajouter de la profondeur à la surface de la boîte.

Étape 11

Ajoutons un nom de société sur la boîte. Dessinez un rectangle blanc en utilisant le Outil de chapiteau rectangulaire.

Ajouter du texte à l'intérieur de la zone blanche. Pendant que le calque de texte est actif, changez la méthode d'anti-aliasing du texte et choisissez l'apparence la plus claire. Généralement, pour les petits textes, Croustillant fonctionne mieux.

3. faire une ambulance

Nous avons fini la camionnette standard. En ajoutant de légères modifications, telles que le changement de couleur, nous pouvons créer d'autres types de camionnettes.. 

Dans ce tutoriel, nous allons faire une ambulance. Premièrement, nous avons besoin d’une référence pour connaître les caractéristiques communes d’une ambulance. Vous pouvez les trouver sur PhotoDune. Il suffit de chercher une ambulance ou une voiture d'ambulance. Sur ces photos, je remarque trois éléments communs d’une ambulance: des sirènes, une croix et des couleurs rouge et blanche..

Étape 1

Cette ambulance est fabriquée à partir de la fourgonnette précédente. Alors, Alt-drag le dupliquer.

Étape 2

Nous n'avons pas besoin du détail des bandes et du texte sur la boîte. On peut l'enlever.

Étape 3

Changer toute la couleur en blanc.

Étape 4

Ajouter un nouveau rectangle rouge en utilisant le Outil Rectangle. Dessinez un signe de croix rouge composé de deux formes de rectangle qui se chevauchent. Le mode de chemin devrait être Combiner des formes. Ajouter Ombre intérieure et Ombre portée styles de calque pour ajouter de la profondeur à la forme rouge.

Étape 5

Tracez un rectangle arrondi sur la cabine de l'ambulance. Ajoutez un rayon dans son coin supérieur gauche et supérieur droit jusqu'à obtenir un rectangle à demi arrondi pour la forme de la sirène.

Pour sa couleur, ajoutez un style de calque Incrustation en dégradé avec dégradé linéaire du rouge au bleu.

Ajouter Ombre intérieure et Lueur externe ajouter de la lumière subtile aux sirènes.

Et les voici: une camionnette et une ambulance de base.

4. Créer une voiture

Étape 1

Pour la voiture, nous commençons par dessiner un simple rectangle arrondi. Ajoutez la partie supérieure de la voiture en la dessinant manuellement à l'aide du bouton Outil stylo.

Ajouter Ombre intérieure et Incrustation en dégradé styles de calqueajouter un éclairage simple et une perception tridimensionnelle à la forme. 

Étape 2

Dupliquez le bas de la voiture et changez sa couleur en noir. Ajouter un rectangle et définir son mode de tracé sur Zones de forme d'intersection.

Étape 3

Ajouter des roues à la voiture. Nous pouvons simplement copier et coller la roue que nous avons faite précédemment pour le fourgon.

Étape 4

Ajoutons un pare-brise à la voiture. Le processus est similaire à ce que nous avons fait précédemment à la camionnette. Dessinez une forme polygonale en utilisant le Outil stylo puis appliquez les styles de calque Ombre intérieure, Lueur intérieure, et Lueur externe ajouter de la surbrillance bleue au verre.

Étape 5

Comme nous l'avons fait avec la camionnette, il n'est pas nécessaire de dessiner une porte. Mais nous devons ajouter une petite ligne de 1 pixel pour séparer les portes avant et arrière. Tracez un rectangle blanc d'une largeur de 1 pixel entre les deux pare-brise. Appliquez une légère ombre portée.

Réduire sa couche Opacité à dix%.

Étape 6

Dupliquer le corps principal de la voiture. Changer sa couleur en blanc. Ajoutez un rectangle arrondi à l’avant de la forme et définissez son mode sur Zones de forme d'intersection. Cela va être le phare de la voiture.

Répétez la même chose pour le feu arrière. Utilisez le rouge pour celui-ci.

Étape 7

Dessinez un rectangle arrondi foncé sous la voiture et appliquez les styles de calque Ombre intérieure et Lueur externe pour le transformer dans l'ombre de la voiture.

5. faire la voiture de police

Nous avons fini avec la voiture de base. Nous pouvons ajouter certains éléments pour le transformer en une voiture spécifique, telle qu'une voiture de police. Quels éléments sont essentiels pour une voiture de police? Recherchez des photos de voiture de police pour référence à partir de PhotoDune. Nous pouvons voir qu'il y a trois éléments essentiels en commun: sa couleur noir et blanc, les sirènes et le texte de police sur la porte..

Étape 1

Reproduisons la voiture standard. Changer sa couleur principale en noir. Appliquer un autre Incrustation en dégradé style de calque en cliquant sur l’icône plus à côté de l’icône déjà disponible Incrustation en dégradé. Nous utilisons donc deux superpositions de dégradé, une pour la surbrillance de la carrosserie de la voiture et une autre pour sa couleur. Définir cette nouvelle Incrustation en dégradé style de calque du blanc au noir avec Style: réfléchi.

Étape 2

Ajoutez du texte sur le côté de la voiture. Expérimentez avec l'option anti-aliasing pour obtenir une visibilité claire du texte.

Étape 3

Ajouter un rectangle arrondi pour la sirène et appliquer Incrustation en dégradé. Nous avons dessiné cela auparavant pour l'ambulance. Vous pouvez simplement le dupliquer. Selon la législation du pays, la couleur des sirènes d'ambulance et de police peut être différente. Vérifiez la couleur de la lumière de secours de votre pays sur Wikipedia.

Travail impressionnant, vous avez terminé!

Nous avons fini de dessiner les emojis. Ils sont tous fabriqués à partir de formes vectorielles, sans brossage manuel des pixels. Comme vous pouvez le constater, ils ne sont qu’une variante du fourgon et de la voiture de base. Si vous ajoutez d'autres éléments, vous pouvez également les modifier en un camion de pompier et un taxi. Essayez-les vous-même. Bonne chance!