Créer un site e-commerce – 2/3 Webdesign avec Photoshop

Créer un site e-commerce –  2/3 Webdesign avec Photoshop

Programme : Photoshop

Difficulté : Intermédiaire

Temps estimé : 5 heures

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Arnaud STECKLE vous explique en détails comment créer un design de site e-commerce avec Adobe Photoshop.

Bonjour à tous ! Bienvenue dans la seconde partie de notre tutoriel e-commerce. Après avoir vu ensemble toute la phase d’organisation et de réflexion créative, vous allez ici apprendre à réaliser la maquette de la page d’accueil du site. Notre outil principal de création sera Adobe Photoshop. Tout au long du tutoriel, je vais vous donner mes astuces pros à utiliser au quotidien pour travailler mieux, être plus efficace et éviter les tâches répétitives. Nous allons combiner de nombreuses techniques et utiliser une large palette d’outils. Allons-y c’est reparti !

FineCookies-Homepage

(Résultat final – cliquez dessus pour voir en taille réelle)

01 – La base du design

Vous avez déjà probablement ouvert Adobe Photoshop :). Pour commencer, créez un nouveau document (CTRL+N ou Pomme+N) en 72dpi, 1920 pixels de large sur 2570 pixels de haut. Notre futur design sera basé sur une grille. Malgré l’évolution des résolutions d’écrans, je vais utiliser la bonne vieille grille 960.gs. Elle nous permettra de placer les éléments du site de manière propre et ainsi de faciliter l’intégration future en HTML. Pour gagner du temps vous pouvez également installer le fabuleux plug-in Photoshop GuideGuide, qui vous permet de créer des grilles en quelques secondes. Vous voilà armé jusqu’aux dents pour commencer la création.

FINECookie-Grille

Avec l’outil Pot de peinture (G), remplissez le fond du document avec la couleur #eff0e9.

02 – Création du header avec le menu principal

Sur un nouveau calque, créez un cercle de 138 pixels de diamètre de couleur #e84743 que vous placez aligné au centre du votre document à 8 pixels du haut. Il s’agit là de la base du logo. Je vous invite à enregistrer l’image ci-dessous pour récupérer le logo Fine Cookies.

Logo FINECookies

Une fois le logo placé comme ci-dessous, nous allons dessiner le menu principal.

Logo Fine Cookies

Sur un nouveau calque « Barre Menu« , dessinez un Rectangle arrondi (U) avec un angle de 4 pixels sur une hauteur de 50 pixels et sur toute la largeur de notre grille. Nous allons à présent créer une ombre originale sous la barre de menu. Dupliquez la forme (CTRL + J ou Pomme+J). Glissez ce calque sous le calque « Barre Menu ». Remplissez- le de noir, tout en le décalant de 10 pixels vers le bas (Shift + Flèche Bas). Vous obtenez le résultat suivant :

FINECookies-Menu

Sélectionnez le calque « Barre Menu copie », puis faites un CTRL+T (Pomme + T) pour utiliser l’outil de redimensionnement. En faisant un clic droit sélectionnez « Déformation« .

Fine Cookies Menu

Dans le menu de déformation (la barre du haut dans Photoshop), choisissez « Arc Inférieur » et donnez-lui une inflexion de -2,4% puis validez.

Fine Cookies Menu

Dernière étape de notre ombre, donnez-lui un effet d’ombre. Et oui il est temps :) ! Je vous invite à faire un « Flou Gaussien » sur cette forme, via le menu Filtre > Atténuation > Flou gaussien. Réglez le flou sur un rayon de 5%. Une fois cette opération terminée, diminuez l’opacité du calque à 70% et gommez légèrement les bords avec l’outil « Gomme » (E) ou en utilisant un masque de fusion.

Fine Cookies Menu

Pour lui donner de l’impact ajoutez un léger motif de papier que vous pouvez par exemple trouver sur Subtle Pattern.

