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

counter clan

Voila le 1er tutorial "grand format" du site. ce nouveau format de tutorial nous permettra d'aborder d'autre horizon dans l'utilisation de photoshop comme par exemple cette nouvelle catégorie de tutoriels : "webdesign". Ce tutorial vous aprés a réaliser une entête de site internet avec comme théme un clan counter strike.

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 800x400 pixels.
 
Remplir le fond de la couleur de votre choix (préférer une couleur pastel d'une luminosité moyenne).
 
Créer un nouveau calque .
 
Sélectionner un rectagle avec l'outil Rectangle de sélection d'une largeur de 760 pixels, toute hauteur.

 
Remplir la sélection en blanc.

 
Pourquoi 760 pixels de largeur ?
C'est a quelques pixels de moins pret, la largeur des navigateurs internet en plein écran en 800x600 de résolution d'écran. Ainsi, votre site sera compatible 800x600 pixels ou + (Les bords colorés vont s'agrandir avec la taille de la fenetre du navigateur et la zone contenu sera centrée sur la page).


Etape 2

Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection , sélectionner la partie haute de la zone blanche qui sera le futur emplacement du bandeau illustration/logo de notre entête de site.
 
Remplir la sélection de la couleur de votre choix (préférer une couleur vive et du même ton que le fond).
 
Créer un nouveau calque .

 
Toujours avec l'outil Rectangle de sélection , sélectionner ensuite une bande d'environ 25 pixels de haut en dessous du bandeau haut qui sera notre futur bandeau de navigation du site.

 
Remplir la sélection de la couleur de votre choix (préférer une couleur relativement foncé, du même ton que le bandeau logo et légérement pastel).


Etape 3

Maintenant que nos zones logo, navigation et contenu sont créées, nous allons habiller le bandeau logo. Pour cela, on va rechercher les images adapté au sujet du site. dans cette exemple, nous allons prendre comme sujet, un site de clan counter strike. Une petite recherche sur google images, et me voila avec une image qui servira de fond de bandeau, une autre image qui sera détouré pour créer un objet de 1er plan par dessus le côté gauche du bandeau et le logo counter strike condition zero qui servira de base a la réalisation du logo du site.
 
NB : n'oubliez pas les droits d'auteurs. demander l'autorisation ou payé les droits aux ayant droits avant d'utiliser une source copyrightée.


Etape 4

Attaquons par travailler sur le fond de bandeau.
 
Ouvrir l'image de fond.
 
Dupliquer le calque de l'image.


Etape 5

Nous allons passer l'image en monochrome de la couleur de notre rectangle de bandeau logo. pour cela rendez-vous dans le menu Image > Réglages > Teinte/Saturation :
Mode Redéfinir coché, Aperçu coché, modifier les paramétres jusqu'a obtenir la teinte désirée.
Pour l'exemple :
Teinte : 65
Saturation : 89
Luminosité : +6


Etape 6

Sélectionner ensuite avec l'outil Rectangle de sélection la moiter droite de l'image.
 
Appliquer un Contour progressif de 100 pixels a la sélection puis Effacer la pour refaire apparaitre en dégradé l'image d'origine.
 
aplatir l'image (dans le menu Calques ).
 
Tout sélectionner , Copier l'image et Copier la dans votre document contenant la mise en page du webdesign.


Etape 7

Sélectionner le contenu du calque "bandeau illustration/logo" dans la fenetre de calques (cliquer sur le nom du calque en enfoncant la touche Ctrl ).
 
Ajouter un masque de fusion au calque de l'image de fond dans la fenetre de calque. Seul la zone précédament sélectionnés sera visible pour ce calque.
 
délier le masque de fusion de l'image dans la fenetre de calque en cliquant sur le pictogramme "chaine" entre l'image et le masque. Sélectionner ensuite le rectangle de l'image juste a gauche de l'emplacement du pictogramme.
 
Déplacer (avec l'outil déplacement ) et retailler l'image dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré dans la zone du bandeau logo.

 


Etape 8

Aller, un petit effet screening sur l'image fond, ça fera pas de mal.
 
Créer un nouveau calque .
 
Avec l'outil Rectangle de sélection 1 rangée , sélectionner la 1er ligne du haut du document.
 
Remplir en blanc.

 
Dupliquer ensuite la ligne toute les 2 lignes sur toute la hauteur du bandeau, pour cela :
- touches Ctrl + alt + flèche basse
puis
- touches fléche basse
Répéter les 2 opérations jusqu'a remplissage de la zone.


Etape 9

Sélectionner la zone bandeau logo en cliquant sur le calque de bandeau dans la fenetre de calque comme a l'étape 7.
 
Ajouter le masque de fusion comme a l'étape 7 également.
 
Toujours dans la fenetre de calque, passer le calque en mode incrustation .
 
Et voila pour le fond de bandeau.


Etape 10

passont maintenant au détourage de l'élément de 1er plan.
 
Ouvrir l'image contenant l'élément de 1er plan.
 
Passer le calque de type "arrière-plan" en calque "standard" en double cliquant sur celui ci dans la fenetre de calque. cliquez ensuite sur le bouton OK de la boite de dialogue "nouveau calque".


Etape 11

A l'aide de l'outil Lasso polygonal , sélectionner le contour de l'élément, Inverser la sélection et Effacer la.
 
Effacer égallement les éventuelles zones internes ne faisant pas partie de l'élément.
 
Si le fond derière l'élément est relativement uni, vous pouvez égallement utiliser la technique de détourage du tutorial détourage.


Etape 12

Tout sélectionner , Copier l'image et Copier la dans votre document contenant la mise en page du webdesign.
 
Si l'élément n'est pas dans le bon sens comme dans l'exemple, effecter une Symétrie axe horizontal .
 
Déplacer (avec l'outil déplacement ) et retailler l'élément dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré.


Etape 13

Ajouter au calque le Style de calque :
- Ombre portée
Mode de fusion : Produit , couleur noir.
Opacité : 50%
Angle : 135°
Distance : 5 px
Grossi : 0%
Taille : 5 px

pour aplatir l'ombre portée afin d'en supprimer la partie du bas, créer un nouveau calque . lier le au calque de l'éléments dans la fenetre de calque puis Fusionner les calques liés .

 
Sélectionner avec l'outil Rectangle de sélection le rectangle de la zone de contenu blanche en dessous de la bande de navigation puis Effacer cette sélection.


Etape 14

Passont maintenant a la bande de navigation.
 
Sélectionner le calque contenant cette bande dans la fenetre de calque.
 
appliquer y les Style de calque suivant :
- Ombre portée :
Mode de fusion : Produit , couleur noir.
Opacité : 100%
Angle : 135°
Distance : 0 px
Grossi : 0%
Taille : 3 px

- Biseautage et estampage
Style : Biseau interne
Technique : Lisser
Profondeur : 100%
Direction : Haut
Taille : 1 px
Flou : 0 px
Mode des tons clairs : Superposition en blanc, opacité : 100%
Mode d'ombrage : Superposition


- [Inscrustation en dégradé]
Mode de fusion : Inscrustation
Dégradé : noir au blanc
Opacité : 50%
Angle : 90°
Echelle : 100%


Etape 15

créer un nouveau calque .
 
Avec l'outil [rectangle de sélection 1 colonne], sélectionner une colonne a droite de l'élément de 1er plan et le Remplir en noir. Déplacer la sélection d'un pixel a droite avec la touche flèche droite et Remplir cette nouvelle sélection en blanc.


Etape 16

Sélectionner la zone de la bande de navigation en cliquant sur le calque contenant cette bande dans la fenetre de calque en appuyant en même temps sur la touche Ctrl .
 
Inverser la sélection puis Effacer la.
 
passer le calque en mode incrustation, opacité 50% dans la fenetre de calque. Dupliquer et déplacer (avec l'outil déplacement ) cette élément de séparation autant de fois qu'il le faut sur toute la longeur de la bande de navigation.


Etape 17

Il ne vous restera plus qu'a ajouter entre ses séparations les titres des rubriques du site pendant l'intégration HTML du webdesign.


Etape 18

Pour finir, occupons nous du logo.
 
Ouvrir l'image contenant le logo de base.
 
Si celui ci est en noir et blanc non détouré, créer une sélection de détourage avec l'outil Baguette Magique , Tolérance : 30, Lissé coché, pixels contigus non coché, cliquer sur une des lettres du logo.
 
créer un nouveau calque et Remplir la sélection de la couleur de votre choix (couleur assez foncé et adapté aux couleurs du site bien entendu).

 
Copier la sélection.


Etape 19

Coller ensuite la sélection dans votre document principal.


Etape 20

Supprimer les éléments du logo de trop et ajouter votre texte si besoin est.
 
Dans l'exemple, j'ai supprimer le texte "condition zero" et je l'ai remplacer par un texte du nom de la team counter.


Etape 21

Déplacer (avec l'outil déplacement ) et retailler le logo dans le menu Edition > Transformation > Homothétie pour qu'il soit bien cadré dans le bandeau du site.
 
Ajouter ensuite le Style de calque :
- Lueur externe :
Mode de fusion: Superposition
Opacité : 100%
Bruit : 0%
Couleur : une couleur qui fait bien resortir le logo du fond et assortie bien sur (ici : jaune pale RVB :255,255,147)
Technique : plus tamisée
Grossi : 10%
Taille : 18px

 
Et voila le travail !! il ne reste plus qu'a faire les découpes et l'intégration HTML.

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