Et oui ! Après plus d’un an, j’ai décidé de remettre mon blog à jour ! L’occasion de rafraîchir un peu ma charte graphique, et surtout de vous montrer quelques uns des projets motion et web design que j’ai réalisés au cours de cette dernière période, compilés en une bande démo sur fond de musique, plus communément appellée “showreel“. Cliquez ici pour découvrir mes nouvelles références !

Voici deux de mes astuces favorites pour créer des graphismes originaux dans
Illustrator, basées sur une fonction très simple du logiciel d’illustration et présente depuis les premières versions du logiciel : l’outil DECOMPOSER du menu OBJET.

En effet, utilisé à bon escient, cet outil vous permettra tantôt de réaliser des effets métalliques sur des tiges, des fils de fer, des effets de cordes réalistes, ou encore de créer des formes organiques vraiment surprenantes et originales, comme l’illustre mon exemple avec la tête d’icône Païenne (voir deuxième partie dans la suite de cet article), réalisée uniquement avec l’outil HALO d’Illustrator (décomposé lui aussi) manipulé avec les OUTILS DE DEFORMATION.

Passons tout de suite à la pratique, avec notre premier exemple :
Nous allons utiliser de simples dégradés de couleur dans un rectangle, qui sera d’abord décomposé, puis optimisé pour devenir une forme artistique.

1/ Commencez par dessiner un rectangle assez large et très petit en hauteur, et remplissez le du dégradé de votre choix (vous pouvez simuler du chrome, du plastique ou toute autre matière, suivant les réglages que vous donnerez au dégradé. Par exemple, les reflets du métal étant plus durs, les couleurs utilisées devraient être plus nombreuses, plus contrastées et plus “dures” que celles utilisées pour un matériau plus soft du genre plastique)

