tuto

Design de site business

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. demo source 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 1000×900 pixels. J’utilise comme …

 

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 :

Design business

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 1000×900 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.

dbgmotif1

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:

dbgmotif2

É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:

dheaderstyle1

dheaderstyle3

dheaderstyle4

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:

dheader1

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:

dheaderstyle5

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.

dheaderstyle6

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

dheaderstyle7

dheaderstyle8

Au final voici ce que l’on obtient:

dheaderfinal

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.

dheadermenu

É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.

dbloc1trait

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.

dbloc1contour

Il suffit ensuite d’appliquer ces styles de calque:

dbloc1contourstyle1

dbloc1contourstyle2

dbloc1contourstyle3

É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:

Design business

11 commentaires

S'abonner au RSS des commentaires
  1. firewolf
    Posté le 17/10/2010 à 16h58

    Super tuto merci , il me fallais undesign sur mon site ! Je vais me servir de cette technique , merci beaucoup !

  2. Stephane
    Posté le 24/04/2009 à 19h31

    De rien, n’hésite pas à nous montrer le résultat de ton intégration css.

  3. Simox
    Posté le 24/04/2009 à 19h03

    Merci infiniment car j’ai réussi grâce à toi ce que je voulais faire !

    Merci !

  4. Stephane
    Posté le 23/04/2009 à 22h05

    Essaye de donner un margin-top à ta div menu, afin de la déplacer vers le bas de la div header.
    Sinon, essaye de mettre ta div header en position:relative, et ta div menu en position:absolute, ensuite tu met un bottom:0; et left:0; sur ta div menu.

    Qqchose comme ça:

    #header{

    position:relative;
    }
    #menu{
    position:absolute;
    bottom:0;
    left:0;
    }

  5. Simox
    Posté le 23/04/2009 à 20h40

    C’est absolument ce que j’ai fait, mais mon menu s’affiche en haut a gauche du header (avec le float). Comment le rabaisser au niveau du bas du header ?

    Je suis nouveau dans ce domaine et j’ai vu les deux tutos vidéo que tu a cité plus haut, ils mon beaucoup donnés !

    Merci en tous cas de ta réponse !

  6. Stephane
    Posté le 23/04/2009 à 20h01

    Eh bien, il faudrait que tu ai une div header qui possèderait en background ton image du header. Et dans cette div tu pourrait créer une nouvelle div menu qui te permettrait ensuite de faire tout le menu en CSS sous forme de <ul> et <li>.

  7. Simox
    Posté le 23/04/2009 à 19h52

    Super tuto, très clair et efficace, merci.

    Je profite de ce commentaire pour d’abord te féliciter du tuto, mais aussi pour te demander comment pouvoir, avec du (x)HTML et du CSS, mettre le menu dans le header, (car normalement, selon mes faibles connaissances, on les met à gauche, à droite, ou sous le header) comme sur ce Webdesign si bien réussi !

    Merci d’avance,

    Simox.

  8. FredBty
    Posté le 18/04/2009 à 12h31

    Bonjour, bon tuto bien expliquer.

    Pour Marvelus, pas mal ton site mais on peut pas s’inscrire (forbidden acces flooding). Dommage pour les contributeurs potentiels. Ce qui pourrait être mon cas.

  9. Marvelus
    Posté le 17/04/2009 à 14h28

    Le tutoriel est exellent

    Je l’ai donc ajouté sur http://www.webmaster-aide.Com

    Dans l’attente de nouveaux tutos wink

  10. Stephane
    Posté le 03/04/2009 à 10h52

    Merci pour ton commentaire, content que ce tuto t’ai plu.

    Ta question est bien formulée et tout à fait pertinente. Les étapes que tu décris sont globalement correct: Après avoir fait ton design sur photoshop, tu le découpe en plusieurs parties, mais juste celle que tu ne peux pas créer avec ta feuille de style CSS.

    Ensuite tu dois l’intégrer (avec dreamweaver par exemple), mais pas de manière graphique, juste grâce au langage xHTML et aux feuille de style CSS.

    Pour cela je te conseil le tutoriel extrêmement complet pour apprendre à créer un site internet en xHTML et CSS: http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html

    En plus, voilà deux tutos pour apprendre à découper et intégrer un site:

    http://grafikart.fr/tutoriels/video/creer-un-site-web-decoupage-22

    http://grafikart.fr/tutoriels/video/coder-site-web-23

    Je suis sûr que si tu suis déjà ces trois tutos au complet, tu auras progressé énormément dans l’apprentissage de la création de site internet.

    Un tutoriel snoupix sur l’intégration d’un site viendra par la suite, n’hésite pas à revenir, des tutos sont régulièrement ajouté.

  11. home_software
    Posté le 02/04/2009 à 22h20

    Bonjour et merci pour ce tuto tres interessant.

    Mais je me pose une question technique pour le "aprés". J’ai trouvé de nombreux tutoriaux du meme type que celui ci (mais moins bien expliqués) sur la création sous photoshop du contenu d’un site. Parcontre j’aimerai savoir comment rendre actif ton site. Je veux dire. Une fois la création graphique achevée, je suppose que tu utilises l’outils de découpe de photoshop et que tu importes le tout dans dreamweaver par ex. Peux tu me decrire cette etape. Par un tutoriel ce serait parfait. je ne "visualise" pas le passage de l’etat graphique à l’etat interactif du site. Utilises tu des tableaux et tes images decoupées dans photoshop en "fond de cellule" ?

    Enfin … j’ai meme du mal à formuler ma question… Si tu arrives à me comprendre ce serait vraiment super! wink

    En tout cas, encore toutes mes felicitations j ‘adore le designe de ton site. Et son contenu me rend moins inculte en creation.

    Au plaisir.

    Home software

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>