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 a Icones

Encore un tutorial webdesign qui vous apprend a réaliser un bandeau de site avec des icones pour illustrer chaque rubrique.

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 taille de votre futur site internet. Généralement, on part sur une base de 800x600 pixels auquel on substitura les bords du navigateur internet en plein écran soit environ 780x441 en incluant la barre google.
 
Créer un nouveau calque .
 
Le Remplir en gris moyen de valeur RVB : 184,184,184


Etape 2

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle au centre du document de toute la hauteur de celle-ci. Détail important : il faut que la largeur de votre rectangle soit divisible par le nombre de rubriques principales que procédera votre site. Dans notre exemple, j’ai créé un rectangle de 522 pixels pour y placer 6 rubriques de 87 pixels. Noter bien cette largeur de rubrique car elle vous sera utile très bientôt.
 
Remplir la sélection en blanc.
 
Appliquer le Style de calque :
Ombre portée
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Grossi : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%


Etape 3

Toujours avec l’outil Rectangle de sélection , sélectionner un rectangle en partie haute de toute la largeur de la zone blanche créé précédemment comme dans l’exemple ci contre. Si vous devais placer un logo dans cette zone, sélectionner le rectangle un peu plus haut que le mien.
 
Choisir comme couleur de premier plan la couleur de valeur RVB : 145,186,220 et comme [couleur d’arrière-plan] la couleur de valeur RVB : 223,239,255.
 
Avec l’outil Dégradé en mode Dégradé linéaire et de type Premier plan - Arrière-plan, créer un dégradé verticale de haut en bas en sélectionnant avec la souris un point un bas de la sélection puis, en gardant le bouton de la souris enfoncé ainsi que la touche Shift du clavier, déplacer votre pointeur de souris vers le point haut de la sélection.


Etape 4

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner du côté gauche du dégradé, un rectangle de 15 pixels de large a 15 pixels au dessus le bas de dégradé jusqu'à une 30ene de pixel en dessus comme dans l’exemple ci-contre.
 
Remplir la sélection en blanc.
 
Avec les touches Ctrl + alt , glisser/déposer avec la souris le rectangle rempli de blanc de la largeur d’une rubrique calculé a l’étape 2 moins les 15 pixels de largeur du rectangle. Ici : 87 – 15 = 72 pixels.


Etape 5

Avec l’outil Lasso polygonal , créer une sélection entre les deux rectangles blancs avec un biseau a 45° de chaque côté comme dans l’exemple ci-contre. Pour tracer des verticales, des horizontales et des lignes a 45°, enfoncer la touche Shift pendant votre sélection.
 
Remplir la sélection en blanc.


Etape 6

Avec l’outil Rectangle de sélection , sélectionner un rectangle englobant la totalité de la forme créé précédemment. Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.


Etape 7

Créer un nouveau calque .
 
Dans la fenêtre de calques, cliquer sur le calque contenant la forme blanche créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Utiliser la flèche basse du clavier pour décaler la sélection de 1 pixel vers le bas.
 
Avec l’outil Dégradé linéaire , créer un dégradé horizontal du noir au blanc comme dans l’exemple ci-dessus.

 
Dans la fenêtre de calque, passer l’opacité du calque a 15%.


Etape 8

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner une ligne entre les 2 premières zones de rubriques du site comme dans l’exemple ci-dessus.
 
Remplir la sélection en noir.
 
Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.


Etape 9

Appliquer un Contour progressif de 10 pixels puis Effacer plusieurs fois la sélection pour obtenir le même résultat que dans l’exemple ci-dessus.
 
Dans la fenêtre de calque, passer l’opacité du calque a 30%.


Etape 10

Créer un nouveau calque .
 
Avec l’outil Rectangle de sélection , sélectionner un rectangle de 5 à 7 pixels de haut et de toute la largeur du site juste en dessous de la partie blanche du haut comme dans l’exemple ci-dessus. < br>
Avec l’outil Dégradé linéaire , créer un dégradé horizontal du noir au blanc comme dans l’exemple ci-contre.
 
