HTML

Vedd fel RSS feedjeid közé!

Forrás keresés (angolul)

Utolsó kommentek

Csillogó gomb készítése

2007.10.15. 12:55 fajtbros


Tedd ezt a cikket a kedvencekbe!

A most következő tutorial olyanoknak szól akik tisztában vannak a photoshop alap szintű kezelésével. Azért megpróbálom úgy bemutatni hogy bárki megértse, képekkel illusztrálva. Angol nyelvű programot használok, de magyarul is leírom az eszközök neveit. Lássuk hát az első tutorialt az oldalon!



Ezt a gombot fogjuk elkészíteni, elég divatosak mostanában az ilyenek az ún. "webkettes" oldalakon, és egész egyszerűen kivitelezhetőek. Készítsünk egy 500x500-as, fehér hátterű dokumentumot. A meglévő background layerhez adjunk hozzá egy újat, nevezzük gombnak, és váltsunk rá.



Válasszuk ki az eszköztárból a lekerekített téglalap eszközt (rounded rectangle) (1), a lekerekítés radius-át állítsuk 30 pixelre (2). Készítsünk vele egy 200x200 pixel méretű téglalapot. Nyomjuk meg rajta az egér jobb gombját, és válasszuk a görbe kitöltését (fill path) (3). Itt bármilyen színt adhatunk neki. Ha kész, válasszuk a szerkesztés menü törlés almenüjét (edit/clear), így törlődik a téglalapunk, de a kitöltés megmarad.






Akkor alakítsunk a téglalapunkon. Kattintsunk duplán a gomb nevű rétegünkre (a rétegek eszköztáron), így megnyílik a rétegstílus ablak. Itt 3 dolgot kapcsolunk be, a belső árnyékot (inner shadow), a bevésés és domborítást (bevel and emboss), és a színátfedést (color overlay). Állítsuk őket a képen látható értékekre (kép). A színátfedés adja meg a gombunk színét, én sötét szürkét választottam (színkód: 505050), de bármire állíthatjuk. A belső árnyékkal belső mélységet adunk a gombunknak, ezáltal üveglap hatása lesz. A domborítás pedig 3d hatást ad a gombnak.




Most így néz ki a gombunk. Mi hiányzik a valódi üveg hatáshoz? A csillogás. Segítsünk rajta:

Készítsünk egy újabb réteget, a neve legyen csillogás, váltsunk rá. Rajzoljunk a téglalapunk felső harmadába egy újabb lekerekített téglalapot (kicsi peremet hagyjunk), a radius maradjon 30-on (1). Válasszuk a toll eszköz szerkesztőpont hozzáadását (add anchor point) (2), és a téglalapunk alső vonalán, középen, adjunk hozzá egy pontot (3). Most válasszuk a görbe választó eszközből a közvetlen kijelölést (direct selection tool) (4). Fogjuk az alulra hozzáadott szerkesztőpontunkat, és húzzuk kb. a téglalap negyedével nagyobbra (5). A két oldalán lévő szomszéd pontok iránypontját pedig alakítsuk úgy, hogy szép ívet kapjunk (5). A kész formán nyomjunk jobb gombot, és válasszuk a kijelölés létrehozása almenüt (make selection). Ezáltal kijelöléssé alakult a görbénk. Vigyázzunk hogy ne nyomjunk rá újra a képre, mert akkor elveszik a kijelölésünk! Ha mégis megtörténne, válasszuk a szerkesztés menü visszavonás parancsát (edit/undo).

Válasszuk ki a színátmenet eszközt (gradient tool) (1), állítsuk a színét fehérre (a kép tetején lévő menüben), a másik végét pedig átlátszóra. Ezután nyomjunk rá egyet, így szerkeszthetjük a színátmenetet (2). Nyomjunk bal gombbal a színátmenet felső peremére, így létrehozunk egy újabb színt az átmenetben. Hagyjuk fehéren, a hely (location) rublikába írjunk 21-et (2). Ezáltal a színátmenetünk eleje tömör marad, és csak utána kezd halványodni.
Menjünk az egérrel kicsivel a kijelölésünk felső pereme alá, nyomjuk le a bal gombot, és húzzuk az egeret egyenesen lefelé, a nagy téglalapunk közepéig (3), és engedjük fel a gombot. Így a kijelölésen belülre került a színátmenet (4). A réteg átlátszóságát (layer opacity)  állítsuk 85-re (a rétegek eszköztáron találjuk).

Kész a felső csillanás, tegyünk egyet az aljára is, de ezúttal másmilyet készítünk:
Új réteget készítünk alsó csillogás néven. Rajzoljunk 2 téglalapot a gombunk bal alsó harmadában (1). Válasszuk az előzőekben már használt görbe kitöltése (fill path) parancsot (2), töröljük ki a görbét (szerkesztés/törlés - edit/clear) és vágjuk le a a létrehozott forma felesleges részét a polygon kijelölővel (polygonal lasso) (3). Ezután radírral halványítsuk és vékonyítsuk el a vonal széleit (4). Homályosítsunk kicsit a rétegen, a szűrők menüben lévő életlenítés almenü, gauss életlenítés parancsával, az értéke 0.7 legyen (filters/blur/gaussian blur).







Készen is vagyunk a csillogással, finomítsunk a gombunkon.

Ehhez 2 újabb réteg stílust adunk a gomb rétegünkhöz: a vetett árnyék (drop shadow) térbeli mélységet ad a gombnak (1), a belső ragyogás (inner glow) pedig fényessé teszi (2).





Befejezésül töltsük meg a gombunkat tartalommal:
Készítsünk egy új réteget, belső néven. Tegyük a gomb és a csillogás rétegek közé, így olyan hatást kapunk, mintha a gomb belsejében lenne a tartalom. Az alakzat (custom shape) menüből válasszunk egy nekünk tetsző formát, tegyük a gomb közepébe, és használjuk újra a görbe kitöltést (fill path), a görbét törölhetjük utána. A réteg átlátszóságát (opacity) állítsuk 80-ra, és adjunk egy kis árnyékot (drop shadow) neki (kép). Ezzel a forma picit beleolvad a gombunkba.

Ha mindent jól csináltunk, ezt az eredményt kapjuk. A gomb réteg színátfedését  (color overlay) állítgatva, bármilyen színű gomb készíthető. Használhatunk színátmenetet (gradient overlay) is (4. példa).










Remélem érthető volt a leírás, segítségül itt letölthetitek a kész psd fájlt. Ha kérdésetek van írjatok bátran.

Szólj hozzá!

Címkék: photoshop tutorial

A bejegyzés trackback címe:

http://fajtbros.blog.hu/api/trackback/id/tr30195104

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.