Ontwerp de glossy web 2.0-knop in Photoshop
Op zoek naar een glanzende web 2.0-knop? Hier is een eenvoudige tutorial over Photoshop die je stap voor stap leert hoe je een mooie rode glanzende knop kunt krijgen.
Stap 1 - De basis creëren
Start een nieuw canvas op en pas de volgende instellingen aan (geel gemarkeerd) volgens de onderstaande afbeelding. De rest zou als standaard moeten komen. U wilt misschien ook controleren met de standaardwaarden.
Maak een nieuwe laagoproep 'Knop'
Selecteer op de 'Knop' van lagen het gereedschap Afgeronde rechthoek
Geef het een straal van 7px
Teken een rechthoek die lijkt op de afbeelding hieronder.
Stap 2 - Rode knop
Klik met de rechtermuisknop op de overvloeiopties voor de laag 'Knop'
Tweak de volgende instellingen voor
Slagschaduw
Innerlijke schaduw
Schuine kant en reliëf
Gradiant Overlay
Uw knop zou er ongeveer zo uit moeten zien
Stap 3 - Creëer een glossy effect
Maak een nieuwe lagenaanroep 'Glas'
Selecteer Retangular marquee tool, zorg ervoor dat je de 'Button'-laag selecteert. Houd je Ctrl-toets ingedrukt en klik op 'Knoppen'”s laagminiatuur. Uw knop moet nu worden gemarkeerd.
Selecteer nu de knop 'Glas', houd de Alt-toets ingedrukt met het selectievak Retangular Marquee geselecteerd. Teken (snij) over de onderste helft van de knop, zoals de afbeelding hieronder.
Vul het geselecteerde gebied met witte kleur #ffffff met Paint Bucket Tool
Pas de dekking aan tot 18%
U zou een glanzende knop moeten hebben die er zo uitziet.
Stap 4 - Patroon-overlay
Laten we de knop een lichte overlay geven. Ik gebruik de eerder gecreëerde aangepaste stripe5px. Maak een nieuw laagje 'Patroon' tussen 'Knop' en 'Glas' en ga verder met Mengopties.
Selecteer Patroonoverlay, kies Stripe5px (of een patroon dat u hebt gemaakt) en klik op OK en sluit vervolgens de dialoog.
Zorg dat je nog steeds op het gereedschap Rechthoekig selectiekader staat, houd vast
Stap 5 - Tekst invoegen
Voer willekeurige tekst in witte #ffffff-kleur in met de volgende instellingen
Gebruik de volgende overvloei-effecten op de laag van mijn tekst.
Slagschaduw
Stap 6 - Definitieve uitvoer
Je zou een afbeelding zoals deze moeten krijgen.
