Un guide étape par étape pour concevoir des illustrations personnalisées sans aucune compétence en dessin

Je vois de nombreuses entreprises aujourd'hui utiliser des illustrations ou des images de stock. Bien que ces options soient bon marché, le message de la marque est dilué car les visuels ne sont pas exclusifs au produit.

Dans un monde où 74 % des médias sociaux et des spécialistes du marketing B2B utilisent des visuels dans leurs promotions, la façon dont vous vous démarquez visuellement est essentielle.

Si votre marque est prolifique, les gens apprendront le langage visuel associé à votre marque. Dès qu'ils voient les mêmes illustrations de stock associées à un autre produit, l'identité de votre marque s'affaiblit.

Avec des illustrations personnalisées, les éléments de l'identité d'une marque peuvent fusionner autour d'une perspective et d'une personnalité communes. Ils communiquent avec les clients de manière intuitive et aident les marques à raconter leur histoire de manière durable.

Cependant, de nombreux designers hésitent à travailler comme illustrateurs de peur de ne pas avoir de compétences en dessin. Nous sommes ici pour vous montrer comment n'importe quel designer peut développer de belles illustrations, aucun dessin requis.

Nous examinerons trois styles d'illustration populaires et appliquerons des étapes très simples pour développer votre propre illustration à partir de zéro. Vous pouvez suivre et appliquer ce que vous apprendrez pour créer de superbes pièces pour votre prochain projet.

Recréez la célèbre illustration de l'espace.

La designer et illustratrice Nina Georgieva est la pionnière derrière cette pièce notoire de Dribbble, et maintenant, le style est devenu une tendance à part entière.

En nous inspirant de Georgieva, nous allons créer notre propre illustration d'espace en suivant quelques étapes simples.

C'est ce que vous obtiendrez à la fin.

1. Commencez par les étoiles.

À l'aide de «l'outil étoile» d'Illustrator, créez une étoile à quatre branches. Ensuite, rendez-le transparent à 75 %.

Une fois sélectionné, dupliquez-le en place en appuyant sur Ctrl+C, puis Ctrl+F.

Réduisez la forme devant.

Ensuite, ajoutez un effet lumineux ; sélectionnez la plus grande forme ; et appliquez un effet "Flou gaussien" à partir du panneau "Apparence".

Enfin, vous pouvez stocker votre forme d'étoile dans le panneau "Symboles" pour l'utiliser plus tard dans la composition.

2. Créez la forme du nuage.

Empilez des rectangles de différentes largeurs.

Fusionnez-les avec le panneau "Pathfinder".

Terminez en donnant à la forme entière une valeur élevée de "rayon d'angle".

3. Créez la texture de la planète à partir des nuages

En commençant par la forme du nuage, créez l'effet de texture de la planète comme indiqué ci-dessus.

Empilez plusieurs formes de nuages ​​ensemble et assurez-vous d'avoir une succession de courbes vers l'extérieur et vers l'intérieur pour créer un motif ondulé.

4. Ajustez la texture.

Simplifiez le motif ondulé avant de l'appliquer à la forme de la planète.

Retirez les points supplémentaires sur un côté de la texture et aplatissez-le.

5. Créez une planète texturée.

Superposez le motif ondulé avec un cercle et créez une division en utilisant l'option "Diviser" dans le panneau "Pathfinder".

Supprimez la forme supplémentaire créée à l'extérieur du cercle et créez un effet d'éclairage en appliquant différentes valeurs de gris de chaque côté de la planète.

6. Ajoutez une atmosphère à la planète.

Créez deux cercles plus grands et collez-les derrière la planète avec Ctrl+X puis Ctrl+B.

Alignez-les correctement.

Ajoutez de la transparence aux nouveaux cercles et un effet de flou au troisième cercle (dans le panneau "Apparence").

Groupe (Ctrl + G) et stockez le résultat dans le panneau "Symbole".

7. Dupliquer et colorier les planètes.

Copiez plusieurs formes de planètes à partir du panneau "Symboles" et recolorez-les en utilisant deux couleurs différentes pour chaque côté.

Utilisez « l'outil de sélection directe (A) » pour sélectionner et « l'outil Pipette (I) » pour sélectionner et appliquer une couleur.

