Photoshop Web 2.0-knop maken
Knoppen Photoshop-zelfstudies zijn waarschijnlijk een van de populairste categorieën in elke Photoshop-handleiding en aangezien Web 2.0 nu zulke populaire onderwerpen zijn, kunt u een eenvoudige knop gebruiken die geschikt is voor elke Web 2.0-toepassing van websites. Tutorial na de sprong.
Maak een leeg canvas op ongeveer 500px (breedte) x 400px (hoogte) om het knopontwerp te starten. Maak een nieuwe layer-call 'BG01'. Selecteer de Afgeronde rechthoekige tool, houd SHIFT ingedrukt en teken een vierkant vierkant in het midden. Elke kleur is goed in de huidige fase.
Roep de Meng opties van 'BG01en pas de volgende stijlen aan:
Slagschaduw
- Dekking: 40%
- Afstand: 0px
- Verspreiding: 0%
- Grootte: 6px
Gradiant Overlay
- Kleur stop: 0%, # d00031
- Kleur stop: 100%, # ff2b5d
Houd CTRL ingedrukt, klik met de linkermuisknop op 'BG01'Laagminiatuur om de vorm te selecteren. Gaan kiezen -> Wijzigen -> Contract en voer de waarde in '2px'. Hierdoor wordt het geselecteerde gebied met 2 pixels kleiner.
Maak een nieuwe layer-call 'BG02en vulde het gemarkeerde (na verkleinen) gebied met elke kleur. Ik gebruik # 000000 zwart hier. Dubbelklik op 'bg02' om de. Te starten Meng optie en tweak de volgende stijl.
Gradiant Overlay
- Kleur stop: 0%, # c6002f
- Kleur stop: 100%, # c6002f
Maak nog een nieuwe laag voor tekst, noem het 'tekst'. Voer de tekst van uw knop in. Ik zal een alfabet gebruiken om te vertegenwoordigen. De lettertypestijlen die ik hier gebruik, zijn als volgt:
- Afgeronde Arial Bold
- 150pt
Hetzelfde, na het beslissen van je tekst, dubbelklik op 'txt' om het te starten Meng opties en tweak de volgende stijlen.
Slagschaduw
- Dekking: 25%
- Afstand: 0px
- Verspreiding: 0px
- Grootte: 5px
Innerlijke schaduw
- Dekking: 10%
- Afstand: 0px
- Choke: 0
- Grootte: 10 px
Schuine kant Emboss
- Diepte: 1px
- Richting: omlaag
- Grootte: 0px
- Softten: 0px
- Markeermodus Dekking: 32%
- Schaduwmodus Dekking: 32%
Gradiant Overlay
- Kleur stop: 0% # d2d2d2
- Kleur stop: 100% # f0efef
Knop is bijna klaar. Laten we het een beetje gloeien boven het bovenste gedeelte. Houden CTRL, links klikken 'BG02'Laagminiatuur om de buitenvorm te markeren; Kiezen Eclipse Marquee Tool. Houd nu vast ALT, met Eclipse Marquee Tool geselecteerd, slepen is over om de onderste helft van het gemarkeerde gebied te minderen. Raadpleeg afbeelding hierboven.
Met het bovenste gedeelte gemarkeerd en Eclipse Marquee Tool nog steeds geselecteerd, klik met de rechtermuisknop en kies Veer; invoeren 15px voor de straal.
Maak een nieuwe laag, noem het 'gloeden vul het gemarkeerde gedeelte met wit [#ffffff]. Dit zou een gloedeffect aan het bovenste deel van je knop moeten toevoegen. Het uiteindelijke product zou er ongeveer zo uit moeten zien als de afbeelding hieronder.
Iets extra's ...
Tweak de mengopties van 'BG01'en'BG02'geeft je meer interessante knoppen. Hier is nog een andere Photoshop-tutorial over de knop die ik eerder heb gemaakt - Maak een glanzende knop voor Web 2.0
Voorbeeld downloaden
