Créer un design web de A à Z

Dans ce tuto vous allez apprendre à créer un webdesign sous photoshop. Je vais vous montrer comment faire un header, un menu, un contenu et un footer. Ce tuto Photoshop est simple, mais demande un minimum de connaissances de Photoshop. C'est une base sur laquelle vous allez pouvoir vous appuyer afin de créer votre propre design !

Rendu final du webdesign :

tuto design web photoshop

Étape 1 : Création du .psd

Je commence par créer un document de 1400x1000, résolution de 72 pixels/pouce.

Étape 2 : Header

Le header de ce design prendra toute la largeur et sera haut de 150px. Pour connaitre la taille de ma sélection il suffit de regarder dans informations [raccourcis : F8]. J'en profite pour placer une règle, si vous ne les voyez pas faites CTRL+R. je crée un nouveau calque et remplie cette sélection d'un gris foncé (#2c2c2c).

tuto design web photoshop

Pour l'instant je n'ai qu'un seul calque, mais j'en aurai bientôt bien plus et il sera moins évident de se repérer, je commence dès maintenant à créer un dossier "Header" !

Je vais délimiter la largeur du design, je choisis de faire un design de 960px de largeur, vu que notre document fait 1400px de large, il faut mettre des règles à 220px et 1180px.

tuto design web photoshop

Je vais un peu agrémenter cet header, en commençant par ajouter une Ombre interne.

tuto design web photoshop

Je vais mettre une règle centrée horizontalement, je récupère la sélection de mon calque rempli de gris puis je place ma règle (elle sera "aimantée" par le centre). je crée un nouveau calque je sélectionne l'outil dégradé radial, blanc vers transparent.

tuto design web photoshop

Je me sers de la règle pour faire un dégradé radial, puis je l'étire sur les cotés [raccourcis : CTRL + T].

tuto design web photoshop

Je le passe en mode incrustation. Cela va créer un effet de lueur sur le header ;)

tuto design web photoshop

Je rajoute maintenant le titre du site, rien d'exceptionnel de ce côté là.

tuto design web photoshop

J'ajoute un champ de recherche en utilisant l'outil de rectangle arrondi d'une valeur de 500. Dans les options du calque un dégradé de #232323 vers #111111, et un contour extérieur blanc de 1px en mode incrustation. J'ajoute une petite icône de loupe qui servira à envoyer le formulaire et un texte !

tuto design web photoshop

Le header du webdesign est terminé, maintenant, on va s'occuper du menu !

tuto design web photoshop

Étape 3 : Le menu

Je crée un nouveau dossier "Menu" et je crée un nouveau calque à l'intérieur. Comme pour le header, je fais une sélection de la largeur du document et haute de 40px, je place une petite règle et remplis la sélection (la couleur n'a aucune importance, on va modifier les options du calque). J'ajoute un dégradé #e7e7e7 vers #ffffff.

tuto design web photoshop

Je vais utiliser la police Drois Sans, police gratuite et utilisable via Google Web Fonts. Elle est en noir, de taille 15px et en gras. Je lui ajoute une ombre portée, très discrète, mais donnant un meilleur rendu.

tuto design web photoshop

Je rajoute trois icônes de réseaux sociaux et une petite flèche pour savoir sur quelle page on se trouve.

tuto design web photoshop

Étape 4 : Et pourquoi pas un carousel ?

Un carousel permet de mettre en avant les x derniers articles postés sur un site. Je crée un dossier carousel puis j'utilise l'outil rectangle pour créer un rectangle de 230px de haut.

Je prends ensuite une image sur internet, je la colle juste au-dessus de ce rectangle, sur un nouveau calque, puis je fais clic droit dessus > Créer un masque d'écrêtage. Cela va afficher mon image uniquement la où le rectangle existe.

tuto design web photoshop

Un peu de texte et des petits carrés en bas à droite pour se situer sur le carousel.

Je vais maintenant mettre une ombre à ce carousel. Pour cela je duplique le rectangle et sur ce nouveau calque j'ajoute une ombre portée :

tuto design web photoshop

