Danasnji clanak u sebi ima prilicno velik broj grafika, pa preporucamo da otvorite newsletter dok ste online kako bi se sve grafike ocitale sa servera.

Photoshop 7: gumbi na sto nacina
Napisao: Kresimir Cvitanovic © 2001 - 2002

Iako ni priblizno nisu vise tako popularni kao u zacecima weba, gumbe (dugmad, buttons, botuni, kako kome pase) jos mozete koristiti, a da to izgleda efektno i pristojno.

Jednostavni 3D gumb

	Napravite novi file koji je kvadrat (neka su mu dimenzije jednake). Napravite krug iz sredine slike koristeći se alatom za odabir .
	Izaberite svijetliju boju za prvu i tamniju za drugu. Koristeći se alatom gradient ispunite krug od svijetlije boje prema tamnijoj (ili obrnuto - zavisi od kuda zelite da vam dolazi svjetlo). Ovaj primjer koristi 45o od gornjeg lijevog ugla prema donjem desnom.
	Sada napravite manji krug unutar ovoga i ispunite ga istim bojama, samo sa suprotne strane.
	Konacno, upisite neki tekst na gumb alatom type . Za najbolje rezultate koristite boje koje su kontrastne kako bi se tekst lakse mogao procitati.

Reljefni 3D gumb

	Napravite novi file i neka bude kvadrat (sirina i visina neka su mu jednake - ja sam koristio 55x55 piksela). Izaberite svijetlu boju za prvu i tamniju za drugu. Koristeći alat gradient ispunite sliku od tamnijeg prema svijetlijem.
	Izaberite sve (CTRL+A) i kliknite na Select -> Modify -> Border. Upisite manji broj (ja sam koristio 5). Sada ispunite odabir istim bojama, samo sa suprotne strane.
	Posljednji korak je upisivanje bilo koje rijeci ili znaka. Za bolje rezultate koristite kontrastne boje (ukljucite Anti-aliasing unutar alata type , ako već nije ukljucen).

Okrugli 3D gumb

	Napravite novi file i neka bude kvadar (neka su mu sirina i visina jednake, ja sam koristio 80x80 piksela). Ispunite ga svijetlom bojom.
	Koristeći alat za kruzni odabir napravite krug. Otvorite alat gradient i u gornjem meniju izaberite opciju radial gradient . Ispunite krug od bijele pa prema bilo kojoj tamnijoj boji od gore lijevo pa prema dolje desno (ne bas iz samog ruba nego vise prema sredini kruga).
	Kliknite na Select -> Modify -> Contract i upisite 5. Sada ponovite korak 2, samo sa suprotne strane. Sada mozete sve ostaviti kako jest ili slijediti sljedeće korake za razlicite varijacije.
	Kliknite na Select -> Modify -> Contract i upisite 3. Ispunite sada manji krug jednom bojom.
	Ako zelite dodati jos vise dimenzija, ispunite krug prvim gradientom koji smo koristili (slijeva na desno). I to je to!

Efekt pritisnutog gumba

	Puno ljudi koristi ovaj jednostavan efekt utisnutog gumba, evo objasnjenja:
	Prvo trebate napraviti gumb. Ja sam zapoceo s bijelom podlogom (to je takodjer mogla biti i neka tekstura).
	Sada napravite kruzni odabir i spremite ga (save selection). Izaberite svijetlu za prednju i tamnu za straznju boju. Ispunite ga od gornjeg lijevog kuta prema donjem desnom alatom gradient.
	Sada smanjite krug (Select -> Modify -> Contract - ja sam za 8) i Select feather za 2 piksela (ALT+CTRL+D). Ovaj krug ispunite istom bojom, samo sa suprotne strane. Vas gumb bi trebao izgledati ovako.
	Napravite novi layer (kliknite na ikonu new layer). Sada upisite tekst koji zelite na svom gumbu.
	Napravite novi, treći layer, i Select -> Load Selection -> alpha1. Napravite crni prsten oko tog odabira tako sto ćete izabrati crnu za svoju prednju boju, Edit -> Stroke (2 piksela iz sredine). Sada ste gotovi s gornjom fazom gumba. Naredbom File -> Export -> GIF89a Export spremite ga pod neko ime.
	Sada pocinjemo s donjom fazom gumba. Napravite jos jedan layer i pomaknite ga => kliknite na njega i drzeći tipku povucite ga izmedju teksta i layera sa crnim prstenom. Selection -> Load Selection -> alpha1. Ispunite ga s 30% crne (Edit -> Fill).
	Select -> Feather (ALT+CTRL+D) za 3 piksela. Invert selection (CTRL+SHIFT+i) i koristeći se strelicama pomaknite ga 4 piksela dolje i 4 piksela desno (pomicite samo odabir, a ne sivu boju koja je sada tamo). Ispunite s 80% crne (Edit ->Fill).
	Selection -> Load Selection, Invert selection (CTRl+SHIFT+i). Pritisnite Delete. Ovo će pobrisati visak koji je obojan u crno.
	Kako bi ovo sve izgledalo realisticnije, kliknite na layer s tekstom i pomaknite ga 1 ili 2 piksela dolje i desno. Gotovi ste sa donjom fazom gumba. File -> Export -> GIF89a Export.
	Ovako će izgledati vas gumb sa dvije faze.

