apprendre rapidement a utiliser adobe photoshop par la pratique. devenez web-designer ! tutorial photoshop, exercice, formation, webdesign, skins, textures, infographie, pixel.


 ACCUEIL   PORTFOLIO   LOGICIELS   TUTORIELS   DOSSIERS 

Traducteur Photoshop

Ce traducteur automatique vous permet d'obtenir une traduction en direct des outils, menus, commandes et fonctions photoshop en français depuis un tutorial en anglais.
url :
traduire
voir un exemple : original - traduit

Interfaces
Webdesigns
Bandeau Noir
26 étapes
Bandeau a Icones
20 étapes
menu vertical
19 étapes
Menu Flottant
14 étapes
Bandeau Photo
18 étapes
un site de A a Z (2)
15 étapes
un site de A a Z (1)
19 étapes
bandeau blanc
11 étapes
site a onglets
16 étapes
counter clan
21 étapes
Typographie
Textures
Effets
Retouches
Pixel-art
Divers
HTML/DHTML/Javascript
Annonces Google

Bandeau Noir

Et encore un tutorial de webdesign de plus sur marblemad.com. Cette fois, nous allons voir ensemble comment réaliser un bandeau haut de site avec une bande de boutons noirs a la chaine hifi des années 80.

Identification Abonné :

Votre Email :
Votre Mot de Passe :
Se souvenir de moi
login

Français :
Anglais :
Shortcut PC :
Shortcut Mac :
Menu :
francais
english



Afficher les commandes photoshop en français

Afficher les commandes photoshop en anglais

Afficher la version imprimable du tutorial


Etape 1

Créer un nouveau document de la largeur de votre futur site internet, par exemple 800x600 pixels.
 
Sélectionner comme couleur de premier plan la couleur de valeur RVB : 200,204,207.
 
Remplir le fond de la couleur de premier plan .


Etape 2

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle de toute la largeur du site et de 15 pixels de haut au plus haut du document.
 
Sélectionner comme couleur de premier plan la couleur vive de votre site. ici, la couleur bleu de valeur RVB : 105,220,238.
 
Remplir la sélection de la couleur de premier plan .


Etape 3

Appliquer les Style de calque suivant :
Ombre portée :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 90°, Distance : 0px, Grossi : 0%, Taille : 3px, Contour : Linéaire, Bruit : 0%
Lueur interne :
Mode de fusion : superposition en blanc
Opacité : 75%,Bruit : 0%, Technique : Plus Tamisée, Source : Contour, Maigrir : 0%, Taille : 5px, Contour : Linéaire non lissé, Etendue : 50%, Variation : 0%


Etape 4

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle de toute la largeur du site et de 8 pixels de haut au plus haut du document.
 
Remplir la sélection en noir .


Etape 5

Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle parfait (appuyer sur la touche Shift du clavier pendant la sélection) en dessous a gauche du rectangle noir comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir.


Etape 6

Avec l'outil Rectangle de sélection , sélectionner un rectangle de la largeur du cercle au dessus de celui-ci comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir .


Etape 7

Avec l'outil Rectangle de sélection , sélectionner un rectangle dans une zone vide du document comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir .


Etape 8

Avec l'outil Ellipse de sélection , sélectionner un cercle parfait (appuyer sur la touche Shift du clavier pendant la sélection) a l'interieur du rectangle noir créer précédement comme dans l'exemple ci-dessus.
 
Supprimer la sélection.


Etape 9

Avec l'outil Rectangle de sélection , sélectionner le côté haut droit du cercle évidé comme dans l'exemple ci-dessus.


Etape 10

Sélectionner l'outil déplacement puis déplacer la sélection vers le côté haut gauche du rectangle créer a l'étape 6 comme dans l'exemple ci-dessus.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle créer a l'étape 7 puis Effacer la sélection.


Etape 11

Désélectionner la sélection courante puis appliquer une Inclinaison de la forme créer depuis l'étape 5 comme dans l'exemple ci-dessus.


Etape 12

Dupliquer le calque courant. Appliquer une Symétrie axe horizontal puis avec l'outil déplacement , déplacer la forme comme dans l'exemple ci-dessus.


Etape 13

Avec l'outil Rectangle de sélection , sélectionner un rectangle entre les 2 formes comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir .


Etape 14

Dans la fenetre de calques, lier les 3 calques formant la forme noir puis Fusionner les calques liés .
 
