Les masques d’opacité dans Illustrator

niveauFacile1

Illustrator est de loin le logiciel le plus utilisé pour dessiner en vectoriel les graphismes, logos, illustrations et typographies visibles sur le packaging des produits que vous achetez tous les jours, les affiches publicitaires, les pages web, les T-shirts etc… Jusqu’au dernières versions, donc jusqu’à l’apparition de certains filtres et autres modes de fusion, le logiciel phare d’Adobe n’était pas capable de gérer la transparence et les bords progressifs, alors plus propres à son grand frère spacialisé, lui, dans le traitement du pixel : Photoshop. Soucieux d’intégrer au mieux les fonctions des logiciels de la suite créative, Adobe a pris le soin de développer les effets, filtres et modes de fusion des calques dans Illustrator, depuis la version 10… pour le plus grand bonheur des artistes numériques et designers graphiques !

Si ces outils et effets sont désormais incontournables et maîtrisés par tous, il reste néanmoins une option assez méconnue (du moins trop à mon goût, les graphistes devraient tous au moins en connaître l’existence et ce n’est pas toujours le cas !) qui a pourtant fait ses preuves et constitue a lui seul une vraie petite révolution dans le monde de la transparence vectorielle… il s’agit du « masque d’opacité« , qui comme son nom l’indique fonctionne comme un masque dans Photoshop, puisqu’il s’appuie sur les valeurs en noir et blanc d’une image pour afficher ou masquer des parties d’un calque.

Je vous propose un petit tour d’horizon de ses fonctionnalités et de ses applications nombreuses, avec pour commencer, la création d’un bouton Web 2.0 (quand je vous disais qu’il était partout…)




espaceblanc.jpg

Passons tout de suite à la pratique :

1/ Commencez par créer la sphère du bouton avec l’outil ELLIPSE, et remplissez le avec un dégradé de la couleur de votre choix (astuce : optez pour des couleurs tendances : bleu C100, ou vert C30 J100, ou rose M100, ou encore orange M30 J100…)

espaceblanc.jpg

2/ Puis créez une deuxième ellipse, blanche cette fois-ci, plus petite et plus étroite comme sur l’image ci-dessous, et allez dans FENETRE > TRANSPARENCE. Dans cette nouvelle fenêtre, affichez le menu contextuel en cliquant sur la petite icône représentant une flèche pointée vers le bas et 3 lignes les unes en dessous des autres : cette icône se trouve tout en haut à droite de la fenêtre. En ayant sélectionné au préalable l’ellipse blanche, cliquez sur CREER UN MASQUE D’OPACITE.

espaceblanc.jpg

3/ Illustrator vient de créer une deuxième vignette remplie de noir à côté de la vignette d’aperçu : pour que ce masque soit actif et que vous puissiez travailler dessus, n’oubliez pas de bien cliquer sur cette nouvelle vignette noire (c’est une erreur souvent commise, et ‘est pourquoi beaucoup de graphistes pensent que cette option « ne marche pas » !).
Dessinez une nouvelle ellipse plus grande ou une tout autre forme plus grande sur ce masque (vous pouvez aussi copier/coller l’ellipse blanche pour plus de precision), et remplissez la d’un dégradé noir et blanc.
Ne vous inquiétez pas, l’affichage propre au mode masque est un peu déroutant au début ,dans le sens où votre objet semble avoir « disparu » tant que vous n’aurez pas créer d’objet blanc sur le masque, et où les autres objets (sur lesquels il n’y a pas de masque) sont verrouillés.

espaceblanc.jpg

4/ Ajustez votre dégradé jusqu’à ce que vous soyez satisfait du résultat : pour créer un reflet « à la Web 2.0 » j’ai choisi ici de faire un dégradé verticale blanc en haut, et transparent en bas, comme si la lumière venait du haut.
Une fois satisfait, quittez le masque en recliquant sur la vignette à gauche de celle du masque : tant que vous ne sortirez pas du mode masque, vous ne pourrez plus créer d’autres objets !
J’ai placé un texte sous le halo ainsi crée (OBJET > DISPOSITION > EN ARRIERE), pour que vous compreniez bien que ce n’est pas simplement un dégradé de couleur, mais bien un dégradé de transparence.

espaceblanc.jpg

5/ La prochaine étape consiste à crée le « reflet au sol », propre au Web 2.0. Là encore, le masque d’opacité nous sera d’un grand secours.
Commencez par grouper tous vos objets (cercle bleu, halo de lumière et texte eventuel) en faisant [Pomme ou Ctrl + G] et dupliquez le tout en dessous en le glissant déposant et en maintenant [alt] et [shift] appuyés. Allez ensuite dans TRANSFORMATION > MIRROIR (ou double-cliquez sur l’outil MIRROIR qui s’affiche si vous restez appuyé sur l’outil de rotation) et choisissez HORIZONTAL.

espaceblanc.jpg

6/ Appliquez lui un maque d’opacité pour l’atténuer vers le bas, en répétant les étapes 2 à 4, sauf que cette fois vous devez créer une forme sur le masque qui soit plus grande que le groupe d’objet entier : j’ai choisi ici une grand rectangle en dégradé noir et blanc (voir image ci-dessous). Votre reflet au sol est fait, n’oubliez pas de sortir du masque en recliquant sur la vignette de gauche (ce n’est pas facile d’avoir le reflexe au début, mais plus vous utiliserez les masques d’opacité, plus cette gymnastique deviendra un jeu d’enfant !)

espaceblanc.jpg

