Création d’une interface graphique complète - City Blue
Une ville avec ces grattes ciel c’est beau, revue et corrigée avec Photoshop c’est encore mieux !
- Fichier PSD tutorial 90
- clic pour télécharger le fichier PSD utilisé dans ce tutorial
ETAPE 1
J’ouvre ma photo de grattes ciel !
ETAPE 2
Avec l’outil plume, je repasse les grattes ciel.
ETAPE 3
Je change la largeur de ma zone de travail à 800 pixels, je duplique la forme des immeubles autant de fois que nécessaire pour couvrir la largeur totale.
ETAPE 4
Je vais maintenant ajouter un fond sympa à ma ville, voir ce tutorial pour toutes les explications.
ETAPE 5
Je change à nouveau la taille de la zone de travail pour la passer à 900 sur 600 pixels. Je crée un nouveau calque et avec l’outil sélection je remplis de bandes blanches sur les côtés.
ETAPE 6
Je remplis le bas de la page avec un bleu foncé.
ETAPE 7
Je crée un menu entre le noir et le bleu foncé avec l’outil rectangle arrondi et l’outil texte.
ETAPE 8
J’ajoute une bordure sur les bandes blanches de la couleur du bas. Pour cela je vais dans calque > style de calque > contour (5 pixels).
ETAPE 9
Je crée un nouveau calque et avec la sélection je remplis de noir la totalité de ma composition hormis les bandes blanches.
Puis j’applique un flou graussien de 5 (filtre > flou > flou graussien).
Et enfin je reprends la même sélection que précédemment et j’appuie sur supprimer.
ETAPE 10
Avec l’outil sélection, je remplis une barre verticale sur un nouveau calque qui servira au menu, j’applique une bordure, comme sur les bordures blanches.
ETAPE 11
Attention cette étape est un peu fastidieuse :
Je duplique mon menu et je supprime le style de calque, ce nouveau calque je le nomme ombre menu.
Je passe ombre menu sous le calque menu et j’applique un flou graussien de 10.
J’appuie sur Ctrl + T et je tourne légèrement ombre menu sur la gauche. Je décale ombre menu de 5 pixels sur la gauche.
Je duplique ombre menu et je le décale d’environ 20 pixels sur sa gauche et je modifie son mode en incrustation. Je change l’opacité à 50%.
Et enfin je supprime toute la partie inutile sur le bas de l’image.
ETAPE 12
Enfin j’ajoute un dégradé de couleurs sur les bordures blanches.
J’agrémente le tout avec mon contenu.
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|
en fait il faut faire exactement comme tu as dit, sur les images du menu on vas placer en plus un petit code javascript qui vas permuter l’image afficher au chargement de la page par une autre, on appel cela le rollover. Si tu veux je peux te poster ici un code permetant de faire un rollover.
