32
Interface graphique, finition du header et ajout du logo
Ce tutorial est l’étape 2 de celui-ci : Création d’un header complet, pixel par pixel.
Nous allons maintenant attaquer la finition du header et du menu, nous allons ensuite intégrer un logo et un sous menu.
Allez c’est parti ...
ETAPE 1
Nous allons ajoutez notre texte au menu, créez donc un dossier et créez grâce à l’outil texte votre premier lien, puis le second, le troisième et le quatrième.
Dans notre exemple nous utilisons la police de caractères Krugthep.
Une fois vos textes écris passez chaque calque en opacité 80%.
ETAPE 2
J’ai décidé de créer prochainement un rollover sur mon site, il faut donc prévoir une seconde version du menu.
Un rollover c’est le changement d’un lien lorsque l’on passe la souris par dessus.
Pour y parvenir groupez tous les calques correspondant au menu dans un dossier que vous nommerez menu 1.
Dupliquez ce calque, et changez le dégradé du calque menu.
ETAPE 3
Nous allons créer également un effet sur les textes, pour cela vous allez remonter de quelques pixels chacun des textes et ajouter en dessous une petite flèche blanche (vous trouverez une belle flèche dans les formes personnalisées de Photoshop).
Passez les calques de vos flèches en opacité 80%.
ETAPE 4
Nous allons modifier les lignes de séparation du haut et du bas pour qu’elles s’adaptent à la nouvelle couleur de notre menu. Pour cela sélectionnez chaque ligne grâce à l’outil sélection et modifiez la couleur avec le pot de peinture.
ETAPE 5
Cachez le menu bleu pour revenir à la version initiale. Nous allons maintenant appliquer un effet graphique sur le header, pour lui donner un petit effet High Tech.
Pour cela nous allons créer un motif : ouvrez un nouveau document de 3 pixels sur 3, créez un nouveau calque et supprimez l’arrière plan, grâce à la sélection faites un pixel blanc au milieu de votre image.
Dans les menus, allez dans édition > utiliser comme motif. Puis juste au dessus du header créez un nouveau calque, récupérez la sélection du haut (CTRL + clic sur le calque), enfin remplissez le tout avec votre motif et le pot de peinture.
Appelez ce calque point, changez le mode de fusion en incrustation et changez l’opacité de celui-ci à 20%.
ETAPE 6
Pour finir cette petite astuce graphique nous allons ajouter au calque point un masque de fusion, et nous allons appliquer un dégradé du haut vers le bas.
ETAPE 7
Nous pouvons maintenant insérer notre logo. Pour rappel un tutorial est disponible sur ce site pour créer un logo semblable : tutorial 76 : créer un logo pour votre site internet avec photoshop.
Vous remarquerez que nous avons utilisé deux couleurs importantes pour notre charte graphique, puisqu’il s’agit du gris de notre menu et du bleu de notre menu rollover.
ETAPE 8
Inutile de surcharger d’avantage notre interface graphique, pour la suite le mot d’ordre sera la simplicité, et nous allons appliquer cette règle dès maintenant. Nous allons créer notre sous menu, pour cela créez simplement un rectangle arrondi de 5 pixels sous le menu.
ETAPE 9
Nous allons tout de même lui appliquer un petit dégradé, histoire qu’il devienne une vrai continuité de notre premier menu, utilisez les mêmes couleurs que sur notre premier menu.
DANS LE PROCHAIN TUTORIEL
Nous nous intéresserons au footer ainsi qu’à la conception de quelques boutons : ajout en favoris, page d’accueil, contact, et page de démarrage.
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.
-
-
8 mars 2007 12:30, par Wonka
très bientôt je pense, en ce moment j’ai vraiment plein de chose à faire
Répondre
-
16 mars 2007 19:09, par thomas59113
J’espere que la suite sera bientot la Merci pour tout c’est super de voir quelqu’un apprendre au autres
Répondre-
30 mars 2007 23:10, par thomas59113@hotmail.com
J’attend la suite avec de plus en plus d’impatiente
Répondre
-
-
28 mai 2007 01:28, par sangoku59113
se qu il manque c’est juste quelques explication de quoi mettre dans notre html pour passé du noir au bleu ! Voila sinon merci pour tout .
Répondre-
29 mai 2007 13:02
Bon vu que tu ne repond pas je vais mettre la solution pour tous et au plus simple version html :
Répondre
-
-
-
-
15 février 2008 09:11, par Sin
Je suis débutant et je me demandais comment faire pour ne pas laisser notre création sur fond blanc ou gris foncé. Histoire que ca ne cloche pas... Mettre des bords ???
Je suis un peu perdu,
Merci d’avance.
Répondre -
30 octobre 2008 01:07
Sympa , genial les photos , mais si on sait pas ou trouver l’outil qui donne le resultat sur celle ci .....
Répondre-
28 janvier 2009 08:45, par Nino
Après avoir fais se tutoriel, je me suis intéressé de plus près a la programmation de site internet.
Il me vient alors une question :
Ta barre de menu contient quatre sections. Si j’encode en html une barre, comment faire pour cliquer sur une seule section en tant donné que toute sont lié par un même calque.
Je début depuis quelques heures sur le codage HTML.
Tu me dira surement qu’il suffit de les coupé en quatre. Mais si tu l’as fais comme ça, je pense que c’est qu’il est possible de faire autrement.
Sinon bah, respect pour ton site, il apporte beaucoup de réponse. Dommage que tu ne fais pas de tutoriaux pour dreamweaver et un peu plus pour flash et InDesign. Mais on peut pas être partout. Donc merci pour tout.
Répondre-
29 janvier 2009 11:03, par Wonka
Oui quand tu vas coder ton menu il faut le couper en petit morceau et le recoller grâce au html
Répondre tu avais raison.
-
-
-
18 juillet 2009 14:56, par guppy
bonjour à quand la suite de ce tuto bien expliquer merci part avance cordialement
Répondre
