La création d'interface graphique pour un site web est souvent un exercice difficile dans lequel il faut maitriser beaucoup d'outils spécifiques à Photoshop mais aussi avoir une vision précise de l'interface de nous voulons créer afin de faciliter son intégration pour le futur développeur qui devra s'occuper du découpage de l'interface.
Plusieurs facteurs sont donc à prendre en compte aussi bien sur l'harmonie des couleurs, la disposition des blocs mais aussi la faisabilité de la découpe de votre futur interface, nous allons vous présenter comment réaliser une interface simple, facile à découper et qui pourtant répondra à la majorité des cahiers des charges de vos demandes en interface graphique de site web.
Cette documentation tout d'abord au débutant mais pourra aussi convenir aux utilisateurs de Photoshop plus aguerri.
Pour cette documentation nous aurons tout d'abord besoin de ces deux images qui seront utilisées pour le haut de l'interface (header) et le bas de l'interface (footer) :
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface1.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-2.jpeg)
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface2.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-3.jpeg)
Créez un nouveau document de 1000*600 pixels et remplissez le en blanc.
Créez un nouveau calque "motif" et remplissez le avec ce motif :
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface3.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-4.jpeg)
Vous devez donc avoir deux calques comme ceci :
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface4.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-5.jpeg)
Créez un nouveau calque, que vous appellerez "body" (au dessus du calque "motif").
Sur le calque "body", faire une sélection rectangulaire (M) de 692px de largeur et 600px de hauteur. Remplissez la sélection de blanc.
Cliquez droit sur le calque "body" puis Option de fusion et ajouter une ombre portée de 36% d'opacité, distance 0, grossi 0, taille 6, d'un angle 90°.
Puis valider !
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface5.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-6.jpeg)
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface6.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-7.jpeg)
Créez un nouveau calque "header", insérez l'image "header" et mettez celui-ci en haut du calque "body".
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface7.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-8.jpeg)
Créez un nouveau calque "dégradé". Faire une sélection, remplissez de blanc puis aller dans les options de fusion et mettez les mêmes valeurs que sur l'image ci-dessous :
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface8.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-9.jpeg)
Pareil pour l'ombre portée :
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface9.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-10.jpeg)
Dupliquez le calque "dégradé" puis mettez le en bas du design.
Importez l'image "footer" et mettez là en dessous du calque "dégradé copie".
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface10.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-11.jpeg)
Et voilà, le design est enfin prêt à être découpé !
![[Documentation] Réaliser une interface web sous Photoshop tuto_interface11.jpg](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-12.jpeg)
A vous de jouer maintenant, vous avez toutes les cartes entre les mains
![[Documentation] Réaliser une interface web sous Photoshop :)](http://media.paperblog.fr/i/69/696610/documentation-realiser-interface-web-sous-pho-L-13.jpeg)
(Merci à Freak. pour la rédaction de cette documentation)