Créer un webdesign de qualité avec Photoshop

Un tuto qui vous apprendra à créer un webdesign simple et efficace. Il vous suffit d'avoir un minimum de connaissances et vous devriez y arriver sans aucun soucis ! Ce tutoriel Photoshop peut être fait en une heure, après tout dépend de vous, bon tuto !

tuto webdesign photoshop

Étape 1 : Création du .psd et mise en place des règles

Je crée un document de 1400x1450, résolution 72 pixels/pouce.

Je place ensuite deux règles à 220px et 1180px, dans le sens de la largeur. Pour être précis j'utilise la fenêtre "Informations" [F8]


tuto webdesign photoshop

 

Étape 2 : Header + Carousel

Commencons à créer ce webdesign, je place une règle à 450px dans le sens de la hauteur.

Je crée un nouveau calque, sélectionne toute la partie supérieure à la règle que je viens de créer et rempli la sélection de gris foncé (#333333). N'oubliez pas de bien organiser vos calques en les renommant et en utilisant des dossiers, des sous dossiers, etc.

J'ajoute du grain à ce fond, c'est très simple : je duplique le calque que je viens de remplir de gris, je le sélectionne pour faire : Filtre > Bruit > Ajout de bruit (Quantité : 25%, Répartition : Uniforme), puis Image > Réglages > Désaturation [Maj + Ctrl + U], je passe mon calque en "Densité couleur -" et je diminue l'opacité à 50%.

tuto webdesign photoshop

Je ne m'attarde pas sur le logo dans ce tutoriel, un simple texte suffira.

Le menu est simpliste lui aussi, il ne s'agit que d'un texte, seul le hover sera différent. J'utilise la police "Open Sans" en bold, de 13pt, et j'ajoute une ombre portée noire à 90 degrés, opacité 30%, taille 1px et distance 1px. C'est l'ombre portée que j'utilise le plus pour mes textes blancs, elle permet de rendre le texte plus lisible.

Le hover est simple, un rectangle orange sanguine (#c64421) auquel j'ajoute quelques détails : un trait blanc de 1px de haut collé en bas de mon rectangle, que je passe en mode incrustation à 50% d'opacité. Sur un nouveau calque je fais un dégradé radial blanc <> transparent que je trace en bas de mon rectangle, je sélectionne ensuite mon rectangle en faisant CTRL + Clic gauche sur la miniature de son calque, inverse la sélection [CTRL + Maj + I] et je supprime tout ce qui dépasse. Je passe le calque en mode incrustation à 60% d'opacité.

tuto webdesign photoshop

tuto webdesign photoshop

Je passe maintenant au carousel, il contiendra un texte et une image dans un iMac.

Je commence par placer l'iMac, psd que j'ai trouvé très facilement sur deviantART. Je le place volontairement en dehors du cadre, je vais maintenant ajouter un effet "3D", je rajoute une règle 40px en dessous de celle du header, je la remplie par un dégradé Noir <> Blanc, du bas vers le haut, je passe ensuite le calque à 10% d'opacité.

Il ne me reste plus qu'à intégrer une image dans mon écran :

tuto webdesign photoshop

J'ajoute le texte à gauche, un petit bouton qui reprend le style du hover du menu et deux flèches à gauche et à droite, nous sommes dans un carousel ! Pour les flèches, elles sont en gris très foncé (#101010), avec une ombre portée blanche en incrustation, opacité 100%, distance 1px, taille 0.

Le header de notre design est maintenant terminé !

tuto webdesign photoshop

Étape 3 : Content

Pour le contenu, c'est très simple, je divise en trois parties égales le centre du design, avec les règles bien sûr ! Je rajoute trois blocs de texte en utilisant toujours Open Sans à 14pt, interligne de 21pt (Fenêtre > Caractère, Auto par défaut) et trois petits icônes ! Pour marquer la séparation entre, je modifie les marges de mes paragraphes (Menu Fenêtre > Paragraphe), 0 / 20 pour le premier paragraphe, 10 / 10 pour le second, 20 / 0 pour le troisième.

tuto webdesign photoshop

tuto webdesign photoshop

On ne va pas s'arrêter en si bon chemin ! Je vais rajouter des logos. Pour séparer je trace une ligne du même orange sanguine (#c64421) sur toute la largeur du design (soit 960px), je rajoute l'intitulé de la partie à gauche, de la même couleur en gras. Plutôt que de supprimer le trait derrière le texte, je vais ajouter un contour blanc de 5px à mon texte. J'ajoute des logos gris clair en dessous et le tour est joué.

tuto webdesign photoshop

On peut rajouter quelques blocs, c'est simple : tout est fait maintenant. On va réutiliser les éléments déjà faits et uniquement les ajuster ! Je divise le contenu en 2, dans la partie gauche j'ajoute un bloc texte avec un bouton (le même bouton que dans le header en plus petit et sans le dégradé radial). En passant, prenez la manie de sauvegarder [CTRL + S].

tuto webdesign photoshop

Dans la partie droite je vais mettre quelques images, il faut toujours garder un ratio texte / image / vide pour que le design soit équilibré.

tuto webdesign photoshop

Étape 4 : Footer

Il ne faut pas négliger le footer, il ne faut pas non plus que le footer alourdisse le design, c'est pourquoi je fais un footer de 200px de haut, gris clair (#e6e6e6). Quelles informations vos visiteurs ont ils besoin ? Réseaux sociaux, plan du site, etc.

C'est fini ! Assez simple au final ! Le .psd est disponible dans la partie Ressources de Dot Design ! N'hésitez pas à publier vos réalisations ici !

Vous pouvez télécharger le .psd complet du webdesign ici !
(merci de ne pas faire de lien direct vers le fichier)

tuto webdesign photoshop

Commentaires

Vous avez aimé le tuto ? Partagez vos impressions ! Uploadez l'image du résultat que vous avez obtenu en faisant le tutoriel en cliquant sur l'icône Postez votre création dans l'édition du commentaire !