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

un site de A a Z (2)

2eme tutorial de la série de 4 qui vous propose de suivre la conception d'un webdesign de site de A et Z, c'est a dire de la réalisation graphique a l'intégration HTML. Ce 2eme tutorial traite de la réalisation sous photoshop des cadres et élements de menu, des cadres de contenu et des cadres d'images.

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

Attaquons par la réalisation des menus de navigation.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté gauche de la zone de contenu, sous le logo, 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.
 
Remplir la sélection en blanc.


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 vers le bas de la zone de contenu 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 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 précedente, dupliquer la forme vers la droite comme dans l'image si-dessus.
 
touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la droite. lacher tout quand la forme est en position.
 
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 4

Créer un nouveau calque .
 
Toujours avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté bas gauche du rectangle de menu 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.
 
Remplir la sélection en noir.


Etape 5

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 vers le haut de rectangle de menu 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 noir.


Etape 6

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 précedente, dupliquer la forme vers la gauche comme dans l'image si-dessus.
 
Touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la gauche. lacher tout quand la forme est en position.
 
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 noir.


Etape 7

Dans la fenetre de calques, passer le calque en mode incrustation , opacité : 10%.
 
Enfoncer la touche Ctrl du clavier et, toujours dans le fenetre de calques, cliquer sur le calque contenant le rectangle de menu noir pour créer une sélection de celui-ci.
 
Sélectionner ensuite le calque contenant le rectangle de menu blanc puis Effacer la sélection.
 
Appliquer ensuite les Style de calque suivant :
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Grossi : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%

- Biseautage et estampage :
Style : Biseau interne
Technique : Lisser, Profondeur : 75%, Direction : Haut, Taille : 4px, Flou : 0px
Angle : 135°, Elevation : 30°, Contour brillant : Linéaire non lissé.
mode des tons clairs : superposition en blanc, opacité : 75%.
mode d'ombrage : Produit en noir, opacité : 50%.


Etape 8

Créer un nouveau calque et avec l'outil Loupe , zoomer sur le côté haut gauche du rectangle de menu au minimum a 800%.
 
Avec l'outil Crayon , forme de 1 pixel, dessiner l'élement comme indiquer sur d'exemple ci-dessus.
 
Désélectionner l'élément, avec l'outil Loupe , dézoomer en cliquant sur le bouton droit de la souris sur votre document et choisir l'option Taille écran .
 
Sélectionner l'élement avec l'outil Rectangle de sélection .

 
Touches clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers le bas pour dupliquer les petites fleches. Reproduire la manipulation autant de fois que vous avez besoin de lignes de navigation.

 
Ajouter ensuite les éléments textes au menu avec l'outil Texte horizontal .


Etape 9

Passons maintenant au rectangle de contenu.
 
Créer un nouveau calque et créer un rectangle a bords arrondis noir de la même façon qu'au début du tutorial.


Etape 10

Dupliquer le calque puis appliquer la commande Négatif de cette duplication.


Etape 11

Dans la fenetre de calque, sélectionner le calque contenant le rectangle de contenu noir et passer le en mode incrustation , opacité a 20%.
 
Sélectionner le calque contenant le rectangle de contenu blanc et passer le en mode Produit .
 
Appliquer ensuite le Style de calque :
- Ombre interne :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Maigri : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%


Etape 12

Créer un nouveau calque et recréer un nouveau rectangle a bords arrondis blanc a l'intérieur du 1er rectangle de contenu comme dans l'exemple si-dessus.


Etape 13

Dupliquer le calque.
 
Dans la fenetre de calque, sélectionner le calque contenant le 1er rectangle blanc et passer le en mode incrustation , opacité a 20%.
 
Sélectionner le calque contenant le 2eme rectangle blanc et passer le en mode Produit .
 
Appliquer ensuite le Style de calque :
- Ombre interne :
Mode de fusion : Produit en noir
Opacité : 75%, Angle : 135°, Distance : 0px, Maigri : 0%, Taille : 5px, Contour : Linéaire, Bruit : 0%


Etape 14

De la même façon que vous avez créer le rectangle de menu de l'étape 1 a 7, créer un contour d'image pour votre site.
 
Une fois toutes les étapes réalisées, Supprimer le calque contenant le rectangle noir.
 
Dans la fenetre de calque, il ne vous reste qu'a placer le claque contenant l'image juste en dessous du calque contenant le contour d'image


Etape 15

Ajouter ensuite les éléments textes au rectangle de contenu avec l'outil Texte horizontal .
 
Suite du tutorial avec l'intégration html du webdesign dans le tutorial « un site de A a Z (3) ».

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