Dans la fenêtre de calque, passer le calque en mode Produit et l’opacité du calque a 15%.


Etape 11

Attaquons maintenant une forme rectangulaire à bords arrondies ressemblant à un écran afin de créer une unité aux icones qui seront placées par-dessus plus tard.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un petit cercle dans dans l’exemple ci-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncer la touche Shift pendant la sélection.
 
Remplir la sélection en blanc.

 
pour dupliquer le cercle afin de créer un rectangle aux bords arrondis, appuyer sur le touche Shift , Ctrl et alt du clavier puis déplacer la sélection avec la souris, bouton gauche enfoncé.

 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 cercles comme dans l'image si-dessus puis le Remplir en blanc.

 


Etape 12

Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précédemment, et de la même façon que l'étape 11, dupliquer la forme comme dans l'image si-dessus.
 
Avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes comme dans l'image si-dessus puis le Remplir en blanc.
 


Etape 13

Dans la fenêtre de calques, cliquer sur le calque contenant la forme blanche créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Contracter la sélection de 4 pixels.
 
Créer un nouveau calque .
 
Sélectionner comme couleur de premier plan une couleur bleu de valeur RVB : 84,125,214

 
Remplir la sélection avec la couleur de premier plan .


Etape 14

Appliquer le Style de calque :

Style : Biseau interne
Technique : Lisser, Profondeur : 100%, Direction : Haut, Taille : 2px, Flou : 2px
Angle : 135°, Elevation : 30°, Contour brillant : Linéaire non lissé.
mode des tons clairs : superposition en blanc, opacité : 75%.
mode d'ombrage : superposition en blanc, opacité : 75%.

Et le Style de calque :

Taille : 1px
Position : Extérieur
Mode de fusion : normal
Opacité : 60%
Type : Couleur
Couleur : R:117, V:163, B:242


Etape 15

Créer un nouveau calque .
 
Dans la fenêtre de calques, cliquer sur le calque contenant la forme bleu créée précédemment avec la touche Ctrl du clavier enfoncé afin de créer une sélection de la forme contenu dans ce calque.
 
Avec l’outil Dégradé radial , créer un dégradé du blanc au noir comme dans l’exemple ci-dessus.
 
Dans la fenêtre de calques, passer le calque en mode lumière tamisée et une opacité de 50%


Etape 16

Créer un nouveau calque
 
Remplir la sélection de blanc.
 
Avec l’outil Ellipse de sélection , sélectionner une ellipse incluant la partie droite basse du rectangle blanc créé précédemment comme dans l’exemple ci-dessus.
 
Effacer la sélection.


Etape 17

Dans la fenêtre de calques, passer le calque en mode incrustation , opacité a 40%.
 
Toujours dans la fenêtre de calques, liés tous les calques contenant les éléments de l’écran ( Il doit y en avoir 4 ) puis Fusionner les calques liés .


Etape 18

Faite faire une Rotation d’une 30ene de degrés a l’écran comme dans l’exemple ci-dessus.
 
Ajouter le Style de calque :
Ombre portée
Mode de fusion : Produit en noir
Opacité : 40%, Angle : 135°, Distance : 3px, Grossi : 0%, Taille : 8px, Contour : Linéaire, Bruit : 0%


Etape 19

Avec l’outil Rectangle de sélection , sélectionner un rectangle englobant la totalité de la forme d’écran. Avec les touches Ctrl + alt , glisser/déposer avec la souris la sélection autant de fois que vous avez de rubriques principales.


Etape 20

Il ne reste plus qu’a ajouter vos icones et les textes de rubrique en dessous de chaque icône.
 
Si vous avez un logo, placer le a gauche dans la zone en dégradé bleu.

Fichier(s) associé(s) au tutorial
bandeauicones (81 Ko) télécharger
Thumb (6 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 .