Astuce : Comment ajouter un motif à une forme dans Photoshop ?
Tout d’abord, ouvrez l’image que vous souhaitez utiliser comme motif dans un nouveau document Photoshop. Puis allez sur Edition > Utiliser comme motif. Et voilà, rien de plus simple ! Votre motif est prêt. Utilisez-le ensuite via un effet de calque par exemple.

Ajoutez à présent le motif à la barre de menu, en ajoutant un effet de calque, sur le calque « Barre Menu« . Suivez les instructions de la capture d’écran ci-dessous :

Fine Cookies

Les liens de navigation

Avant dernière étape de la création du menu, l’ajout des liens. Créez un nouveau calque, avec une zone de texte (T). Ajoutez les liens en utilisant la police gratuite Fredoka One disponible sur Google Font . Elle servira tout au long du design comme police de titre. J’ai choisi une taille de 14 pixels avec la couleur #29888c.

Fine Cookies

Dernière étape de finalisation, dessinez des petites croix servant de séparateurs de liens sur un nouveau calque avec l’outil Crayon (B). J’ai utilisé la couleur #c12521.

Fine Cookies

Félicitation, notre menu est désormais terminé !

Fine Cookies

Liens annexes du header

Il nous reste encore du travail pour finaliser entièrement notre header. Comme vous pouvez le voir sur la maquette finale, nous avons trois liens d’accès au-dessus du menu principal. Ces liens discrets permettent respectivement de choisir la langue du site, d’accéder à son espace client et de consulter son panier.

Fine Cookies

Pour les mettre en place, créez une zone de texte. J’ai utilisé la police Overlock disponible également sur Google Font avec une couleur #8b8b90. Les différentes icônes proviennent du site Icon Finder. Ajoutez une ombre interne aux différents liens pour amener un élément de détail supplémentaire.

Fine Cookies

Créez ensuite un nouveau groupe de calque par lien (CTRL +G) pour ranger votre PSD au fur et à mesure de la création. C’est une étape essentielle, essayez d’avoir le réflexe. :)

FINECookie-RangmentCalque

03 – Création bloc de mise en avant produit

Dans cette nouvelle étape, nous allons travailler sur le visuel d’accroche du site web. C’est un visuel qui doit être impactant pour retenir l’attention de l’internaute et surtout l’inviter à en savoir plus. Il doit donc être soigné dans les moindres détails. Pour commencer, je place une photo de planche en bois, que j’ai préalablement détourée, sur toute la largeur de ma grille. Vous pouvez trouver l’image en utilisant Freepik par exemple. Suivant le zoning, c’est elle qui va supporter les produits à mettre en avant, avec des larges visuels, avec du texte et un bouton.

Fine Cookies

Sur un nouveau calque, je place ensuite un visuel de cookie préalablement détouré.

Fine Cookies

Je dessine des ombres avec la même technique vue pour le menu, c’est-à-dire en créant une forme ,puis en utilisant un flou gaussien pour créer un effet d’ombre.

Fine Cookies

Pour donner du dynamisme à la création, je vais ajouter quelques pépites de chocolat détourées à côté de la tour de cookies. Utilisez encore la même technique pour réaliser les ombres sous les pépites.

Fine Cookies

Avant même de placer du texte, pour donner des arguments produit, je vais mettre en place deux infobulles qui donnent des indications sur notre produit.

Dessinez un petit panneau de couleur blanche à l’aide de l’outil « Rectangle Arrondi » (U) en choisissant un arrondi de 4 pixels (comme d’habitude pour les propriétés de forme, regardez en haut de l’écran de Photoshop). Combinez deux rectangles pour créer une pointe et donc une mini-infobulle. Ajoutez-lui une ombre portée et le même motif que le menu principal.

Fine Cookies

Placez les arguments dans une zone de texte avec la police Fredoka One en utilisant la couleur #29888c. Créez un groupe de calques avec tout ces éléments en l’appelant « Mini Panneau 1″. Dupliquez le groupe pour créer de toutes pièces et en quelques secondes le second panneau.

Fine Cookies

Fine Cookies

Texte d’accroche

Il est temps à présent de créer notre accroche textuelle. Pour se faire, je vais utiliser trois zones de textes avec deux niveaux de titres différents et un paragraphe :

