Découvrez le nouveau numéro spécial: se perfectionner en HTML5 disponible dès aujourd’hui chez votre marchand de journaux et sur shop.oracom.fr !

Vous maîtrisez sans doute le CSS, un atout majeur pour qui souhaite réaliser un site web ergonomique, dynamique et attrayant. Mais êtes-vous à l’aise avec HTML5 et CSS3 qui étendent les capacités de ce langage ? Sachez qu’ils vous offrent des possibilités jusque-là inédites, mais peut-être manquez-vous d’assurance pour les aborder sans aucune crainte. Que vous soyez webdesigner, développeur ou amateur éclairé, vous trouverez dans ce magazine un dossier et des tutoriels qui vous permettront de progresser sur les “pas à pas” des meilleurs webdesigners.
 
+ CD offert : 20 photos fotolia, 22mn de vidéo,
+ Goodies, codes et fichiers d’exercices
 
+ d’infos sur ce numéro :
> Commandez et feuilletez le numéro
> Retrouvez un kiosque proche de chez vous
 
 

Réalisez une série de boutons pour le Web à base de la police ikoo.

Objectif du tutoriel
Réalisation d’une série de boutons pour le Web à base de la police ikoo.

Temps nécessaire
1-2 heures

Les boutons pour le Web sont primordiaux parce qu’ils poussent à l’action. On appelle cela CTA pour “Call to Action”. Tout est dit dans le nom, “Appel à l’action”. Que ce soit pour inciter les gens à vous suivre sur Twitter ou à acheter un produit dans une boutique, le bouton doit donner envie et confiance. Bien incorporé à votre design, il apportera du volume à votre site. Nous allons utiliser la police de caractères ikoo.ttf (réalisée par l’équipe de dasmuse.com), qui est gratuite et vous fera gagner du temps car elle reprend les symboles les plus courants des sites Web. À utiliser sans modération dans vos designs.

Notre expert
David Slaager est un graphiste freelance actuellement basé à Bruxelles. Fondateur du site de formation en ligne BeTheKing.org, il s’occupe également de la réalisation des tutoriels vidéo. En dehors de cela, il réalise d’autres projets artistiques plus personnels, développement de typos, création de BD, retouche et photomontage. Retrouvez ses travaux personnels sur www.davidiscreative.com.

01 Créer un nouveau document
Commencez par créer un nouveau document. Je démarre toujours par un document standard de 1024 x 768 pixels en 72 dpi et couleur RVB. Bien que mon bouton soit nettement plus petit que le document, j’apprécie mieux les différentes textures sur un grand format. Remplissez le fond en gris neutre #E2E2E2.

02 Texturiser le fond
Nous allons maintenant donner une texture légèrement granuleuse à notre fond en ajoutant du bruit. Allez dans Filtre> Bruit> Ajout de bruit. Choisissez une valeur assez faible, à case Monochromatique.

03 Le fond du bouton
Tracez maintenant un cercle d’environ 190 pixels de diamètre avec l’outil Forme vectorielle rond, la couleur de remplissage n’a aucune importance.

04 La profondeur du bouton
Maintenant, nous allons appliquer un dégradé linéaire à notre forme. Allez dans le menu Calque> Style de calque> Remplissage en dégradé. Pour les couleurs, choisissez un gris plus foncé en haut, #CAC7C7, et une couleur blanche en bas, #FFF. Peu importe la couleur que vous choisirez au final, faites attention à ce que la partie claire soit vers le bas, ceci renforce l’impression de bouton enfoncé.

05 Partie supérieure du bouton
Nous allons dupliquer le rond et le réduire Ctrl/Cmd+T en maintenant la touche Alt enfoncée pour réduire en partant du centre. Décochez l’effet de calque pour voir ce que vous faites. Réduisez suffisamment pour avoir un contour d’environ 25 pixels.

06 Texture du bouton
Par-dessus, nous allons dessiner un rectangle avec l’outil de Sélection. Tracez sur un nouveau calque un dégradé radial qui part d’un gris d’une valeur de #777777 et va vers un gris plus foncé #464543. Vous remarquerez que mon reflet est décentré pour donner plus de relief à ma forme. Ajoutez ensuite du bruit : Filtre> Bruit> Ajout de bruit et choisissez une valeur très légère en gardant les paramètres précédents.

07 Écrêter le calque
Dans le panneau Calques, faites un clic droit sur votre calque et choisissez l’option Convertir en masque d’écrêtage. Votre texture est à présent parfaitement positionnée sur votre cercle. Nous allons pouvoir donner de la profondeur à notre bouton.

