Tutoriel Photoshop: Web 2.0 icônes de modèle en 3 étapes
Vendredi, Février 29, 2008
Ce tutoriel montre comment Photoshop «relativement» facile de créer accrocheur icônes pour le Web 2.0 style, avec des nuances et tout le reste, simplement en positionnant 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 - FORME ICON
Nous créons un calque et dessinez un rectangle 
(ou carré) avec des coins légèrement arrondis.
Appliqué à cette couche, les effets suivants:
Comme je l'ai utilisé un Inner Shadow Color # ffd800
La pente va de # 067500 à # 0cff00
Nous avons presque atteint notre icône! Le gradient de couleurs que vous pouvez le rendre plus veux! La chose importante est une gradation de sombre à clair.
ETAPE 2 - LA RÉFLEXION
Ajouter un nouveau calque au dessus de ce 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 encore - sélectionnez dans le menu Sélection-> Modifier-> Contrat: Entrez 2 pixels:
Définissez la couleur de premier plan au blanc 
et sélectionnez l'outil Dégradé 
Qui va du blanc au transparent. Puis tracez un dégradé de haut en bas, afin d'obtenir:
Maintenant, une touche de finition, choisissez l'outil de sélection circulaire 
Sélectionnez l'une ellipse et placez-le comme indiqué ci-dessous et appuyez sur la touche Suppr - si vous voulez, vous pouvez définir la transparence à 90/80:
ÉTAPE 3 - TEXTES ET SYMBOLES
En utilisant l'un de la bibliothèque de nombreuses polices libre, vous pouvez ajouter un symbole graphique, une icône en fait. Si ce n'est contour, comme dans mon cas, en ajoutant l'effet de:
Otteremo un bel effet notamment:
Seule chose qui manque ... le texte de votre choix!
Related Post
Chargement ... 
Complimenti x il tutoriel, web 2.0 est la création de normes que les webmasters peuvent guère manquer ...
J'ai cherché sur le graphique de réseau qui doit être inclus dans une police similaire aux boutons que vous avez utilisé, mais j'ai trouvé, vous pouvez me dire comment ça s'appelle ni où le trouver? Merci
@ Marc: Merci Marc! Vous pouvez trouver des polices bitmap à cette adresse: http://www.orgdot.com/aliasfonts/
Tutoriel Photoshop: Web 2.0 icônes de modèle en 3 étapes | Undolog.com ...
Tutorial pour créer des icônes de style avec Photoshop 2.0 ....
hei .. mais vous avez oublié de nous dire comment l'ombre en vertu de laquelle se fane!
.. tu sais .. vous avez déjà fait 99 .. Il ya 100
mythique petit bouton .. mais il faudrait une ombre con hein hein! ^. ^
@ Dapdudida:
De me pardonner j'ai fait un petit screencast, bien qu'il n'y a aucun bruit venu! Allez ici techniques de réflexion 
'as raison
Il existe deux techniques: avec le masque sur la couche (le premier exemple) et utilisez le général masque! Je préfère la première
Great tutorial! J'ai été en attente, je vous remercie! 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 n'avez pas trouvé?
J'ai essayé de chercher sur le site que vous avez publiés dans les commentaires précédents paragraphes, mais je n'ai rien trouvé.
@ Agriturismo Lazio: les icônes sont en fait une carte de police. Vous pouvez trouver de nombreuses polices de caracteres qui contiennent des caractères au lieu des habituelles icônes de différents types. Recherche Google pour "dingbats font"
À savoir les garçons, après cette étape .. Je sais que c'est des conneries, mais je suis en tilt "Ajouter un nouveau calque au dessus de l'un vient de s'achever. Sélectionnez la forme (Ctrl + clic sur la couche) et la couche restante sur le nouveau vide "quelqu'un peut-il expliquer comment, si j'étais un enfant de 2 ans?
@ Mark: vous avez à faire dans la pratique est de recréer la même forme que le bouton sur le calque vide, mais un peu petites. Pour sélectionner le contenu d'un calque que vous pouvez utiliser CTRL + clic de souris. De cette façon vous verrez la boîte autour de la forme du bouton. Ensuite, sélectionnez le calque vide qui a été fait précédemment que la sélection va agir sur cette couche.
Le problème est que quand je serai de mettre "Gradient Overlay" alors la couche couvre toute la couleur du dégradé et ne me laisse pas voir la vue d'ensemble qui est la forme que j'ai donné à la première touche. Deuxièmement, le retour au texte, je crée le niveau, dessiner le carré que d'intervenir dans l'ombre interne et externe je besoin de dupliquer le calque. E droit »?
Merci pour votre excellent guide! Depuis que j'ai vu mes créations ne peuvent que s'améliorer!
@ Matthias: Merci à vous! Pour toute info n'hésitez pas à m'envoyer un email
Pouvez-vous expliquer comment vous avez réussi un didacticiel vidéo fenêtre de style popup visible?
Eh bien je veux dire l'effet sur la vidéo où visis Suggérez-nous un tutoriel sur la création web icônes 2,0 style
@ Giuseppe Serra:
J'ai utilisé la bibliothèque Javascript ShodowBox qui vous permet d'ouvrir des fenêtres popup avec des contenus différents: les images, les animations Flash ou QuickTime, des pages HTML et plus encore.
facile et pratique ... à quel point je l'aime:)