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

site a onglets

2ème tutorial "grand format", un webdesign encore une fois. Cette fois ci, nous allons voir comment réaliser un site a onglets pour la navigation dans les rubriques. Un style plutôt doux et sobre tous en nuances de beige et des bords arrondis.

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 800x600 pixels.
Remplir le fond de la couleur RGB : 112,107,106.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut gauche du document comme indiqué dans l'image si-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncé la touche Shift pendant la sélection.

 
Choisir la couleur RGB : 226,215,180 comme couleur de premier plan puis Remplir la sélection de la couleur de premier plan .


Etape 2

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 sur le bord droit du document 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 de la même couleur que les cercles.


Etape 3

Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précedament, et de la même façon que l'étape 2, dupliquer la forme 2 fois en bas du document comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le bas. lacher tout quand la forme est en position et renouveler la manipulation pour dupliquer la forme a nouveau.


Etape 4

Comme pour l'étape 2, avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes du haut comme dans l'image si-dessus puis le Remplir de la même couleur que les formes.


Etape 5

Avec l'outil Rectangle de sélection , sélectionner ensuite le bord haut droit du rectangle a bords arrondis dans l'image ci-dessus puis dupliquer la sélection comme pour les étapes 2 ou 3 : appuyer sur le touche Shift , Ctrl et alt du clavier puis déplacer avec la souris, bouton gauche enfoncé, la sélection vers le haut comme dans l'image ci-dessus.
 


Etape 6

Sélectionner ensuite le bord haut gauche du rectangle a bords arrondis et comme dans l'étape précedente, dupliquer la sélection et l'aligner a gauche de l'élément créer a l'étape précedente.
 
Une fois l'élément en place, appliquer une inclinaison dans le menu Edition > Transformation > Inclinaison . cliquer sur le petit rectangle central du bas avec la souris et bouton enfoncé, déplacer le curseur vers la gauche pour obtenir une inclinaison d'a peu prés 45°.
 
Appliquer l'inclinaison en double-cliquant a l'intérieur de la sélection.


Etape 7

répéter l'étape 5 et 6 pour réaliser la même escroisance sur la gauche de l'élement bas du document comme dans l'image ci-dessus.


Etape 8

Créont maintenant les autres onglets. Avec l'outil Rectangle de sélection , sélectionner l'onglet haut droit comme dans l'image ci-dessus.
 
Appuyer ensuite sur les touches clavier : Ctrl + c pour copier la sélection puis Ctrl + v pour coller la sélection dans un nouveau calque.
 
Dans la fenetre de calques, passer le calque nouvellement créer sous le calques contenant la forme principale.


Etape 9

Avec l'outil déplacement , déplacer le nouvelle onglet aligné a gauche de l'onglet de droite.
 
Changer la luminosité de l'onglet dans le menu Image > Réglages > Teinte/Saturation :
Teinte : 0
Saturation : 0
luminosité : -21


Etape 10

Reproduire les étapes 8 et 9 autant de fois qu'il vous faut d'onglets en diminuant de plus en plus la luminosité.


Etape 11

Dans la fenetre de calque, sélectionner le calque contenant la forme principale.
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de l'élément bas du document.
 
Changer la luminosité de l'élément bas dans le menu Image > Réglages > Teinte/Saturation :
Teinte : 0
Saturation : 0
luminosité : -21


Etape 12

Passont maintenant au menu de navigation.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut gauche du document comme indiqué dans l'image si-dessus. Pour sélectionner un cercle parfait, n'oublier pas de laisser enfoncé la touche Shift pendant la sélection.
 
Choisir la couleur du dernier onglet (ici RGB : 152,145,123) comme couleur de premier plan puis Remplir la sélection de la couleur de premier plan .


Etape 13

comme dans l'étape 2, 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 sur le bord droit du document 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 de la même couleur que les cercles.
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle autour de la forme créer précedament, et de la même façon que l'étape 12, dupliquer la forme en haut de l'interface comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le haut. lacher tout quand la forme est en position.


Etape 14

avec l'outil Rectangle de sélection , sélectionner le rectangle entre les 2 formes puis le Remplir de la même couleur que les formes pour obtenir un rectangle aux bords arondies.


Etape 15

Il ne vous reste plus qu' ajouter votre logo dans la zone haut/gauche a côté des onglets.
 
Aprés la découpe pour l'intégration HTML, placer vos liens de rubrique dans les onglets comme dans l'image ci-dessus.
 
Remplisser le menu des sous-rubriques de votre site. Ici, j'ai créer une séparation sous la forme d'une ligne en pointillé entre chaque liens dans le menu ainsi qu'une petite fleche devant chaques liens.


Etape 16

Ajouter ensuite votre contenu dans la zone a droite du ou des menus de nagivation.
 
Utiliser l'élément bas du webdesign pour placer votre copyright !!

Fichier(s) associé(s) au tutorial
webdesign (77 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 .