Fine Cookies

  • Pour la première, utilisez la police Fredoka One, en taille 72 pixels avec la couleur #e84743.
  • Pour la seconde, utilisez la police Cookie (quel hasard tiens ! :) ) disponible à nouveau sur Google Font , en taille 53 pixels avec la couleur #eea914.
  • Enfin pour le paragraphe, Overclock Regular entre en jeu en taille 14 pixels avec toujours la couleur #8b8b90.

Finir le bloc en beauté

Pour terminer sur une action concrète, nous allons créer un bouton, invitant les internautes à accéder à la fiche produit, en dessinant un bouton en forme de flèche. Créez un rectangle arrondi de 2 pixels de couleur #e84743, puis un carré de la même couleur. Faites-le pivoter pour obtenir une flèche puis fusionnez les calques.

Fine Cookies Bouton

Ajoutez ensuite le texte « Miam, j’en profite ! » avec la police Fredoka One en corps 13 pixels de couleur blanche (#FFFFFF). Pour faire un rappel du panier, ajoutez l’icône du panier utilisée dans le header en utilisant une « Incrustation couleur » pour la faire ressortir en blanc. Sélectionnez votre bouton, et pour lui donner du volume, ajoutez lui un effet de Biseautage :

Fine Cookies

Ajouter l’ombre de la planche

Pour donner plus de réalisme à la planche, il convient de lui ajouter une ombre. Sur un nouveau calque, que vous placez sous le calque de la planche, créez un Rectangle noir (U) de 960 pixels de large sur environ 70 pixels de haut. Faites un CTRL+T pour activer l’outil de « Déformation » et sélectionnez « Perspective« .

Fine Cookies Perspective

Vous allez à présent donner à votre forme noire la même perspective que la planche au-dessus. Pour ce faire, cliquez sur la poignée en haut à gauche de la forme en maintenant la touche « Shift « et le clic appuyé, tout en amenant la poignée vers l’intérieur de la forme.

Fine Cookies

Vous obtenez le résultat suivant :

Fine Cookies

Pour créer l’effet d’ombre utilisez Filtre > Atténuation > Flou Gaussien comme vu précédemment pour le menu, avec ici un rayon de 10%. Gommez le surplus pour avoir un effet harmonieux comme sur le visuel ci-dessous.

Fine Cookies Perspective

04 – Un bien joli fond de site

Le background actuel du site est bien sympathique mais manque quelque peu d’impact. Pour donner de la profondeur au site, nous allons mettre en place un fond composé de bandes. Elles vont faire partie de l’identité globale du site et de la marque en rappelant inconsciemment les stores devant les magasins de biscuits.

Il existe de nombreuses techniques pour créer un tel fond, comme utiliser un motif ou dessiner des formes. Nous allons utiliser la seconde. Créez un nouveau groupe de calques (CTRL+G ou Pomme+G) au-dessus du calque « Background« . Ici nous allons dessiner une série de rectangles pour créer les rayures. Commencez par dessiner un rectangle vertical de 475 pixels de haut sur 40 de large avec la couleur #e5e8db en partant du coin haut gauche du site. Dupliquez ensuite le calque (CTRL+J ou Pomme+J) et décalez-le de 40 pixels vers la droite.

Fine Cookie Fond Rayures

Répétez l’opération autant de fois que nécessaire pour couvrir toute la largeur du document. Vous obtenez au final un beau « mur » avec des rayures ! Facile et rapide non ? :)

Fine Cookies Rayures

Mise en perspective

Pour faire la jonction avec la prochaine partie du site, plutôt que de terminer de manière brutale la partie du haut, je vais faire continuer le fond en suivant la perspective de la planche. Voici comment procéder :

  • Dupliquez le groupe de calques avec les rayures.
  • Réduisez les rectangles en leur donnant une hauteur d’environ 200 pixels.
  • Fusionnez ensuite le nouveau groupe de calques ou créez un objet dynamique vectoriel.

Utilisez la même technique qu’à l’étape 3, lors de la l’ajout de l’ombre sous la planche. C’est-à-dire en utilisant l’outil perspective pour déformer les rayures et les faire coïncider avec la perspective de la planche.

Fine Cookies Rayures

Au final, je créée un masque de fusion sur le groupe de calques contenant les rayures pour atténuer le bas et faire une belle finition.

Fine Cookies

Dans Photoshop on privilégiera toujours les méthodes non destructives en utilisant les masques de fusion plutôt que la gomme par exemple. Ainsi en cas d’erreur vous pourrez toujours revenir sur vos pas.

Félicitations, toute la partie d’accroche et le fond du site sont terminés ! Il est temps de passer à la suite. On y va !

05 – Présenter les nouveaux produits

D’après le cahier des charges, après avoir retenu l’attention de l’internaute grâce à notre visuel d’accroche, nous allons lui présenter les dernières nouveautés de la boutique. Fiez-vous toujours au zoning pré-établi pour avancer sur la conception de votre design.

Créez un nouveau groupe de calques « Content » qui va contenir la totalité du contenu du site. Dessinez un rectangle blanc sur toute la largeur du document et sur 1645 pixels de haut. Ajoutez-lui un contour selon les paramètres suivant :

Fine Cookies

Ce rectangle servira de fond pour le reste du site.

Ajouter un titre à la partie

Créez une zone de texte avec la police Fredoka One que vous connaissez bien désormais. Utilisez la couleur #e84743 avec un corps de 20 pixels, aligné au centre de notre site. Pour venir « soutenir » ce titre, dessinez deux traits de part et d’autre avec l’outil « Crayon » (B). Vous obtenez le résultat suivant :

Fine Cookies

Créer un ensemble image et texte puis dupliquer le groupe

Pour gagner du temps lors de la création de nos blocs produits, je vous conseille d’en créer un seul à 100%. Une fois que vous êtes satisfait du résultat, dupliquez ce groupe de calques pour mettre en place tous vos produits. Commençons notre premier groupe :

– Créez un nouveau calque avec le nom « Masque« . Dessinez un carré de 220 pixels. (Il sera le support de l’image produit). Ajoutez-lui une légère ombre portée pour souligner la future image.

Fine Cookies

– Glissez une photo de produit dans Photoshop et placez-la au dessus du calque « Masque » précédent.

– Faites un « Masque d’écrêtage » en faisant un clic droit sur l’image de cookie. Ainsi la photo de produit ne dépassera pas du cadre.

Fine Cookies

Fine Cookies

Notre bloc visuel étant en place, nous allons poser le titre, le prix, ainsi qu’un petit descriptif de l’article. Sur différents calques, placez les éléments comme indiqué sur la capture ci-dessous :

Fine Cookies

Pour le prix, dessinez simplement un rectangle rouge derrière le texte blanc. (Évident non ? :) ). Le premier bloc produit est maintenant terminé. Dupliquez ce groupe trois fois en laissant une marge de 20 pixels entre chaque blocs. Placez-les bonnes photos de produits, les bons titres, avec les bonnes descriptions et vous voilà avec une nouvelle partie accomplie !

Fine Cookies

Je le répète, mais rangez vos calques tout au long de la conception pour avoir un PSD propre pour l’intégration future.

Fine Cookies

06 – Mettre en image la saveur des cookies

Voici la prochaine mission qui vous attend. Comment réussir à convaincre les internautes que les produits vendus par Fine Cookies sont des produits de qualité ? D’après le cahier des charge, vous pouvez dégager certains arguments. Des ingrédients soigneusement sélectionnés, des recettes uniques, une préparation à la main, etc.

Nous allons littéralement mettre en image les qualités de la marque en utilisant des photos engageantes. De plus cette partie de la page d’accueil du site doit ressortir et contraster avec le reste de la page. Pour y arriver, nous allons dessiner une large barre rouge (#e84743) avec l’outil « Rectangle ». Utilisez une hauteur de 510 pixels. Ajoutez-y deux triangles, un en haut l’autre en bas pour symboliser le lien entre la partie du haut et la future partie catalogue du bas du site.

Fine Cookies

La base désormais posée, placez le titre principal de la partie en haut au centre du bloc, d’après la capture ci-dessous :

Fine Cookies titre

Les arguments seront représentés par 4 blocs. Nous allons donc utiliser la même technique que précédemment. C’est à dire, un bloc soigné, puis une duplication avec remplacement d’image.

  • Créez un cercle (U) #FFFFFF de 210 pixels de diamètre. Il servira de masque pour nos images.
  • Créez un second cercle #eea914 de 35 pixels de diamètre. Il servira d’indicateur avec un chiffre dédié.

Fine Cookies

Ajoutez les effets suivants au second cercle :

Fine Cookies

Fine Cookies

Fine Cookies

Ouvrez une image de blé dans Photoshop (trouvée sur www.sxc.hu). Glissez-la au-dessus du cercle blanc et faites un masque d’écrêtage. Placez ensuite le texte en blanc avec un titre habituel en Fredoka One et le texte description avec de l’Overclock Regular.

Fine Cookies

Créer un cercle avec Adobe Illustrator

On pourra se satisfaire de ce sympathique bloc rond, mais il manque encore de personnalité. Nous allons étoffer la création avec quelques éléments graphiques. Je vous invite à ouvrir Adobe Illustrator. Si vous ne possédez pas le logiciel vous pouvez récupérer la forme vectorielle dans le PSD final de la maquette.

Dans Illustrator, créez un nouveau document RVB. Dessinez un cercle de 210 pixels de diamètre avec un contour blanc de 0,25pt et sans remplissage de forme. Dans la fenêtre « Contour » choisissez un trait « à la main ».

Fine Cookies

Vous obtenez alors rapidement une forme qui servira à encercler notre bloc. Copiez la forme dans Photoshop et placez la au dessus de la photo.

Fine Cookies

Notre bloc étant terminé, dupliquez à présent le groupe trois fois en les plaçant à intervalles réguliers. Vous pourrez vous occuper du contenu plus tard, il s’agit simplement de travailler sur la structure pour le moment. Derniers éléments graphiques pour habiller le tout, de petites flèches « faites main » pour relier les blocs. Dessinez-les avec l’outil « Pinceau » (B) avec votre souris ou tablette graphique.

Vous pouvez également utiliser des brushs comme ceux-ci par exemple : Hand Drawn Arrow Photoshop Brushes.

Fine Cookies

Félicitations, encore un bloc de contenu achevé. Courage vous n’êtes pas loin d’avoir terminé. Mais il reste tout de même des choses à faire et à apprendre. Alors on s’accroche et on continue ! ;)

07 – L’extrait du catalogue, un élément essentiel en e-commerce.

La partie inférieure du site comporte une remontée de produis du catalogue, comme prévu dans le zoning.  Au niveau design nous allons continuer sur un fond blanc, histoire de bien contraster avec la partie supérieure rouge. Utilisons 6 colonnes de notre zoning, autrement dit, la moitié gauche de notre design.

Je procède toujours de la même manière : un titre, des rectangles à utiliser comme masques pour les images. Commencez par écrire un titre avec la police Fredoka One, couleur #e84743 et 19 pixels.

Dessinez à présent un carré de 140 pixels. Comme dans la partie 05, ajoutez lui l’ombre portée suivante :

Fine Cookies

Dupliquez les carrés pour former ce qui va être notre grille de produits. Pour donner du rythme à la présentation des produits, placez 5 petits carrés et un grand comme sur la capture ci-dessous.

(Les carrés seront blancs au final, ils sont gris ici uniquement pour qu’ils soient visibles pour vos petits yeux :) ).

Fine Cookies

Occupons-nous du premier bloc produit. Il servira de modèle pour toute la grille. Glissez une image de produit dans Photshop, puis créez un masque d’écrêtage pour qu’elle soit bien contenue dans le cadre.

Fine Cookies

Pour gagner de la place en hauteur, nous allons placer les informations produits directement avec un cadre transparent sur la photo :

  • Dessinez un rectangle #ee7572 au-dessus de la photo de produit sur la moitié de sa hauteur.
  • Diminuez l’opacité du calque du rectangle à 80%.

Pour en faire une forme originale, nous allons « couper » les coins du rectangle. Pour ne pas détruire notre forme de base, utilisez un masque de fusion.

Fine Cookies

  • Ajoutez un masque de fusion au calque du rectangle.
  • Dessinez un cercle d’environ 16 pixels diamètre, que vous placez sur un du coin supérieur gauche du rectangle.
  • Maintenez la touche CTRL et cliquez sur le cercle dans la pile de calques pour faire une sélection.
  • Cliquez ensuite sur le masque de fusion du calque du rectangle. Allez dans le menu Édition > Remplir et ajouter du noir. Grâce à cette opération vous masquez le coin supérieur du rectangle.

Fine Cookies

Répétez l’opération pour le coin supérieur droit du rectangle. Ajoutez les informations du produit en texte blanc avec nos polices habituelles. Vous obtenez le résultat suivant :

Fine Cookies

Vous savez comment faire un bloc, donc rien de plus simple pour réussir à mettre en place les autres. Dupliquez les groupes et composez votre grille. Adaptez simplement la taille pour le bloc de plus grande taille.

Fine Cookies

Pour terminer cette partie, il est essentiel de donner la possibilité à l’internaute de voir encore plus de produits en accédant facilement au catalogue. Vous avez la solution ? Je propose pour ma part de créer un bouton en bas de notre grille de produits. Dessinez un rectangle arrondi (4 pixels) et dans un souci de cohérence, copiez-collez le style du calque à partir du bouton du header (voir plus haut dans la partie 03).

Fine Cookies

Attaquons nous à présent aux blocs censés mettre en confiance l’internaute lorsqu’il commande en ligne.

08- Mettre en confiance l’internaute

Le but ici est d’avancer des arguments commerciaux pour rassurer l’internaute. Nous allons dessiner des étiquettes de prix, accompagnées de visuels pour mettre en avant les arguments. Pour commencer mettons en place le traditionnel titre en utilisant ici la police Cookie, en couleur #eea914, en corps 35 pixels. Ajoutez deux petites lignes avec l’outil Crayon (B) de chaque côté pour soutenir le titre.

Fine Cookies

Nous allons créer le premier bloc de 138 pixels de large. Utilisez l’outil « Rectangle arrondi » pour créer la forme de base avec la couleur #eff0e9. Utilisez un second rectangle pour dessiner la pointe. Enfin utilisez un cercle pour symboliser l’accroche de l’étiquette. Jetez un œil à la capture ci-dessous pour y voir plus clair.

Fine Cookies

Pour donner de la vie à cette étiquette ajoutez-lui une ombre et une texture de papier que vous pouvez récupérer sur Subtle Pattern par exemple.

Fine Cookie Etiquette

Voici le résultat attendu :

Fine Cookies

A présent, ajoutez un titre avec la police Fredoka One en corps 15 pixels de couleur #29888c. En bas de l’étiquette, ajoutez du texte qui symbolisera un lien avec la police habituelle Overclock Bold 15 pixels de couleur #e84743. Avant d’habiller les arguments avec les visuels, dupliquez le bloc trois fois.

Fine Cookies

Nous voici avec trois bloc à illustrer. Le but est de faire passer le message au travers d’un visuel fort qui s’intégrera parfaitement dans le design. Commençons par le bloc de livraison. Nous allons l’illustrer avec une planisphère. Pour être orignal, utilisez une photo de cookie sans pépites de chocolat, que vous pouvez trouver sur le site www.photoxpress.com par exemple. Une fois détouré placez le cookie à la bonne taille dans le bloc.

Fine Cookies

Téléchargez ensuite une carte du monde en format vectoriel (pour avoir un fond transparent). Vous pouvez trouver une sélection sur Speckyboy par exemple. Placez la carte sur le cookie. Passez le calque en « Incrustation couleur » pour lui donner une teinte réaliste. J’ai utilisé #3d2b21. Modifiez le mode de fusion du calque pour le passe en mode « Lumière Crue ». Ajoutez ensuite une légère ombre sous le cookie et le tour est joué ! ;)

