Csináld magad : Web2.0 gomb

Ilyen sem volt még, de mivel az utóbbi időben készítettem néhány hasonló képet, gondoltam közzé teszem egy egyszerű web2.0 gomb elkészítésének menetét. Nem állítom, hogy zseniális, és biztos vannak rá jobb módszerek, de ezzel a technikával néhány pillanat alatt összetákolhatunk egy ilyet:

Ehhez a Photoshop CS5 programot fogom használni, de valószínűleg korábbi verziókkal és más rajzprogramokkal is hasonló módon elkészíthető.

A GOMB ELKÉSZÍTÉSE

RAJZTERÜLET
Először is a rajzterület létrehozásával kezdünk. Ehhez egyszerű Ctrl+N kombinációt használva az alábbi beállításokat megadva létrehozom a "vásznat".
Jelenleg 150*40-es képpel dolgozom, ez elég kis méret, de a példa számára megfelelő.
Ez a méret a gomb teljes mérete is lesz egyben.

GOMB FORMÁJA
Az eszköztáron kiválasztva a Lekerekített téglalap eszközt választom.
A gomb beállításainál, fent pedig a Sugarat 35px-re állítom. Ez az érték tetszőleges, a gomb formájától függően.

KEVERÉSI BEÁLLÍTÁSOK
Az alap objektumunk kész is van, következzék a gomb kinézetének elkészítése.
Először is jobb egérgombbal kattintsunk a korábban létrehozott rétegre, majd a megjelenő menüben válasszuk a Keverési beállítások lehetőséget.

Az ablakban állítsuk be az alábbiakat:

Ugyanitt keressük meg a Színátmenet-átfedést, majd az előtér-háttér készletet válasszuk.
Én az alábbi két színt használtam a színátmenetben:
Világosabb sárga: #F5C728
Sötétebb sárga:#DBAD11

Egy apró körvonalat még alkalmaztam, belülre állítva az alábbi színnel:#CDA210
Ha mindent a fentiek szerint csináltunk, valami ilyesmi kell legyen a végeredmény:

FEHÉR "FÉNY"
Ezek után hozzunk létre egy új réteget (Ctrl+Shift+N),majd az Ellipszis kijelölés eszközt választva valami hasonló kijelöléssel próbálkozzunk:

A kijelölést töltsük ki fehér színnel a Festékes vödör eszközt használva, majd a rétegstílust állítsuk Lágy fényre, a réteg Fedettségét pedig 30%-ra.

Ezek után Shift+Ctrl+I gombbal fordítsuk meg a kijelölést, majd kattintsunk a Kijelölés/Módosítás/Simítás parancsra.

A mértéket állítsuk 5px-re,majd OK.
Ezután nyomjunk a Delete gombra és töröljük a kijelölt tartományt.
A törlés után a kép valahogy így fest:

SZÖVEG ELHELYEZÉSE
Most már ráírhatjuk a kívánt szöveget a gombra.
Ehhez a Vízszintes szövegírás eszközt választom, majd a kívánt betűtípussal és mérettel (jelen esetben Tahoma, 24px, középre igazítva) beírom a szöveget.

Ezek után nincs más dolgunk, mint a szövegréteg Keverési beállításainál a belső árnyékot beállítani az alábbiak szerint:

Ha mindent jól csináltunk, megkapjuk a fent már látott gombocskát, vagy legalábbis ahhoz hasonlót.

ÖSSZEGZÉS

Lényegében ennyi lett volna magának a gombnak az elkészítése. Természetesen ez csak egy fajta gomb, nyugodtan lehet más méretű-színű gombokat is készíteni. Ez csupán egy módszer, amely lényegesen egyszerűbb annál, mint amilyennek így leírva tűnik. Nem mondom, hogy a legjobb, de ezt mindenki döntse el maga a végeredmény után.