Crer un header pour votre site web

Crer un header pour votre site web

jeudi, fvrier 19 2009Webdesign21 commentairesaucun rtrolienCrer un header pour votre site web

Crer un nouveau document de760x150 pixelsPrenezl'outil rectangle arrondi (U)avec un rayon de 15px

Ensuite appliquezles options de fusion suivantes

Prenezl'outil ellipseet dessinez un rond comme ce si

Rglez le fond a 0%

Dansles options de fusionappliquez undgrad blanc

Prenezl'outil rectangle (U)et dessiner un rectangle en bas de votre header

Ensuite allez Menu > Calque > Pixellisation > Calque.En suite avec la touche Ctrl enfoncer cliquer sur le calque de votre premire forme par dfaut nommerForme 1bien sure pour rcuprer la slection de votre header

Puis Allez Menu > Slection > Intervertir. Slectionnez le dernier calque que vous venez de crer et appuyez sur lebouton supprimer.Appliquezles options de fusions suivantes

Prenezl'outil Traitet dessinez unpetit traitdans la zone verte rglezl'opacit a 27%.

Dupliquezvotre calque et dplacez le vers la gauche pour faire votre menu puis slectionnez ces derniers et fusionnez les

Maintenant prenezl'outil plumeet dessinez une ligne casse comme ce si

Faite comme vous le montre l'illustration suivante:

Les flches rouges veulent dire: maintenez la touche Alt enfoncer puis tirez droite.

La flche jaune veut dire: maintenez la touche Ctrl enfoncer puis tirez en haut.

Ensuite slectionnezl'outil pinceau (B) Diamtre principal: 6 px Duret: 0%Maintenant revenez surl'outil plume (P)cliquez avec le boutondroit de la souriset allezcontour du trac(n'oubliez pas de coch la case simuler la pression dans le menu du contour de trac).

Dupliquez votre calque 2 fois en appuyant sur la toucheCtrl+j. et positionnez le comme ce si

Fusionnez ces trois calques et appliquezles options de fusion suivantes

Et voila le rsultat

Maintenant la touche finale "le menu "

Tapez votre texte la police utiliser:AndyAppliquez un ombre port dans les options de fusion

Cration dun header complet, pixel par pixel

Suivez dans ce tutoriel Photoshop comment crer le design dun site Internet. Premire partie cration du header.

Nous allons crer le header dun site internet. Le header correspond la partie suprieur dune charte graphique.

Ce header correspond aux interfaces sombres, stylis web 2.0, le must cest que cette technique est simple et le rendus est trs bon.

Go...

ETAPE 1Crer une nouveau calque correspondant la taille de votre interface, personnellement jutilise souvent une image de taille 900X600 pixels de cots. Puis remplissez limage de votre couleur de fond: #8c95a1.

ETAPE 2En haut de votre image crer une slection horizontale, crer un nouveau calque et remplir votre slection avec une couleur un ton plus fonc que votre arrire plan (dans notre exemple nous utilisons la couleur: #62676d).

ETAPE 3Nous allons crer un style sur ce calque en ajoutant un dgrad.

ETAPE 4Crer un nouveau calque, et faite comme ltape prcdente. Seulement cette fois nous allons crer le menu, donc crer une barre horizontale plus petite.

ETAPE 5Rcuprez la slection de votre menu: pomme plus click sur le calque, coupez en deux cette slection dans le sens de la largeur, crez un nouveau calque, remplir de blanc la slection puis baissez lopacit de celui-ci 20%.

ETAPE 6Nous allons crer une limite entre le haut et le menu, pour cela crez un nouveau calque puis faite une slection de 1 pixels sur toute la largeur, crer ensuite une ligne gris claire, gris fonc, gris clair. Voir lexemple ci-dessous.

ETAPE 7Nous allons maintenant crer la limite bas du menu, pour commencer vous allez ajouter une ombre porte votre calque menu.

Ensuite comme dans ltape 6, crez un nouveau calque et remplissez deux lignes de 1 pixel de hauteur, gris fonc, puis gris clair.

ETAPE 8Nous 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 dgrad comme dans lexemple ci dessous.

ETAPE 9Nous allons crez les barres de sparation, pour cela rien de plus, ajoutez un nouveau calque que vous appellerez Barre 1, puis avec la slection 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 sparation, comme dans lexemple ci dessous.

ETAPE 10Rpartissez de faon gal et sur toute la largeur de votre menu vos barres de sparations (en dupliquant le calque).

ETAPE 11Le menu en lui mme est maintenant termin, je vous propose cependant un zoom sur les diffrentes lignes de ce menu.

ETAPE 12Le but cest quand mme de pouvoir crer une interface graphique complte, dans le prochain tutorial nous continuerons avec la cration du logo, du texte, ainsi que linsertion dun menu horizontale supplmentaire.

SUITE DE CE TUTORIAL