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
cordage
9 étapes
flexible alien
10 étapes
anneau segmente
11 étapes
Haut Parleur
12 étapes
Engrenage
6 étapes
Tube Arrondi
9 étapes
écrou
13 étapes
écran LCD
13 étapes
grip et strie
7 étapes
boutons incrustés
12 étapes
walkman(2)
18 étapes
walkman(1)
17 étapes
imac btn
12 étapes
bouton arrondi
10 étapes
Bouton 3D
7 étapes
Webdesigns
Typographie
Textures
Effets
Retouches
Pixel-art
Divers
HTML/DHTML/Javascript
Annonces Google

boutons incrustés

Je vous propose d'apprendre à réaliser des boutons incrustés dans une interface comme sur les appareils hifi : radio, walkman, ...

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

Prenont comme base de travail une petite interface platine créer a la maniére du tutorial "bouton arrondi". Le but du jeu est d'y incruster des boutons ronds type matériel hifi.


Etape 2

Créer un nouveau calque et avec l'outil Ellipse de sélection , sélectionner un 1er cercle représentant le trou pour le 1er bouton.
 
Astuce : Pour forcer la selection cercle et non ovale, appuyer sur le bouton Shift du clavier pendant la sélection.


Etape 3

Créer de la même façon le 2eme trou et ainsi de suite autant de fois que vous voulez de boutons ronds.


Etape 4

Appliquer le Filtre > Atténuation > Flou gaussien
Rayon : 4 pixels


Etape 5

Puis le Filtre > Renforcement > Accentuation
Gain : 500%, Rayon : 15 pixels, Seuil : 0 niveaux
et encore une fois le Filtre > Renforcement > Accentuation
Gain : env. 100% (a vous de voir quelle % appliquer suivant la qualité du lissage obtenu dans la prévisualisation), Rayon : 15 pixels, Seuil : 0 niveaux


Etape 6

Passer le calque en mode lumière tamisée
puis appliquer les styles de calques suivants dans le menu Calque > Style de calque
- Ombre interne :
Mode de fusion : Produit couleur Noir, Opacité : 50%, Angle : 135°, Distance : 1px, Maigrir : 0%, Taille : 4px.
- Biseautage et estampage :
Style : Biseau externe
Technique : Lisser, Profondeur : 100%, Direction : Bas , Taille : 3px, Flou : 0px
Angle : 135°, Elévation : 28°
Tons clairs : superposition blanche a 75%
Ombrage : superposition blanche a 75%


Etape 7

Sélectionner la forme des éléments du calque en cliquant sur le calque en question dans la fenétre de calque en appuyant sur la touche Ctrl du clavier.
Créer un nouveau calque .
Sélectionner l' Outil Dégradé linéaire puis appliquer un dégradé du noir vers le blanc a la sélection en suivant le sens des boutons comme dans l'exemple ci-contre.
Passer ensuite le calque en mode superposition , Opacité : 50%.


Etape 8

Créer un nouveau calque et avec l'outil Ellipse de sélection , sélectionner le cercle d'un 1er bouton de 2 pixels de tour de moins que le trou du bouton puis le remplir en gris dans la menu Edition > Remplir avec couleur de premier plan en ayant pris soin de choisir le gris en couleur de premier plan a l'avance.
faite de même pour les autres boutons.


Etape 9

Appliquer ensuite au calque les Style de calque : - Ombre portée :
Mode de fusion : Normal en noir, Opacité : 75%, Angle : 135°, Distance : 0px, Grossi : 0%, Taille : 2px
- [biseautage et Estampage] :
style : Biseau interne
technique : lisser, profondeur : 100%, direction : haut , taille : 5px, flou : 5px
angle : 135°, elévation : 28°
Tons clairs : superposition blanche a 75%
Ombrage : superposition bleu clair (voir couleurs ci-contre) a 75%.


Etape 10

Créer un nouveau calque et re-selectionner a l'aide de l'Ellipse de sélection le cercle du 1er bouton pour y appliquer un dégragé radial blanc vers noir comme dans l'exemple ci-contre avec l'outil [dégragé radial].


Etape 11

Reproduire l'étape 10 pour tous les boutons puis lier tous les calques contenant ses dégradés radials et Fusionner les calques liés .
Passer le calque obtenu en mode superposition .


Etape 12

Voila, il ne vous reste plus qu'a ajouter vos pictogrammes de boutons.
Ici, j'ai créer un picto play et pause en gris foncé puis j'y est copier et coller les styles de calque de l'étape 6 (cliquez avec le bouton droit de la souris sur le calque contenant les trous de boutons, sélectionnez Copier le style de calque , cliquez avec le bouton droit de la souris sur le calque contenant les pictos puis sélectionnez Coller le style de calque
et j'ai passé le calque en mode incrustation .

Fichier(s) associé(s) au tutorial
boutons incrustés (44 Ko) télécharger
Thumb (8 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 .