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.

SUITE DE CE TUTORIAL