7/ Il ne nous reste plus qu’à créer l’ombre portée : pour ce faire créez 2 nouvelles ellipses allongées juste à l’intersection du bouton et son reflet ; l’une doit être noire (la plus grande) et l’autre blanche (la plus petite) comme sur l’image ci-dessous. Copiez/collez sur place l’ellipse noire seulement en faisant [Pomme ou Ctrl + C] puis [Pomme ou Ctrl + F] : nous en aurons besoin par la suite.

espaceblanc.jpg

8/ Nous allons maintenant créer un dégradé de forme entre l’ellipse blanche et l’ellipse noire. Cliquez sur l’outil DEGRADE DE FORME (à droite de la Pipette, sous l’outil dégradé) symbolisant un petit carré et un cercle avec entre les deux des pointillés (ou appuyez sur la touche W). Avec cet outil sélectionné, cliquez une première fois sur l’ellipse blanche, puis dans un deuxième temps sur l’ellipse noire.

espaceblanc.jpg

9/ Servons nous de ce nouvel ensemble en dégradé noir et blanc pour créer la transparence de notre ombre portée. Pour ce faire, coupez le [Pomme ou Ctrl + X] et sélectionnez l’ellipse noire qui reste (celle qu’on avait copié précédement). Créez un masque d’opacité sur celle-ci en répétant les étapes précédentes, et copiez cette fois-ci le dégradé de forme noir et blanc à la même place sur le masque [Pomme ou Ctrl + F].

espaceblanc.jpg

10/ Il ne vous reste plus qu’à quitter le mode masque en recliquant sur la vignette de gauche, de sélectionner le bouton entier (bulle bleue+ halo + texte) et de le placer au premier plan – devant l’ombre portée – en faisant [Pomme ou Ctrl + shift + ) ].
Et voilà, votre premier bouton Web 2.0 est terminé !.

Remarques :

• Si les masques d’opacité sont très pratiques pour créer des reflets et autres styles de boutons Web 2.0, il ne faut pas les utiliser tels quels pour Flash : en effet Flash ne gère pas les transparences venant d’Illustrator, il vaudra mieux recréer l’effet directement dans Flash avec l’alpha à 0% dans le dégradé de couleurs. Si vous voulez utiliser votre bouton dans une page HTML, il vous faudra le convertir en image via un éditeur d’image comme Photoshop (en jpeg optimisé pour le web, ou en PNG si vous voulez conserver une transparence, pour l’ombre par exemple.)

• Il y a beaucoup d’autres champs d’application pour les masques d’opacité, les reflets et brillances des boutons ne sont que des exemples parmi tant d’autres.
Par exemple, vous pouvez simuler un effet de sérigraphie, en « texturant » vos graphismes vectoriels : typographies, aplats de couleurs, donnez vie à vos illustrations en leur donnant un côté « vintage » ou tramé pour sortir du style rigide et trop propre du vectoriel. Il vous suffit d’importer des images (photographies, scans) en noir et blanc OU en couleur (Illustrator les convertira alors automatiquement en niveaux de gris) sur vos masques d’opacité. Textures de rouille, de papier recyclé, de grillages, de trames offset, de cartons froissés etc… Vos seules limites seront votre imagination, alors n’hésitez pas et testez vos propres textures !


Les masques d’opacité sont également une excellente méthode pour créer une ombre portée réaliste, basée sur la forme précise des objets à l’extérieur, et une forme plus floue vers l’intérieur. Voici un exemple d’illustration tout bête d’ombre portée sous une feuille d’automne : contrairement aux ombres portées préprogrammées dans Illustrator et aux divers filtres permettant de flouter une objet vectoriel (ces 2 options sont en fait des effets disponibles avec une prévisualisation mais qui nécessitent l’utilisation de pixels) elle est entièrement vectorielle ! Sa forme extérieure et intérieure sont dont toujours modifiables, et peuvent être agrandis à l’infini sans perte de qualité. Pour créer une telle ombre, il vous suffit de prendre la forme de votre objet, de la copier/coller une fois sur place [Pomme ou Ctrl + C] puis [Pomme ou Ctrl + F] ; de la remplir d’un aplat de noir ; puis de faire OBJET > TRACE > DECALAGE. Réglez le décalage sur une valeur négative (à tester selon que votre ombre doit être diffuse ou plutôt dure), puis donnez à ce nouvel objet une couleur blanche. Avec l’outil DEGRADE DE FORME (voir étapes 8 à 9 de ce tutoriel) cliquez d’abord sur la forme blanche, puis sur la forme noire. Coupez/collez l’ensemble (le dégradé de formes ainsi crée) sur un masque d’opacité que vous aurez crée au préalable sur l’objet noir de départ. Et voilà une ombre réaliste, et de plus en plus transparente vers au fur et à mesure que l’on s’éloigne de son centre ! (conseil : pour de meilleurs résultats, passez votre ombre en mode de fusion PRODUIT, et baissez son opacité pour la rendre beaucoup plus subtile)

Publicités

5 réflexions au sujet de « Les masques d’opacité dans Illustrator »

  1. Bonjour je teste votre façon de réalisé un reflet, mais le soucis est que dès que mon logo est sur un fond autre que blanc, le dégradé devient blanc et laiteu, dons ça ne fonctionne pas quoi faire?

  2. Excellent cela fonctionne parfaitement. Surtout il faut bien comprendre l-histoire de la vignette noire. On peut aussi faire plusieurs masques\

    merci

  3. ça marche pas je me bloque à la 4è étape.
    dès que je clique sur la vignette noire mon objet disparait et je peux plus sélectionner aucun élément. c pas bien expliqué!

  4. bonjour,
    quelqu’un peut-il expliquer les étapes pour  » simuler un effet de sérigraphie, en “texturant” vos graphismes vectoriels : « ? merci

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s