[Tutorial] Glossy buttons maken

Tegenwoordig zie je dikwijls glossy buttons, of gewoon blinkende knoppen, opduiken in website layouts. Logisch ook, want ze geven vaak een professionele en stijvolle indruk. In deze tutorial leer je dus zulke knoppen maken in photoshop. Veel photoshop skills heb je voor deze tutorial niet nodig, met een paar basistechnieken kan je al aan de slag.

1. Open een nieuw document in photoshop, de grootte maakt niet echt uit. Zet de achtergrondkleur op wit.

2. Kies de rectangle tool uit je toolbox.

Rectangle tool

Zet de radius op bv. 5px, als kleur koos ik hier #1d90c5. (als de images te klein zijn, kan je erop klikken om ze te vergroten)

radius.jpg

3. Teken met de rounded rectangle tool een shape, zo ziet de mijne eruit.

Rectangle

4. Dupliceer deze shape. Rasterize de gedupliceerde layer (rechtermuisknop op de layer, -> Rasterize Layer) en kleur hem wit met de paint bucket tool. Nu zouden je layers er als volgt moeten uitzien:

layers.jpg

5. In de volgende stap gaan we de gedupliceerde layer gewoon verkleinen (Edit, Transform, Scale), tot ongeveer de helft van zijn oorspronkelijke grootte.

6. Klik met je rechtermuisknop op de layer, ga naar Blending Options en verlaag de opacity tot 19, of tot wanneer jij de button goed vindt.

opacity

7. Nu kan je natuurlijk nog wat veranderen aan de Blending Options van de oorspronkelijke blauwe layer om het nog wat mooier te maken. Ga naar de Blending Options, en kies gradient overlay, ik gebruikte de volgende instelling:

gradient

8. Tenslotte heb ik om de button nog wat af te werken nog een rand toegevoegd, 1px dik en een kleine shadow om die zichtbaar te maken. Dit is mijn eindresultaat.

eindresultaat

Het is dus helemaal niet moeilijk om zulke glossy buttons te maken, en veel tijd kruipt er ook niet in. Ik hoop dat je hier iets van geleerd hebt, succes!

3 Reacties to “[Tutorial] Glossy buttons maken”

  1. [Extern Artikel] Glossy buttons maken in Photoshop | Zucht Says:

    […] Glossy Buttons maken in Photoshop […]

  2. johan Says:

    very good !!
    easy to use.. I’m loving it !

  3. Jorg Says:

    Thanks for Tutorial!

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s


%d bloggers op de volgende wijze: