[Photoshop] [009] Faire une interface graphique pour un site

Ce tutoriel est proposé et évalué par le Who's Graph.

Réalisé par : Miettes
Source : School of Pub

Label décerné par le Who's Graph :

Commentaires :
Miettes : la suite de ce tuto est là : http://www.school-of-pub.net/t1372-tuto-html-css-faire-l-interface-graphique-de-son-site

Bonjour les p’tits lous ^^

Ce tuto est la première partie pour vous aider à réaliser rapidement une interface graphique de site. Ici, nous allons d’abord voir comment créer notre design avec photoshop. Vous êtes prêts ? Alors allons y ^^

---

Créer une nouvelle image de dimension 1024* 768

A] Ajout de grilles de repères

Ceux-ci vont nous permettre d’avoir une base pour travailler.
1/ Placer des grilles verticales à 75 et 950 px
2/ Placer des grilles horizontales à 20, 160, 190, 718 et 748px

Vous devriez avoir quelque chose qui ressemble à ça : (pour plus de facilité, j’ai numéroté les zones pour la suite du tutoriel)

Spoiler:

B] Le fond

1/ Remplir votre calque « arrière plan » avec une couleur unie de votre choix
Votre fond est fait.

C]Le cadre intérieur

1/ Sélectionner tout le bloc du centre.
2/ Le remplir avec un dégradé de votre choix.
3/ Ajouter un contour blanc de 1px.

Spoiler:

D] La bannière

1/ Sélectionner la partie représentant la bannière.
2/ Créer un nouveau calque appelé « bannière »
3/ Réaliser la bannière de votre choix.

Spoiler:

E] Le menu de navigation

1/ Sélectionner la partie représentant la navigation
2/ Prendre l’outil « texte », ajouter du texte en taille 18, centré.

Spoiler:

F] Le contenu

1/ Sélectionner la partie “contenu”
2/ Prendre l’outil “texte” ajouter du texte en taille 18. Ceci sera le titre de la page
3/ Ajouter ensuite le texte de votre page en taille 14, justifié.
4/ Le texte est collé à la bordure du cadre. Ce n’est pas terrible. Nous allons ajouter un espace de 20 px de chaque coté de celui-ci. Pour cela, créer 2 nouveaux repères de chaque coté du texte (vertical à 104 px et 920px)

Spoiler:

G] Le copyright

1/ Sélectionner la partie représentant le copyright.
2/ Prendre l’outil « texte », ajouter du texte en taille 12, centré.

Exemple de copyright : Contact : schoolofpub[at]yahoo.fr | Mentions légales | © School Of Pub

Spoiler:

Et voilà, l’interface de votre site est prête. Il ne reste plus qu’à découper chaque partie ^^.

H] Le decoupage

1/ Sélectionner chacune des parties et les enregistrer séparément dans un dossier appelé « images » (cela va nous servir pour le tuto de mise en page sur le net).

Vous devez avoir 4 images :

Spoiler:

Il ne nous reste plus qu’à mettre ça en code pour créer nos pages.