Appliquer le Style de calque
Biseautage et estampage :
Style : Biseau externe
Technique : Lisser, Profondeur : 100%, Direction : Bas, Taille : 3px, Flou : 1px
Angle : 90°, Elevation : 0°, Contour brillant : Linéaire non lissé.
mode des tons clairs : superposition en blanc, opacité : 100%.
mode d'ombrage : superposition en blanc, opacité : 100%.


Etape 15

Créer un nouveau calque .
 
Dans la fenetre de calques, cliquer sur le calque contenant la forme noir avec la touche Ctrl du clavier pour créer une sélection de la forme.
 
Avec l'outil Dégradé linéaire , créer un dégradé horizontal du noir au blanc comme dans l'exemple ci-dessus.


Etape 16

Appliquer un Homothétie du dégradé en déplacant le rectangle de modification milieu bas vers le haut comme dans l'exemple ci-dessus.


Etape 17

Dans la fenetre de calques, passer l'opacité du calque a 50%.


Etape 18

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle de toute la largeur du site et de 6 pixels de haut a 5 pixels du haut du document comme dans l'exemple ci-dessus.
 
Remplir la sélection en blanc.


Etape 19

Appliquer le filtre Flou directionnel :
Angle :90°
Distance : 6 pixels


Etape 20

Dans le fenetre de calque, cliquer sur le calque contenant la forme dégradé créer a l'étape 15 et 16 avec la touche Ctrl du clavier enfoncé pour créer une sélection de cette forme.
 
Intervertir puis Effacer la sélection.


Etape 21

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner une ligne verticale dans la zone de boutons command dans l'exemple ci-dessus et Remplir la sélection de noir.
 
Créer un nouveau calque puis déplacer la sélection d'un pixel vers la droite avec la flèche droite du clavier et Remplir la sélection de blanc.
 
Dans la fenetre de calque, passer l'opacité du calque a 50%. Lier les deux derniers calques puis Fusionner les calques liés .


Etape 22

Avec l'outil Rectangle de sélection , sélectionner un rectangle en dessous des 2 lignes créer à l'étape 21 comme dans l'exemple ci-dessus.
 
Appliquer un Contour progressif de 10 pixels puis Effacer la sélection 3 fois de suite.


Etape 23

Avec l'outil Loupe , zoomer au plus raproché sur la zone noir du bouton ou nous allons placer la flèche de rubrique (voir sur l'étape 24).
 
Avec l'outil Crayon a 1 pixel, tracer pixel par pixel, 3 fléches les une a côté des autres comme dans l'exemple ci-dessus.
 
dézoomer en sélectionnant l'outil Loupe , puis en cliquant sur le bouton droit de la souris n'importe ou dans le document et sélectionnant l'option "Taille réelle des pixels".


Etape 24

Dupliquer et déplacer autant de fois qu'il vous faut de boutons de rubrique les calques contenant les séparateurs (étape 21 et 22) et les flèches (étape 23).


Etape 25

Il ne vous reste plus qu'a ajouter votre logo dans la zone gauche du bandeau et ajouter les titres de chaques rubriques.
 
Et voila ! oufff, c'était long !!

Fichier(s) associé(s) au tutorial
bandeau_boutons_noirs (46 Ko) télécharger
Commentaires des visiteurs
Ajouter un commentaire
Copyright Jérome Boulinguez 1995/2007
Tous les éléments de ce site sont la propriété de leurs auteurs respectifs.
Toutes reproductions, distributions, commercialisations, copies sous quelques formes que ce soit est strictement interdit sous peine de poursuites.


point de croix .  broderie .  cross stitch .  broderie prenom .  broderie portrait .  pochoir .  pochoir personalisé .  stickers .  scrapbooking .  pochoirs à imprimer .  loisir créatif .  templates .  lifting .  cadeaux personnalisés .  pop art .  warhol .  warhol .  pop art .  affiches .  journal de naissance .  prénom .  étiquettes personnalisées .  parchemin personnalisé .  parchemin .  pagerank .  calendrier .  avatar .  faire-part .  collections .  mariage .  telephone portable .  tableau prénom .  fausse couverture people .  fausse couverture de magazine .  fausse couverture de journal .  calligraphie prenom .  t-shirt personnalisé .  géo-localisation .  fausse affiche .  affiche humour .  marque-pages .  plaque de rue .  roman photo .  cadre photo .  faux papiers .  dés photos .  pêle mêle .  pancarte de porte .  pour les nuls .  carte de membre .  scrapbooking .  acrostiche .  graffiti .  invitation a imprimer .  tapis de souris personnalise .  mug personnalisé .  mug photo .  grille point de croix gratuite .