2/ Allez ensuite, dans la palette OBJET et cliquez sur DECOMPOSER. Une fenêtre s’ouvre alors : entrez les réglages comme ci-dessous (vous pouvez mettre beaucoup plus que 25 pour le nombre d’objets mais il faut savoir qu’au plus vous en mettrez, au plus Illustrator aura du mal à calculer les points et le fichier sera lourd (surtout si vous comptez utiliser beaucoup de tracés avec votre contour personnalisé dans l’illustration). Puis cliquez sur OK.

3/ Puis, avec ce groupe d’objets sélectionné (Illustrator a décomposé le dégradé en rectangles colorés d’un aplat), allez dans la palette CALQUES et déroulez les sous-éléments de ce calque en cliquant sur la petite flèche grise à gauche du nom (normalement “Calque 1″ par défaut), jusqu’à ce que vous trouviez l’élément intitulé “Masque”. Glissez-déposez le dans la poubelle en bas à droite de la palette CALQUES.

4/ Une fois le masque supprimé, vous pouvez utiliser votre groupe d’objets en aplats comme une forme artistique. Pour ce faire, glissez-déposez le groupe entier dans la palette FORMES, et spécifiez FORME ARTISTIQUE quant la fenêtre apparaît. Laissez les paramètres par défaut dans la deuxième fenêtre avec l’apperçu de la forme, donnez lui éventuellement un nom, puis validez en pressant OK.

5/ Voilà, vous venez de créer votre forme artistique personnalisée !
Créez maintenant une forme avec la plume ou le crayon et donnez lui comme contour la nouvelle forme que vous venez de créer : le dégradé est bien appliqué au contour (la taille du contour peut-être modifiée comme pour un contour normal, par défaut il est à 1 pt, donc ne créez pas de rectangle trop large lorsque vous créez votre forme !).
Voici un exemple d’application de cette forme personnalisée : un grillage dont les mailles sont de simples tracés dotés d’un contour personnalisé (impossible à créer autrement !).

La deuxième application possible de l’outil DECOMPOSER est la décomposition d’effets et de formes prédéfinies à des fins créatives : ici, on utilisera l’outil HALO d’Illustrator pour générer des formes organiques avec un joli rendu transparent et lumineux, comme dans l’exemple de la tête d’icône Païenne ci-dessous.

1/ Commencez par créer un fond sombre, avec si possible un dégradé de couleur subtil (pour l’ésthétique), puis avec l’outil HALO (restez appuyé sur l’icône de l’outil RECTANGLE, il apparaît tout en bas) créez la forme de halo que vous désirez par dessus (en évitant que les rayons dépassent du fond). Allez ensuite dans OBJET, puis dans DECOMPOSER, cliquez ensuite sur OK. Le résultat n’est pas visible, mais Illustrator ainsi permis de manipululer le halo plus facilement… Et c’est ce que nous allons faire en utilisant les OUTILS DE DEFORMATION (7ème icône sur la gauche dans la barre d’outil).

2/ Jouez avec les tailles et paramètres offerts par les différents outils de déformation (DEFORMATION, TOURBILLON, DILLATATION…etc) jusqu’à ce que la forme organique vous convienne. Attention toutefois à ne pas repasser trop souvent aux mêmes endroits avec le “pinceau” car au plus vous insisterez sur l’objet, au plus Illustrator génèrera de points ! (et avec ces outils, le poids du fichier peut facilement grimper de façon exponentiel, et perturber ainsi fortement l’affichage !)

3/ Enfin dupliquez votre forme soit en jouant sur la symétrie avec l’OUTIL MIRROIR (les compositions symétriques sont très tendances depuis un petit moment…) ou encore en la faisant pivoter autour d’ un axe de rotation (maintenez alors la touche [ALT] enfoncée et cliquez à l’endroit ou vous voulez qu’il y ait le centre de rotation, avec l’OUTIL DE ROTATION (entrez comme valeur 360/x, où x est le nombre d’occurences : 360/12 si vous voulez créer les aiguilles d’une montre par exemple…), et validez par COPIER au lieu de OK. Dupliquez autant de fois que vous le voulez en faisant [pomme + D], et voilà !

Du lourd chez Fubiz.net ce matin, avec pas moins de 4 articles consacrés à mon sujet de prédilection… le motion design ! Une sélection éclectique également puisqu’elle couvre la publicité, le clip musical et la vidéo de promotion.

Commençons tout de suite par le premier film, réalisé pour Lacoste dans un esprit très futuriste : en gros, une projection de ce que donnera le tennis en l’an 2083… High-tech, superbes ralentis et un environnement épuré et lumineux !




Le second est le dernier clip musical de RadioHead sur le titre Weird Fishes, gagnant du concours lancé par le groupe il y a quelques temps. Le résultat, utilisant la technique du processing (consultez égelement l’article de Daashy sur la méthode, très intéressante), est pour le moins surprenant et très… très esthétique.




Pour rester dans le registre de la musique, le dernier clip du groupe de rock alternatif Gush a toute sa place dans l’actu motion design puisque le clip utilise des milliers de feuilles de papier A4 colorées ! Le tout est haut en couleurs et change un peu de ce qu’on a l’habitude de voir. A découvrir.




Enfin, même si il ne sagit pas vraiment de motion design, la brillante publicité parodique de Chevrolet, qui prend le contrepied des publicités Citroën à la “Transformers”. Une esthétique et une technique qui n’a rien à envier aux voitures-robots de Citroën, très bien trouvée et qui plus est… vraiment marrante !

En attendant de pouvoir publier des tutoriaux complets sur 3DS Max et AfterEffect, je voulais vous présenter quelques exemples d’animations que j’ai réalisé dans le cadre de recherches personnelles.
J’essaie en effet de découvrir autant que possible de nouvelles techniques de modélisation, d’animation et de compositing, dans le but d’étayer mes compétences au maximum, et peut-être un jour – qui sait – développer une réel savoir-faire en motion design.
Les deux exemples suivants (les méduses et l’arc-en-ciel) on été modélisés simplement avec des primitives sous 3DS MAX, avec un mouvement de caméra dont les données ont été sauvegardées grâce à l’emploi d’un format d’exportation spécial : le RLA. Les séquences d’images sont ensuite compositées sur AfterEffect, dans lequel je viens recréer une caméra via les données de 3DS MAX. After Effect crée instantanément une nouvelle caméra en 3D qui a le même mouvement et les mêmes attributs que celle de 3DS Max. J’ai ensuite ajouté quelques éléments 2D (textes, grilles, arabesques…) ainsi que des particules 3D directement dans AfterEffect, terminé par quelques filtres et effets bien choisis… et le tour est joué !





N’hésitez pas à me donner vos commentaires ou à me poser des questions concernant les techniques employées (elles sont relativement accessibles, pourvu que vous ayez déjà des notions de 3DS MAX et d’AfterEffect évidemment !)

Le moins que l’on puisse dire, c’est que les sculptures de l’artiste contemporaine Jennifer Maestre sont hautes en… – crayons de – couleurs !
Inspirées des organismes vivant dans l’océan (plus particulièrement des oursins), l’artiste cherche à surprendre tout en offrant une véritable expérience inédite aux spectateurs : le côté “piquant” des pointes de crayons s’oppose à celui très doux du bois des crayons taillés en biseau, tandis que la forme générale de la sculpture semble animé d’un mouvement organique et naturel (paradoxal pour une objet aussi dur et industriel que le crayon…).




Une œuvre surréaliste qui mérite le détour (visitez son site ici) !

A l’occasion de ses deux ans d’existence, le blog TrendsNow dont je vous avais déjà parlé (et qui constitue une source d’inspiration journalière aux milliers de graphistes avides de tendances – comme moi !) vient de rafraîchir son design, ainsi que son logo. Toujours axé sur une forte dominante de vert flashy et de blanc, la nouvelle mise en page se veut plus actuelle et plus travaillée (bords arrondis, typographies plus travaillées, meilleure hiérarchisation des rubriques et frames etc…).



En ce qui me concerne, je trouve un peu dommage que les blocs contenant les infos et visuels soient si étroits (les marges auraient pu être un peu plus grandes, et les blocs moins collés, pour aérer l’ensemble). L’ancienne mouture n’utilisait que du blanc en fond de frame – et ce pour toutes les rubriques ; c’est peut-être ce qui donnait justement au site ce côté aéré.
Quoi qu’il en soit, ça ne m’empêchera pas d’aller consulter tous les matins leurs articles, qui, eux, sont toujours aussi inspirés !!!

Ce n’est pas parceque nous sommes en période de congès ou de jours fériés, que l’on ne trouve pas de bonnes publicités sur le web ! Je suis chaque jour un peu plus bluffé par le talent et la créativité sans fin des graphistes et publicitaires, dont les travaux visibles sur la toile sont de plus en plus nombreux.
En témoignent ces 3 concepts (dont 2 vus sur Fubiz, merci pour vos actus !), qui sont, à tous points de vue, très beaux et impactants à la fois :


Le premier est une campagne pour une agence de voyages réalisée par un studio ukrainien (Psyho Studio) et déclinable à l’infini. Discrète, l’accroche donne uniquement le nom d’une destination (par exemple Madagascar), suivi de “une partie d’un monde”. Vous reprendriez bien une petite part de rêve, non ?








Le second est une campagne de marketing alternatif réalisée pour HP par Publicis en Malaisie : elle met en scène de vraies/fausses déchirures de papier géantes (qui tiennent grâce à un pied comme pour une PLV classique) dans des environnements citadins ou naturels, donnant ainsi l’impression (sans jeu de mot) que cet environnement est en fait une photo géante à travers laquelle quelqu’un serait passé ! L’illusion est parfaite, et remplit parfaitement son rôle : promouvoir le rendu photo-réaliste de leurs nouvelles gammes de papier photo. Cheeeeze !










Le troisième (mon préféré) est une série de 4 publicités pour Minichamps, marque de modèles réduits de voitures d’anthologie. Transposant la notion de “miniatures” à celle du bas âge (“Baby cars”), l’agence Dentsu a revisité le logo des plus grands constructeurs automobiles sur fond de carrosserie aux couleurs tendances. Le résultat est très esthétique mais surtout très… très mignon !









Petit rappel des logos existants (merci encore Fubiz !) :

C’est un vrai appel aux votes que je lance aujourd’hui : avec Ange Pozzo di Borgo, le concepteur rédacteur, dont je vous avais déjà parlé, et collègue créatif de l’agence Sioux Lille, je participe au concours Getty Images Ultimate 2008. Notre concept : “Hypertension Artérienne”, traduit en anglais par “Global Hypertension” ; plus nous aurons de votes, plus nous aurons des chances de faire partie des 20 finalistes de l’année. Alors visionnez le spot vidéo dès maintenant, faites-nous part de vos remarques et surtout : “vote for us” !


La vidéo “Global Hypertension” :




Le brief “ultime” : “Use one or more of our footage clips, music tracks or images to communicate an idea that makes a world of difference. We’ve reinvented our website and services to help bring your thoughts to life. So liberate all those brainwaves you’ve got locked away, and use our inspirational Catalyst search to start brainstorming”. En résumé, faites ce que vous voulez, du moment que vous véhiculez un message fort en utilisant les ressources de Getty Images.

Notre concept : “Exploitation, production, consommation : le rythme global s’accélère, les artères de la Terre sont à la limite de la rupture. Il est temps de ralentir la cadence. L’hypertension planétaire atteint son point de non retour”. Laissez vos commentaires et votez dès maintenant sur le site de Getty Images Ultimate. Important : la vidéo risque de prendre un temps phénoménal à se charger, mais comme vous l’aurez vue ici, vous pouvez voter directement sans perdre votre temps. Merci d’avance !

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…)






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…)

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.

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.

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.

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.

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 !)

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.

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.

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].

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)

Je vous en avais déjà parlé lors d’un précédent article, le concepteur rédacteur Ange Pozzo di Borgo vient juste de mettre à jour son blog dédié au monde de l’édition web et de la création marketing. Une nouvelle mouture qui, de l’avis général, se veut plus claire, mieux hiérarchisée et plus complète.
Un gros effort a été fait côté technique, car il s’est essayé à l’utilisation des grilles de construction et à mis les mains “dans le cambouis” puisqu’il a lui-même personnalisé ses propres styles CSS. Et le résultat est là : des tonnes de commentaires postitifs de la part de ses lecteurs et, c’est un avis personnel, un blog beaucoup plus “pro” et agréable à lire. Jugez-en par vous-même !