Dans le monde du graphisme, nous avons tous besoin d'un logiciel pour créer nos montages photo, maquettes web, interfaces mobiles, etc... Dès l'apprentissage à l'école, nous nous retrouvons devant photoshop le logiciel d'Adobe, tenor du milieu depuis de nombreuses années.
Or depuis quelques temps, de nombreuses alternatives apparaissent.
Sketch est l'une de celle-ci, et même si basculer de photoshop peut paraitre difficile, je vais vous expliquer pourquoi cela peut valoir le coup.

Photoshop, de vieilles habitudes...

Dès le bac en poche, dans mon école d'art, les premiers cours d'infographie étaient simples :
maîtrise de photoshop.
Tel un quasi monopole, le logiciel d'adobe est LE logiciel à maitriser.
Il est partout, dans les écoles, les agences, les particuliers, même dans le jargon commun !
Qui n'a jamais entendu "cette image est photoshopée" ?
Cependant au fil des années on se rend compte que celui-ci n'accompli pas toujours parfaitement sa tâche... Nous allons essayer de voir pourquoi.

À L'ORIGINE, IL N'ÉTAIT PAS PRÉVU POUR LE DESIGN D'INTERFACES

Il est bon de rappeler le but que Photoshop à la base était la retouche d'images. Les outils de création de forme et plume sont arrivés plus tard avec la V2. Nous (designers d'interfaces) utilisons donc ce logiciel de façon détournée ! Grâce à plusieurs plugins et autres, nous y arrivons, mais cela au détriment de la facilité d'utilisation.

IL N'EST PAS ADAPTÉ POUR LE DESIGN MOBILE

L'export des éléments dans différentes résolutions (tels que les fichiers rétina) sont une perte de temps énorme, et le processus est parfois complexe.
La encore, nous y arrivons grâce à des plugins et autres scripts.

CERTAINES CHOSES NE SONT PAS RÉALISABLES SANS "ASTUCES'

Dans photoshop il est impossible de mettre 2 bordures à un objet par exemple. Il faut tricher de diverses manières pour arriver a ses fins... C'est exactement la même chose pour mettre 2 ombres, les remplissages, bref tous les effets de calque.
(PS : Adobe vient de mettre à jour la suite CC2015 et cela a enfin changé, je reviendrais bientot sur les nouveautés)

IL NE SEMBLE PAS TOUJOURS OPTIMISÉ

Lors de longues sessions de Photoshop, nous avons toujours l'impression que celui-ci utilise beaucoup de ressources. Un exemple simple. L'ouverture d'un même fichier sur Photoshop et sur Sketch montre que Sketch utilise au maximum 500mo de RAM alors que Photoshop lui prend au maximum 2Go de RAM !

Idem pour la gestion des filtres qui parfois font bien ramer la machine.

Les forces de sketch

DESSIN VECTORIEL ET AU PIXEL PRÈS

Sketch à l'avantage d'être vectoriel, ce qui permet de ne pas faire plusieurs dimensions d'un même fichier. Tout est ainsi redimensionnable, et tout ceci au pixel près de façon quasi parfaite.
Le fait de pouvoir passer de la vue vectorielle à la vue pixel en une touche est aussi très pratique.
Le logiciel a aussi une fonction très utile "round to nearest pixel edge" qui permet d'éviter les sous pixels en aimantant ceux-ci parfaitement. Adieu les formes non précises et les pixels semi-transparents.

sketch-pixel

Il est possible de passer de la vue pixels à celle vecteurs avec le raccourci 'ctrl + p'

COMPILATION DES OUTILS DE DESSIN D'ILLUSTRATOR

Tous les éléments sont dynamiques, il est ainsi possible de modifier les bords arrondis d'une forme en rentrant sa valeur en pixel.  L'équivalent du pathfinder est aussi la, et l'on peut soustraire, ajouter des formes, etc... Chaque forme étant listée comme calque, c'est très pratique et efficace.

sketch-illustrator

Toutes les formes restent éditables

EFFETS DE CALQUES ILLIMITÉS

Dans sketch il est tout a fait possible de mettre 3 bordures, 2 ombres, 3 dégradés à la même forme !
Plus besoin de tricher pour arriver à ses fins.

sketch-effets

Remplissages, bordures et ombres infinis !

SMARTGUIDES

Fonctionnalité très pratique, les smartguides vous indiquent, dès la touche ⌥ enfoncée, les distances entre chaque éléments. Super efficace pour aligner des formes et les espacer.

smartguides

Sélectionnez une forme, maintenez la touche ⌥ et survolez les différents blocs

SAUVEGARDE AUTO ET TIME MACHINE

La crainte du plantage et de l'oubli du fameux ⌘+S est toujours dans un coin de notre tête. Ici pas de problème puisque Sketch sauvegarde automatiquement votre fichier, et garde des copies de chaque version de celui-ci, le tout parfaitement intégré dans time machine. Pour cela il suffit d'aller dans le menu File > revert to > Browse all versions.

sketch-timemachine

"Browse all versions" vous montre une time machine des précédentes versions de votre fichier

L'EXPORT D'ELEMENTS

Exporter des éléments dans photoshop est contraignant, car l'outil tranche plutôt rigide. Ici l'avantage, tout élément est exportable en un clic. Et comme le fichier est vectoriel, l'export peut se faire sous différentes dimensions (@2x, @1x,...) et formats (svg, jpg, png...).

sketch-export

L'export se fait facilement, en 1 clic

LAYOUT

Dans photoshop, pour génerer des grilles complexes, j'utilise un plugin appelé Guideguide. Ici, la fonction est native et plutôt efficace !

sketch-layout

Tous les paramètres pour créer une grille facilement

L'OUTIL MOSAÏQUE

Outil très pratique dans de nombreux cas, celui-ci permet de créer une grille d'objets, en choisissant le nombre de colonnes, de lignes, l'espacement...

gridtool

Tout ce qu'il faut pour une mosaïque en moins de 10 sec !

CSS

Il est très facile d'exporter les propriétés CSS d'un objet ou texte. Il suffit d'aller dans le menu Edit > Copy CSS Attributes et ensuite de coller ceci dans un éditeur de votre choix. 

sketch-css

L'objet et son export CSS, le tout en 3 sec.

L'avenir

Pour conclure, ce "petit" logiciel me semble très bien parti. En tout cas il semble peu à peu trouver son public. Il reste beaucoup d'améliorations à apporter, et Adobe va aussi faire évoluer Photoshop dans ce sens. D'autres acteurs pointent aussi le bout de leurs nez, et seront à surveiller d'ici les mois à venir.

Il ne vous reste plus qu'à tester par vous même !