08 Profondeur du bouton
Appliquons maintenant un effet de calque à la forme vectorielle. Vu que notre texture est en mode écrêtage, elle est sous l’effet du bouton, un avantage qui pourrait toutefois devenir un inconvénient. Par exemple, si vous appliquez une couleur de remplissage, la texture du dessus disparaîtra. Pour éviter cela, allez dans Calque> Style de calque> Ombre portée et choisissez les valeurs ci-dessus.

09 Ombre interne
Appliquez une Ombre interne pour adoucir les contours et redonner de la dimension à votre bouton. Cochez la case Ombre interne et choisissez les valeurs comme ci-dessus. Restez sobre et faites plusieurs tests avant de parvenir au résultat parfait. Attention, de la taille finale de votre bouton dépendra la justesse de vos paramétrages.

10 Texture grille 1
Nous allons maintenant faire une petite grille qui sera appliquée sur le bouton. Au-dessus du calque avec la texture grise, tracez une ligne vectorielle noire de 1 pixel à 45° (maintenez la touche Alt enfoncée pour avoir un angle parfait). Dupliquez l’élément et déplacez-le de 10 pixels vers la droite. Répétez l’opération jusqu’à ce que la forme soit complètement recouverte. Pour aller plus vite, faites Ctrl/Cmd+Alt+flèche droite. Fusionnez les calques entre eux, sélectionnez-les tous dans le panneau Calques et faites Ctrl/Cmd+E.

11 Texture grille 2
Dupliquez le calque et faites une transformation horizontale de manière à obtenir une grille qui recouvre la surface du bouton. Refaites un clic droit, créez un masque d’écrêtage. Diminuez maintenant l’Opacité du calque jusqu’à 14 %.

12 Trace de trou
Nous allons maintenant ajouter une texture de trou comme on en trouve souvent dans les boutons. Tracez un petit cercle blanc, dupliquez-le et déplacez-le de 10 pixels vers la droite. Fusionnez la première ligne et répétez l’opération en hauteur de sorte qu’une grosse partie du bouton soit recouverte.

13 Profondeur des trous
Dupliquez le calque et inversez la couleur du dessous (Ctrl/Cmd+I). Déplacez le calque de 1 pixel vers la droite et 1 vers le bas, fusionnez les deux calques et diminuez l’Opacité jusqu’à 12 %. Avec l’outil Gomme, effacez les contours et insistez sur les coins pour donner l’impression d’un bombage. Choisissez un bord doux pour la gomme et un Diamètre de 75 pixels.

14 Symboles
Nous allons maintenant utiliser la police ikoo pour ajouter le symbole sur notre forme. Elle est spécialement développée pour aider les Webdesigners. Grâce à elle, vous gagnerez un temps considérable sur vos designs. Chaque lettre représente un symbole souvent utilisé comme les flèches, la maison, etc. Nous allons utiliser ici une bulle de conversation, la police ikoo en contient plusieurs. Installez-la sur votre machine et, à l’aide de l’outil texte, tapez la lettre M en majuscule.

15 Travail d’ikoo
Nous allons ajouter différents effets de calque. Dans Calque> Style de calque, choisissez Ombre interne avec les valeurs suivantes : Opacité : 42 %, Distance : 0 px, Taille : 6 px. Cochez la case Incrustation couleur et choisissez un gris neutre #3B4343. Enfin, sélectionnez Lueur externe et faites comme sur l’illustration ci-dessus.

16 Bouton éteint
Et voilà notre premier bouton terminé. Créez un nouveau dossier et glissez l’ensemble des calques dedans, renommez-le “off ”. Dupliquez-le et déplacez-le vers la droite. Renommez ce second dossier “on”.

17 Bouton allumé
Sélectionnez maintenant le symbole ikoo et ouvrez le panneau Style de calque en double-cliquant dessus. Changez la valeur de remplissage en blanc et la Lueur externe avec les valeurs reprises ci-dessus.

18 Ajustement des tailles
Si l’on a autant de détails dans un bouton, il est difficile de les garder intacts quand on le redimensionne. Pour cela, nous n’allons pas redimensionner tous les calques. Dupliquez le dossier “on” et sélectionnez tous les calques à l’exception de la grille. Faites Ctrl/Cmd+T et réduisez la taille. Une fois qu’elle vous convient, redimensionnez la grille toute seule et moins petite que les autres éléments. Diminuez la taille de l’ombre intérieure de la lettre M de quelques pixels.

19 Autres symboles
Dupliquez ensuite “on petit” six fois. Maintenant, vous pouvez tout simplement changer la lettre par une autre lettre ikoo pour avoir un autre symbole. Ici, j’ai utilisé “N, s, O, u, v, w. t”. N’hésitez pas à changer les effets de calques.

