[Documentation] Réaliser une interface web sous Photoshop
Par TitaX le lundi 12 mai 2008, 09:00 - Documentation - Lien permanent
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) :
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 :
Vous devez donc avoir deux calques comme ceci :
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 !
Créez un nouveau calque "header", insérez l'image "header" et mettez celui-ci en haut du calque "body".
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 :
Pareil pour l'ombre portée :
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".
Et voilà, le design est enfin prêt à être découpé !
A vous de jouer maintenant, vous avez toutes les cartes entre les mains 
(Merci à Freak. pour la rédaction de cette documentation)
Commentaires