Créer une icône flat avec Sketch

Le succès du précédent tutoriel Sketch 3 imposait une suite. Dans ce nouveau tutoriel très clair, Abhijeet Wankhade réalise une icône simple, permettant de montrer quelques fonctionnalités essentielles de Sketch.

Par

Sketch 3 est de plus en plus populaire et les articles fleurissent notamment au sujet de ses nouvelles fonctionnalités.

NdT : La Cascade a publié un tutoriel d'introduction à Sketch très détaillé, Sketch tutoriel 101, si vous ne l'avez pas lu je vous conseille de commencer par cette première étape passionnante.

Commençons tout de suite. Voici l'icône que nous allons réaliser, et nous allons apprendre quelques petites choses en chemin. Si vous voulez télécharger le fichier final, il est dispo ici.

image


1. Créez un nouveau document

image

Voici le canevas vide qui apparaît lorsque vous ouvrez Sketch 3.

2. Créez un nouvel artboard

image

Vous pouvez créer un artboard en cliquant sur l'icône “+” ou bien en utilisant le raccourci “A”. Donnez-lui une taille de 200x200 dans le panneau de droite.

3. Créez un cercle

image

Donnez-lui les dimensions 150x150 et centrez-le en utilisant les outils d'alignement situés en haut du panneau de droite (ce sont les 4ème et 7ème icônes).

image

Décochez la case “Borders”, votre cercle ressemble maintenant à ceci :

image

4. Créez deux rectangles

respectivement de 132x100px et 122x90px, et placez-les l'un sur l'autre.

image
image

La position respective de ces deux rectangles n'est pas importante, du moment qu'ils sont alignés sur le centre du canvas. Donnez des couleurs différentes à chacun de façon à les distinguer plus facilement.

5. Mettez le grand rectangle sur le petit

Pour faire passer le grand rectangle par dessus le petit, il suffit de glisser-déplacer son icône au-dessus de celle du petit rectangle, dans le panneau de gauche. Une autre méthode consiste à le sélectionner, cliquer sur “Forward” dans la barre de menu principale (en haut). Une fois qu'il est au-dessus, cliquez sur “Edit” et ajoutez un point d'ancrage quelque part au centre comme ceci :

image

Une fois l'ancrage ajouté, cliquez sur le point d'ancrage et dans le panneau des propriétés à droite cliquez sur “Straight”. Cela retirera les poignées du point d'ancrage, pour être sûrs qu'il n'y aura pas de création de lignes courbes.

image

Faites ensuite glisser le point d'ancrage vers le centre, en bas. Vous allez voir un guide rouge qui vous montrera s'il est en ligne avec le centre du rectangle. Vous devriez avoir ceci :

image

6. Dupliquez le rectangle du dessus

...celui qui ressemble à une enveloppe, et effacez son point d'ancrage supérieur gauche.

Pour dupliquer un objet dans Sketch 3, il suffit de sélectionner l'élément en question et de taper “cmd+D”. Une fois le rectangle dupliqué, cliquez sur “Edit” dans la barre de menu supérieure, sélectionnez le point d'ancrage supérieur gauche et faites “delete” sur votre clavier (del ou tabulation en arrière). Si vous donnez une couleur spécifique à votre troisième rectangle, le résultat devrait ressembler à ceci :

image
J'ai donné des couleurs différentes aux éléments pour mieux les distinguer.

7. Effacez un autre point d'ancrage

...dans la forme précédente, et transformez celle-ci en triangle.

image

Editez la forme située sous ce triangle et faites descendre le point d'ancrage central pour obtenir ceci :

image

8. Dupliquez le cercle

...en faisant “cmd+D”, puis placez le cercle dupliqué sur le premier rectangle et cliquez sur “Intersect” dans la barre de menu principale.

image

9. Répétez l'étape 8 pour les autres formes

...sauf le cercle bien sûr.

image

Le résultat devrait ressembler à ceci :