8. Mettez à l'échelle et positionnez vos planètes

Déplacez les planètes dans différentes positions avec "l'outil de sélection (V)" et donnez-leur différentes tailles en faisant glisser les coins blancs qui apparaissent lorsqu'ils sont sélectionnés (maintenez la touche "Shift" pour une mise à l'échelle proportionnelle).

9. Ajoutez les anneaux.

Dessinez quelques cercles autour des planètes pour former les anneaux.

Pour coller des planètes plus petites devant les anneaux, sélectionnez-les, puis appuyez sur Ctrl+X (couper) et Ctrl+F (coller devant).

10. Ajoutez des nuages ​​et des étoiles dans le ciel.

En revenant au panneau "Symbole", faites glisser et déposez des formes de nuages ​​et d'étoiles.

Dupliquez-les, mettez-les à l'échelle et positionnez-les comme vous le souhaitez dans votre espace.

Voici le résultat final.

Jouez avec l'échelle, la position et les couleurs pour vraiment vous l'approprier.

Ajoutez de la typographie et le tour est joué, vous avez un nouveau fond d'écran personnalisé.

Recréez le style des illustrations du blog Toptal

Le blog Toptal est une source précieuse d'idées et d'inspiration créée par les meilleurs talents du monde entier. Tout comme celui que vous lisez en ce moment, la plupart des articles comportent des illustrations pour étayer le contenu. Nous utilisons des formes géométriques simples et des couleurs vives pour représenter les objets.

Voyons comment vous pouvez appliquer ce style pour créer vos propres illustrations culinaires.

C'est ce que vous obtiendrez à la fin.

1. Dessinez une frite simple.

Pour créer une frite, commencez par un long rectangle et ajoutez plusieurs points sur les bords avec "l'outil Plume (P)".

Ajustez la forme en déplaçant les points à l'aide de "l'outil de sélection directe (A)".

2. Créez le contenant de mayonnaise.

Créez trois cercles de tailles décroissantes, de l'arrière vers l'avant.

Le cercle extérieur est le récipient, celui du milieu (en blanc) est la mayonnaise et le cercle intérieur, plus petit (avec un trait de couleur) est pour l'effet d'éclairage.

Coupez le cercle intérieur en deux et assurez-vous que le "Cap" et le "Coin" du panneau "Stroke" sont ronds.

3. Préparez le ketchup et la moutarde.

Dupliquer la tasse de mayonnaise pour créer de la moutarde et du ketchup.

Appliquez simplement différentes couleurs sur la sauce et allumez, comme suggéré ci-dessus.

4. Ajouter la laitue ondulée.

Avec "l'outil Plume (P)", tracez une ligne droite et ajoutez-y plusieurs points.

Distribuez leur espacement horizontal à partir du panneau "Aligner".

Faites glisser vers le bas les points de modification et arrondissez chaque coin au maximum, jusqu'à ce qu'il soit complètement lisse.

5. Créez une tranche de pain.

Créez un long ovale; superposez-le avec la forme d'onde et créez une division en utilisant l'option "Diviser" du panneau "Pathfinder".

Supprimez la forme supplémentaire obtenue avec l'outil "Diviser", puis recolorez la tranche de pain.

6. Préparez le pain burger.

Mettez la tranche de pain en miroir verticalement et ajoutez un point de basculement à la couche supérieure.

Arrondissez ce bord pour faire un pain à hamburger lisse.

7. Terminez le hamburger.

Colorez la laitue en vert.

Créez ensuite différents "rectangles arrondis" pour la viande, le fromage et les tomates, en utilisant respectivement les couleurs marron, jaune et rouge.

Déplacez les choses pour bien superposer votre hamburger.

8. Créez un hot-dog à partir du hamburger.

En commençant par l'illustration de votre hamburger, retirez les tomates et le fromage, recolorez la laitue en mayonnaise et en moutarde, et dupliquez le pain inférieur pour un hot-dog plus symétrique.

9. Concevez la forme de la pizza.

Commencez par la couche supérieure du hamburger, déplacez les points inférieurs vers le bas et rapprochez-les.

Dupliquez la forme du triangle, réduisez-la et rendez-la jaune pour une base au fromage.

10. Ajouter les formes de tomates.

Superposez un grand cercle rouge avec des cercles intérieurs plus petits et utilisez l'option "Minus Front" du panneau "Pathfinder".

Placez plusieurs tranches de tomates de différentes tailles et positions sur la forme de pizza.

11. Créez des tranches de viande.

Dessinez une forme brune organique avec "l'outil Plume (P)", dupliquez-la et mettez-la à l'échelle sur votre pizza.

12. Ajoutez des garnitures supplémentaires.

Ajoutez des traits plus petits, colorés et arrondis dans les espaces vides pour finir vos garnitures de pizza.

13. Créez la paille.

Étoile avec un long rectangle blanc.

Ajoutez deux points avec «l'outil stylo (P)» et déplacez les bords supérieurs pour plier la paille.

Copiez et collez le point central sur le bord droit, puis appliquez un trait rouge et aucun remplissage.

Déplacez la ligne rouge au milieu du rectangle blanc.

14. Créez la forme de la canette de soda.

Dessinez un polygone à huit côtés ; ajouter la canette; déplacer les quatre premiers points vers le haut ; et mettez à l'échelle (S) les bords supérieur et inférieur vers l'extérieur pour le faire ressembler davantage à une canette.

Ajoutez des rectangles arrondis en haut et en bas pour créer les jantes.

15. Ajustez la forme de la boîte et mettez la paille à l'échelle.

Déplacez les points pour ajuster les formes, puis redimensionnez la canette et la paille dans des proportions comparables.

16. Terminez avec le motif ondulé sur la boîte.

Dessinez une forme organique et ondulée pour le dessin sur la boîte.

Créez ensuite une division avec le panneau "Pathfinder" et supprimez les formes extérieures supplémentaires.

Voici le résultat final.

Recréez une illustration inspirée du jeu Monument Valley

Monument Valley est un jeu à succès créé par le studio UsTwo. Il a remporté des dizaines de prix, dont le meilleur jeu iPad d'Apple en 2014, et son style d'illustration s'inspire des magnifiques illustrations géométriques d'Escher.

Vous allez maintenant apprendre à créer facilement le même style visuel qui a fait de ce jeu un si grand succès.

C'est ce que vous obtiendrez à la fin.

Vous n'utiliserez que des avions et des cubes comme blocs de construction pour l'ensemble de l'illustration.

La palette de couleurs comprend quatre couleurs pour l'eau, l'herbe, le bois et le bâtiment - chacune en trois nuances pour simuler la lumière naturelle.

1. Créez un plan isométrique.

Commencez avec un carré, puis suivez ces trois étapes pour créer une forme isométrique. Faites attention car vous répéterez ce processus chaque fois que vous aurez besoin d'une autre forme isométrique.

Nous l'appellerons "l'effet isométrique :"

Allez à Effet> 3D> Extruder et biseauter Sélectionnez "Isometric Top" dans le menu déroulant "Position" - dans le panneau d'options qui apparaît. Réglez "Profondeur d'extrusion" sur zéro sous la première option "Extruder et biseauter".

Vous avez maintenant un plan isométrique.

Pour mieux jouer avec la forme, allez à Objet> Développer l'apparence.

Cela vous permettra de changer la couleur de l'avion et de déplacer librement des points.

Nous l'appellerons "l'effet d'expansion".

2. Tracez les faces de l'île.

Pour créer les trois faces de la forme de l'îlot, créez un carré et deux rectangles allongés.

Répétez "l'effet isométrique" sur chacun.

Pour la deuxième étape, appliquez respectivement "Haut isométrique", "Gauche isométrique" et "Droite isométrique".

3. Complétez et coloriez la base de l'îlot.

Appliquez «l'effet d'expansion» et colorez chaque face avec différentes nuances de vert, la plus brillante étant toujours au-dessus.

4. Créez des faces de cube en perspective.

Appliquez «l'effet isométrique» sur trois carrés, avec la gauche, le haut et la droite isométriques à la deuxième étape. Cela vous donne les trois faces dont vous aurez besoin pour obtenir un cube isométrique.

Notez que chaque objet de votre illustration n'utilisera que trois faces. C'est la beauté de la perspective isométrique.

