Voici un tutoriel très agréable à réaliser pour les pro et amateur créez votre propre kit graphique pourquoi gaspiller de l’argent pour acheter un kit qui ne vaut pas le coup alors voila la bonne affaire avec photoshop en plus 100% gratuite

Créer un kit graphique pour votre site web

Pour commencer ouvrez un nouveau document de 900×1000 pixels

Avec l’outil pot de peinture remplissez le fond avec du bleu foncé #003466

Tutoriel créer un kit graphique avec photoshop

Prenez l’outil dégradé (G) et ajoutez un dégradé plus foncé en haut

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Prenez l’outil rectangle arrondi (U) et dessinez un grand rectangle au milieu couleur Blanche rayon 10 px

Tutoriel créer un kit graphique avec photoshop

Dans les options de fusions de ce dernier appliquez une lueur externe comme ce ci

Tutoriel créer un kit graphique avec photoshop

Maintenant créez un nouveau calque (CTRL+SHIFT+N) et prenez l’outil rectangle de sélection et faite une sélection rectangulaire au niveau du footer (Bas de page)

Tutoriel créer un kit graphique avec photoshop

faite un dégradé avec l’outil dégradé avec la couleur suivante #015263 de bas ver le haut comme ce ci

Tutoriel créer un kit graphique avec photoshop

 

Ctrl+D pour dé-sélectionner puis maintenez la touche CTRL enfoncé et cliquez sur le calque du grand rectangle arrondi pour avoir sa sélection

Tutoriel créer un kit graphique avec photoshop

Ensuite allez dans Menu > Sélection > Intervertir puis appuyez sur le bouton supprimer pour enlever la partie extérieur du footer

Tutoriel créer un kit graphique avec photoshop

Tapez votre texte ou bien le copyright de votre site couleur utilisé #9b9b9b Fond du calque 53%

Tutoriel créer un kit graphique avec photoshop

Appliquez dessus les options de fusion suivante

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Créez un nouveau calque (CTRL+SHIFT+N) et Prenez l’outil rectangle de sélection et faite une sélection rectangulaire au niveau du Header (Haut de page)

Tutoriel créer un kit graphique avec photoshop

Faite un dégradé avec l’outil dégradé avec la couleur suivante #015263 de bas ver le haut comme ce ci

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Ctrl+D pour dé-sélectionner puis maintenez la touche CTRL enfoncé et cliquez sur le calque du grand rectangle arrondi pour avoir sa sélection

Ensuite allez dans Menu > Sélection > Intervertir puis appuyez sur le bouton supprimer pour enlever la partie extérieur du Header la même chose que vous avez fais pour le footer dans l’étape précédente

Appelons ce calque Header

Dans les options de fusions ajoutez un contour comme ce ci

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

 

Ajoutez un texte pour illustrer le menu du Header et appliquez les mêmes options de fusions que les précédentes (du texte du footer)

Tutoriel créer un kit graphique avec photoshop

faite une sélection rectangulaire au niveau du Header juste au dessus du mot accueil dans l’exemple suivant

Tutoriel créer un kit graphique avec photoshop

 

Faite un dégradé en utilisant l’outil dégradé avec la couleur suivante

Tutoriel créer un kit graphique avec photoshop

Changez la position de ce calque au dessous de celui du mot accueil mettez la couleur blanche pour le texte

Tutoriel créer un kit graphique avec photoshop

Mettez votre logo côté opposé j’ai mis un logo vite fais

Tutoriel créer un kit graphique avec photoshop

Maintenant ajoutez une photo professionnel pour la maitre au milieux

vous trouverez des images similaire ici

sxc.hu et ici Fotolia

ajustez la comme ce ci

Tutoriel créer un kit graphique avec photoshop

Prenez l’outil rectangle et dessinez un rectangle comme ce ci

Tutoriel créer un kit graphique avec photoshop

appliquez dessus les options de fusions suivantes :

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

voilà le résultat

Tutoriel créer un kit graphique avec photoshop

Maintenant nous allons ajouter un menu Horizontal

Tapez votre texte police utilisée Estrangelo Edessa

Tutoriel créer un kit graphique avec photoshop

En ce qui concerne les formes personnalisées appliquez les options de fusions suivantes

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

et voilà

Faite la même chose pour tout les textes de ce coté la

Tutoriel créer un kit graphique avec photoshop

Ajoutez aussi un message de bienvenu

Tutoriel créer un kit graphique avec photoshop

Et pour finir ajoutez quelques icônes pour illustrez les sous menu

Tutoriel créer un kit graphique avec photoshopTutoriel créer un kit graphique avec photoshop

Tutoriel créer un kit graphique avec photoshop

et voilà un super template (Kit graphique) fait maison et en plus 100% gratuit il ne reste que le découpage avec du Css dans une autre partie et très bientôt dans tutsps

Tutoriel créer un kit graphique avec photoshop

41 COMMENTAIRES

  1. Ce kit graphique est simple graphiquement mais cela ne l’empêche pas d’être vraiment joli.
    Etant donné que je suis nouveau sur ce site, je ne sais pas si un tuto expliquant la découpe du psd existe déjà. Si non, pourriez vous, s’il vous plait, en rédiger un.
    En tout cas, merci pour ce tuto 😉

  2. Très jolie, est assez simple.

    Il est vrai qu’un tuto sur la découpe serait super.
    Ainsi que sur le codage, comment mettre en place avec du code CSS.

  3. Pour le découpage dans CS3,
    vous pouvez aussi tout simplement mettre des guides à partir de la règle et cliquer sur:

              créer des tranches à partir des guides.

    qui est juste en dessus du menu filtre.

    Par la suite il vous est possible d’enregistrer chaque image ou parti de votre design séparément.

  4. Bon pour la découpe je vous conseille d’apprendre le html/css sur le site du zéro LOL
    Vous verrez que ce langage n’est pas compliquez et qu’il est simple d’apprentissage 😉
    Après comme IDE(Integrated Development Environment) je vous conseille Dreamweaver(suite adobe) ou sinon NVU,Firstpage qui sont des logiciel gratuit et encore pourquoi pas le bloc note 😉

    En espérant vous avoir aidez

  5. Pfffff, dès le début je plante =(.

    Au niveau du dégradé du bas, rien ne vas comme sur le tuto…
    Je pige rien …
    J’vais laissez tomber le graphisme je crois, sa me fait toujours ça …

    Nicolas.

  6. C’est re-moi ^^.

    Bon bah j’ai trouver, en fait il faut cliquer bien sur le rectangle et pas que sur le calque ^^.

    Merci pour ce tuto, j’ai enfin réussi à faire quelque chose \\o/.
    Et moi qui voulais refaire mon site web :p.
    Faut juste que je trouve comment découper le tout.

    Nicolas.

  7. bonsoir je viens de suivre le tuto j y suis arrive apres plusieur jour il faut dire je suis debutant ma question est pour pouvoir l utiliser sur un site comme page d accueil et pouvoir y affecter des lien quel langage dois je utiliser car j ai essaye avec php mais j ai du tous decoupe et le texte du menu j ai du l efface et remplacer par le texte par defaut de php qui ne donne pas aussi bien merci d avance pour vos reponse

  8. Bonjour, Sympa ce tutoriel, ceci dit il y a moyen de faire une bonne partie de la page en css uniquement et ca allégerais grandement le chargement. M’enfin beau design quand même 🙂

  9. Merci pour le tuto très intéressant!
    J’aimerais juste savoir comment faire les petits motifs à coté des titres de menu; ou bien c’est trivial.

  10. bonjour,

    je n’ai pas compris : “Ensuite allez dans Menu > Sélection > Intervertir puis appuyez sur le bouton supprimer pour enlever la partie extérieur du footer ” —>c’est quoi ce bouton supprimer ?

    Merci si quelqu’un peut m’éclairer.

  11. J’adore tes tutos, je les trouves très bien fait mais j’arrive pas à supprimer l’extérieur du footer comme tu explique.

    Et j’aimerai aussi savoir si qqn à trouvé comment découper son psd^^

  12. Pour la découpe, il existe un outil intégré à photoshop nommé “outil tranche”, qui permet de diviser son site en bloc (qui seront ensuite des div ou table en CSS). Exemple :
    – Je sélectionne mes bloc avec l’outil
    – Je sélectionne enregistrer pour le web et les périphériques
    – Photoshop crée un dossier avec vos images découpées.

    Je reviendrais vers vous car j’ai bientôt fini un projet de site pour apprendre à créer des sites très design de A à Z.

    Si je peux aider, je suis disponible par mail/messenger à 78450@live.fr,

    Mawx, 17 ans, Webdesig, Graphisme, Programmation.

  13. Bonjour, j’ai découper mes images mais maintenant je ne peut plus modifier le texte sur les bouton par exemple ou encore le texte des menu, comment faut il procéder ?

  14. shadow, facile il faut REFAIRE la partie ou tout a refaire dsl c le petit probleme ou bien tu créer que le bouton ou a la place du texte de toshop tu ecris toi même mais il faut connaître le html 😉

  15. shadow, facile il faut REFAIRE la partie ou tout a refaire dsl c le petit probleme ou bien tu créer que le bouton ou a la place du texte de toshop tu ecris toi même mais il faut connaître le html 😉

  16. Merci bien pour le super tuto , le résultat m’a plut 🙂
    mais je bloc un peu prés au début :-O exactement la :
    Ensuite allez dans Menu > Sélection > Intervertir
    l’option ‘Intervertir’ est désactivée chez mois (en gris) , je comprends pas qu’est ce qu’il l’empêche d’être en cas d’activation !..qlq’un peut m’expliquer ou je me suis trompé ?

  17. en fin j’ai trouvé LOL j’explique pour les débutants comme moi 😎 : Ctrl+D pour dé-sélectionner puis maintenez la touche CTRL enfoncé et cliquez sur LA VIGNETTE de calque du grand rectangle arrondi pour avoir sa sélection.
    je répète c’est la vignette du calque qui doit etre cliquer et il vas pas avoir la selection bleu comma ca on trouvera l’option ‘Intervertir’ active dans la menu (désolé pour mon français)

  18. Merci à toi je debut je bloqué maintenant j’ai réussi 😀

    “en fin j’ai trouvé LOL j’explique pour les débutants comme moi 😎 : Ctrl+D pour dé-sélectionner puis maintenez la touche CTRL enfoncé et cliquez sur LA VIGNETTE de calque du grand rectangle arrondi pour avoir sa sélection.
    je répète c’est la vignette du calque qui doit etre cliquer et il vas pas avoir la selection bleu comma ca on trouvera l’option ‘Intervertir’ active dans la menu (désolé pour mon français)”

  19. Merci pour ce super tuto, toujours trés util, il y avait bien longtemps que je n’avais pas plongé le nez dans Photoshop mais pour raison professionnel crétion d’un site web pour mon entreprise d’ailleurs voici le lien
    http://lutun-nett.perso.sfr.fr/Inde
    (si le design lors de votre visite parait pourri, ça doit être que l’ancien est toujours en place le temps de coder tout çà)
    Encore merci pour ce super tuto.

Répondre à hamza Annuler la réponse