Zselés gombok...

19183 5

Készítsünk divatos zselés, szaknyelven Gel-buttont Photoshopban! A dolog nem is annyira bonyolult mint amilyennek elsőre tűnik: többnyire csak a layer-effektusokkal kell bíbelődnünk, és persze használnunk kell néhány kijelölést. Arra persze figyeljünk, hogy ezek a Gel hatású gombok nem mindenhová illenek - ha Web2 dizájnt, vagy csak valami egyszerű és áttekinthető stílust szertnénk, akkor ez a gél-hatás nem megfelelő - technó és grafikailag csilli-villi weboldalakhoz és alkalmazás GUI-khoz azonban tökéletes!


Nyissunk egy új dokumentumot - bármekkora méretű lehet, a lényeg hogy kényelmesen elférjünk "rajta". Készítsünk egy alakzatot (shape) az ellipszis eszközzel - formázzunk olyan alakúra amilyenre az elkészült gombot szertnénk. (ez lehet kör, ellipszis, tojás - természetesen ez az effektus, négyzet alakú gombokkal nem lesz túl szép). Alkalmazzuk a következő réteg-stílusokat ezen az új rétegen:

Készítsünk egy új ellipszis alakú kijelölést az alakzaton:

hirdetés

Ha ezzel megvagyunk, a kijelölés alapján készítsünk egy új réteget (shift+control+n vagy "create new layer"). Az új réteget töltsük ki színnel, a példában ez zöld (#20A808 ) de persze lehet bármilyen. Ha megvagyunk az új rétegen alkalmazzuk ezeket a beállításokat:


Készítsünk megint egy új réteget, majd ezen hozzunk létre egy új kijelölést, valami ilyesmi formában:

Most jön a trükk! A kijelölés formája nem megfelelő (nekünk amolyan "dinnye-szelet" formájúra van szükségünk), szóval tartsuk nyomvaz az ALT billentyűt, így az ellipszis kijelölés "substract" (kivonás) módban fog működni. Amit most kijelülünk, azt "kivesszük" a már létező kijelölésből. Ha mindent jól csináltunk egy ilyen formájú kijelölésünk lesz:

Töltsük fel ezt az új réteget egy világosabb színnel (ha zölddel dolgoztunk akkor világosabb zölddel, más szín esetében értelemszerűen más árnyalattal).
Most válasszuk a filter>blur>gaussian blur effektust, és alkalmazzuk a radius: 4.0 pixel értékkel. Megint készítsünk egy új réteget, hozzunk létre egy kör alakú kijelölést és töltsük fel színnel:

Alkalmazzunk rajta egy kis gaussian blur-t ismét, majd hozzunk létre ismét egy új réteget! Jó hír, hogy ez az utolsó - nem lesz több rétegünk! Készítsünk a button tetején egy ellipszis alakú kijelölést.

Ezt a kijelölést ne színnel, hanem linear gradient-el töltsük ki. Az alapszín fehér, a háttérszín pedig fekete legyen a gradiant tool-ban. Ha megvagyunk ezt a réteget állítsuk "screen"-re: a rétegek "blending mode"-ját a réteg-palettán (layer-palette) találjuk meg: csak állítsuk át a "normal"-t "screen"-re és készen is vagyunk!

Hozzászólások (5)

rauch99

@Dávid: vedd a belső (zöld) színeknek az inverzét. Én így szoktam csinálni.

Dávid

Üdvözlök mindenkit!
Ez a "gel button" tényleg nagyon szuper,de lenne egy kérdésem:
Hogy érhetnék el olyan hatást mint ha "megnyomták volna?
Lehet hogy kicsit buta kérdés,de azért remélem érthető :) .
Előre is köszönöm a választ:
Dávid

Laci

Köszi a leírást!

Új hozzászólás



Ön korábban már belépett a HVG csoport egyik weboldalán. Ha szeretne ezen az oldalon is bejelentkezni, ezen a linken egy kattintással megteheti.

X