5. Composez un cube.

Relâchez les formes avec «l'effet d'expansion», rapprochez les visages et appliquez trois nuances de gris pour simuler l'éclairage.

Conseil : la teinte la plus claire est toujours au-dessus ; le plus sombre, à droite ; et le ton moyen, vers la gauche. L'appliquer à chaque forme de votre illustration créera une impression de lumière naturelle.

6. Démarrez la base de l'arbre.

Suivez les mêmes étapes que le cube isométrique, et cette fois, allongez les faces gauche et droite avant de relier l'ensemble.

Ensuite, appliquez trois nuances de brun pour représenter le bois.

7. Terminez l'arbre.

Réduisez l'écorce de l'arbre; dupliquer un cube ; et coloriez ses visages comme la forme de la terre en vert.

8. Utilisez un cube pour créer les blocs de construction

Dupliquez un cube et colorez-le en rose pour le matériau de construction.

Jouez avec l'échelle ; déplacer les points inférieurs vers le bas pour créer une base de tour ; et réduisez-le pour créer un pilier.

9. Assemblez les tours.

Alignez la base de la tour et le cube rose.

Laissez un peu d'espace entre eux et placez trois piliers dans cet espace.

Pour un alignement parfait, assurez-vous d'avoir défini "Snap to Point" et "Smart Guides" dans l'option de menu "View".

10. Reliez les tours.

Sélectionnez le point supérieur et droit d'un plan supérieur et accrochez-vous aux points avec le plan équivalent dans la tour jumelle.

Il suffit de dupliquer et de redimensionner un plan du côté droit pour créer un bord pour le pont de la tour.

11. Créez des escaliers.

Copiez et collez trois faces d'une tour ; alignez les bords pour créer un bloc ; puis déplacez les points inférieurs pour créer une marche d'un escalier.

Dupliquer et positionner les marches plusieurs fois.

12. Fermez les escaliers.

Alignez les points des côtés gauches pour combler les lacunes des escaliers.

13. Retournez les escaliers.

Sélectionnez votre escalier terminé et utilisez «l'outil de réflexion (O)» pour créer un deuxième bloc orienté vers la gauche.

Assurez-vous de changer les couleurs des faces gauche et droite pour respecter l'effet d'éclairage - teinte plus foncée à droite, mi-teinte à gauche et teinte plus claire en haut.

14. Reliez les escaliers.

Attachez des cubes aux escaliers pour créer des marchepieds et reliez-les aux tours.

15. Créez un effet de profondeur d'eau.

Dupliquer et réduire la surface bleu clair.

Placez-le dans différentes positions et ajoutez une nuance de bleu encore plus foncée pour terminer l'effet de profondeur de la mer.

16. Commencez le pont en utilisant des avions existants

Tout comme pour les escaliers et le pont de la tour, commencez par les faces existantes, puis alignez correctement les points pour fermer la forme et terminez en appliquant des nuances de bois brun.

17. Ajoutez des piliers au pont.

Sélectionnez l'écorce de l'arbre, puis dupliquez-la, réduisez-la et positionnez-la pour créer les piliers du pont.

Voici le résultat final.

Vous pouvez ajouter des taches sombres plus grandes sur la mer ou des carrés isométriques colorés plus petits sur le plan de l'île pour simuler l'herbe et les fleurs.

Dans l'ensemble, amusez-vous, déplacez les choses et construisez des tours sympas, en utilisant les blocs de construction simples que vous venez d'apprendre.

En conclusion

Comme nous l'avons vu avec ces trois guides, vous n'avez pas besoin de beaucoup de compétences en dessin pour créer de belles illustrations.

Tout ce que vous devez garder à l'esprit, ce sont ces 3 principes :

• Commencez avec une idée ou un concept clair à l'esprit - que représentez-vous ?
• Inspirez-vous des œuvres d'art et des styles existants - volez comme un artiste.
• Observez et traduisez des éléments complexes en formes géométriques de base à partir desquelles vous pouvez travailler - restez simple.

Amusez-vous à créer vos propres illustrations et téléchargez votre nouvelle œuvre d'art dans Dribbble et ailleurs sur le Web. Prendre plaisir!

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques