Créer un kit graphique pour votre site web
Pour commencer ouvrez un nouveau document de 900x1000 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 supprimerpour 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 supprimerpour 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 accueildans 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 couleurblanche 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