32
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.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 12 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
1er mai 2007 23:50, par n3x1n
Bonjour, Dabors je te remercie pour le tuto, il est vraiment sympa :p . Au niveau de photoshop ça va aller mais au niveau de html etc, je vois pas trop :s:s:s C’est surtout le menu qui me gêne.... comment on fait pour le menu ??? A chaque fois qu’on passe la souris sur le menu, ca va remplacer par une autre image ou... ?? J’aimerais bien que tu m’explique s’il te plaît. Je suis pas un débutant mais je suis pas un pro non plus XD
à bientôt !
Répondre-
2 mai 2007 08:13, par Wonka
Evidemment
Répondre
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.-
2 mai 2007 14:08
Ce sera vraiement trop cool pour le code :p Merci beaucoup
Au fait, j’ai un petit problème ^^" L’étape 9 n’est pas assez clair je trouve.
Par exemple, lorsque tu dis :« ... avec la sélection je remplie de noir la totalité de ma composition .... »
Quelle sélection ? On a rien sélectionné à l’étape précedent, enfin je crois :p En plus l’étape 9 est un des étapes plus important...Voilà tout ce que j’aie fait pour l’instant :
http://membres.lycos.fr/n3x1n2/INTERFACE.psd
Répondre-
6 mai 2007 18:36, par n3x1n
Heu...en faite je viens de réussir l’étape 9 ^^"
PS : j’attends toujours les codes :p
Répondre
-
-
-
-
3 août 2007 17:22, par KoV
Bonjour, avant tout merci pour le travail accompli.
Question : pourquoi ne voit-on plus les bandes blanches à partir de l’étape 6 ?
Merci et bonne continuation
Répondre -
25 janvier 2008 14:16, par Front
Hello,
Merci pour ce tuto =) Que penses-tu de ma création ? Y a t-il des changements à faire pour l’améliorer ? J’ai juste pas réussi à positionner ma barre de menu..... Quel CSS as-tu utilisé ?
http://loups-garous.org/design_vecto/
A++
Répondre -
18 avril 2008 02:14, par Jérémy
Merci pour ce tutoriel
Dans l’étape 4, vous ecrivez : « Je vais maintenant ajouter un fond sympa à ma ville, voir ce tutorial pour toutes les explications. »
Quel tutoriel ? Serait-ce possible d’avoir le lien ?
Merci d’avance, Jérémy
Répondre-
15 janvier 2009 13:18, par guest120
Bonjour,merci pour se supèr tuto ! Mais comme dois-je faire pour créer mon site et que l’intereface que tu nous a appris à faire soit actif sur le site. Du genre Quant on clique sur service ya les services qui s’affichent etc... Merci d’avance bonne journée !
Répondre-
15 janvier 2009 18:00, par Wonka
Il faut maintenant la découper puis la coder avec le langage informatique de programmation HTML et CSS pour la mise en page global de ta page internet. Voila si tu fais une recherche dans google avec le mot clé HTML tu trouveras plein de site qui explique très bien l’utilisation
Répondre Bonne chance.
-
-
-
28 février 2009 12:35, par Saga
Merci pour ce tutoriel
Dans l’étape 4, vous ecrivez : « Je vais maintenant ajouter un fond sympa à ma ville, voir ce tutorial pour toutes les explications. »
Quel tutoriel ? Serait-ce possible d’avoir le lien ?
Merci d’avance, Jérémy
Moi aussi j’aimerai bien avoir un lien pour ce tutoriel si c’est possible :).
Répondre -
12 avril 2009 19:51, par Cha-cha
Heu... je ne sais pas manier photoshop ou apprendre ? Car je n’arrive pas a repasser avec la plume !Merci de me répondre a mon adresse e-mail ! (petitecha-cha@hotmail.fr)
Répondre