Je déforme le calque en faisant : Édition > Transformation > Déformation, et je remonte le centre bas du calque

tuto design web photoshop

Pour l'instant le design ressemble à cela :

tuto design web photoshop

Étape 5 : Le contenu

Le contenu de ce design sera relativement simple, chaque article contient une image, un titre, des informations et une description, sans oublier le logiciel relatif, incrusté dans l'image. J'utilise du bolo bolo pour remplir la description, cela permet d'avoir une idée plus précise de ce que va donner le site une fois fini.

Je décide de faire une partie article large de 720px, laissant à droite un espace libre pour mettre davantage d'informations. Osez abuser des règles, elles sont là pour ça !

Pour ce qui est de la description, je crée une sélection avec l'outil texte (T) et justifie le texte, comme cela il sera aligné à droite et à gauche :)

tuto design web photoshop

Je crée trois articles pour l'instant, sans oublier de modifier l'image et le texte. Cela permet également d'avoir une meilleure idée du site !

Étape 6 : La navigation

J'avais réservé un espace de 220px sur le côté que je vais maintenant utiliser. L'intégration des pubs est à prévoir dès la conception du design, je décide de placer une publicité 200x200 en haut de la navigation.

Je vais créer un bloc pour afficher les derniers commentaires :

tuto design web photoshop

J'utilise l'outil rectangle arrondi (U) d'une valeur de 4px de couleur #e6e6e6, puis j'utilise les options du calque suivantes :

J'ajoute le texte avec simplement une ombre portée de 1px de distance 1 et taille 0. La séparation est un bel effet très simple à faire ! Il s'agit de deux lignes, l'une est , l'autre en dessous est blanche, puis je passe le calque en mode incrustation !

tuto design web photoshop

Ensuite je rajoute le texte des commentaires et le bloc et fini ! Bien entendu, vous pouvez créer n'importe quel type de bloc dans cette partie, ceci sert juste d'exemple, c'est à vous d'apporter votre créativité pour faire un design à votre goût :)

J'ai prévu un document trop petit pour mon design, je vais donc l'augmenter avec l'outil recadrage (C) et agrandir un peu tout ça ! J'en profite pour rajouter un article, histoire d'avoir une bonne idée de ce que pourrait donner le site une fois codé. Il ne faut pas l'oublier : lorsque l'on créer un design, il va être codé par la suite, il faut donc créer des choses de façon à faciliter le travail du codeur.

Je rajoute des boutons pour accéder à d'autres parties du site. En utilisant des icônes que vous pouvez trouver sur des sites comme iconfinder.

tuto design web photoshop

Étape 7 : Le footer

Je passe maintenant à la partie inférieure du site, une partie qui n'est pas à négliger ! Il comportera 1 bandeau de 170px de hauteur. Je vais m'inspirer du header pour garder une cohérence dans le design. Je remplis les options du calque avec un dégradé #505050 vers #242424, un contour extérieur blanc de 1px puis comme sous les images ci-dessous :

tuto design web photoshop

Je rajoute ensuite un dégradé radial comme je l'avais fait pour le header.

tuto design web photoshop

Je vais créer une barre pour les partenaires, je refais un rectangle arrondi de 500px, comme pour la barre de recherche du header (après avoir créer le rectangle, je fais un clic droit sur le calque de recherche du header > "Copier le style de calque" puis je le colle sur le calque que je viens de créer). je crée dedans le même rectangle arrondi, en plus petit et avec un dégradé #dfdfdf vers #ffffff, et un contour intérieur blanc de 1px. Je rentre le texte avec une ombre portée de 1px vers le bas, distance 1 et taille 0. Il reste plus qu'à écrire la liste des partenaires.

tuto design web photoshop

Ensuite, j'ajoute un rappel du menu, et deux boutons facebook et twitter. C'est à vous de voir ce que vous voulez mettre dans le footer, chaque site à des besoins différents.

Le design est maintenant terminé. Si vous avez des questions, remarques ou suggestions, n'hésitez pas à laisser un commentaire ! Vous pouvez aussi poster votre résultat.

tuto design web 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 !