Fine Cookies

Les deux visuels des blocs suivants ont été conçus sur le même principe : en utilisant une photo de base combinée à un élément existant du design. Utilisez une boîte pour symboliser la livraison, et un ticket pour le programme de fidélité. Je n’entrerai pas plus dans les détails, il s’agit simplement d’apposer le logo Fine Cookies sur les objets.

Dupliquez simplement le calque du logo se trouvant dans le header pour le placer sur les objets.

Fine Cookies

09- Créer du lien social

Essentiels sur les sites d’aujourd’hui, les liens vers Facebook et Twitter ne peuvent être oubliés. Même si dans notre cas, ils interviennent en bas de page, ils trouvent toute leur place à côté du catalogue et des éléments de réassurance. Pour marquer les esprits et les rendre reconnaissables en un coup d’œil, nous allons dessiner deux rectangles arrondis avec un aplat de couleur :

  • Le premier en bleu #3b5998 de Facebook avec une taille de 220 x 85 pixels. Ajoutez par dessus du texte blanc avec Fredoka One 14 pixels. Placez-le du côté droit, laissez le côté gauche pour le célèbre « F ». Vous pouvez trouver le logo sur la page officielle du site : Facebook.
  • Faites de même pour Twitter en utilisant un rectangle similaire de la couleur #00aced. Téléchargez le logo du réseau social sur la page officielle au format .PNG ou .EPS.

Fine Cookies

Au final les liens sont simples et reconnaissables au premier coup d’œil ;)

10 – Finir en beauté

Je peux apercevoir les gouttes de sueurs qui dégoulinent le long de votre front, je ressens la tension et l’impatience de terminer ce design avec un beau pied de page. Quelle chance, nous y sommes !

Pour terminer la page d’accueil, dessinons ensemble le footer. Nous allons placer une barre séparative en utilisant un motif de bois.

Dupliquez le calque de la planche du header et placez ce nouveau calque dans un groupe que vous nommez « Footer« . Dupliquez à nouveau deux fois ce calque. Placez-les sur toute la largeur du design.

Fine Cookie Planche

Sélectionnez la planche de gauche et faites un CTRL+T > Transformation > Symétrie Axe Horizontal pour que les couleurs soient « raccords » sur toute la longueur du bois. Effectuez la même opération pour la planche de droite.

Fine Cookies

Sélectionnez les trois calques de planches dans la palette des calques puis faites un Clic droit > Fusionner les calques. Avec l’outil de sélection (M), sélectionnez la partie haute des planches pour les supprimer et ne garder que la face avant de la planche :

Fine Cookies

Après la suppression vous obtenez ceci :

Fine Cookie Planche

Dupliquez le logo du header pour le placer au centre de la planche. Créez ensuite un rectangle arrondi blanc de 300x 220 pixels, que vous placez sous le logo telle une feuille de papier. Ajoutez-lui la même texture de papier que le menu principal.

Rappel : pour copier un effet, sélectionnez un calque et avec un clic droit choisissez « Copiez le style du calque ».

Ajoutez également une ombre au bloc selon la technique vue pour le menu principal (voir la partie 02). Pour finaliser ce bloc, ajoutez l’adresse du magasin avec la police Overclock en couleur #29888c.

Fine Cookies

Placez une dernière phrase de mentions légales en bas de page en utilisant toujours la police Overclock avec la même couleur. Dernier détail, dupliquez la ligne du header pour créer le fond du footer. Avec ce fond en rayures vous finissez sur une note graphique qui est totalement en adéquation avec le haut de page.

Fine Cookies

Que dire ? Je ne trouve pas mes mots ! Vous avez TER-MI-NE !

Dernier conseil avant de fermer votre PSD, rangez une dernière fois vos calques !

Fine Cookies

Conclusion

Nous avons parcouru ensemble 10 grosses étapes pour venir à bout de cette page d’accueil de site e-commerce. J’espère que ce tutoriel Photoshop vous a plu, que vous y avez pris du plaisir et bien entendu appris des choses. Je vous invite dès à présent à partager ce tutoriel avec vos amis !

