Dans ce tutoriel de conception Web Photoshop, nous allons concevoir une mise en page de site Web fracassante, propre et professionnelle dans Photoshop. La mise en page que nous faisons dans ce tutoriel peut être utilisée comme conception de site Web personnel ou d’entreprise. Cette conception est assez conviviale, elle devrait donc être idéale pour la réputation de votre site.
Mise à jour: Il s’agit de la première partie d’une série en deux parties qui vous apprendra à créer la mise en page dans Photoshop, puis à la convertir en une conception Web (X) HTML conforme aux normes.
La Série « Design Web Propre et Professionnel »
- Partie 1: Créer un Design Web Propre et Professionnel dans Photoshop
- Partie 2: Coder un Design Web Propre et Professionnel
Aperçu final
Jetez un œil à la mise en page que nous allons créer dans ce tutoriel. Vous pouvez voir l’aperçu final de l’image ci-dessous ou cliquer ici pour une version en taille réelle. 
Préparez votre document Photoshop
1 Créez un nouveau document dans Photoshop (Ctrl/Cmd + N) en utilisant les paramètres de l’image suivante.
Définissez les paramètres des unités et des règles
2 Assurez-vous que vous travaillez en unités de pixels, qui sont l’unité fixe standard pour la conception Web.
Configurez les paramètres suivants pour vos Règles à partir de la fenêtre de dialogue Préférences (Ctrl/ Cmd + K); cliquez sur Unités & Règles et assurez-vous que tout est réglé comme indiqué dans la figure ci-dessous. 
Ajoutez des guides pour désigner la zone de contenu
3 Activez les règles Photoshop à partir de la vue > Règles.
Basculez la visibilité des règles en appuyant sur « Ctrl/Cmd+R ».
Ouvrez également le panneau d’informations à partir de la fenêtre > Info (touche de raccourci: F8).
Le panneau d’informations donne des informations utiles en fonction de l’outil sélectionné.
En appuyant sur « M », choisissez l’outil Rectangle de sélection et créez une boîte de 120 pixels de large à partir du coin gauche de la toile. Vous pouvez ajuster la taille en regardant dans le panneau d’informations tout en effectuant la sélection.
Maintenant, cliquez sur la règle de gauche et faites glisser un guide vers la droite de la sélection du chapiteau, comme indiqué dans l’image ci-dessous. 
4 Déplacez cette sélection sur le bord droit du canevas. Affectez un autre guide sur le côté gauche de la sélection.
Votre canevas devrait maintenant ressembler à ceci: 
Création du logo
5 Maintenant, nous allons créer le logo pour notre site Web.
Le logo va être très simple et il aura un effet de dégradé de couleur. Créez un nouveau groupe (Groupe de couches > Nouveau groupe >) et nommez-le « logo ».
6 Sélectionnez l’outil de type horizontal (T) et tapez « SMASHING » (ou le nom de votre site Web) en majuscules.
7 Ensuite, dans le panneau Caractères, définissez la police sur Arial, le style sur Gras et la taille sur 42pt. Définissez également l’option de méthode d’anticrénelage sur Sharp et utilisez la couleur #101112.
Vous pouvez également définir ces options dans la barre d’options lorsque l’outil Type est l’outil actif. 
8 Double-cliquez pour ouvrir la boîte de dialogue Style de calque. Sélectionnez Superposition de dégradé, cliquez sur l’éditeur de dégradé et utilisez les paramètres comme indiqué ci-dessous.
9 Placez le calque de type « FRACASSANT » à une distance de 35 pixels du haut et de 0 pixels du guide de gauche. Vous pouvez le faire avec précision en utilisant l’outil de déplacement (V) et vos touches fléchées. Dupliquez ce type de calque (Calque > Calque dupliqué).
Déplacez le calque dupliqué juste à côté du mot « FRACASSANT » et modifiez le texte en « Dzine ». Répétez les étapes 6, 7, 8 mais utilisez différentes couleurs de dégradé (arrêt de couleur à gauche: #b27625, arrêt de couleur à droite: #e5ad27) pour le mot « Dzine ».
10 Sélectionnez l’outil Type horizontal (T) et ajoutez une ligne de balise sous le logo avec les paramètres suivants. 
11 Le logo final doit ressembler à l’image ci-dessous.
Pour activer/désactiver les guides, allez dans Afficher la grille > Afficher la grille > ou utilisez le raccourci Ctrl/Cmd+ ; 
Création de la barre de navigation
12 Créez un nouveau groupe et nommez-le « navigation », il doit être au-dessus du groupe « logo ». Faites glisser un guide de la règle supérieure, 150 pixels sous le bord supérieur de la toile. Sélectionnez l’outil Rectangle (U) et tracez une ligne horizontale de 4 pixels de hauteur avec une couleur de #e3ab27, sur le canevas.
13 Ajoutez des liens de navigation à 12 pixels de haut à partir de cette ligne horizontale et à 20 pixels à droite du guide de gauche.
Sélectionnez l’outil Rectangle arrondi (U) et dessinez une boîte de la taille de 72px par 35px. Déplacez ce calque sous les liens de texte et nommez le calque « survol ».
Redressez les coins arrondis inférieurs avec l’outil Convertir le point. Déplacez les côtés des bords inégaux en dessous avec une marge de 8 pixels pour que les bords soient égaux aux autres bords intérieurs en bas.
Double-cliquez sur le calque « Survol » pour ouvrir la boîte de dialogue Style de calque et ajouter des couleurs dégradées (arrêt de couleur à gauche : #e5ad27, arrêt de couleur à droite : #b27625). Sélectionnez l’outil de type horizontal (T), sélectionnez le texte, « Accueil » et changez la couleur en #ffffff (blanc). 
Création de la section « appelez-nous »
14 Ensuite, nous allons créer la section « appelez-nous » en haut à droite de notre conception (exactement à l’opposé du logo).
Téléchargez cette icône de téléphone et placez-la près du bon guide. Nommez cette couche « icône de téléphone ». Sélectionnez l’outil Type horizontal (T).
Ajoutez un numéro de téléphone à gauche de l’icône du téléphone en utilisant la police Arial, avec la taille définie à 20pt et la couleur #292929.
Ajoutez du texte connexe sous le numéro de téléphone en utilisant la police Arial, définie en gras, avec une taille de 11pt et une couleur de #595959. 
Création de l’en-tête
15 Maintenant, nous allons créer la section d’en-tête. Créez un nouveau groupe et nommez-le « en-tête ».
16 Sélectionnez l’outil Rectangle (U) et créez une forme rectangle de la taille de 1200px par 440px.
Placez ce rectangle à une distance de 1px sous la barre de navigation et nommez ce calque « en-tête bg ». Double-cliquez sur le calque « en-tête bg », sélectionnez le style de calque de superposition de dégradé et ayez ces deux couleurs dans l’Éditeur de dégradé (arrêt de couleur à gauche: #2e2226, arrêt de couleur à droite: #7a7556).
Voir l’image ci-dessous pour la position du rectangle et les détails des couleurs. 
17 Créez un autre rectangle à partir de l’outil Rectangle (U) avec une taille de 960 pixels par 360 pixels.
Placez ce rectangle à une distance de 40 pixels du haut du calque « en-tête bg » et de 0 pixels du guide de gauche. Nommez cette couche « conteneur d’en-tête ». Aperçu ci-dessous ce que nous avons fait jusqu’à présent avec le design.
Création de la section « projet en vedette »
18 Ensuite, nous créerons la section projet en vedette. Créez un nouveau groupe à l’intérieur du groupe d’en-tête et nommez-le « fp ». Sélectionnez l’outil Rectangle (U) et créez un rectangle de la taille de 630 pixels par 340 pixels à une distance de 10 pixels du haut et de la gauche du conteneur d’en-tête.
Donnez à ce calque la couleur #000000 et nommez-le « conteneur fp ». 
19 Ouvrez une image dans Photoshop pour la placer ici en tant que projet en vedette. Sélectionnez > Tout (Ctrl/Cmd+A), puis Éditez > Copier (Ctrl/Cmd+C).
Revenez à la conception de notre site web.
Créez un nouveau calque au-dessus du calque « conteneur fp » et allez dans Edition > Coller (Ctrl/Cmd+V) pour coller dans l’image de votre projet en vedette. Renommez ce calque en « image fp ». Cliquez avec le bouton droit sur le calque « image fp » et sélectionnez Créer un masque d’écrêtage.
Maintenant, l’image n’est visible qu’à l’intérieur du rectangle (« conteneur fp »).
Faites des ajustements pour que l’image de votre projet en vedette soit similaire à celle indiquée ci-dessous. 
20 Allez dans Modifier l’échelle > Transformer > (Ctrl/Cmd+T). Dans la barre d’options, cliquez dans la zone de rotation et tapez -4 et appuyez deux fois sur entrée pour ajuster l’angle.
Restez sur le même calque (« image fp ») et sélectionnez Luminosité comme mode de fusion de ce calque. 
21 Ensuite, nous allons créer la barre de titre et de description de l’image du projet en vedette. Sélectionnez l’outil Rectangle (U) et créez une forme de rectangle de la taille de 630 pixels par 90 pixels en utilisant la couleur #161718.
Changez l’opacité de ce calque à 90% et nommez-le « title bg ». Placez ce rectangle comme indiqué dans l’image ci-dessous. 
22 Créez un autre rectangle de la taille de 630 pixels par 1 pixels en utilisant la couleur #9c9c9c et nommez-le « ligne horizontale du titre ».
Placez ce rectangle sur le bord supérieur du contenu du calque « title bg ».
23 Ajoutez un titre et une description à l’intérieur du rectangle que nous avons créé à l’étape 21, en utilisant les paramètres suivants pour le titre et la description.
Pour le titre:
- police: Arial, couleur: #ffffff, taille: 25pt et option de méthode d’anticrénelage: Sharp
Pour la description:
- police: Arial, couleur: #a4a4a4, taille: 12pt et option de méthode anticrénelage: Aucun
Création de la section « citation rapide »
24 Créez un autre groupe à l’intérieur du groupe d’en-tête et nommez-le « citation rapide ». Sélectionnez l’outil Rectangle (U) et créez un rectangle de taille 300px par 340px. Placez ce rectangle à la distance de 10 pixels à droite de la section du projet en vedette et nommez-le « conteneur qq ».
25 Nous allons copier un style de calque à partir d’un autre calque que nous avons créé à une étape précédente.
Allez dans le groupe « navigation », cliquez avec le bouton droit sur le calque « survol », sélectionnez Copier le Style du calque, revenez au calque « conteneur qq », cliquez avec le bouton droit et sélectionnez Coller le Style du calque. Nous avons maintenant le même style de calque que le calque « hover » pour notre « conteneur qq ». 
26 Sélectionnez l’outil Type horizontal (T).
Écrivez « Citation rapide » à l’intérieur de « conteneur qq » à une distance de 20 pixels des bords supérieur et gauche de la boîte contenant. Définissez la famille de polices sur Trebuchet MS (ou une police Web de votre préférence) avec la couleur blanche (#ffffff) et l’option de méthode d’anticrénelage définie sur Sharp. Nous allons utiliser l’outil Rectangle arrondi (U) pour créer trois champs de formulaire.
Sélectionnez l’outil Rectangle arrondi (U) et définissez le rayon sur 3px. Créez ensuite deux rectangles arrondis de taille 260px par 35px en utilisant la couleur du blanc (#ffffff). Nommez ensuite les couches de forme comme « field1 » et « field2 » respectivement.
Créez le troisième rectangle arrondi de la taille de 260 pixels par 75 pixels en utilisant une couleur blanche (#ffffff) et nommez-le « field3 ». Sélectionnez l’outil Type horizontal (T) et créez des étiquettes pour chaque champ de formulaire. 
27 Sélectionnez l’outil Rectangle arrondi (U) et créez une boîte de 80 pixels par 35 pixels et nommez-la « soumettre btn ».
28 Double-cliquez sur le calque pour ouvrir la fenêtre de dialogue Styles de calque et cochez la case Superposition de dégradé à gauche.
Cliquez sur l’éditeur de dégradé et modifiez les couleurs du dégradé comme indiqué ci-dessous. 
29 Sélectionnez l’outil de type horizontal (T) et tapez « Soumettre » en utilisant la police Arial, le style Gras et la taille à 13pt. Sélectionnez les deux calques dans le panneau Calques (« Soumettre btn » et « Soumettre du texte »).
30 Choisissez l’outil Déplacer (V) dans le panneau Outils et cliquez sur Aligner les centres verticaux et Aligner les centres horizontaux dans la barre d’options.
(Alternativement, vous pouvez obtenir le même résultat en allant dans Calque > Align > Centres verticaux et Calque > Align > Centres Horizontaux). 
Création de la zone de contenu principale
31 Créez un nouveau groupe et nommez-le « contenu ». Sélectionnez l’outil Rectangle (U).
Créez un rectangle de 300 pixels par 175 pixels et nommez-le « c01 ». Placez cette couche 30px sous l’en-tête et 0px dans le guide de gauche. Double-cliquez sur le calque et utilisez les paramètres de l’image suivante.
32 Nous allons ajouter du contenu à cette boîte maintenant. Sélectionnez l’outil de type horizontal (T) et ajoutez le texte « À propos de SmashingDzine ». Faites une sélection du mot « À propos » à l’aide de l’outil de type horizontal (T), puis changez sa couleur en #b47825.
Faites ensuite une sélection du mot « Fracassant », puis changez la couleur en #2f2f2f. Ajoutez une petite description et un texte de lien sous le titre. Les options suivantes ont été utilisées pour le titre, la description et le texte du lien.
(Vous pouvez ajuster ces options si nécessaire). 
Pour le Titre:
- Police: Trebuchet MS, style: Normal, taille: 24pt, méthode d’anticrénelage: Sharp
Pour la description:
- Police: Arial, style: Normal, taille: 12pt, méthode d’anticrénelage: Aucun, couleur: #767676
Pour le texte du lien:
- Police: Arial, style: Gras, taille: 13pt, méthode d’anticrénelage: Aucune, couleur: #252525, Soulignement
33 Nous allons ajouter une boîte carrée à côté de la description maintenant. Sélectionnez l’outil Rectangle (U) et colorez #ffffff, maintenez la touche Maj enfoncée pour maintenir les proportions et créez un carré de taille 88px par 88px. Déplacez ce carré à une distance de 10 pixels de la gauche du rectangle (« c01 »).
Nommez cette couche « bordure ». Double-cliquez sur le calque pour ouvrir la fenêtre de dialogue Style de calque et ajoutez un style de calque de contour avec les paramètres suivants : 
34 Créez une autre boîte de la taille de 82px par 82px et placez-la au centre du calque « bordure ». Nommez ce calque « boîte » et changez la couleur de ce carré en #d5d5d5.
Sélectionnez tous les calques de ce groupe (groupe « contenu »), accédez au groupe de calques > Nouveau > à partir de Calques (Ctrl/Cmd+G) et renommez ce nouveau groupe « à propos ». 
Remarque: La boîte carrée grise intérieure est un support de place pour une image et peut être remplacée par n’importe quelle image de votre choix.
35 Dupliquez le groupe « à propos » (cliquez avec le bouton droit sur le groupe et sélectionnez Dupliquer le groupe) et nommez-le « services ». Faites un clic droit sur le groupe « services » et sélectionnez à nouveau le groupe en double et nommez-le « portefeuille ».
Nous avons maintenant trois groupes (« à propos », « services » et « portefeuille »). Déplacez le dernier groupe (« portefeuille ») vers le guide de droite comme indiqué ci-dessous. 
36 Sélectionnez les trois groupes dans le panneau Calques, puis accédez à Calque > Distribuez > Centres horizontaux pour les espacer également.
Cliquez ici pour voir l’image en taille réelle de l’image suivante. 
37 Modifiez les titres du groupe » services » (au centre) et du groupe » portfolio » (à droite) comme indiqué ci-dessous. (Vous pouvez modifier ces titres en fonction de vos besoins.) 
Création du pied de page
38 Créez un nouveau groupe et nommez-le « pied de page ».
Sélectionnez l’outil Rectangle (U) et créez un rectangle de la taille de 1200px par 100px au bas de notre mise en page de conception. Nommez ce calque « footer bg ». Utilisez le même style de superposition de dégradé que le calque « en-tête bg » en cliquant avec le bouton droit sur le calque « en-tête bg » et en choisissant Copier le style du calque.
Revenez au groupe pied de page, cliquez avec le bouton droit sur le calque « footer bg » et sélectionnez Coller le style du calque. 
39sélectionnez l’outil de type horizontal (T) et ajoutez du texte de copyright et des liens de pied de page à gauche en utilisant la police Arial, la taille de 12pt et une couleur grise (#dddddd). 
40 Nous allons ajouter la section d’abonnement par e-mail à droite.
Créez un nouveau groupe à l’intérieur du groupe « pied de page » et nommez-le « s’abonner ». Sélectionnez l’outil Rectangle arrondi (U) et créez un rectangle de 85 pixels par 35 pixels. Nommez cette couche « subscribe btn ».
41 Répétez l’étape 26 pour ajouter les champs et les libellés du formulaire.
42 Sélectionnez l’outil de type horizontal (T) et tapez « Subscribe » en utilisant la police Arial, le style mis en gras et la taille à 13pt.
Sélectionnez les deux calques (« subscribe btn » et « Subscribe text »).
43 Répétez l’étape 28 pour créer le bouton s’abonner.
44 Sélectionnez l’outil Rectangle arrondi (U) et réglez le rayon sur 3px. Créez un rectangle arrondi de la taille 210px par 35px en utilisant une couleur blanche (#ffffff) et nommez ce calque de forme comme « champ de courrier électronique ». Ajoutez une ligne de texte au-dessus du « champ e-mail ».
Résultat final
OK, c’est tout et nous avons terminé. Voici le résultat final.
Cliquez sur l’image ci-dessous pour voir la mise en page en taille réelle. Merci d’avoir suivi mon tutoriel. J’espère que vous avez tous apprécié et appris quelque chose de nouveau de ce tutoriel.
Veuillez laisser vos commentaires ci-dessous et partager vos pensées et opinions, j’aimerais les entendre. Vous pouvez également partager ce tutoriel de conception avec vos amis si vous pensez que cela pourrait leur être utile!
Télécharger le fichier source
Vous pouvez télécharger le fichier Photoshop (PSD) de ce tutoriel à partir du lien ci-dessous sous forme d’archive ZIP.
- weblayout propre-professionnel (ZIP, 2,4 Mo)
Résumé
Si vous décidez d’utiliser cette conception, assurez-vous d’optimiser les images pour réduire le temps de chargement. Cette décision devrait être idéale pour les petits sites tels que celui d’un terrain de golf, car elle est simple, facile à utiliser et conviviale.
Contenu connexe
- Comment créer un Design de Blog propre avec Photoshop
- Codage d’un Web propre 2.0 Conception Web de style de Photoshop
- Créez une mise en page Web lisse et minimaliste dans Photoshop
À propos de l’auteur
Waheed Akhtar est un concepteur Web indépendant de Dubaï, Émirats Arabes Unis. Il est le fondateur et éditeur de Boost Inspiration, où il présente différentes ressources créatives d’Art Numérique, de Design Graphique, d’Illustration, de Photographie et de Typographie pour s’inspirer. Vous pouvez le joindre via Twitter ou Facebook.