20 Différents états
Un bouton est souvent réactif au passage de la souris, il y a l’état Simple et l’état Par-dessus. Parfois, on utilise aussi l’état Cliqué ou encore l’état Appuyé. Dupliquez l’ensemble des calques “petits” et déplacez-les vers le dessous. Sélectionnez maintenant la lettre M du grand bouton dans le dossier “off”. Faites un clic droit et choisissez l’option Copier le style de calque. Maintenant, sélectionnez la lettre M du petit calque de dessous et faites clic droit> Coller le style de calque. Répétez l’opération pour chaque lettre.

21 Autres variantes
Dupliquez l’ensemble des dossiers “petits” et déplacez-les vers le bas. Effacez maintenant les gros bords en dégradé et vous obtenez un effet encore différent. Amusez-vous à modifier également les effets de calques pour obtenir des variantes encore plus significatives.

22 Redimensionner les boutons
Vous pouvez encore redimensionner les calques en plus petit, mais cette fois-ci je vous conseille de les fusionner afin d’éviter d’adapter l’ombrage sur chaque calque. Vous remarquerez que plus ils sont petits, plus on perd dans le détail. En fait, il faut réadapter le design à chaque étape du redimensionnement.

23 Variantes de couleurs
N’hésitez pas à faire des variantes de couleurs. J’ai uniquement ajouté un dégradé de remplissage, et l’effet est complètement changé.

24 Derniers conseils
Travaillez à 100 % le plus souvent possible. Parfois, si vous avez un zoom trop important, vous ne vous rendrez pas compte de ce que donnera votre effet dans le fichier final. Ajoutez du détail comme des reflets mais restez simple et démarquez-vous.

Une belle collection de UI récentes pour iPhone, iPad, Web, etc.

01 Glimpz UI Poster – Poster réalisé pour son client à partir des élément UI de son projet.

02
App My World par Axel Bouaziz

03 Suitcases app par Anna Artemova

04 Minimalistic Email par Victor Erixon

05 Passbook par Simon Rae

06 Infeste par Sencer Bugrahan

07 Flat Profile for Social Fashion Network – iOS app par Helder Leal

08 Randddom Landing Page par Dmitri Litvinov

09 Record Voicemessage par Peter Amende

10 Radio Sketch par Olivier Vanbiervliet

Une sélection de tutoriels pour le Web tout chaud, juste pour vous ; )

ss

Apprendre à découper un template dans Photoshop (FR)

Une Lighbox popup et responsive

Portfolio dans Photoshop

Menu multi-niveau responsive

Thème WordPress basé sur la typo dans Photoshop Partie 1

Outils de Fireworks (vidéo)

Slideshow d’images animées en CSS3 avec Flux Slider

Vectoriser avec Fireworks (vidéo)

Créer la maquette graphique d’un thème WordPress (FR)

Maquette Web complexe (FR)

Nous avons sélectionné pour vous une belles brochettes d’agences, la plupart font du Web, certaines sont multitalents.

01 Agence Padawan

02 Vertigo Webdesign

03 Radis Noir

04 Nemty Agency

05 Seegne

06 Cubedesigners

07 Axome

08 OLA

09 Maetva-agences

10 Foliance

11 Xprime Groupe

12 Atalanta

13 Sublimeo

14 Colorz

15 Agence Webdesign

16 Eliografik

17 Agence Lift

18 Image Webdesign

19 6lab

20 Kalixo

21 Adveris

22 Agence Tactile

23 Ohwee

24 Viens-là !

Une nouvelle version (2.2) qui offre une optimisation de la fonction Work in Progress et corrige quelques bugs.

C’est par ici.

La creation « just a game » de Mike Harrison sera disponible gratuitement et pendant 24 heures au format PSD, le 10 mai prochain sur www.tenbyfotolia.com

Fotolia avec la Saison 2 de TEN invite les internautes à un tour du monde de la création numérique en compagnie des plus grands artistes internationaux, issus de pays où la banque d’images est implantée. Les 4 premières créations ont fait l’objet de plus de 110 000 téléchargements au total le jour de leur lancement.

L’artiste

Son inspiration et ses influences, Mike Harrison les puise dans « l’énergie » de la vie, « comme quand on regarde le monde depuis la fenêtre d’un train ». « Cela réveille en moi un mécanisme de réflexion inconscient. Voir ou entendre quelque chose peut déclencher une idée des semaines plus tard, sans pour autant que je m’en rappelle l’origine ».

Ses domaines de prédilections : le sport et l’éditorial. « Dans le domaine sportif, je retrouve cette énergie stimulatrice que je peux amplifier dans mes créations. Et dans l’illustration éditoriale, ce qui me plaît c’est la retranscription visuelle de l’action, parfois plus impactante que les mots ».

Sa Creation

