Design graphique - Le diamant ludique

Créer un diamond brillant et ludique avec flash, c'est possible !

J’ai constaté avec un certain étonnement que les tutoriaux flash ne laissent aucune place aux techniques illustratives. Travaillant depuis plusieurs années sur flash, je ne peux pas m’en passer même quand il s’agit de faire autre chose que des animations web. On rencontre malheureusement trop d’utilisateurs dénigrant les capacités artistiques de flash pour plutôt vanter les mérites d’Illustrator. Entendons nous bien, Flash et Illustrator n’ont rien à voir ! Flash permet de dessiner alors qu’Illustrator demande de construire ses illustrations. Pour quelqu’un d’expérimenté, créer un design en flash pour le web est plus simple mais surtout plus rapide. C’est une question d’efficience (temps, rendement, efficacité). J’ai donc décidé de remettre les qualités graphiques de flash à l’honneur.

Aujourd’hui, je vous propose de réaliser un diamant fun et ludique ! Cette technique peut vous permettre pas la suite de réaliser des joyaux, bijoux montés, pierre précieuse, toujours dans un style video game ou illustration fantastique par exemple.

ETAPE 1 – LA FORME DE BASE

Vous trouvez sur le net tout les références qu’il vous faut pour réaliser les pierres précieux les plus classique, diamant, rubis, émeraude, topaze, saphir etc. en cherchant en anglais la pierre et shape ou geometry ( diamond shape ). Je vais commencer par vous proposer la mienne pour un diamant simple et efficace que l’on peut retrouver dans de nombreux jeux, casino, animations :

- Utilisez simple l’outil Ligne en vous assurant d’avoir bien activé l’accrochage au objet afin de faire quelques chose de propre. - L’épaisseur du trait n’est pas importante, on les supprimera plus tard, mais afin de ressentir correctement l’objet, ne faites ni trop fin ni trop épais. Ici, j’ai choisit une épaisseur de 1 en zoom normal. - Je favorise aussi un fond gris foncé car le blanc ne fait pas ressortir les couleurs et le noir ne permet de voir les traits et dessin en noir…ce qui peut être très génant.

ETAPE 2 – LES PREMIERES FACES

- Choisissez la direction de l’éclairage principal :

- Colorer ensuite la première et la dernière face rencontrées par le « rayon lumineux ». Ici j’ai choisit un bleu clair. Ici il s’agit juste d’étudier la forme, la couleur sera de toute façon remplacée ensuite. - Dans la palette Couleur, créez un dégradé radial blanc-bleu clair, avec le curseur blanc quasiment au milieu de la barre de création de dégradé.

- Appliquez le dégradé aux faces bleue à l’aide du pot de peinture (K) et obtenez ceci :

- Grâce à l’outil de transformation de dégradé (F), merveilleux outil en passant que seul flash possède et permet à lui tout seul de justifier de l’utilisation de flash pour des dégradés rapide et efficace de ce type, positionnez les, agrandissez, tourner, et aplatissez les dégradés sur les 2 faces afin d’obtenir ceci :

Un bleu bien présent dans les coins et blanc intense au centre et qui touche certains bords.

ETAPE 3 – LES AUTRES FACES

- Par la même procédure, créez un dégradé du même bleu ciel au bleu azur

- Petite astuce, créer un calque et copiez y les traits de constructions. Cliquez ensuite sur l’image clé de votre calque de faces bleues afin de tout sélectionner. Puis dans la palette couleur, configurez l’opacité du trait à 0%. Ce qui permet de ne pas voir les traits tout en profitant de leur présence pour le remplissage. - Remplissez à l’aide du pot de peinture les faces opposées. Vous devez obtenir ceci :

- Pour la face du milieu-haut, remplissez à l’aide du même dégradé mais cette fois le bleu azur doit être à peine visible sur les bords. Pour cela, « agrandissez » plus le dégradé grâce à l’outil de transformation de dégradé. Obtenez ceci :

- Pour la dernière face, nous allons créer un dégradé toujours radial avec 3 poignées. Bleu roi pour le centre, bleu marine, bleu azur.

- Appliquez le puis redimensionnez le afin que seul les coins supérieurs ne possède de bleu azur. Ces petits coins plus clair reproduise rapidement la lumière intérieure qui persiste au coins en contraste avec la profondeur du centre du diamant. Obtenez ceci :

ETAPE 4 – L’ECLAT

Nous arrivons à la partie la plus technique et la plus artistique… enfin rien de sorcier tout de même.

- Créer un calque par-dessus celui de vos faces bleues et nommez le Masque. - Cliquez ensuite sur l’image clé de votre calque de faces bleues afin de tout sélectionner, puis copier le contenu (CTRL + C). - Cliquez maintenant sur l’image clé de votre calque Masque et collez (CTRL + V). - Cliquez ensuite sur l’image clé de votre calque Masque afin de tout sélectionner puis allez dans la palette couleur. Cliquez sur l’aperçu de couleur du bord/trait afin de dérouler la palette de couleur et sélectionner le carreau blanc barré de rouge. Cette manipulation permet de rapidement supprimer tous les traits. Cliquez sur l’aperçu de couleur de remplissage et sélectionner un couleur unie, j’ai choisis le noir. - Masquez tout les calques sauf le calque masque. - Vous obtenez un diamant noir qu’il va vous falloir découper. - Le découpage peut se faire à la gomme, en traçant des formes fermées et en supprimant le contenu, en gommant de grande zone et en redessinant au pinceau etc. Pour parvenir à un bon découpage, il faut découper ou dessiner de petit triangle d’à peu prés la même taille et dont la pointe basse pointe vers la pointe basse du diamant. Imbriquez vos triangles, tout en gardant une coupe sous l’axe haut du diamant et en suivez grosso modo la direction de votre lumière. De cette étape dépendent les détails de votre diamant. En 2mn, vous obtenez facilement quelque chose comme ceci :

- Ceci fait, créez un nouveau calque en dessous du calque Masque. - A l’aide de l’outil Ovale, tracez un disque rond ou à peu prés. Supprimez en le contour. - Créez un dégradé blanc avec alpha à 70% au centre, blanc à avec alpha à 0% à l’extérieur, et appliquez le bien au centre comme ceci :

- Sélectionnez votre disque et convertissez-le en symbole (F8) et nommez le Eclat.

- Disposé 3 occurrences de ce symbole par-dessus votre diamant, en formant un triangle. A eux 3, ils doivent être quasiment aussi grand que le diamant. 2 au dessus et 1 en dessous avec en propriété de Teinte bleu ciel. Le rond bleu sera probablement trop large, amincisser le un peu avec l’outil transformer, comme ceci :

- Sélectionnez votre 2 disques Eclat blanc et dans les propriétés de fusion, sélectionnez Additive (Add). Pour le rond bleu, prenez Lumière dur (Hard light)

- Faites un clic sur le calque Masque et cochez « Masque », obtenez ceci :

ETAPE 5 - PEAUFINAGE

- Afficher les autres calques, vous devriez alors obtenir ceci :

- Jouez un peu avec des dégradés, le positionnement de vos disques Eclat. J’ai ajouté de 2 petits triangles de contraste sur les faces supérieurs et moins d’une minute plus tard, vous pouvoir obtenir ceci :

D’autres exemples ce que l’on peut obtenir par la même manière :