CD
|
Chers lecteurs, Le monde virtuel est totalement différent de la réalité. Il crée des possibilités énormes, presque illimitées. Internet est un espace idéal pour partager ses sentiment, décrire sa vie. Il est un outil de marketing nous permettant de vendre ses produits et de proposer ses services. Néamoins pour être visible et rendre cet outil efficace, un savoir-faire dans le domaine d'Internet est nécessaire pour créer un site attrayant. Nous avons décidé de consacrer ce numéro Hors Série au web design et à la création de site web. L'agence polyvalente, FGD-com vous introduira aux arcanes d'une animation sous Photoshop/Illustrator et After Effects. Pierre Dubel vous présentera comment créer un logo pour le web s’intégrant avec élégance dans votre future charte graphique. Avec Maxim Zukow et Nadège Miradouro apprennez à préparer de manière très simple une maquette pour une page Web, à positionner et composer tous les éléments graphiques et puis à les découper en tranches. Découvrez aussi une série d'articles parlant de la lisibilité du contenu Web au sens large, y compris l'architecture de l'information. Shawn Koppenhoefer vous parlera de comment obtenir pas à pas un espace sur Internet afin d'avoir un véritable site Web que vous pourrez contrôler. Je vous recommande de lire l'article À chacun son site qui vous parlera de la création de site dès son départ. Il vous suggérera ce qu'il faut prendre en considération en concevant le projet de votre site (budget, public visé, structure, couleur, polices, etc.). En plus des vidéo tutoriels, sur le CD vous trouverez le cours multimédia Comment créer de site e-Commerce avec Photoshop préparé par RG Design. Vous pourrez aussi personaliser votre boutique en ligne grâce au logiciel ShopFactory. Je vous invite donc à être visible sur le net et à découvrir des différents articles et tutoriels qui vous aideront à vous motiver et être dynamique dans ce monde infini. Bonne lecture à tous,
4
.psd hors série 02/2008 (6)
sommaire dossier Moving colors Leparachute
Maquette et découpage des tranches Nadège Miradouro
10 18
pratique Conception graphique d'un site Internet Stéphane Hourdel
Bienvenu dans le tunnel Maxim Zukow
Animation végétale sous After Effects FGD-com/agence polyvalente
Les sphères aux 5 parfums Pierre Dubiel
22 26 34 38
focus À chacun son site Leparachute
Lancer votre propre site Web
42
Shawn Koppenhoefer
46
Interview de Guillaume Le Bleis
49
La lisibilité du contenu Web Olivier Marcellin
50
Galerie des professionnels du web design
54
Forum phpBB Leparachute
56
Interview de Gérard Pivaut
66
fiche technique La templete pour JOOMLA! 1.0.x
Nicolas Peraudeau (Nymphea Studio)
Code art sous Flash Pascal Salvi
Header et navigation Moslim Gasmi
Menu horizantal Moslim Gasmi
68 72 74 78
critique BD en ligne
80
How to do everything with Your Web 2.0 Blog
80
Créez votre site Internet Pro2
81
dans chaque numéro Abonnement
65
Sites recommandés
77
.psd hors série 02/2008 (6)
5
dossier
avancĂŠ | 90 min | tutoriel sur CD Photoshop CS2
10
.psd hors sĂŠrie 02/2008 (6)
moving colors
Moving colors
Le mot dynamique est souvent mis en avant dans diverses réalisations, qu'il s'agisse d'un logo ou d'une campagne publicitaire par exemple. Mais qu'en est-il vraiment ? Vous allez voir de quelle manière illustrer ce mot, à partir d'une simple photo, dans une composition résolument actuelle. Travailler à partir d'un fond sombre est la meilleure méthode pour mettre en avant de multiples couleurs.
01 Création du document
03 Détourage II
02 Détourage I
04 Le fond I
Commencez par créer un nouveau document au format A4 (210 x 297 mm). Afin de bien mettre en valeur les couleurs, la meilleure solution est d'opter pour un fond sombre. Vous pourriez le prendre noir, mais avec un gris foncé, #A1A1A1 par exemple, le rendu sera plus intéressant.
L'avantage d'avoir une photo sur un fond blanc est sans aucun doute de pouvoir détourer bien plus aisément qu'avec un fond complexe. Un point noir apparaît néanmoins puisque le T-shirt est de la couleur du fond. Vous allez travailler ensuite avec un background sombre. Cela implique un détourage précis de manière à ne pas faire ressortir les défauts. Commencez par effectuer le plus gros du travail à la plume. N'hésitez pas à faire large au niveau des cheveux pour le moment.
Sélectionnez l'outil Gomme [E] afin de travailler plus efficacement sur les cheveux. Il est conseillé d'observer le rendu sur deux types de fond, un blanc et un noir, de manière à mieux voir le résultat. Dans cet exemple, concentrez-vous surtout sur le fond noir puisque l'arrière-plan de la composition sera dans ces tons. Mais notez qu'il ne faut pas mettre de côté l'autre observation, dans le cas où vous mettriez un motif clair derrière la tête.
Vous avez maintenant intégré le calque du personnage dans le document, légèrement décalé du centre vers le coin inférieur droit. Sur un nouveau calque, au-dessus du calque de fond, dessinez une grosse tache au Pinceau à pointe Flou avec une couleur grise proche, #63645F par exemple. Appliquez un Flou gaussien si nécessaire. L'occupation de la tâche sur l'espace est proche de celle-ci : environ une tête au-dessus du personnage, sous le bassin et occuper la moitié de la largeur restante sur les côtés.
.psd hors série 02/2008 (6)
11
dossier
05 Le fond II
08 Cadre de fond II
0 6 Le fond III
09 Cadre de fond III
07 Cadre de fond I
10 Cadre de fond IV
Vous pouvez créer un groupe de calques pour le background puisqu'il va en compter une dizaine environ. Gardez en tête qu'il est toujours mieux d'organiser la réalisation, surtout quand le nombre de calques devient important. Appliquez un Pinceau de type grunge que vous pourrez faire vous-même ou télécharger sur internet. Il est appliqué du bas de l'image en haut en faisant varier plusieurs paramètres : l'opacité, la teinte, l'angle et l'arrondi. La couleur grise précédente est trop foncée finalement l'opacité du calque est diminuée à 60%.
Dessinez avec un Pinceau de forme différente et plus foncé (reprenez la couleur sombre du fond) sur un nouveau calque au-dessus des précédents. Le pas est élévé, supérieur à150%. Faites varier l’angle de 15% et la taille d’au moins 65%. L'ajout de bruit (Filtre>Bruit>Ajout de bruit, Filter>Noise>Add noise) permet de donner du grain pour renforcer le fond.
Un léger dégradé noir vers le transparent est placé en haut, puis en bas de la réalisation. Les deux derniers calques vont permettre de décorer dynamiquement le cadre. L'astuce peut fonctionner avec toute forme de Pinceau. Dessinez un v avec un Pinceau de votre galerie. Inutile d'être précis, ni même symétrique.
12
La suite est une composition de filtres : Filtre>Déformation> Tourbillon (Filter>Distort>Twirl) pour le premier. Vous avez choisi un angle de 450°. Un Flou directionnel (Motion blur) d'une valeur de 134 px est ajouté à -35°. Le choix du Flou directionnel par rapport au Flou gaussien est important dans des cas comme celui-ci. Il permet d'obtenir des lignes qui vont être exploitées dans l'étape ci-dessous.
L'objectif de cette partie est de décorer le cadre sur le fond. Vous allez vous en rendre compte uniquement à partir d'ici avec l'utilisation du filtre Déformation>Coordonnées polaires (Distort>Polar coordinates). Le choix de l'option Polaire en rectangulaire nous donne l'effet escompté.
Répétez les trois étapes précédentes sur un nouveau calque. Appliquez-lui ensuite une symétrie verticale pour le déplacer en bas de l'image. Reproduire les étapes au lieu de copier le premier calque obtenu permet d'éviter la symétrie qui n'est pas souhaitée ici. Vous venez de conclure le travail sur le fond de la composition.
.psd hors série 02/2008 (6)
moving colors
11 Ombre
14 Ailes d'ange
12 Touches blanches
15 Support I
13 À partir du personnage
16 Support II
J'ai souvent tendance à préférer créer l'ombre sur un nouveau calque plutôt qu'avec l'option de fusion Ombre portée. Aujourd'hui vous n'aurez pas le choix puisqu'il faudra placer des calques entre le personnage et son ombre.
Vous allez le voir par la suite que les premières touches blanches positionnées pour dynamiser la position du personnage vont être vite effacées par nos couleurs vives. Mais il est important d'observer les lignes à utiliser dans une composition, et même de les marquer, comme ici, quitte à les enlever ensuite.
Vous récupérez la sélection d'un coup de Pinceau choisie puis, sur un nouveau calque, vous allez travailler avec le Tampon de duplication. Vous prenez comme source les cheveux au niveau de la tête, puis le jean plus bas. Par la suite, vous effectuerez d'autres retouches autour du personnage.
Cet élément peut prendre un certain temps à dessiner. Il est basé sur la duplication du calque du personnage. Ensuite l'outil Doigt [R], avec une forme net et possédant au moins une pointe, est utilisé sur le T-shirt. L'intensité ne dépasse pas les 50%, et de nombreux coups de Pinceaux sont appliqués pour arriver à ce résultat. N'hésitez pas à faire des tests, soyez patient pour obtenir le résultat optimal. Des calques de réglage Teinte/Saturation (Hue/Saturation) et Luminosité/Contraste (Luminosity/Contrast) sont ajoutés au calque contenant les ailes.
Le support du personnage est réalisé à partir de Pinceaux noirs. Vous leur appliquez divers effets, avec l'utilisation du Flou directionnel entre autres. Ce socle évite au personnage d'avoir les pieds dans le vide et met en valeur la position de ses jambes.
Les premières couleurs apparaissent. Après avoir dessiné des flammes blanches sous les pieds, les calques sont dupliqués. La couleur du calque supérieur est changée avec le réglage des Teinte/Saturation. Finalement, optez pour le mode de fusion Incrustation (Overlay).
.psd hors série 02/2008 (6)
13
dossier
17 Derrière les jambes
20 De la couleur I
18 Câbles I
21 De la couleur II
19 Câbles II
22 De la couleur III
Le même travail est réalisé derrière les jambes, dans les tons bleus. Vous pourrez vous apercevoir que les motifs sont toujours orientés dans la verticale, de bas en haut.
La patience sera à nouveau le mot d'ordre pour cette étape. Les câbles sont dessinés à la plume, un à un. Avec les pieds en point de départ, ils remontent derrière le personnage. Six couleurs sont sélectionnées : le jaune, le bleu, l'orange, le rouge, le rose et le violet. Ce sont d'ailleurs celle-ci que nous sélectionnerons alternativement tout au long du tutoriel. Vous pouvez donc les ajouter à votre palette de nuances pour les retrouver plus facilement par la suite.
Vous donnez du volume grâce à l'utilisation de l'option de fusion Biseautage et estampage. Les réglages sont proposés dans l’aperçu ci-dessus. Bien que je n'aime en général pas utiliser cette option de fusion, il peut parfois y avoir des exceptions qui justifient son exploitation. Sur un nouveau calque, un dégradé noir vers le transparent est tracé pour masquer la partie inférieure de nos câbles.
14
Les ailes sont en place, vous avez assez travaillé autour des jambes. Il est temps de passer à la mise en couleurs de la composition. Les éléments seront de formes différentes et subiront également des traitements différents afin d'éviter une répétition ennuyeuse. Le même type d'effet ne sera reproduit que deux fois au plus. La première tache bleue est basée sur une forme de Pinceau. Vous pouvez utiliser des photos de nuages pour réaliser ce type de forme.
Il y a deux manières de voir les choses. Il est possible de poursuive le chemin que nous avions commencé et tout faire de bas en haut dans la composition. Dans ce cas-là il faut garder un œil sur l'ensemble de l'image pour éviter toute incohérence ou déséquilibre. L'autre option, que vous avez choisie, est de considérer l'ensemble et d'ajouter nos éléments où bon nous semble petit à petit. Il est ainsi plus aisé de faire des tests, de placer, déplacer, cacher, montrer...
Le motif violet est basé sur un calque auquel nous avons appliqué un filtre Onde (Wave) estompé à 50%. Dupliqué, un mode de fusion Lumière tamisée (Soft light) est sélectionné sur les deux calques.
.psd hors série 02/2008 (6)
dossier
23 De la couleur IV
26 De la couleur VII
24 De la couleur V
27 Le personnage I
25 De la couleur VI
28 Le personnage II
En vert, vous disposez le même effet derrière l'aile droite. Vous avez un premier croisement de couleurs. La forme derrière la tête met en valeur le travail accompli au niveau des cheveux. La couleur n'est volontairement pas unie, c'est un dégradé du bleu vers l'indigo. L'image est ainsi composée d'éléments de couleurs unies, se mélangeant ou non avec d'autres formes, mais ; également de dégradés. Le tout constitue de cette façon une dynamique, tant au niveau des formes que des couleurs.
Le rose est intégré à partir d'un Pinceau rond à pointe très Floue. Le réglage des autres paramètres sont laissés par défaut. Ensuite l'outil Doigt est à nouveau utilisé pour travailler au niveau du contour. Le calque est passé en mode Lumière vive (Vivid light). Ainsi le rose mélangé à l’orange laisse apparaître une tache rougeâtre.
Les derniers traits sont également dessinés avec un Pinceau à pointe floue mais cette fois vous laissez les contours ainsi. Comme vous pouvez vous en apercevoir, le jaune n'apparaît toujours pas dans la composition. Soyez patient, cela viendra plus tard. Vous allez d'abord conclure cette partie avec l'étape suivante avant d'y revenir par la suite.
16
Ce Pinceau ne peut être plus simple puisqu'il est rond d’une taille 7 px. L'important est de bien régler les différents paramètres : la variation de la taille, la diffusion... Le pas est augmenté à 300%. Dans la partie Dynamique de la forme, mettez la variation de la taille au maximum. Derniers paramètres modifiés : la Diffusion. Elle est au maximum, sur un seul axe avec le nombre que nous passons à 2.
Tant que vous avez ce Pinceau prêt, à partir des mêmes réglages, vous allez revenir sur le travail sur le personnage. Placez-vous donc au-dessus du calque du personnage et créez-en un nouveau. Répétez le travail de l'étape 13 à partir de ce nouveau Pinceau, au niveau des cheveux.
Effectuez un travail similaire sur le corps du personnage. N'hésitez pas à déposer le blanc du T-shirt au niveau du jean et vice ersa. Faites attention à ne pas recouvrir le visage. De même, ne descendez pas trop bas dans les jambes, le mélange avec les câbles n'est pas propice à un rendu agréable.
.psd hors série 02/2008 (6)
moving colors
29 Le personnage IV
32 Intégration du jaune I
30 Le personnage V
33 Intégration du jaune II
Dupliquez le calque du personnage. L'effet suivant est réalisé uniquement à partir de l'outil sélection Rectangulaire. Dessinez des rectangles sur ce nouveau calque que vous déplacez horizontalement et/ou verticalement. Faites plusieurs tests, le résultat sera d'autant meilleur. Pour augmenter le contraste, vous ajoutez deux calques de réglage : un calque de Niveaux (Levels) et un autre de Courbes (Curves).
L'étape précédente est répétée après duplication du calque de départ du personnage. L'effet est meilleur si vous le répétez sur deux ou trois calques plutôt qu'un seul. Ajoutez de nouvelles retouches n'apporterait rien d'intéressant à la composition. Revenez quelques instants sur votre Pinceau à points. Ajoutez-en quelques-uns entre notre personnage et les deux derniers calques créés (personnage modifié). Exploitez ainsi des blancs restant sans surcharger l'ensemble. De plus ces points permettent de mettre en valeur les contours des rectangles déplacés.
Vous allez conclure par l'intégration de la couleur jaune dans la composition. Et comme vous allez vous en apercevoir, il ne s'agit pas de l'élément le moins important puisque cette touche finale va augmenter de façon conséquente le dynamisme de l'ensemble. Sa place est centrale. Ce mouvement circulaire est obtenu à partir du filtre de Transformation de Coordonnées rectangulaires en polaires. Ce premier calque possède une opacité de 40%.
Le deuxième n'est autre que le même calque qu'à l'étape précédente, avec un Flou directionnel appliqué au préalable. Cette fois son opacité est conservée à 100%. Voyez la prépondérance de la couleur jaune dans la réalisation. Le bleu choisi à plusieurs reprises n'occupe pas plus de place que les autres couleurs. Arrivez à cette réalisation colorée en mouvement et dans un style très actuel. Merci à David Bozec, photographe, et Fanny Kowalski, modèle pour l'occasion.
à propos de l’auteur Leparachute Passionné par l'infographie, il s'intéresse particulièrement à la communication visuelle. Il s'inspire en observant le monde qui l'entoure Site : http://leparachutedesign.free.fr Contact : leparachute@free.fr
31 Étoile de motifs I
Arrivez au niveau des finitions. Commencez à observer la cohérence des couleurs, des formes et des effets. S'ils sont insuffisants, rajoutez-en. Dans le cas contraire il faudra peut-être recommencer certaines étapes. Dessinez la forme étoilée ci-dessus à la plume. Un motif floral est incrusté avec l'option de fusion qui convient. L'objectif étant de rester discret, l'opacité du calque est diminuée à 15%. Changez le mode de fusion pour Incrustation (Overlay).
.psd hors série 02/2008 (6)
17