Gumb u obliku pilule

	Izaberite krug.
	Kliknite na Quick Mask ikonu na dnu toolbara . Vasa slika bi trebala izgledati ovako.
	Nacrtajte kvadrat oko kruga i pritisnite ALT+CTRL+SHIFT pomicući misem krug na drugi kraj slike.
	Sada napravite pravokutni odabir koji će povezivati vrhove krugova.
	Pritisnite Delete. Ako se ispuni crvenom umjesto bijelom, pritisnite "x" (ovo će zamjeniti prednju i zadnju boju), i ponovno Delete. Slika bi trebala ovako izgledati:
	Iskljucite Quick Mask i vratite se u normalno crtanje. Selection -> Save Selection.
	Ispunite odabir vasom bojom ili teksturom.
	Select -> Modify -> Contract -> 4 piksela. Select -> Feather -> 2 piksela. Pritisnite SHIFT+CTRL+i kako biste preokrenuli odabir i na novom layeru ispunite bijelim gradientom od vrha gumba prema sredini (izaberite Foreground to transparent).
	Sada ispunite layer crnim gradientom odozdo prema sredini. Load Selection -> alpha1, zatim Invert (SHIFT+CTRL+i) i pritisnite Delete. Ovako bi se trebali rijesiti viska crne boje na dnu.
	Ponovno Invert selection (SHIFT+CTRL+i), Edit -> Stroke -> 2 piksela iz sredine (center). Ovo će gumb obrubiti crnom bojom kako bi mu granice bile vidljivije.

3D gumb s teksturom

	Napravite novi layer i na njemu napravite krug alatom marquee. Save selection, pa ispunite odabir teksturom. Ovo mozete napraviti tako sto ćete otvoriti teksturu, cijelu je izabrati (CTRL+A), kopirati je (CTRL+C) i zatim otići na sliku gdje je krug CTRL+SHIFT+V (Paste Into).
	Napravite jos jedan layer, izaberite bijelu kao prednju boju i onda ispunite krug gradientom (Foreground to transparent) od gornjeg lijevog dijela do sredine.
	Sada stavite crnu za prednju boju i ponovite drugi korak, samo od donjeg desnog dijela prema sredini.
	Ako zelite sjenu, napravite jos jedan layer i postavite ga izmedju layera s teksturom i Background layera. Ispunite odabir sa 60% crne boje. Zatim izaberite sve (CTRL+A) i Filter -> Blur -> Gaussian Blur -> 2 piksela. Pritisnite "v" (aktivira alat move) i pomaknite vasu sjenu 3 piksela dolje i 3 piksela desno koristeći se strelicama. Odavde mozemo krenuti na tri nacina (sva tri se rade na layeru s gradientima). Kliknite na layer sgradientima, Load Selection -> alpha1. Sada ga smanjite sa Select -> Modify -> Contract -> 6 piksela.
	Prvi nacin: Ako zelite ravan gumb, samo pritisnite Delete.
	Drugi nacin - Ako zelite fino zaobljeni gumb, kliknite Select -> Feather -> 3 piksela i zatim Delete.
	Treći nacin - Ako zelite udubljeni gumb, kliknite Select -> Feather -> 3 piksela. Kliknite desnom tipkom misa na odabir i odaberite numeric transform (180o). Opacity (vidljivost) layera s gradientima smanjite na 70% kako biste imali veću realisticnost.

O autoru:

Kresimir Cvitanovic (mojimejl@net.hr) - Roden 80-e godine. Kao sudionik web scene vec 6 godina, odlucio se usavrsavati na podrucju dizajna. Od prve stranice koju je napravio u svojoj 15 godini http://www.geocities.com/timessquare/alley/98057, malo je uznapredovao sto mozete vidjeti na njegovom posljednjem uratku www.zorin-dom.hr. Zasto malo, a proslo je već 6 godina? Iako zna (jamacno je morao nauciti do sada) da koristenje iframeova, flasha i sl. dodataka nije preporucljivo, on ih bezobzirno koristi kao da ga nije briga za publiku. S druge strane – upravo takvi ljudi pomicu granice. Svaki njegov uradak osvjesenje je za hrvatski web pa zeljno iscekujemo njegova nova ostvarenja. Posjetite ga na http://aditon.web1000.com.