Sa composition subversive haute en couleur, mêlant l’art digital et traditionnel, illustre clairement le « sens de l’énergie ». « Construite à partir d’image du stock Fotolia et d’éléments dessinés à la main, j’ai travaillé sans ordre établi. Je n’ai cessé de réajuster ma création en superposant les calques, mélangeant les matières et déstructurant les couches pour obtenir une composition homogène purement graphique » … et un résultat unique et surprenant.

+ de techniques

Deux vidéos, sous-titrées en 12 langues, ont été tournées dans le pays de l’artiste. Celle qui présente son univers est à visionner en avant-première sur la page Facebook dédiée à TEN à partir du 6 mai. L’autre, dévoilant les techniques de création, sera disponible le jour J, le vendredi 10 mai, sur  http://www.youtube.com/tencollection et sur www.tenbyfotolia.com.

La vidéo teaser est d’ores et déjà disponible ici.

Découvrez le nouveau numéro de Web Design chez votre marchand de journaux et sur shop.oracom.fr.

 
Dans ce nouveau numéro découvre le Top 100 des applications incontournables. De Flexbox à Webgl en passant par la stratégie de contenu et les statistiques UX, notre dossier “collection créative” vous dévoilera des outils, des tendances et des talents dont vous n’aviez pas idée. Pour ce faire, accompagnez Eric Meyer, cofondateur d’An Event Apart, dans le mouvement des microformats. L’inventeur d’une des premières suites globales de tests navigateur, spécialiste du CSS, auteur prolifique, vous dévoilera ses modèles de boîtes flexibles et de grilles.
 
+ CD offert , 2 heures de vidéo
+ 20 photos fotolia, fichiers d’exercices
 
Bonne lecture !
 
+ d’infos sur ce numéro :
> Feuilletez et commandez ce numéro
> Trouvez un kiosque proche de chez vous
 
 

Il est temps de faire un saut dans le temps. Bénéficiez de tout l’attrait d’un design propre en respectant une ergonomie simple et efficace.

FICHIERS DU TUTO

Objectif du tutoriel
Réaliser un template de site Internet au style rétro.

Temps nécessaire
3-4 heures

Nous retrouvant dans une conjoncture où l’homme pense avoir déjà tout fait, certaines tendances reviennent à la mode comme le style rétro. Il provient d’univers culturels variés tels que des artistes musicaux ou des designers et apporte une touche de gaieté par sa façon de ne pas forcément se prendre au sérieux. La variété de couleurs utilisée dans le style rétro ouvre des possibilités de création infinies et apporte une grande richesse d’exploitation d’une création. On peut alors se souvenir des années 1960-1970, où la musique excellait dans son art, où les habitations étaient remplies de mobilier, d’électroménager et d’autres appareils design (rappelez-vous de nos anciens téléviseurs), où les véhicules avaient des allures et des coloris qu’on est triste de ne plus retrouver aujourd’hui. Certains styles ne meurent jamais et le rétro entame une renaissance. Je vous propose donc dans ce tutoriel de créer une maquette de site au style rétro qui, malgré son écart historique avec le Web d’aujourd’hui, s’adapte parfaitement lorsqu’on respecte les standards des deux époques.



Notre expert
Gérald Holzheuer, alias “Sticky Stuff”, est un Webdesigner infographiste freelance venant de Strasbourg, en Alsace. Son style s’apparente à une touche fraîche et originale qu’il s’obstine à exercer avec une poulpe attitude.

01 Le croquis
À vos crayons ! Dans un premier temps, il est nécessaire d’avoir une vision sur la structure du site. Pour cela, établissez un croquis de votre futur template, vous y gagnerez beaucoup dans la mise en place sur Photoshop. Disposez vos éléments en fonction de ce que vous imaginez dans votre site.

02 Le fond du site – 1
Ouvrez un nouveau projet de dimensions 1300 x 1200 pixels. Créez un calque qui couvrira toute la surface de la couleur #FFFFFF. Utilisez un motif de quadrillage que vous trouverez sur le Web et qu’il suffit d’installer en double-cliquant dessus une fois téléchargé. Créez un nouveau calque par-dessus le premier, dont vous incrusterez le motif quadrillage en fond transparent.

03 Le fond du site – 2
Construisez une flèche à la pointe arrondie qui prendra toute la taille de votre fond. En utilisant la forme Rectangle arrondi, construisez des carrés dans un style rétro. Amusez-vous en superposant ces formes et en jouant sur les couleurs de votre choix. L’important est de ne pas manquer aux standards du style.

04 Le logo – 1
Prenez l’outil Polygone et allez dans les options de polygone. Mettez-vous en mode Étoile en cochant la case correspondante. Donnez une Indentation de 35 % à vos branches et cochez la case Branches arrondies pour rendre votre forme moins agressive. Pour finir, indiquez 60 côtés pour votre forme.