image

Comme vous le voyez, nous y sommes presque. Nous allons maintenant passer aux finitions.

10. Créez un nouveau triangle

...un petit triangle équilatéral, et placez le au-dessus du cercle et derrière toutes les autres formes.

image
image

Il y a une boîte à cocher dans le panneau des propriétés à droite, qui permet de transformer n'importe quel triangle en triangle équilatéral. Placez le triangle sous les autres formes mais au-dessus du cercle.

image

Dupliquez la même forme (cmd+d), faites la tourner verticalement et placez la à l'autre bout comme indiqué ci-dessous. Pour faire tourner une forme, il suffit de la sélectionner, l'option “Rotate” apparaît dans le panneau des propriétés.

image
image

11. Créez un carré

...sur l'angle supérieur droit du rectangle du dessous (celui qui est situé sous les autres rectangles et au-dessus du cercle).

Avant de me lancer dans cette étape, j'ai donné des couleurs à mes formes. Créez maintenant un carré comme ceci :

image

12. Effacez le point d'ancrage

...supérieur droit du carré.

Sélectionnez le carré et cliquez sur “Edit”. Effacez le point d'ancrage droit en le sélectionnant et en faisant delete sur votre clavier (del ou tabulation en arrière).

image

13. Ajoutez deux point d'ancrage

...sur le rectangle blanc en-dessous du triangle nouvellement créé, et effacez le point d'ancrage supérieur droit du rectangle blanc.

Ajoutez deux points d'ancrage sur le rectangle blanc aux endroits où le triangle touche le rectangle blanc (c'est à dire à deux endroits). Effacez le point d'ancrage supérieur droit sur ce même rectangle blanc. Vous aurez ceci :

image

Donnez une nuance plus sombre à ce même triangle et supprimez les bordures.

image

14. Ajoutez quelques rectangles

...comme ceux-ci, pour symboliser des lignes d'écriture.

image
image

15. Regroupez ces rectangles

...(avec cmd+G) et faites les glisser entre le papier blanc et et la forme de l'enveloppe en glissant-déplaçant le dossier groupe nouvellement créé.

Ainsi :

image

16. Arrondissez les angles

...de vos rectangles, et ajoutez des couleurs à votre artboard.

Sketch 3 permet d'arrondir les angles situés sur un point d'ancrage. Sélectionnez la forme papier blanc. Cliquez sur “Edit” et sélectionnez le point d'ancrage supérieur gauche. Lorsque vous sélectionnez le point d'ancrage vous allez voir dans le panneau de droite une option appelée “Corners”. Donnez-lui une valeur de 3px. Vous pouvez appliquer la même technique pour les autres coins.

image

Pour ajouter une couleur de background à votre artboard, sélectionnez votre artboard à partir du panneau des calques à gauche. Sur la droite vous verrez les propriétés de l'artboard. Cliquez sur Background color puis sur la petite fenêtre à droite. Donnez-lui une couleur gris sombre et votre icône est prête !

image
image

Vous pouvez télécharger le fichier ici ou dans l'article original.


Ressources complémentaires en anglais

Sketch App Sources, tutoriels dans plusieurs langues et des centaines de ressources gratuites.
Learn Sketch 3, par Meng To
Sketch 3 tutorials, par Level up tuts, 16 vidéos (en anglais) pour apprendre les fondamentaux.

Ressources complémentaires en français

Sketch tutoriel 01, par Sébastien Gabriel
Sketch et les vecteurs, par Peter Nowell


Intéressé par le design ? Sur la Cascade, retrouvez des articles et ressources, et ici des ressources sur Sketch.


original paru le dans Medium.

Sur l'auteur : est designer UX/UI, il a créé son agence Sokratus en Inde, on peut le suivre sur Dribbble, Twitter, Google+ et Facebook.

Traduit avec l'aimable permission de Medium et de l'auteur.
Copyright Abhijeet Wankhade © 2014.