Header
Partagez | 

[Astuce] Faire une interface graphique pour un site

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [Astuce] Faire une interface graphique pour un site   Sam 7 Mar - 12:37

L'interface graphique pour un site



Bonjour les p’tits loups ^^

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éez 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électionnez tout le bloc du centre.
2/ Le remplir avec un dégradé de votre choix.
3/ Ajoutez un contour blanc de 1px.

Spoiler:
 

D] La bannière

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

Spoiler:
 

E] Le menu de navigation

1/ Sélectionnez la partie représentant la navigation
2/ Prenez 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 découpage

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.



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].


Dernière édition par Miettes le Lun 18 Juil - 22:27, édité 1 fois
Revenir en haut Aller en bas


[Astuce] Faire une interface graphique pour un site
Page 1 sur 1
 Sujets similaires
-
» bannière pour mon site ( première animation)
» hébergeur gratuit pour un site rein quand flash(RESOLUT)
» Comment faire un lien vers un autre site?
» [Léo's tuts] Faire des jolis cadres pour les messages texte
» Petite bannière de publicité pour mon site
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Photoshop+