05 Le logo – 2
Une fois votre forme en place, appliquez-lui un dégradé radial de #B8B78F vers #C9C8B0. Téléchargez la police “Dotty shadow” et écrivez votre texte en #787731. Pour donner un peu d’originalité à votre forme, créez avec l’outil Rectangle arrondi des formes en #B8B78F pour simuler un effet de coulures.

06 Le menu – 1
Avec l’outil Rectangle arrondi d’un Rayon de 30 pixels, créez quatre formes avec un dégradé linéaire ayant un Angle de 90° de #B8B78F vers #C9C8B0, auxquelles vous appliquez un Contour de 5 pixels en #B9B892. Ces formes doivent rejoindre l’angle que vous avez donné à la flèche de votre fond. Inscrivez les sections de votre menu avec la police “Dotty shadow”.

07 Le menu – 2
Accentuez la visibilité du menu en appliquant des cercles de couleur en arrière-plan de celui-ci. Illustrez vos sections en dessinant ou en choisissant sur le Web des icônes qui vont illustrer vos sections. Choisissez pour celles-ci la couleur d’incrustation #787731, puis dessinez en arrière-plan de chacune d’entre elles un cercle avec un Fond à 0 % et un Contour de 2 pixels en couleur #787731.

08 Le menu – 3
Appliquez le quadrillage du fond aux formes du menu. Dupliquez le quadrillage dans le fond de votre site et déplacez-le pour le positionner au-dessus du menu. Faites une sélection de vos quatre formes du menu. Avec l’outil Plume, faites un clic droit, puis Définir une sélection et cliquez sur le calque de quadrillage. Supprimez ce qui se trouve en dehors de votre sélection pour conserver le quadrillage uniquement sur les formes.

09 Boîte de contenu – 1
Prenez l’outil Rectangle arrondi et dessinez un rectangle avec un Rayon de 30 pixels en #FFFFFF. Dessinez un triangle rectangle qui va se positionner dans le coin du bas droit de votre forme. Fusionnez les deux calques, appliquez une Opacité de 79 % et un Contour de 6 pixels en #000000 avec une Opacité de 17 %.

10 Boîte de contenu – 2
Avec la police “Dotty shadow”, écrivez votre titre puis sélectionnez une police standard pour écrire votre texte. Justifiez votre texte dans les options d’alignement du texte. Dessinez quatre cercles en #787731 se positionnant en bas et au milieu de votre forme. Terminez votre paragraphe avec des rectangles de 1 pixel en #787731.

11 Boîte de contenu – 3
Dans la zone de gauche à présent vide, insérez une image de polaroïd intégrant le contenu de votre choix. Plus loin dans l’article, le détail de la fabrication de ce visuel est visible dans l’encadré “détails”.

12 Module de news
Répétez l’opération de création de la forme du point n° 9 en dessinant un rectangle arrondi qui ne prendra qu’un tiers de la largeur. Écrivez votre titre puis le texte correspondant à chaque nouveauté en laissant une marge à gauche. Répétez l’opération de création des icônes du point n° 7.

13 Module de droite – 1
Répétez l’opération de création de la forme du point précédent en dessinant un rectangle arrondi qui prendra les deux tiers restants de la largeur. Copiez puis collez la forme du module de news précédemment créé, puis appliquez-lui une couleur #B8B78F et un contour de 3 pixels en #787731. Réduisez et dupliquez trois fois cette forme.

14 Module de droite – 2
Insérez des icônes de votre choix dans ces trois formes avec une couleur en #787731. Écrivez vos trois titres avec la police “Dotty shadow”. Construisez trois blocs de texte en alignant ceux-ci avec l’outil Paragraphe. Ajoutez des liens “en savoir plus” en écrivant du texte avec une couleur en #787731.

15 Le pied de page – 1
Créez un rectangle de couleur #B8B78F occupant toute la largeur de votre projet. À l’aide de l’outil Rectangle arrondi, créez des formes de couleur #B8B78F sur toute la longueur de la forme rectangulaire avec un angle correspondant à celui de la flèche de votre fond. Fusionnez toutes les formes entre elles.

16 Le pied de page – 2
Déclinez le design du menu en utilisant la couleur #000000. Réduisez et jouez avec l’opacité pour affiner votre déclinaison. Passez les calques en mode Produit pour mieux incruster le design dans la couleur de fond. Reproduisez le quadrillage en procédant comme pour le menu.

17 Le pied de page – 3
Créez trois blocs comme dans les étapes précédentes puis réduisez-les homothétiquement. Utilisez la police “Dotty shadow” pour écrire les titres de vos blocs. Allez sur le Web pour trouver les icônes de réseaux sociaux de votre choix et disposez-les à votre guise. Utilisez la couleur #787731 pour ces icônes et pour le texte.

