Apprenez à designer selon les règles du Material Design, en partant d’une simple photo.
Introduction
Le Material Design est un ensemble de règles de design présenté par Google en juin 2014, lors de sa grande conférence la Google I/O.
Le but de ce concept, est de rendre les interfaces graphique de nos applications mobiles et sites Web plus intuitifs à travers des règles de design simple, logique et compréhensible de tous.
Même si le Materiel design est régi par des règles et prévu pour créer des interfaces graphiques, il est tout de même envisageable d’en faire des illustrations.
Pour ce tutoriel, c’est le célèbre fond d’écran Collines verdoyantes qui servira de support.
Importer l’image dans Illustrator
Cliquez sur l’image Colline verdoyante (ci-dessus), faites un clique droit dessus, puis Enregistrer l’image sous …
Dans Illustrator, créez un nouveau document ayant pour dimensions: 1920×1080 pixels et 72dpi.
Allez dans le menu Fichier -> Importer…, puis sélectionnez l’image Colline verdoyante.
Astuce: verrouillez le claque en cliquant sur la petite case vide à droite de l’œil dans la palette des calques. Cela empêchera de déplacer accidentellement l’image.
Les règles du Material Design
Les règles appliquées ici sont les suivantes:
- Privilégier des formes simples, plus particulièrement des ellipses et des triangles
- Que des aplats de couleurs. Pas de dégradés ni de motifs
- Les couleurs en question figurent toutes dans le nuancier définit par Google.
- Toutes les formes doivent posséder une ombre portée avec une source lumineuse dite “au zénith”
Dessiner en Material Design
Avant toutes choses, prenez le temps d’examiner l’image et de repérer toutes les couleurs soit le bleu, le vert et le marron, puis repérez également les nuances dues aux effets d’ombres et de lumières.
Créez un nouveau calque, puis à l’aide de l’outil Plume, tracez la forme 1.
Créez un second calque, puis créer la forme 2. Pour ajouter le point d’encrage signalé par le numéro 2a, prenez Outil d’ajout de point d’encrage, puis Outils de sélection direct pour le déplacer.
Continuez la colline en respectant l’ordre des numéros et en créant à chaque fois un nouveau calque. Faites de grands rectangles en tenant compte des couleurs et des nuances.
Pour le ciel, il suffit de faire un grand rectangle dans un nouveau calque et de déplacer le calque en seconde position.
Ne cherchez pas la perfection, cela doit rester sommaire comme tracés. De plus, il est possible de repositionner les points d’ancrage à tout moment avec l’outil Sélection direct.
Dessinez les nuages à l’aide des outils Ellipse et Rectangle. Disposez-le comme dans l’exemple ci-dessous:
Prenez Outil de conception de forme pour fusionner les tracés et Outil de conception de forme + Alt enfoncé pour supprimer de la matière.
Créez plusieurs nuages ou bien dupliquez le vôtre en faisant Ctrl + C puis Ctrl + V (Cmd sur Mac) et déformez-les avec Outil de sélection. L’idée étant d’avoir plusieurs nuages différents et de différentes tailles. Pour ajouter de la profondeur, répartissez vos nuages sur deux calques.
Du flat au material
Pour le moment, l’illustration ressemble plus à du Flat design qu’a du Material design.
Ajoutons un peu de volume à tout ça !
Sélectionnez la forme 2, puis allez dans Effet -> Spécial -> Ombre portée… et appliquez les réglages suivants:
Pour appliquer cet effet sur les autres formes, utilisez le raccourci clavier Ctrl + Maj + E.
