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