Ce tutoriel Photoshop montre comment il est «relativement» facile de créer des icônes attirantes pour le web 2.0 de style avec des reflets et ainsi de suite, en définissant simplement les effets sur la couche. Une fois que vous comprenez le processus, il est également possible - donner libre cours à votre créativité - pour créer de nombreuses variantes.
ETAPE 1 - icône du formulaire
Nous créons un calque et dessiner un rectangle 
(Ou carré) avec des angles légèrement arrondis.
Appliquer cette couche les effets suivants:
Comment j'ai utilisé une couleur de l'ombre intérieure # ffd800
Le gradient passe de # 067500 à # 0cff00
Nous avons presque réussi notre icône! La nuance de couleur que vous l'aimez! La chose importante était une gradation de l'obscurité à clair.
ETAPE 2 - RÉFLEXION
Ajoutez un nouveau calque en haut de cette cha nous venons de faire. Sélectionnez la forme de l'icône (Ctrl + clic sur le calque) et - tout en restant sur le nouveau calque vide - sélectionnez dans le menu Sélection-> Modifier-> Contracter: 2 pixels saisir:
Réglez la couleur de premier plan au blanc 
et sélectionnez l'outil Dégradé 
, Allant du blanc au transparent. Ensuite, dessinez un dégradé de haut en bas, afin d'obtenir:
Maintenant, une dernière touche, sélectionnez l'outil de sélection circulaire 
, Sélectionnez une ellipse et placez-le comme indiqué ci-dessous et appuyez sur la touche Suppr - si vous voulez, vous pouvez régler la transparence pour 90/80:
ETAPE 3 - Texte et symboles
En utilisant l'une des polices de nombreuses bibliothèques libres, vous pouvez ajouter un symbole graphique, une icône en bref. Si ce schéma est, dans mon cas, l'ajout de l'effet:
Otteremo un bel effet de retour:
La seule chose qui manque ... le texte de votre choix!
X Bien fait le tutoriel, web 2.0 rend les normes que les webmasters ne peuvent guère oublier ...
J'ai essayé sur le graphe du réseau pour être inclus dans une police similaire aux boutons que vous avez utilisé, mais je n'ai pas trouvé, pourriez-vous me dire comment ça s'appelle ni où le trouver? Merci
@ Marc: Mark Merci! Vous pouvez trouver quelques polices bitmap à cette adresse: http://www.orgdot.com/aliasfonts/
Tutorial Photoshop: Les icônes de style Web 2.0 en 3 étapes | Undolog.com ...
Tutoriel pour créer des icônes avec Photoshop 2.0 de style ....
hei .. mais vous avez oublié de nous dire comment, sous la décoloration ombre!
.. vous savez .. vous avez déjà fait .. 99 est de 100
mythiques petit bouton .. mais il faudrait une chatte ombre eh eh! ^ ^.
@ Dapdudida:
Pour me pardonner j'ai fait un screencast petite, même si aucun son ne sortait! Allez ici pour les techniques de réflexion 
tu as raison
Il existe deux techniques: le masque sur le calque (le premier exemple) et l'utilisation générale des masques! Je préfère la première
Bon tutoriel! Je cherchais depuis longtemps, merci beaucoup! Votre blog parmi mes favoris, juste
@ Artemisia: merci!
Bonjour, félicitations pour le tuotorial J'ai été très utile, mais les petites icônes où vous avez trouvé?
J'ai essayé de regarder sur le site que vous avez posté dans les commentaires précédents paragraphes, mais je n'ai rien trouvé.
Ferme @ Lazio: les icônes sont en fait un tableau de la police. Vous pouvez trouver de nombreuses polices de caractères gratuites qui contiennent des caractères au lieu des icônes normales de toutes sortes. Recherche Google pour "fontes dingbats"
Ce gars, après cette étape .. Je sais que c'est des conneries, mais je suis en tilt "Ajouter un nouveau calque au dessus celui que vous venez de créer. Sélectionnez la forme (Ctrl + clic sur le calque) et en restant sur le nouveau calque vide "quelqu'un peut-il s'il vous plaît expliquer comment vous avez été un enfant de 2 ans?
@ Marco: vous avez à faire dans la pratique, est de recréer la même forme du bouton sur la couche de vide, mais légèrement plus petite. Pour sélectionner le contenu d'un calque, vous pouvez utiliser CTRL clic de souris +. De cette façon, vous verrez la sélection autour de la forme du bouton. Ensuite, sélectionnez le calque vide de telle sorte que la sélection faite précédemment va agir sur cette couche.
Le problème est que quand j'arrive à mettre "incrustation en dégradé" alors tout est recouvert de la couche de la couleur de la pente et me permet de voir la forme carrée que j'avais donné à la première touche. Deuxièmement, le retour au début, je crée le niveau, mais le design carré d'intervenir dans l'ombre à l'extérieur et l'intérieur, je dois nécessairement dupliquer le calque. Et le droit?
Merci pour votre excellent guide! Depuis que j'ai vu mes créations ne peuvent que s'améliorer!
@ Mathias: merci! Pour toute information n'hésitez pas à m'envoyer un email
Pouvez-vous expliquer comment vous avez géré un didacticiel vidéo avec fenêtre pop-up style visible?
En bref, je me réfère à l'effet sur la vidéo où visisibile suggérer un tutoriel sur la création des icônes de style Web 2.0
@ Giuseppe Serra:
J'ai utilisé la bibliothèque Javascript ShodowBox qui vous permet d'ouvrir des fenêtres popup avec un contenu différent: les images, les films Flash ou QuickTime, des pages HTML et plus encore.
simple et pratique ... tout comme je l'aime:)
Bonjour lorsque je tente d'appliquer la macshera la couche disparaît et le second carré sur le masque de calque est blanc et non noir comme dans le film pourquoi?
@ Etienne: Vous devez maintenir enfoncée la touche ALT lorsque vous appliquez le masque
Excellent guide, merci!
Je m'ennuie seule chose ... Le passage dans lequel vous insérez l'ellipse: Je ne peux pas donner cet effet à l'icône.
Je ne comprends pas cette étape:
Merci d'avance
Digit @ WM: C'est une simple étape. La couche de gradient est coupé, de préférence avec une forme circulaire. Ce que vous devez faire est de suivre les chiffres illustrés pour rendre l'effet similaire à celui proposé, mais vous pouvez également appliquer des valeurs différentes pour différents effets. Sur la couche de «réflexion», ce qu'il faut couper, utiliser une sélection circulaire pour délimiter la zone à supprimer et appuyez sur le bouton "Supprimer" à couper le bas.
En outre, l'opacité de cette couche peut être ramené à 90% ou 80% sur la base des couleurs utilisées.
J'espère que cela répond à votre question.