18 Conclusion
Vous avez maintenant terminé votre template de site rétro. L’avantage de ce template, c’est qu’il est facile de changer sa tendance en changeant la couleur dominante par une couleur de votre choix. Laissez-vous aller à votre guise et en avant pour un voyage dans le temps !

PLUS D’INFOS
En détail
Une image dynamique.

Voici quelques astuces pour créer une image illustrant l’introduction de votre site et rendant plus attractive la navigation.

Rendez-vous sur le Web pour y trouver quelques formes de pinceau intéressantes. Tapez “brushes retro” dans votre moteur de recherche préféré et sélectionnez ce qui vous inspire. Installez ces formes de pinceau dans Photoshop en double-cliquant sur le fichier “.abr”. Créez un nouveau projet de 350 x 440 pixels. Avec vos formes ou à l’aide de l’outil Rectangle arrondi, faites un visuel en vous laissant guider par votre inspiration et à l’aide des formes installées. L’important est de conserver dans votre démarche un esprit rétro qui correspondra à votre site. Pour cela, l’utilisation de certaines couleurs vous permettra de ne pas vous tromper.
Voici les couleurs que je vous conseille d’utiliser : #D9881F ; #D1BD82 ; #81BBA3 ; #6D4112.

Vous avez désormais un visuel que nous allons utiliser pour créer un polaroïd. Encore une fois, Internet est rempli de ressources très utiles dans vos projets. Attention toutefois aux droits d’utilisation d’images, de polices ou même des formes que vous venez de télécharger. Pensez toujours à lire les conditions d’utilisation. Aidez-vous d’Internet ou prenez une photo d’un polaroïd vierge si vous en disposez (si c’est le cas, vous êtes rétro, ce tuto est donc fait pour vous !). Importez cette image dans votre projet sur Photoshop. Faites une sélection de la zone vierge du polaroïd. Pour cela, prenez l’outil Plume et suivez les contours de la zone vierge pour obtenir une forme carrée. Faites un clic droit sur cette forme puis Définir la sélection. Cliquez sur le calque de votre visuel et faites Ctrl/Cmd+Maj+I pour inverser la sélection, supprimez ensuite votre sélection.

Cette action à pour but de supprimer ce qui se trouve autour de votre sélection, il ne restera de votre visuel que la zone sélectionnée. Prenez ensuite votre pinceau avec la troisième forme de base de Photoshop (un cercle qui s’estompe) et une couleur #000000 pour faire le contour de votre visuel, afin que celui-ci s’incruste bien dans le polaroïd. Nous allons maintenant vieillir le polaroïd. Pour cela, dupliquez le calque du polaroïd et placez-le au-dessus. Ajoutez une incrustation de dégradé de #D9881F vers #EEEC7F en mode Incrustation. Jouez ensuite sur l’opacité pour vieillir le polaroïd et le visuel avec un effet de type sépia.
Donnez maintenant du dynamisme à votre polaroïd en créant une perspective avec Edition> Transformation> Torsion. Dupliquez le calque polaroïd et placez-le en arrière-plan. Faites une Incrustation couleur de #000000 et jouez avec l’outil Torsion pour créer une ombre. Une fois l’ombre placée, restez sur ce même calque puis faites Filtre> Atténuation> Flou gaussien pour atténuer le calque noir de l’ombre et rendre cette ombre plus réaliste. Jouez ensuite sur l’opacité à votre convenance pour une ombre plus ou moins dense.
Pour finir, mettez tous ces calques dans un dossier puis importez celui-ci dans le template de votre site. Le côté perspective va donner du dynamisme à votre page ; pour accentuer cela, il vous suffit de placer le polaroïd de manière à ce que celui-ci dépasse le bloc contenant l’introduction du site.




Avec votre pinceau, utilisez une forme pour faire le contour de votre visuel et ainsi bien l’incruster au visuel.




Pour plus de dynamisme, on laisse l’image dépasser du bloc contenant l’introduction.

Ce tutoriel a pour but de vous permettre de réaliser un poster étape par étape. Entre mode de couleurs, traits de coupe et design, nous verrons comment le rendre prêt à l’impression. L’exercice requiert l’utilisation de Photoshop et Illustrator mais il est accessible à tous et il n’est pas nécessaire de savoir dessiner pour le réaliser.

Notre expert
Ianis Soteras est un graphiste freelance de 25 ans qui vit à Marseille. Co-gérant de l’agence de création web/print Emoshion, il aime tout type de projet du moment que cela titille sa curiosité et déteste parler de lui à la troisième personne.

Éléments du tutoriel
Vous trouverez ICI les fichiers Illustrator & Photoshop ainsi que leurs calques.

