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 faciliter, 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 :
Il ne nous reste plus qu’à mettre ça en code pour créer nos pages.
Des questions ? C'est [ici]
