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 (1)

Ce tutorial est le 1er d'une 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 1er tutorial traite de la réalisation sous photoshop du fond de site et de son bandeau haut.

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 foncé (RVB:40,40,40).


Etape 2

Appliquer ensuite le Filtre > Bruit > Ajout de bruit :
Facteur : 4 %
Répartition : Uniforme
Monochromique coché


Etape 3

Puis le Filtre > Atténuation > Flou gaussien :
Rayon : 0,3 pixel


Etape 4

et pour finir avec la texture de fond, le Filtre > Renforcement > Accentuation :
Gain : 50%
Rayon : 1 pixel
Seuil : 0 niveaux


Etape 5

Dupliquer le calque de fond.
 
Changer la Luminosité/Contraste du calque dupliqué :
Luminosité : 50
Contraste : -50


Etape 6

Avec l'outil Rectangle de sélection , sélectionner un rectangle au centre du document qui sera votre fond de page web.
 
Intervertir puis Effacer la sélection.


Etape 7

Appliquer les Style de calque suivant :
 
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 100%, Angle : 135°, Distance : 0px, Grossi : 2%, Taille : 10px, Contour : Linéaire, Bruit : 0%

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


Etape 8

Pour créer le bandeau haut du site,
 
Créer un nouveau calque .
 
Sélectionner avec l'outil Rectangle de sélection un rectangle en haut du rectangle précédament créé de 3 pixels plus petit comme dans l'exemple ci-dessus.
 
Remplir la sélection en noir...

 
et, dans la fenetre de calques, passer le calque en mode incrustation , opacité à 40%.


Etape 9

Tout en gardant la sélection active, créer de nouveau un nouveau calque .
 
Remplir la sélection en blanc.
 
Dans la fenetre de calques, passer le calque en mode Produit .
 
Appliquer 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 10

Créer un nouveau calque et avec l'outil Loupe , zoomer sur n'importe qu'elle zone de votre document au minimum a 800%.
 
Avec l'outil Crayon , forme de 1 pixel, dessiner l'élement comme indiquer sur d'exemple ci-dessus.
 
Une fois terminé, sélectionner l'élement avec l'outil Rectangle de sélection puis ajouter le a la liste des motifs dans le menu Edition > Utiliser comme motif .


Etape 11

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 .
 
Remplir le calque avec le motif précédament créé.


Etape 12

Dans la fenetre de calques, passer le calque en mode incrustation , opacité : 5%.
 
Enfoncer la touche Ctrl du clavier et, toujours dans le fenetre de calques, cliquer, au choix, sur l'un des 2 calques contenant le rectangle formant le bandeau haut pour créer une sélection de celui-ci.
 
Intervertir puis Effacer la sélection obtenue.


Etape 13

Passont maintenant a la réalisation des boutons de rubriques du site.
 
Créer un nouveau calque .
 
Avec l'outil Ellipse de sélection , sélectionner un cercle sur le coté haut droit de la zone bandeau 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 14

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 bandeau haut 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 15

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 blanc.


Etape 16

Appliquer les Style de calque suivant :
 
- Ombre portée :
Mode de fusion : Produit en noir
Opacité : 100%, Angle : 135°, Distance : 0px, Grossi : 15%, Taille : 5px, Contour : Linéaire, Bruit : 0%

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

 
Passer le calque en mode incrustation , opacité à 50%.


Etape 17

Créer un nouveau calque .
 
Dans la fenetre de calques, le bouton Ctrl du clavier enfoncé, cliquer sur le calque du bouton précédament créer pour en faire une sélection.
 
Avec l'outil Dégradé , créer un dégradé horizontal du blanc (en haut de bouton) au noir (en bas de bouton).
 
Passer le calque en mode lumière tamisée , opacité à 30%.


Etape 18

Dans la fenetre de calques, sélectionner l'avant dernier calque : Celui qui contient les boutons avec les effects de calque.
 
Avec l'outil Rectangle de sélection , sélectionner un rectangle autour du bouton.
 
Touches du clavier Shift , Ctrl et alt enfoncées, déplacer la souris, bouton gauche enfoncé, vers la gauche pour dupliquer le bouton. Lacher tout quand le bouton est en place. répéter l'opération autant de fois qu'il faut de boutons.
 
Effectuer les mêmes opérations avec le dernier calque : Celui qui contient le dégradé du bouton.


Etape 19

Il ne vous reste plus qu'a ajouter vos titres de rubrique avec l'outil Texte et d'intégrer votre logo dans la zone a droite du bandeau haut.
 
Suite de la création du webdesign dans le tutorial « un site de A a Z (2) ».

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