01 Pour commencer
Créez un nouveau document Illustrator : Fichier> Nouveau> largeur : 594px, hauteur : 837px, ce qui équivaut peu de choses près à un format A4 mais sera plus facile à utiliser. Commençons par le « quadrillage ». Créez deux traits verticaux sur les bords de votre document avec un contour simple de 0,5px. Puis cliquez sur l’outil Dégradé de formes dans la palette : sélectionnez votre élément de départ (trait gauche) puis votre élément d’arrivée (trait droit) pour faire apparaitre un ensemble de lignes verticales. Double-cliquez sur l’outil pour en faire apparaître le menu. Choisissez le pas « étapes », insérez 65 étapes, l’option « sens » ne nous intéresse pas ici.

02 La base du quadrillage
Pour plus de facilités, cochez Affichage> Magnétisme de la grille. Créez maintenant une croix à base de deux traits simples de contour 0,5px dans l’angle supérieur gauche. Cette croix doit utiliser la longueur entre les deux premières lignes verticales tracées précédemment, soit deux carreaux de long sur un carreau de hauteur sur votre grille servant de support.

NOTE
Pour les tracés géométriques, préférez l’affichage de la grille accessible via le menu Affichage> Afficher la grille pour mieux gérer et visualiser les interlignages.

03 La base du quadrillage (suite)
Sélectionnez votre croix, menu Objet> Décomposer (laisser les options par défaut)> Ok. Sélectionnez à nouveau votre décomposée puis ouvrez le menu Fenêtre> Pathfinder pour utiliser l’outil réunion. Votre croix est maintenant un seul et même objet.

04 Créez un motif 1/2
Copiez-collez votre croix dans l’angle inférieur gauche de votre document, même colonne. Ensuite réutilisez l’outil Dégradé de formes> Etapes> 91> Ok. Vous venez de créer une colonne de croix, qui ressemble dorénavant plus à une colonne de losanges légèrement aplatis. NOTE : pour dupliquer simplement vos objets : maintenez la touche Alt enfoncée, sélectionnez un objet, déplacez-le et le tour est joué.

05 Créez un motif 2/2
Sélectionnez votre colonne de losanges, ouvrez une nouvelle fois le menu Objet> Décomposer> Ok. Tous les éléments composant votre colonne sont alors clairement identifiables. Dupliquez alors votre colonne d’objets pour la placer à l’exact opposé de la première : au bord droit de votre document.

06 Terminez le motif
Cliquez sur l’outil Dégradé de formes et sélectionnez votre première puis votre deuxième colonne. Dans le menu de l’outil vérifiez bien que vous possédez « 31 étapes » et validez. L’idée est d’aligner les jointures de vos losanges sur vos lignes verticales. Vous venez de terminer le motif « quadrillage », profitez-en pour sauvegarder votre avancée.

07 Création du texte
Maintenant la réalisation du texte pixellisé sous Illustrator. Utilisez une police reproduisant cet effet pour vous faciliter la tâche. Le lien vers une police vous est fourni sur le cd. Pour ce tutoriel, nous écrirons le texte « Design is made of pixels », de taille 150px. Sélectionnez le texte nouvellement créé, clic-droit> Vectoriser. Sélectionnez le texte, clic-droit> dissocier. Vous pourrez vous occuper des lettres indépendamment les unes des autres.

08 Le lettrage
Changez la couleur du texte, prenez du blanc et ajustez les contours de sélection des lettres pour coller au plus près des contours du quadrillage. Prenez les lettres et alignez-les sur le quadrillage créé. N’hésitez pas à jouer sur les angles, inter-lettrages,… placez approximativement le texte pour occuper l’espace de manière homogène.

09 Le relief
Afin de donner du relief à votre texte, nous allons créer une 3ème dimension à la main. Considérons sur le quadrillage que chaque cube représente un pas de 1 ; créez une profondeur de champ de pas = 2 pour chaque lettre. Pensez à donner une autre couleur pour vos nouvelles formes pleines afin de les dissocier du premier plan, un gris clair par exemple. Puis Clic-droit, Disposition> Arrière-plan. Répétez l’opération pour l’ensemble du texte en respectant les angles choisis auparavant pour vos lettres.

10 Vue d’ensemble
Les principales étapes sur Illustrator sont terminées, nous y reviendrons pour agrémenter la composition de petits éléments. A ce moment, votre projet doit ressembler à ceci.

11 Les débuts sous Photoshop
Commençons par configurer notre espace de travail. Fichier> Nouveau. Nous travaillerons sur un A4 auquel vous ajoutez 1cm de hauteur et de largeur. Nos éléments ayant été réalisés en vectoriel, vous pouvez changer la taille de la zone de travail ; pensez seulement aux réglages de votre projet : 300ppp en vue d’une impression, mode de couleurs CMJN. Utilisez les règles pour placer des marges de 5mm sur chaque bord de document (en vue des traits de coupe pour l’impression). Je rajoute une marge intérieure de 2mm par habitude des coupes à l’impression qui peuvent parfois jouer des tours. Ouvrez et incorporez la texture fournie en lien sur le cd. Une fois intégrée, menu Image> Réglages> Négatif.

