Créer un design pour votre site web

Voilà un tutoriel pour apprendre comment créer un magnifique design pour votre site web grâce à Tutsps et Photoshop .

Avant de commencer téléchargez le pack suivant, puis ouvrez un nouveau document de 760×770 pixels résolution 72Dpi couleur RVB 8bits

Ajoutez un calque de remplissage dégradé en allant dans Menu > Calque > Nouveau calque de remplissage > Dégradé

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

Prenez l’outil rectangle arrondi (U) avec un rayon de 3px puis dessinez un rectangle blanc comme ceci

Créer un kit graphique avec photoshop

Dessinez un autre rectangle arrondi juste au centre de l’autre en plus petit de justes deux ou trois pixels et remplissez le avec du gris clair #ebebeb

Créer un kit graphique avec photoshop

Créez un nouveau calque (Ctrl+Shift+N), récupérer la sélection de votre dernier rectangle en vous mettant sur ce dernier puis allez dans Menu > Sélection > Récupéré la sélection

Créer un kit graphique avec photoshop

Revenez sur le calque que vous venez de créer et allez dans Menu > Filtre > Rendu > Nuages

Créer un kit graphique avec photoshop

Réduisez son opacité à 23%

Créer un kit graphique avec photoshop

Dessinez des déchirures avec le brushe que vous avez trouver dans le pack téléchargé en haut

Créer un kit graphique avec photoshop

Importez la texture suivante dans votre document

Créer un kit graphique avec photoshop

Changez son mode de fusion en incrustation

Créer un kit graphique avec photoshop

Maintenant avec l’outil gomme (E) effacez toute la partie qui dépasse le rectangle blanc

Créer un kit graphique avec photoshop

Sélectionnez tout les calque sauf le calque de remplissage dégradé et fusionnez-les en appuyant sur Ctrl+E ou en allant dans Menu > Calque > Fusionnez les calques, prenez l’outil gomme (E) et effacez les parties suivantes

Créer un kit graphique avec photoshop

Maintenant mettez vous juste au dessus du calque de remplissage dégradé et créez un nouveau calque (Ctrl+Shift+N) et dessinez avec les brushe floral comme ceci

Créer un kit graphique avec photoshop

Maintenant créer un nouveau calque puis dessinez avec l’outil plume (P) un tracé de flèche du coté gauche en haut du rectangle comme ceci

Créer un kit graphique avec photoshop

Allez ensuite dans l’onglet « Tracés », cliquez avec le bouton droit de la souris sur tracé de travail puis sur fond du tracé, choisissez la couleur suivante pour le fond #88e1ff

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

Dupliquez votre flèche quatre fois tout en réduisant l’opacité de ces derniers pour obtenir ce ci

Créer un kit graphique avec photoshop

Faite la même chose pour l’autre coté et dessinez des ronds avec l’outil forme personnalisée (U) pour avoir le résultat suivant

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

Maintenant importez l’image suivante dans votre document

Créer un kit graphique avec photoshop

Changez son mode de fusion en Produit

Créer un kit graphique avec photoshop

Avec l’outil gomme (E) effacez les zone qui dépassent

Créer un kit graphique avec photoshop

Ensuite dessinez un rectangle comme ceci

Créer un kit graphique avec photoshop

Appliquez dessus les options de fusion suivantes

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

Créer un kit graphique avec photoshop

voilà le résulta

Créer un kit graphique avec photoshop

Ajoutez vos textes pour le menu

Créer un kit graphique avec photoshop

Dessinez deux autres rectangles Noir

Créer un kit graphique avec photoshop

Changez leurs modes de fusion en incrustation et réduisez leurs fonds à 30%

Créer un kit graphique avec photoshop

Ajoutez quelques images comme ceci

Créer un kit graphique avec photoshop

Pour finir ajoutez votre logo et vos autres textes et voilà le résultat final en attendant d’autre tuto pour le découpage et la mise en page CSS/Xhtml

Créer un kit graphique avec photoshop

42 COMMENTAIRES

  1. Salut, c’est génial, mais après, on fait comment avec le CSS ? Je m’y connais un peu, mais comment je fais pour faire les menus, et tout ?!

  2. Trop cool !!

    Je gère le CSS mais je galère toujours a trouver des idées originales !! Mais là grace au tuto, j’ai plein d’idées qui me viennent en tête ^^

    Des autres ! Des autres ! (mdr)
    Mercii =)

  3. SUPERBE merci beaucoup Grafolog !! 🙂
    Je l’avais posté dans Demande de Création et il a était crée vraiment merci beaucoup !! J’admire ton TRAVAIL !! 🙂 :mdr:

  4. Bonjour, je bloque à cette étape : Créez un nouveau calque (Ctrl+Shift+N), récupérer la sélection de votre dernier rectangle en vous mettant sur ce dernier puis allez dans Menu > Sélection > Récupéré la sélection.

    Peut-on m’aider s’il vous plait ? :S

  5. Vraiment très beau travail sur ce site où je viens régulièrement voir les nouveautés. Je me demande cependant comment fait on pour créer un site à partir d’une création via photoshop ? Je n’y connais rien à vrai dire mais cette question me turlupine.
    Gros bisous à vous tous et continuez de nous faire écarquiller les yeux a chacune de vos créations !!

  6. Bonjour,

    Je bloque aussi à ce niveau : Créez un nouveau calque (Ctrl+Shift+N), récupérer la sélection de votre dernier rectangle en vous mettant sur ce dernier puis allez dans Menu > Sélection > Récupéré la sélection.

    Je ne peux pas cliquer sur “récupérer la sélection” car c’est en grisé. Pouvez-vous m’aider s’il vous plait ? Merci !

  7. Merci beaucoup pour ce tuto!

    Pour ceux qui bloquent à l’étape des nuages, il vous faut maintenir ctrl et cliquer sur le calque de la forme, puis ensuite cocher “ajouter à la sélection”. Vérifier aussi que dans la palette des couleurs le noir est en premier plan et le blanc en second plan, sinon ça vous fera des nuages blancs! ; )

  8. bonjour tous le monde c’est bien sa mais en l’appliquant j’ai rencontrer une diffuculté c’est que comment Dessinez des déchirures avec le brushe que vous avez trouver dans le pack téléchargé en haut j’ai pas trouver comment je peu utilise sa??? merci de me repond. 🙂

  9. tuto sympatique !

    Pour l’intégration en html/css l’outils de tranche,
    (Ctrl + Alt + MAJ + S pour exporter la tranche)
    et les “background repeat-xy” en css devrait en aider plus d’un

  10. Oui mais non… Très intéressant du point de vue graphique, rien à dire pour ce qui est de faire joujou avec le soft. Mais cet exemple va faire sourire les pros qui traînent par ici…

  11. waw que c’est beau !! je doute que je réussirai a faire quelque chose comm ça moi ! car ça se voit que toi t’es un pro de photoshop ! mais pa moi ;-( bravo !!!

  12. Personnellement je ne suis pas très fan du rendu final mais tout est question de goût.
    Par contre bon courage pour l’intégration html/css. Il faut vraiment que le contenu texte cadre pile poil avec le gabarit.
    Pour un contenu type blog (je pense à cela en voyant le terme news) où la hauteur varie d’une page à l’autre, il faudrait penser à un motif qui puisse se répéter sans casser le design général.

LAISSER UNE RÉPONSE