Utilisez Sketch en 5 minutes


Sketch est un outil pour OSX encore jeune destiné au design produit (UI, mobile, web, icônes,…). Le soft connaît un très grand succès, et pour cause : facile à prendre en main, léger, moins cher que Photoshop et surtout pensé pour le design web et mobile, il a d’excellents arguments !

Le domaine des logiciels de design est encore aujourd’hui dominé par la suite Adobe. Ces excellents logiciels, avec en tête de file Photoshop et Illustrator font office de référence dans le secteur et sont extrêmement riches en possibilités. Mais malgré leurs qualités aucun de ces logiciels n’est pensé pour le design web et mobile, et c’est là où Sketch entre en scène.

Ce guide est donc destiné à tout curieux du design qui envisagerait d’utiliser Sketch ainsi qu’aux habitués de Photoshop qui voudraient découvrir l’outil. J’essaierai de mettre en avant les possibilités de Sketch tout en étant compréhensible des débutants.


1. Introduction

Quelques avantages face à Photoshop

  • Tous les éléments de Sketch sont vectoriels.
  • L’organisation des fichiers permet de travailler de manière simultanée sur plusieurs vues, et de ne pas avoir à jongler d’onglets en onglets.
  • Sketch contient un système de classes (expliqué plus bas) permettant de conserver une charte graphique cohérente.
  • L’interface est extrêmement simple d’approche, avec la grande majorité des outils disponibles hors des menus déroulants.
  • Son prix : il coûte 100€ environ, contre 40€/mois pour la suite Adobe.

Limites de Sketch

  • Sketch n’est aujourd’hui disponible que sur Mac
  • Le logiciel ne gère pas l’import de psd ou de ai. Il faut réussir à passer par un format svg ou eps pour importer ses anciennes ressources
  • Les fonctionnalités de retouches d’image sont quasi inexistantes

2. Organisation de Sketch

Interface

l’interface est extrêmement simple, avec 4 éléments principaux :

  • La barre d’outil personnalisable (1)
  • La barre de gauche permettant de naviguer dans les layers, les artboards et les pages(2)
  • L’espace de travail central (3)
  • La barre de droite contenant l’ensemble des propriétés de l’élément sélectionné (4)

Pages > Artboards > Layers

  • Un layer (ou calque) correspond à un élément graphique de base tel qu’un rectangle, un texte ou encore une image
  • Un Artboard inclue plusieurs layers et représente souvent une vue de votre application (page d’accueil, dashboard, …) dans un état particulier
  • Les pages, moins utilisées, rassemblent plusieurs Artboards (par exemple pour rassembler les vue d’une page de votre application dans plusieurs états)

Tailles, distances et alignements

Vos artboards et vos layers ont tous des propriétés permettant d’être correctement placés, dimensionnés et alignés; ce sont les premières propriétés du panneau de droite.

La première rangée est commune à beaucoup de logiciels de graphismes, et permet d’aligner les éléments entre eux. Les 2 premiers symboles permettent de répartir plusieurs éléments de manière régulière.
Pour les suivants, chaque trait bleu représente un élément, le trait gris l’alignement. Le dernier symbole permet par exemple d’aligner le bas des éléments entre eux.

Les autres champs permettent de positionner un élément dans son artboard selon sa distance avec le coin supérieur à gauche.

Commandes de sélection et d’alignement

Il existe deux commandes de bases utilisées en permanence avec Sketch; je les indique donc en avance de la liste des raccourcis importants.

  • ⌘ (Cmd) permet de sélectionner des éléments à l’intérieur d’un groupe. En maintenant cette touche, ils apparaissent en surbrillance au survol.
Sélection en appuyant sur ⌘ (Cmd)
  • Alt fait apparaitre des marques rouges indiquant les distances entre l’élément sélectionné et les autres layers ou bien l’artboard le contenant.
Utilisation de Alt (icône de keypad selectionnée)

3. Usage de base

Nous allons enfin voir comment prendre en main l’outil. Sketch est disponible en version d’essai d’un mois à cette adresse : bohemiancoding.com/sketch .

Les raccourcis essentiels

Comme tout logiciel de design, la clé de l’utilisation efficace de Sketch réside dans ses raccourcis claviers. Voici les plus importants, n’hésitez pas à y revenir souvent et pour les multitudes d’autres, consultez sketchshortcuts.com.

  • A créer un artboard
  • R et O tracer respectivement un rectangle et un oval (maintenir Maj pour un carré ou un rond)
  • T créer un champ de texte
  • ⌘ + G Grouper plusieurs layers
  • ⌘ + R Renommer un layer, un groupe ou encore un artboard
  • Alt + glisser permet de dupliquer un élément
  • Maj permet de garder les proportions lors d’un redimensionnement

