32
Création d’un header complet, pixel par pixel
Nous allons créer le header d’un site internet. Le header correspond à la partie supérieur d’une charte graphique.
Ce header correspond aux interfaces sombres, stylisé web 2.0, le must c’est que cette technique est simple et le rendus est très bon.
Go...
ETAPE 1
Créer une nouveau calque correspondant à la taille de votre interface, personnellement j’utilise souvent une image de taille 900X600 pixels de cotés. Puis remplissez l’image de votre couleur de fond : #8c95a1.
ETAPE 2
En haut de votre image créer une sélection horizontale, créer un nouveau calque et remplir votre sélection avec une couleur un ton plus foncé que votre arrière plan (dans notre exemple nous utilisons la couleur : #62676d).
ETAPE 3
Nous allons créer un style sur ce calque en ajoutant un dégradé.
ETAPE 4
Créer un nouveau calque, et faite comme à l’étape précédente. Seulement cette fois nous allons créer le menu, donc créer une barre horizontale plus petite.
ETAPE 5
Récupérez la sélection de votre menu : pomme plus click sur le calque, coupez en deux cette sélection dans le sens de la largeur, créez un nouveau calque, remplir de blanc la sélection puis baissez l’opacité de celui-ci à 20%.
ETAPE 6
Nous allons créer une limite entre le haut et le menu, pour cela créez un nouveau calque puis faite une sélection de 1 pixels sur toute la largeur, créer ensuite une ligne gris claire, gris foncé, gris clair. Voir l’exemple ci-dessous.
ETAPE 7
Nous allons maintenant créer la limite bas du menu, pour commencer vous allez ajouter une ombre portée à votre calque menu.
Ensuite comme dans l’étape 6, créez un nouveau calque et remplissez deux lignes de 1 pixel de hauteur, gris foncé, puis gris clair.
ETAPE 8
Nous allons ici donner un peu de profondeur à notre reflet, pour cela retournez sur le calque en question et ajoutez y un masque de fusion, Et appliquez un dégradé comme dans l’exemple ci dessous.
ETAPE 9
Nous allons créez les barres de séparation, pour cela rien de plus, ajoutez un nouveau calque que vous appellerez Barre 1, puis avec la sélection remplissez une barre vertical de gris foncé, puis sur sa droite une autre de gris clair.
Puis avez un masque de fusion caché partiellement le haut et le bas de votre barre de séparation, comme dans l’exemple ci dessous.
ETAPE 10
Répartissez de façon égal et sur toute la largeur de votre menu vos barres de séparations (en dupliquant le calque).
ETAPE 11
Le menu en lui même est maintenant terminé, je vous propose cependant un zoom sur les différentes lignes de ce menu.
ETAPE 12
Le but c’est quand même de pouvoir créer une interface graphique complète, dans le prochain tutorial nous continuerons avec la création du logo, du texte, ainsi que l’insertion d’un menu horizontale supplémentaire.
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 15 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 mars 2007 00:36, par toto59113
Slt , merci pour tout ces tutos ils sont super et comprehensible ,j’attend la suite de ce tutos avec impatience
Répondre-
1er mars 2007 13:57, par Wonka
Normalement la suite devrait venir aujourd’hui avec la partie 2, finition du header et insertion d’un logo
Merci pour tes encouragements.
Répondre-
2 mars 2007 17:32, par thomas59113
Rebonjour ,
Répondre
j’ai essayer ce tutorial je le trouve vraiment bien mais je n’arrive pas a faire une seul chose :
à la derniere étape tu arrives à mettre 2 mask pour integrer ta barre vertical moi je n’arrive pas a inserer le 2eme pourrai tu m aider stp (en gros j ai le dégradé en haut mais pas en bas ou ll’inverse je l ai en bas mais pas en haut
Merci d’avance-
2 mars 2007 18:26, par Wonka
En fait tu utilises un seul masque de fusion et non deux ,) l’astuce c’est d’utiliser un dégradé avec la configuration suivante :
Couleur blanche opacité 100% Vers une couleur blanche OPACITE 0%
Et oui je suis sur que tu utilisais un degradé blanc sur noir à 100% d’opacité pour les deux cotés.
Essaye tu vas voir le rèsultat.
Répondre-
28 mai 2007 00:20, par sangoku59113
Je viens de reessayer avec tes conseils mais j ai toujours pas compris impossible de faire un degradé de blanc sur blanc ca fais rien du tout peut tu m expliquer stp merci d’avance
Répondre
-
-
-
-
-
7 avril 2007 00:36, par Hervé
Rhôlala, alors moi j’y arrive pas...je plante à l’étape 8. Décidément je maîtrise pas les masques de fusion
Peux-tu détailler cette étape ? Comment applique-t-on un masque de fusion à un calque, comment affecte-t-on un dégradé au masque ?
Merci pour ton aide
Répondre
-
11 juillet 2007 13:11
Bonjour, super merci à Wonka , pour tt ces tutos bien sympa pour apprendre à utiliser photoshop . moi j’ai tt fais loll mais pas pareil comme je n’avais pas trouvé comment faire pour l’etape 9 le masque de fusion sur les ligne verticale des séparations , j’ai fais des lignes avec l’outil trait que j’ai pixellisé, j’ai fusionné les deux calques de mes lignes , puis j’ai utilisé la gomme pour effacer partiellement en haut et en bas ..... n’etant pas du tout un expert , j’ai vraiment fais comme j’ai pu loll, mais le rendu est semble t il pareil , et je suis certain qu’il y a plus simple pour arrivé au résultats
a bientot
Répondre-
11 juillet 2007 15:23, par Wonka
Effectivement il y a toujours plusieurs méthodes pour déboucher au même rèsultat
Répondre Bonne chance pour la suite !
-
-
25 juillet 2007 16:23, par Nicolas
Bravo Wonka, grâce à toi je m’innicie au webdesign ! Le devellopement je sais faire mais le design, j’ai du mal. Il faut dire que je n’ais que 15 ans aussi. Encore merci je suis tes tutos avec attention.
Répondre-
25 juillet 2007 16:26, par Wonka
Merci je te renvois le compliment car ton site est vraiment très bien fait
Répondre Bonne continuation !
-
-
25 janvier 2009 21:35, par tino - abidjan
salut Wonka ,j’ai connu votre tuto par l’intermédiaire d’un ami. depuis ,je ne peux plus m’en passer.je suis dessinateur de BD residant a Abidjan . je me forme au web design grâce a vous. je suis sublimé par votre créa .je vous expédierai ce que j’ai fait ! je ne savais pas que photoshop avait autant de fonction . merci
Répondre -
22 février 2011 13:05, par paulbaumann
Merci Wonka !
4 ans après tes tutos servent toujours ne t’inquiètes pas, et par pitié, continues de nous en apprendre toujours plus !
Merci encore infiniment.
Répondre -
15 août 2011 11:49, par ValKil
Merci beaucoup +1000 pour ton tutaux cela va sacrement m’aider
Répondre
