Design de site business | Snoupix

Voici un tutoriel Photoshop qui vous apprend à faire le design d'un site "business". Ce genre de design est plutôt destiné à des entreprises désirant posséder un site vitrine.

Voilà le résultat final :

Pour créer ce design, j'ai utilisé des images venant du site de photos gratuites Stock.XCHNG.

Étape 1 : le background

On commence ce tuto par créer un nouveau document de 1000x900 pixels. J'utilise comme background un motif que vous pouvez récupérer sur cette page. Il faut placer le fichier dans Adobe>Photoshop>Paramètres prédéfinis>Motifs. Créez un calque que vous appellez "background" et remplissez-le de noir avec l'outil pot de peinture. Il suffit ensuite d'appliquer le motif via les styles de calque dans "Incrustation de motif" avec comme opacité 5.

Créez un nouveau calque, avec l'outil pinceau, sélectionnez une forme ovale "arrondi flou" d'une taille de 1000 et d'une opacité de 30, cliquez au centre du calque. Vous obtenez ceci:

Étape 2 : le header

Pour créer le header, j'utilise une photo disponible ici (il est nécéssaire d'être identifié sur le site pour pouvoir télécharger les photos).

Je commence par créer un rectangle avec l'outil qui porte le même nom. Je place mon curseur en haut et au centre de ma composition, je maintiens la touche "Alt" et je dessine mon rectangle qui va s'agrandir de manière uniforme.

J'applique ces styles au calque:

Je crée un nouveau calque, je sélectionne le rectangle en faisant "Ctrl+click" sur le calque du rectangle. Et j'applique un petit dégradé horizontal du noir vers le transparent, en allant du bord gauche du rectangle vers la droite.

On obtient ceci:

Maintenant, je prend la photo de l'ordinateur portable, je la place sur la droite du rectangle en la redimensionnant à une taille correcte. J'applique à ce calque un "masque vectoriel" en cliquant sur ce bouton en bas de la palette des calques:

Ensuite avec l'outil dégradé du noir vers le transparent, je traçe horizontalement un dégradé de la gauche vers la droite de l'image afin de donner cet aspect de fusion entre le rectangle et la photo.

Pour le titre, j'utilise la police Cleveland Condensed, j'applique simplement une ombre portée et une dégradé:

Au final voici ce que l'on obtient:

Pour créer le menu, je prend l'outil rectangle, je trace quatre rectangles identiques. J'applique une ombre portée d'angle -90°, distance 3, taille 5. Une incrustation en couleur #161616. Et un contour d'1px, dégradé du noir vers le blanc avec une échelle à 150%. La police utilisée est le Trebuchet MS.

Étape 3 : le premier bloc

Pour créer ce premier bloc, je trace un rectangle blanc de la même largeur que le header. Je vais dans les styles de calque et je lui applique une incrustation en dégradé d'angle 90° et du gris (#8e8e8e) vers le transparent.

Pour donner cet effet au trait qui sépare le titre du texte, je commence par tracer un trait avec l'outil du même nom. J'applique un masque vectoriel au casque comme on l'a vu précédement. Il suffit ensuite de prendre l'outil dégradé du noir vers le transparent et d'appliquer ce dégradé sur les deux côtés du trait.

Au niveau du cadre entourant cette image, je crée par dessus l'image un rectangle un peu plus grand que celle-ci afin d'avoir la bonne largeur du cadre. Je sélectionne ensuite l'image en faisant "Ctrl+click" sur le calque de l'image. Je fais clic-droit sur le calque du rectangle et "pixelliser le calque". Je peux désormais appuyer sur la touch "suppr" en faisant attention d'être sur le calque récemment pixéllisé. Il ne me reste plus que le contour qui m'intéresse.

Il suffit ensuite d'appliquer ces styles de calque:

Étape 4 : le dernier bloc

Pour ce bloc, j'utilise la police Gentium Book Basic disponible sur yensdesign, et Gautami.

Sa largeur est la même que le bloc du dessus, et le style également. Je reprend le même principe pour encadrer l'image de gauche.

Je crée trois parties avec un titre pour chacune d'elle. Les icônes "check" et le globe sont disponibles ici.

Dans cette partie, il n'y a rien de nouveau comme élément. J'ai repris le trait du premier bloc et lui ai appliqué une transformation ("Ctrl+T", click-droit sur le trait et "rotation 90° antihoraire").

Je vous laisse découvrir ce design avec le .psd que vous pouvez télécharger au début du tutoriel.

Rendu final: