22 June 2015 on Design, Débutant, Sketch
Anticipant sur mon cours gratuit sur Sketch, prochainement sur Aquent Gymnasium (début 2015), je vous propose ce tutoriel sur la création d’un logo, de A à Z. Cela vous prendra environ 20 à 30 minutes selon votre expérience avec Sketch ou d’autres applications de création graphique. Pour suivre pas à pas cette intro, vous pouvez télécharger l’image de départ ici. Ce tutoriel présente les bases de la création avec Sketch et de l'exportation d'un logo en SVG (ou tout autre format).
Je vous recommande d’utiliser la dernière version de Sketch, 3.3 à la date de rédaction de cet article.
La grande force de Sketch, ce sont les graphiques vectoriels, même si vous pouvez également importer et éditer des images tramées. Voici par exemple une esquisse que j’ai scannée et convertie en fichier PNG et que vous pourrez importer pour ce tutoriel. Réaliser un tracé vectoriel propre à partir d’une esquisse dessinée à la main est pratique et facile, et c’est ce que nous allons faire ici.
L’esquisse de logo scannée, à partir de laquelle nous réaliserons notre logo vectoriel.
Importez l’image en cliquant ici (le nom du fichier est vectorflo-handrawn.png).
Lancez Sketch, un document vide apparaît, choisissez File>Save et nommez ce fichier vectorflo-logo. Cliquez sur OK.
Choisissez Insert>Image, trouvez le fichier vectorflo-handrawn.png puis cliquez ok. L’image apparaît dans votre Canvas. Passons en revue rapidement notre espace de travail : dans Sketch, la Barre d’Outils (Toolbar) est située dans la partie supérieure, la Liste de Calques (Layers List) est sur la gauche, le Canvas au centre et l’Inspecteur à droite.
L’espace de travail de Sketch
Dans l’Inspecteur, cliquez à l’intérieur du champ Width (largeur) et appuyez sur la flèche vers le bas (↓) de votre clavier. De cette manière, vous pouvez redimensionner le logo pixel par pixel. Si vous voulez accélérer la manoeuvre, appuyez sur shift (⇧) en même temps — vous redimensionnerez l’image par sauts de 10px. Vous pouvez obtenir le même résultat en cliquant sur l’un des coins et en le déplaçant vers le centre. Entraînez-vous un peu, puis dimensionnez l’image sur 1000px.
Cette astuce consistant à utiliser la flèche vers le bas ou vers le haut fonctionne avec tous les champs de Sketch. Essayons maintenant avec Opacity.
Cliquez dans le champ Opacity et appuyez sur Shift (⇧) en même temps que sur la flèche vers le bas (↓) de votre clavier, jusqu’à atteindre 50%. En rendant l’image légèrement transparente, on crée un papier calque “virtuel” qui nous permet de tracer plus facilement nos vecteurs par-dessus le croquis.
Dans le menu Arrange de la Barre d’Outils en haut de votre écran, choisissez Lock Layer. Cela vous évitera de déplacer l’image ou de la sélectionner accidentellement. Si jamais vous souhaitez la débloquer, il suffit de cliquer sur l’icône cadenas située à droite du nom de l’image dans la Liste des Calques (ou sinon, vous pouvez également faire un clic-droit sur la forme et choisir Unlock Layer dans le menu contextuel).
Ajouter des formes vectorielles
Les formes vectorielles sont toutes basées sur des chemins (paths), qui sont des points, des lignes et des courbes définies mathématiquement pour construire à peu près tout ce que vous pouvez imaginer : des éléments d’interface utilisateur, des illustrations etc. C’est pour cela que les formes vectorielles peuvent être redimensionnées sans jamais perdre leur qualité, tout en restant extrêmement légères, une sacré combinaison gagnante !
NdT : pour plus d’info, je vous conseille l’excellent article de Peter Nowell Sketch & les Vecteurs.
Une façon de dessiner un chemin est de le faire à la main. Dans Sketch, les outils de base pour dessiner à la main sont l’outil Pencil (crayon) et l’outil Vector (généralement appelé Pen Tool dans les autres programmes). L’outil Vector est le plus souvent utilisé, mais il est un peu délicat à maîtriser et je ne vais pas entrer dans les détails de son utilisation ici car nous sortirions de notre sujet. Toutefois, si vous êtes intéressés, vous pouvez lire ce super tutoriel pour apprendre à maîtriser l’outil vectoriel de Sketch.
Pour créer ce logo, nous allons utiliser les chemins composés (compound paths) et la fonctionnalité Make Grid (construire une grille). Plus précisément, nous allons créer une série de cercles et les combiner en une forme complexe qu’il serait difficile de dessiner à la main.
La première étape consiste à dessiner un cercle correspondant à la partie supérieure gauche de notre logo. Cliquez sur le bouton Insert en haut à gauche de l’application et un menu déroulant apparaît. Choisissez la catégorie Shape, puis sélectionnez Oval. Sketch sait maintenant que vous voulez créer un ovale vectoriel !
Placez votre curseur au milieu du cercle supérieur gauche, et appuyez sur la touche Option (⌥) ce qui permettra de dessiner le cercle à partir de son centre. Déplacez lentement le curseur vers le haut et la gauche. Remarquez que la forme n’est pas parfaitement circulaire (nous utilisons l’outil Ovale !), pour obtenir un cercle nous devons appuyer simultanément sur la touche shift (⇧). Déplacez le curseur jusqu’à ce que la bordure dépasse légèrement de l’original. Vous pourrez le redimensionner plus tard donc ne vous souciez pas trop d’exactitude pour l’instant.
Appuyez sur Option + Shift pour dessiner un cercle parfait à partir du centre.
Dans l’Inspecteur, repérez les options Fills (remplissage) et Borders (bordures) et si Borders est coché, désélectionnez-le. Nous travaillerons sur les bordures plus tard.
Cliquez sur l’échantillon de couleur dans la section Fills et choisissez une ombre de rouge qui ne vous brûlera pas les yeux. Ce ne sera pas la couleur finale de notre logo, donc n’y passez pas trop de temps.
Repérez le curseur Opacity (au-dessus de la section Fills) et déplacez-le sur la position 50%. La transparence de votre cercle est modifiée de moitié, et vous pouvez maintenant voir le dessin au travers.
Redimensionnez et repositionnez si besoin votre cercle. L’objectif est de s’assurer que le cercle vectoriel recouvre entièrement le cercle dessiné à la main.
Nous allons maintenant dupliquer ce cercle plusieurs fois (3 sur la rangée du haut et 3 sur la rangée du bas). Pour cela, on vérifie que le cercle est bien sélectionné, et on choisit Arrange>Make grid. tapez 2 pour les rangées (rows) et 3 pour les colonnes et donnez aux marges la valeur de 0px. De cette façon, chaque cercle est collé à l’autre. Cliquez ok et vous avez maintenant 6 cercles parfaitement alignés sur deux rangées et trois colonnes !
Les cercles ne s’aligneront pas nécessairement avec l’original, mais on s’y attendait : nous passons d’une esquisse imparfaite à un logo précis.
La fonctionnalité Make Grid est incroyablement utile, on est amené très souvent à dupliquer rapidement des objets à l’intérieur d’une structure de grille. Dans le chapitre 2 de mon prochain cours, je vous montrerai comment utiliser Make Grid pour des Artboards entiers, ce qui rend simple comme bonjour la création d’écrans multiples de prototypes.
Grouper et renommer des objets
Avant de commencer à construire notre logo, il nous faut faire un peu de ménage en regroupant et en renommant les calques. Si vous jetez un coup d’oeil à votre liste de calques, vous verrez que les six cercles portent un nom et un numéro par défaut. Sketch ne nomme pas toujours de manière logique, donc il est parfois nécessaire de renommer : nous allons appeler le premier cercle “Oval 1”, le second cercle de la rangée du haut “Oval 2” etc.
Il se trouve que Oval 1 est déjà correctement nommé, donc dans notre liste de calques nous allons double-cliquer sur le deuxième calque et le renommer “Oval 2”. Appuyez sur la touche tabulation pour sélectionner le calque suivant. Poursuivez les modifications dans l’ordre numérique. À la fin, votre liste de calques devrait ressembler à ceci :
Sélectionnez tous les cercles en cliquant et en glissant au-dessus des cercles. Vous pourrez constater que les six ovales de la liste des calques sont maintenant surlignés. Remarquez que le croquis manuel n’a pas été sélectionné : normal, vous l’aviez bloqué (si le cadenas est toujours là).
Dans le menu Arrange, choisissez Group Layers (vous pourriez également utiliser le raccourci clavier ⌘ + G). Double-cliquez sur le nom du dossier nouvellement créé et renommez-le “Circles”. Tant que vous y êtes, cliquez sur la flèche à gauche du dossier pour l’ouvrir. Nous allons accéder au contenu dans un instant.
Pour vous aider à visualiser l’étape suivante, déplacez votre curseur vers la droite du nom de dossier : vous allez voir apparaître une icône représentant un oeil, cliquez dessus pour permuter l’état visible/invisible du groupe. Faites-le plusieurs fois pour bien repérer les relations entre les cercles vectoriels et le croquis manuel.
Cercles visibles / cercles invisibles.
Utiliser des chemins composés
Les chemins composés ne sont pas une spécificité de Sketch (dans Adobe Illustrator on les trouve dans le panneau Pathfinder) et si on regarde du côté des mathématiques, les chemins composés sont réalisés via des opérations booléennes. L’idée est de combiner deux formes, ou plus, pour en former une nouvelle. Les deux opérations les plus courantes sont Union et Subtract, mais il existe également Intersect et Difference que nous n’utiliserons pas dans ce tutoriel.
Le principe des chemins composés est simple, mais sa mise en pratique peut s’avérer un peu compliquée si l’on oublie les règles. En voici deux à garder toujours en mémoire :
Les chemins composés ne fonctionnent que s’il y a des chemins qui se chevauchent.
Vous devez sélectionner tous les chemins que vous voulez combiner.
Prenons un exemple, sans rapport avec notre projet : ici, nous voyons un rectangle superposé sur un cercle. Si je sélectionne les deux et que je clique sur Union, j’obtiens cette nouvelle forme.
Voyons maintenant l’opération Subtract, qui soustrait un chemin de l’autre. Faites bien attention à l’ordre dans lequel apparaissent les calques dans les exemples qui suivent : le calque situé par-dessus est toujours soustrait de celui situé en-dessous. Dans le premier exemple, le rectangle est le calque du dessus et il chevauche le cercle. Lorsque les deux formes sont sélectionnées et que je clique Subtract, j’obtiens le résultat suivant :
Si c’est le cercle qui est au-dessus du rectangle, l’opération Subtract donnera un résultat bien différent :
Maintenant que nous avons compris l’idée de base, appliquons-la à notre projet. Nous allons utiliser un mélange des méthodes Union et Subtract.
Pour clarifier les étapes qui suivent, je vous suggère de désactiver la visibilité des Ovales 2, 4 & 6. Vous la réactiverez plus tard. Remarquez les espaces entre les trois cercles. Pour “remplir” ces espaces, il va nous falloir faire preuve d’un peu de créativité.
Il nous faut remplir les espaces entre les deux cercles.
Cliquez sur le cercle du dessous (Oval 5) pour le sélectionner. Tout en maintenant la touche Option (⌥) enfoncée, déplacez le cercle dupliqué vers le haut et la gauche jusqu’à obtenir le petit mouvement qui vous indique que le cercle est bien centré entre les deux autres (via les guides intelligents, smart guides).
Appuyez sur la touche Option et déplacez le cercle dupliqué vers l’endroit choisi.
Répétez cette dernière étape, cette fois-ci vers l’autre côté. Vous voyez ce qui nous attend ? Nous allons sélectionner ces cinq cercles et les combiner en utilisant Union pour créer une nouvelle forme.
Pour sélectionner les cinq cercles, cliquez sur chacun tout en maintenant la touche Shift (⇧) enfoncée (l’ordre de sélection est sans importance). Vous pouvez vérifier que les cinq cercles sont sélectionnés en regardant dans la liste des calques. Cliquez ensuite sur le bouton Union et les cinq cercles sont maintenant combinés en une forme unique.
La partie qui suit est la plus difficile de ce projet, avancez prudemment. Nous allons utiliser les cercles d’origine (2, 4 et 6) pour soustraire les chemins indésirables de notre forme nouvellement créée.
Pour commencer, cliquez sur l’icône en forme d’oeil du calque supérieur (Oval 2) pour le rendre visible. Puis cliquez sur Oval 2 dans le canevas pour le sélectionner. Puis, tout en maintenant la touche Shift (⇧) enfoncée, cliquez sur la forme principale dans le canevas. Ensuite, appuyez sur le bouton Subtract. Cela a pour effet de soustraire les chemins sélectionnés se trouvant en dessous de la forme principale, et il nous reste la forme désirée.
Et maintenant, il n’y a plus qu’à rincer et répéter, comme on dit. Activez l’Oval 4, sélectionnez-le en premier, puis sélectionnez la forme principale, appuyez sur le bouton Subtract pour faire disparaître le chemin situé en dessous.
Un petit piège nous attend avec le dernier ovale : si vous avez sélectionné Oval 5 et Oval 6, le résultat sera peut-être surprenant (essayez si vous voulez, il suffira de faire Undo (⌘ + Z) pour revenir à l’état initial).
Comme vous l’aviez deviné, il faut simplement se rappeler que c’est toujours le calque situé au-dessus qui est soustrait. Actuellement, votre forme principale (Oval 5) est au-dessus, il faut donc repositionner Oval 6 pour qu’il devienne le calque du dessus, et ensuite le soustraire.
Sélectionnez Oval 6 puis choisissez Arrange>Move to Front. Plus simplement, vous pouvez déplacer le calque dans la liste des calques, mais parfois on peut faire des erreurs.
Sélectionnez maintenant les deux calques et faites Subtract. Et voilà ! Vous avez un logo complet. N’oubliez pas de sauvegarder le document pour ne pas perdre votre travail !
Une différence importante entre Sketch et Illustrator
Dans Sketch, tous les chemins que vous combinez restent disponibles pour des modifications ultérieures. C’est très différent du fonctionnement d’Illustrator, dans lequel les chemins composés sont “aplatis” par défaut en un chemin unique. Que vous ayez travaillé avec Illustrator auparavant ou non, il est important de comprendre comment fonctionnent les chemins composés de Sketch.
Dans la liste des calques, cliquez sur la petite flèche à gauche d’Oval 5 : vous voyez toutes les formes circulaires créées, et sur la droite vous pouvez voir le type de chemin composé appliqué. En fait, c’est plus qu’une icône, c’est un menu. Si vous cliquez sur l’une de ces icônes, vous aurez la liste des options de chemins composés et vous pourrez les changer à la volée. Amusez-vous avec pour bien comprendre le fonctionnement, mais ne sauvegardez pas le résultat :)
Cette fonctionnalité vous offre une incroyable flexibilité dans votre travail avec Sketch. Vous pouvez toujours revenir en arrière et modifier vos chemins, changer les formes ou les opérations que vous avez utilisées. Cela encourage l’expérimentation et facilite toutes sortes de recompositions. Cela étant, la méthode d’aplatissement d’Illustrator est également disponible dans Sketch — et parfois il est préférable de l’utiliser. Si vous voulez la voir en action, sélectionnez Oval 5 et choisissez Layer>Paths>Flatten. N’oubliez pas de défaire votre travail avec Undo. ( NdT : pour des infos rapides sur l’aplatissement des formes, voyez ces quelques lignes de Peter Nowell.).
Il est temps de donner un peu de style à notre logo. Dans les exercices qui suivent, nous allons ajouter des couleurs de remplissage (Fills), des bordures et des effets. Commençons avec les couleurs de remplissage.
Le croquis original nous distrait de notre travail, désactivons-le en cliquant sur le cadenas du calque associé puis sur l’icône en forme d’oeil pour le cacher (on pourrait aussi faire Ctrl + Clic ou bien Clic droit sur le calque et choisir Hide Layer).
Une autre chose à faire : redonner une valeur de 100% à l’opacité du logo. Sélectionnez le logo et réglez son opacité à 100% pour vous assurer que la couleur que vous allez choisir est la bonne.
Sélectionnez ensuite le logo et cliquez sur l’échantillon de couleur du panneau Fills. Un panneau apparaît, comprenant les six options de Fills, de gauche à droite : couleur unie, dégradé linéaire, dégradé radial, dégradé angulaire, motifs de remplissage et bruit. Nous allons nous concentrer sur la couleur unie et les dégradés de couleur.
Vous pouvez choisir la couleur qui vous plaît ou suivre l’exemple que je vous propose. J’ai choisi une ombre de vert qui contient une valeur de rouge de 99, une valeur de vert de 197 et une valeur de bleu de 115. Vous pouvez entrer ces valeurs RGB dans la moitié du bas du panneau. Remarquez la quatrième valeur (A) ou alpha. Nous allons prendre quelques instants pour explorer cette couleur alpha, qui deviendra un outil de valeur dans votre arsenal de couleurs.
Tapez 10 comme valeur de A et faites enter. La couleur de votre logo sera très faible parce que vous avez réglé son opacité à 10%. Il est important de ne pas confondre l’opacité d’une couleur alpha et la valeur d’opacité de l’objet. Pour être clair : votre logo a actuellement une opacité de 100%, mais la couleur de remplissage est réglée sur 10% via alpha.
Tapez 100 comme valeur de A et vous retrouvez la couleur dans sa pureté. Maintenant, nous allons ajouter une autre couleur de remplissage par-dessus celle-ci, mais ce sera un dégradé un peu plus complexe.
Cliquez sur le signe “+” situé à droite du panneau Fills. On ajoute ainsi une nouvelle couleur de remplissage qui, par défaut, occulte la première — du moins tant qu’on ne modifie pas son opacité.
Cliquez sur l’option dégradé linéaire (la deuxième icône à partir de la gauche) et l’outil dégradé apparaît sur votre logo, sous la forme d’une barre blanche avec un petit cercle noir en bas et un cercle blanc plus grand en haut. Ce sont deux stops couleur et par défaut un dégradé apparaît déjà sur le logo.
Votre dégradé devrait ressembler au mien, mais je crois que Sketch “se rappelle” le dernier réglage utilisé pour les dégradés, donc le vôtre sera peut-être différent.
Il est utile de rappeler les propriétés d’un dégradé dans Sketch, car ce n’est pas immédiatement évident. Mon logo par exemple commence très clair au sommet puis devient sombre et ma couleur de remplissage verte est toujours apparente, pourquoi ? (un indice : ça a à voir avec la couleur alpha dont nous venons de parler).
Les valeurs RGB sont réglées sur le noir, mais la valeur de 50 du canal alpha (A) crée une transparence de 50%
Cliquez sur le petit cercle du bas de l’éditeur de dégradé et réglez les valeurs RGBA. Les valeurs de R, G et B sont égales à 0, ce qui donne en théorie du noir, mais si la valeur A est de 50, l’affichage est de 50% du noir, ce qui donne un gris moyen.
Choisissez maintenant une couleur dans le sélecteur de couleur (color picker) ou si vous préférez continuer avec mon exemple, tapez 86 pour R, 104 pour G et 180 pour B. Le résultat est un ton de bleu avec une opacité de 50%.
Cliquez le stop blanc au sommet de l’outil dégradé et déplacez-le vers le coin supérieur gauche de votre logo. Si la valeur alpha est de 50, laissez-la telle quelle, sinon réglez-la maintenant sur cette valeur.
Comme vous le voyez, la combinaison de dégradé transparent et de remplissage solide crée une belle couleur complexe avec seulement deux calques. Gardez à l’esprit que nous ne faisons qu’effleurer la surface : il n’est pas rare d’avoir trois ou quatre couleurs de remplissage en interaction l’une avec l’autre pour créer des effets uniques. L’avantage ici est que vous pouvez expérimenter : essayez de modifier la couleur de base ou d’ajuster le dégradé. (Si vous avez un peu d’expérience, Sketch propose également un mode “blending” pour les remplissages de couleur. De plus, vous pouvez créer des dégradés plus complexes grâce à l’éditeur de dégradés).
Bordures et autres effets
Le design web est fermement ancré dans l’ère du “plat” (flat design) et cela se reflète dans les fonctionnalités de Sketch. Par exemple vous n’y trouverez pas le large éventail de styles de calques dont Photoshop a usé et abusé pendant des années, mais plutôt des options de style qui se traduisent grosso modo dans les fonctionnalités de CSS, telles que borders, shadows et blurring. Penchons-nous sur les bordures et les ombres pour l’instant. Au début de ce tutoriel, je vous avais demandé de supprimer les bordures de votre logo, ajoutons-les maintenant et expérimentons quelques options.
Cliquez sur la case à cocher à gauche de l’échantillon de couleur de la section Borders.Vous ne voyez peut-être pas une différence notable parce que l’épaisseur est réglée sur 1. En plus de l’épaisseur, nous avons la couleur et la position.
Cliquez dans le champ Thickness (épaisseur) et à l’aide de la flèche vers le haut (↑) de votre clavier, augmentez l’épaisseur de la bordure jusqu’à 20. J’ai la main un peu lourde, mais c’est pour mieux comprendre l’effet.
Cliquez sur le champ Color et essayez diverses couleurs. Ne vous laissez pas emporter toutefois, nous allons ajouter un dégradé de bordure d’ici peu.
À l’intérieur du panneau Color, cliquez sur l’option dégradé linéaire (linear gradient). Nous allons maintenant manipuler la couleur et la direction du dégradé pour créer un effet intéressant similaire au biseau (mais peut-être un peu plus sophistiqué !).
Cliquez sur le stop couleur du haut dans l’outil dégradé puis déplacez-le vers le sommet du cercle supérieur gauche. Modifiez la couleur pour obtenir un bleu-vert (j’ai utilisé la valeur hexadécimale 38968F).
Puis cliquez sur le stop couleur en bas de l’outil dégradé et modifiez la couleur en bleu clair (dans mon exemple 92BBD7). Je n’ai pas déplacé ce stop couleur, mais sentez-vous libre d’essayer.
Vous pouvez créer des effets assez complexes avec les techniques qui précèdent, mais voyons maintenant un nouvel outil de notre arsenal : les ombres.
Cliquez sur le signe “+” de la section Inner Shadows (ombres internes) pour ajouter l’ombre par défaut. Si vous avez déjà travaillé avec les ombres dans d’autres programmes, les options proposées ici vous sembleront familières. Les valeurs X et Y vous permettent de positionner l’ombre horizontalement et verticalement. La propriété Blur (flou) vous permet de contrôler la quantité de flou et la propriété Spread (diffusion) vous permet de contrôler la dispersion de l’ombre. J’ai utilisé les valeurs suivantes : X = 7, Y = 23, Blur = 4 et Spread = 2.
N’hésitez pas à ajuster les divers attributs du logo pour l’adapter à votre goût. Et maintenant, nous allons ajouter du texte. Nous sommes dans la dernière ligne droite !
Les fonctionnalités de texte de Sketch ne sont pas aussi sophistiquées que celles de Photoshop et Illustrator mais elles sont amplement suffisantes pour nos besoins.
Cliquez sur l’icône en forme d’oeil du calque de notre croquis pour le rendre à nouveau visible.
Choisissez Insert>Text puis cliquez une fois au début du mot “vectorflo” et le curseur de texte apparaît.
Cliquez sur le menu Typeface dans l’Inspecteur et si vous avez Helvetica Neue choisissez-la. Si vous n’avez ni Helvetica ni Helvetica Neue, choisissez Arial en dernier recours (mais de grâce, jamais d’Arial pour les vrais logos !). NdT : ...et je dirais même plus, évitez également dans le corps de texte. Pour trouver d’excellentes polices de caractères gratuites, consultez l’article Les Free Fonts Aujourd’hui.
De plus, si vous avez Helvetica Neue, cliquez sur le menu Weight et choisissez Ultra Light si elle est disponible.
Tapez maintenant le mot “vectorflo” et réglez la taille de police sur 150.
Nous voulons que le texte soit centré sous le logo mais n’essayez pas de rester fidèle au croquis. Cliquez et déplacez le texte jusqu’à ce que les guides intelligents apparaissent, ce qui indiquera que le texte est correctement centré.
Les “smart guides” de Sketch apparaissent lorsque le calque de texte est centré.
Maintenant que le texte est là, notre croquis devient gênant. Cliquez à nouveau sur l’icône en forme d’oeil pour le désactiver. Pas besoin de supprimer le calque, sauf si vous voulez réduire la taille du fichier.
Il est rare que les logos professionnels ne modifient pas le texte d’une manière ou d’une autre. Par exemple, regardez l’espace entre les lettres “r” et “f” (zoomez si nécessaire). Les lettres se touchent et cet espace pourrait être légèrement ouvert. La modification de l’espace entre les lettres s’appelle crénage, mais Sketch l’appelle Character Spacing (espacement des caractères).
Sélectionnez les lettres r et f puis placez votre curseur sur le mot “Character” dans la section Spacing de l’Inspecteur. Lorsque vous placez votre curseur légèrement sous le champ, il se transforme en flèche double que vous pouvez déplacer vers la gauche ou la droite pour modifier l’espacement. Comme vous voulez augmenter l’espace, il vous faut le déplacer vers la droite jusqu’à ce que la valeur atteigne approximativement 8, ou la valeur que vous préférez (NB : vous pouvez également utiliser les flèches vers le haut ou le bas qui apparaissent dans le champ Character).
Modification de l’espacement des caractères (crénage) de deux lettres.
Remarquez que dans mon exemple, le crénage n’affecte pas seulement les lettres r et f, mais r, f et l. Si vous vouliez ajuster uniquement r et f, il faudrait sélectionner la lettre r seule.
NdT : si le crénage vous intéresse, le site Kerntype propose un jeu très addictif !
Bravo ! Il ne nous reste plus qu’à exporter notre logo.
Exporter votre graphique
L’exportation est un autre point fort de Sketch. Dans l’environnement web actuel et sa pléthore d’écrans haute-résolution et appareils mobiles, il y a un besoin croissant d’exportation d’images dans des tailles, résolutions et formats multiples. Nous allons exporter notre logo de diverses manières, y compris en bitmaps et en format vectoriel.
Choisissez File>Export et Sketch définira automatiquement une boîte autour de notre logo. Cette boîte est appelée techniquement une slice (une tranche) et vous pouvez voir l’icône slice au bas de votre liste de calques. Sketch utilise le nom de votre document par défaut pour nommer la slice.
Sketch définit automatiquement les limites de la slice mais vous pouvez l’ajuster manuellement en cliquant et en déplaçant ses bords ou en modifiant ses valeurs dans le champ Size de l’Inspecteur. Par exemple, comme je veux que la hauteur et la largeur soient égales, j’ai tapé 620 pour la hauteur et 620 pour la largeur. J’ai ensuite repositionné la slice pour assurer une distribution égale de l’espace sur les quatre côtés.
Dans le panneau Export, remarquez qu’on trouve des réglages de dimension (size), suffixe et format. La valeur par défaut de Size est 1x, Suffixe est vide pour l’instant et Format est réglé sur PNG.
La dimension de 1x signifie simplement que votre graphique sera exporté à 100% de sa dimension (actuellement égale à 620px par 620px). Le champ Suffix vous permet d’ajouter un nom de fichier automatique, on l’utilise typiquement lorsqu’on crée des exports multiples. Le Format est simplement le type de fichier, Sketch peut exporter les formats bitmap suivants : PNG, JPG, TIFF et pour les vecteurs : SVG, EPS et PDF.
Cliquez sur le “+” à droite de la section Export et une autre rangée de réglages apparaît. La taille est maintenant 2x, le Suffix est @2x et le Format est toujours PNG. Si vous choisissiez ce réglage, votre graphique serait exporté à deux fois sa taille actuelle (1240px par 1240px) et le suffixe @2x serait ajouté au nom de fichier pour le distinguer de l’image de base.
Cliquez sur le “+” à nouveau, Sketch ajoute automatiquement une valeur 3x, mais celle-ci peut être modifiée. Cliquez sur le menu Size et sélectionnez 0.5x dans la liste. Remarquez que le suffixe reflète ce changement. Le choix de cette option exporte une image à 50% de sa taille actuelle.
Cliquez sur “+” encore une fois puis cliquez sur le menu Format pour le modifier en SVG. Puisqu’il s’agit d’un format vectoriel natif, le menu Size est grisé. Sélectionnez la valeur @3x dans le champ Suffix et effacez-la.
Cliquez sur le bouton Export tout en bas de l’Inspecteur et la fenêtre Export apparaît. Cliquez sur le bouton New Folder (nouveau dossier) en bas à gauche et nommez-le vectorflo-exports, puis cliquez sur Export. Si vous naviguez vers ce dossier, vous verrez quatre fichiers, trois PNG et un SVG.
Bravo ! vous êtes arrivé à la fin de ce tutoriel. J’espère que vous avez appris des choses sur la création avec Sketch. Si vous avez aimé ce tutoriel, jetez un coup d’oeil à des sujets comme UX, responsive web design et bien d’autres sur Aquent Gymnasium. À bientôt !
Article original paru le 19 décembre 2014 dans <span itemprop="sourceOrganization" content="Medium » property="dc:publisher" url="https://medium.com/">Medium.
Sur l’auteur : Jeremy Osborn est Directeur des Études d’Aquent Gymnasium, un MOOC innovant pour les designers, développeurs et professionnels du marketing. Il est l’auteur de plusieurs livres à succès sur les technologies du web et les logiciels de design. On peut le retrouver sur son site et le suivre sur Twitter.
Copyright Jeremy Osborn © 2014.