12 Intégration du quadrillage
Créez un nouveau calque et remplissez-le d’une couleur – ici du bleu – et changer le mode pour une Lumière linéaire. Copiez maintenant votre quadrillage issu d’Illustrator sur un nouveau calque. Passez-le en mode de calque> Incrustation. Si vous travaillez avec les deux logiciels ouverts en même temps, un simple Copier-coller de vos éléments Illustrator vers Photoshop suffit pour l’importation. Au moment de coller, choisissez alors Coller en tant que> Objet Dynamique.

13 Intégration des éléments texte
Dans un premier temps copiez-collez seulement vos textes, et placez-les sur votre quadrillage sous Photoshop. Puis insérez vos ombres, sous les calques générés pour vos textes. Changez le mode de calque de vos ombres pour > Lumière crue. Pour éviter de changer la mode de chaque calque, placer tous vos calques d’ombres dans un groupe et appliquez le mode directement sur le groupe qui influera directement sur tous les éléments enfants. Intercalez le calque de quadrillage entre ceux des textes et des ombres.
Lien pour la police : http://www.dafont.com/fr/notalot35.font

14 Points lumineux
Retournez sous Illustrator et créez sur votre quadrillage un assortiment de points, de taille variable et tentez de les placer aléatoirement sur les intersections. Sélectionnez les tous, passez les en blanc puis dupliquez les vers Photoshop. Double-cliquez sur le calque des points pour ouvrir les options de calque. Sélectionnez Lueur externe> mode de fusion : normal, opacité : 100% et couleur : blanc. A vous de jouer sur le menu Eléments> Technique, Grossi et Taille pour obtenir des points avec un léger halo. Pour information, ici le Grossi est à 2%, la taille à 18px et la Technique par défaut en Plus tamisée.

15 Effet nuageux
Toujours sous Photoshop, nous allons ajouter un effet nuageux et épars à la composition. Pour cela, créez un nouveau calque. Prenez l’outil Pinceau puis une forme qui vous convient, pas trop extravagant tout de même. J’opte pour l’éponge humide et une taille assez conséquente pour créer plusieurs nuages sur les bords et espaces vides de la composition. Une fois terminé, changez le mode de calque et choisissez Lumière tamisée. Pensez à laisser ce calque au tout premier plan pour que l’effet impacte tous les éléments.

16 Formes abstraites
Créons maintenant quelques formes créées sous Illustrator. Calquez-vous sur le quadrillage pour réaliser des formes comme celles du célèbre jeu de briques à empiler par exemple. Envoyez le tout sur Photoshop et ajustez les emplacements pour ne pas superposer une forme avec du texte ou un point lumineux. Ouvrez les options du calques et cochez Ombre interne > mode de fusion : normal, opacité : 75% et prenez un bleu plus foncé que celui utilisé pour le fond. Puis comme pour la Lueur externe, jouez avec la distance et la taille – ici 8px pour les 2 – pour obtenir l’effet qui vous semble le plus adéquat avec la composition.

17 Appels d’air
Sous Illustrator à nouveau, créez des formes dentelées sur les « briques » géométriques, comme si la brique faisait appel d’air. Récupérez les éléments sous Photoshop, replacez les proprement sur les formes correspondantes, puis change le mode de calque> Incrustation. Ouvrez ensuite le menu Filtre> Atténuation> Flou gaussien> Rayon : 3px.

18 Finitions
Il s’agit maintenant de jouer sur les opacités de calques et différents effets pour harmoniser l’ensemble de la création. N’hésitez pas à changer les modes de calques pour obtenir des effets et donc des ambiances différentes.

19 Export pour impression
Nous avons pris soin de rajouter 1cm à chaque longueur – 0.5cm en haut, en bas, à droite et à gauche – du document pour travailler avec la zone de découpe pour l’impression, le fond perdu. Pour exporter, Fichier> Imprimer. Choisissez Adobe Pdf – ou autre si vous disposez par exemple de Pdf Creator -, à droite sélectionnez le menu Sortie> cochez Traits de coupe (coins). Cliquez ensuite sur Fond perdu pour ajouter 0.5cm de largeur. Pour finir, cliquez sur imprimer et le tour est joué. Pour ce qui est de la colorimétrie, le mieux est toujours de voir avec l’imprimeur qui éditera votre affiche. En fonction des profils employés dans Photoshop, vous vous retrouverez avec des résultats différents.