Bouton Photoshop Créer Web 2.0
Boutons Les didacticiels Photoshop sont probablement l'une des catégories les plus prisées de tous les sites de didacticiels Photoshop et, comme le Web 2.0 est un sujet d'actualité, organisons un bouton simple adapté à toute application Web 2.0 de sites Web. Tutoriel après saut.
Créez une toile vierge à environ 500 pixels (largeur) x 400 pixels (hauteur) pour démarrer la conception du bouton. Créer un nouvel appel de couche 'bg01'. Sélectionnez le Outil rectangulaire arrondi, maintenez SHIFT enfoncé et tracez un carré arrondi au centre. N'importe quelle couleur est bien au stade actuel.
Appeler le Options de fusion de 'bg01'et ajustez les styles suivants:
Ombre portée
- Opacité: 40%
- Distance: 0px
- Propagation: 0%
- Taille: 6px
Superposition dégradée
- Couleur d'arrêt: 0%, # d00031
- Couleur d'arrêt: 100%, # ff2b5d
Tenir CTRL, clic gauche sur 'bg01'Layer Thumbnail pour sélectionner sa forme. Aller Sélectionner -> Modifier -> Contrat et entrez la valeur '2px'. Cela réduira la zone sélectionnée de 2 pixels.
Créer un nouvel appel de couche 'bg02'et remplit la zone en surbrillance (après rétrécissement) de n’importe quelle couleur. J'utilise le noir 000000 ici. Double-cliquez sur 'bg02' pour lancer la Option de mélange et peaufiner le style suivant.
Superposition dégradée
- Couleur d'arrêt: 0%, # c6002f
- Couleur d'arrêt: 100%, # c6002f
Créez un autre nouveau calque pour le texte, appelez-le 'SMS'. Insérer le texte de votre bouton. Je vais utiliser un alphabet pour représenter. Les styles de police que j'utilise ici sont les suivants:
- Arial arrondi gras
- 150 pt
De même, après avoir choisi votre texte, double-cliquez sur 'txt' pour lancer le Options de fusion et peaufiner les styles suivants.
Ombre portée
- Opacité: 25%
- Distance: 0px
- Propagation: 0px
- Taille: 5px
Ombre intérieure
- Opacité: 10%
- Distance: 0px
- Starter: 0
- Taille: 10px
Biseautage Emboss
- Profondeur: 1px
- Direction: bas
- Taille: 0px
- Adoucissement: 0px
- Opacité du mode de surbrillance: 32%
- Opacité du mode Ombre: 32%
Superposition dégradée
- Couleur Stop: 0% # d2d2d2
- Color Stop: 100% # f0efef
Le bouton est presque terminé. Donnons-lui une petite lueur sur la partie supérieure. Tenir CTRL, click gauche 'bg02'Vignette de couche pour mettre en évidence la forme extérieure; choisir Outil Marquee Eclipse. Maintenant tenir ALT, avec l’outil de sélection Eclipse sélectionné, faites glisser le curseur pour réduire la moitié inférieure de la zone en surbrillance. Reportez-vous à l'image ci-dessus.
Avec la partie supérieure en surbrillance et l'outil Eclipse Marquee toujours sélectionné, cliquez avec le bouton droit de la souris et choisissez Plume; entrer 15px pour le rayon.
Créez un nouveau calque, appelez-le 'lueur'et remplissez la partie surlignée avec du blanc [#ffffff]. Cela devrait ajouter un effet de lueur à la partie supérieure de votre bouton. Le produit final devrait ressembler à l'image ci-dessous.
Quelque chose d'extra…
Tweak les options de mélange de 'bg01' et 'bg02vous donnera des boutons plus intéressants. Voici un autre tutoriel Photoshop sur le bouton que j'ai déjà réalisé - Créer un bouton brillant pour le Web 2.0
Télécharger un échantillon