N’hésitez-pas à laisser vos questions et remarques en laissant des commentaires. Je vous donne également rendez-vous à la partie 3 pour parler de découpage et d’intégration à l’aide d’HTML 5 et CSS 3.

À très bientôt sur Living Tuts (et bien évidement sur mon blog www.webdesignertrends.com). ;) !

28 Comments to “Créer un site e-commerce – 2/3 Webdesign avec Photoshop”

  • Va falloir que je suive tout ça de près. Très agréable ce design, bravo !

  • Super tuto ! Merci du partage !

  • Ouais, un excellent tuto, très bien détaillé. Ça fait plaisir de voir livingtuts revivre un peu ! :)

  • Tuto très intéressant et surtout très bien réalisé! Merci beaucoup pour cette qualité et les ressources partagées :).

  • Très intéressant comme tuto, j’ai beaucoup apprécié l’idée des ombres et de la pers qui donne une profondeur que j’adore :).

    Merci.

  • Vivement la suite de ce tuto qui est trés trés intéressant !

  • Sympa le design :) et les icones rondes pourraient être fait en CSS3, y’a des tutos sympa sur le net pour ça. Sinon, pas d’intégration dans un CMS type WordPress ou autres ?

    Merci pour le tuto :)

  • Super boulot, très beau rendu !

  • Salut merci pour ce gros tuto, mais je n’arrive pas a installer l’extension Guideguide pour photoshop, ils me disent que l’extension n’ a pas été vérifié, aurait tu une solution à ce problème.

    • Salut Anthony,

      Je vais essayer de t’aider, mais je n’ai pas encore eu ce problème.
      Tu est sur Mac ou PC ? Quelle est ta version de Photoshop ?

      Jette un œil par ici au cas où : http://guideguide.me/help/

      • Je suis sur pc et j utilise la version d évaluation photoshop cs5. Je vais y jeter un coup d’oeil.

  • Merci pour ce très beau tutoriel.

    Dommage qu’Indesign intègre mal les textures. Car ID gère si bien les typos et les grilles.

  • J’aime beaucoup les sites avec du « volume » comme ça, c’est propre, clair, et sympa.

    Le design est-il inspiré de http://lafabriqueeclectique.blogspot.fr/ ? Ça y ressemble beaucoup, surtout les cookies + bandes du fond :)

    • Merci pour ton retour !

      Non je viens de découvrir le site que tu mentionne. Par contre, il est peut-être inspiré par Fine Cookies. La lafabriqueeclectique est sorti juste quelques semaines après ce tutoriel ;)

      Après à part les bandes et rapidement le cookie, les similitudes sont tout de même très minimes.

  • Très beau tutoriel, très bien expliqué!
    Merci beaucoup ^^

  • Ton tutoriel est vraiment d’une excellente qualité, il y a longtemps que j’en cherchais des comme ça ! (avec les instructions du précédent sur la recherche graphique au préalable en plus, c’est top ! ) J’adore le rendu… après près de 8 heure passées dessus, j’ai enfin terminé et ça ressemble bien !!
    Merci pour tout ce que tu m’as permis d’apprendre et de comprendre… :D

    • Merci à toi et bravo d’avoir réalisé le tutoriel jusqu’au bout :)

  • Super tutoriel !! Vraiment bien construit et un design élégant et moderne. De belles astuces et conseils, que du plaisir à suivre les étapes :). MERCI !

  • Ce tuto a l’air très bien. Super travail, vraiment merci. C’est rare de trouver d’aussi bons tutos gratuits.

    Par contre je suis restée sur ma faim pour le logo. J’aurais aimé avoir le détail de la réa car c’est un élément important du webdesign aussi.
    Et je regrette énormément que l’intégration sur un CMS de vente en ligne ne soit pas abordée (étant donné que c’est un webdesign pour une boutique en ligne). Perso, Prestashop m’aurait bien arrangée.

Laisser un commentaire