Formes et attributs

Une fois votre artboard créée (A puis on tire un cadre), vous allez pouvoir le remplir avec vos différents éléments :

Options de formatage des formes

Les formes, notamment les rectangles (R) et les ronds (O). Les autres formes sont accessibles via le menu insert > shape.
Une fois crées, voici les paramètres auxquelles vous allez accéder.
Vous pouvez notamment changer sa couleur de remplissage(fill) et lui mettre une border (filet extérieur).

Redimensionnement puis modification d’une forme

Une fois sélectionnée, une forme est entourée de carrés blancs, permettant de changer ses dimensions.
Les formes sont modifiables en cliquant deux fois dessus ou bien en appuyant sur entrée. Les points d’inflexions apparaissent alors (sous forme de ronds), et on peut en rajouter en cliquant sur les lignes.

Textes et attributs

Options de formatage des champs de texte

Les champs de texte ont pour attribut les options de formatage de texte habituelles.

La largeur peut-être fixée (par exemple dans le cas d’un contenu d’article de blog) ou automatique (pour un bouton par exemple).

Il est à noter que les textes peuvent être convertis en forme (très utile pour un logo par exemple) via clic droit -> convert to outlines.


4. Utilisation plus poussée

Cet article ne fait que survoler les possibilités de Sketch, et je cherche avant tout à mettre en avant sa très grande facilité de prise en main. Mais Sketch offre aussi des outils très puissants qui vont fortement améliorer notre productivité, et en voici deux exemples.

Classes (styles)

Les formes et les textes peuvent être associé à un style particulier, ce qui est extrêmement pratique pour conserver une charte graphique cohérente. Cela correspond exactement à ce que propose une classe CSS : si un élément avec une classe est modifié, les autres éléments seront impactés.

Exemple d’usage du système de styles

Symboles

Cette fonctionnalité est l’équivalent d’une classe pour un groupe de layers : elle permet par exemple de dupliquer un bouton ou une icône dans plusieurs vues tout en étant sûr qu’ils gardent exactement le même visuel.
Cette option est accessible au même endroit que les classes dans le panneau de droite, et se manie de la même manière.

Exemple d’usage du système de symbole

5. Découpe et export

Une fois votre design terminée, vous allez pouvoir exporter vos ressources. Sketch propose des exportations sous 3 formats vectoriels (svg, eps, pdf) et 3 formats pixelisés (png, jpeg, tiff).

Système de slice

Avant d’obtenir vos ressources, il faut indiquer à Sketch quels artboards et quels groupes exporter. Pour cela, il vous suffit de cliquer sur “make exportable” en bas à droite de l’écran une fois votre élément sélectionné.

Puisque vous ne travaillez qu’avec des éléments vectoriels, Sketch vous permet d’exporter un même asset en plusieurs tailles très facilement en utilisant plusieurs fois l’option “make exportable” et en indiquant à chaque fois le ratio de sortie que vous désirez (1x, 2x, 3x la taille actuelle par exemple). C’est option est entre autres extrêmement pratiques pour les icônes d’application à fournir en plusieurs tailles.

Pour indiquer une partie de l’écran à exporter, il faut définir une slice, en utilisant le raccourci S.

Système d’export

Une fois vos éléments à exporter définis, vous allez pouvoir exporter de différentes manières :

  • Via le bouton exporter du menu du haut, pour exporter l’ensemble des assets
  • En sélectionnant l’élément à exporter, et en cliquant en bas à droite sur “export nom_de_lelement”
  • Enfin, en faisant un drag & drop depuis la barre de gauche de l’élément choisi vers le bureau
Exportez vos ressources simplement via un drag&drop

Conclusion et ressources

J’espère que ce court guide vous aura convaincu de l’efficacité de Sketch. Si vous êtes intéressés pour en savoir plus, n’hésitez pas à me donner vos attentes pour un deuxième article qui cherchera à mettre en avant les fonctionnalités moins connues du logiciel.

Pour finir, voici une liste de ressources extrêmement utiles, à tout niveau :


J’espère que cet article vous a plus, partagez le autour de vous et faites moi vos retours à christophe@staffit.co

Bon design !☺

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.