Pozdrav!

U ovom kratkom tutorialu napravit ćemo primjer DOWNLOAD gumba i tim putem proći neke osnovne alate Adobe Photoshop-a. Evo kako će izgledati taj gumb kada završimo s tutorialom:

Prvo trebamo napraviti novi dokument. Dakle, kliknemo na „File>New“ i za širinu upišemo 400, a za visinu 200 piksela, dok za rezoluciju upišemo 72 piksela po inču. Kliknemo na „OK“.

Kliknemo na „Channels“  paletu – ako ju ne vidite između „Layers“ i „Paths“ kliknite na „Window>Channels“ i prikazat će se na spomenutom mjestu. Napravimo novi kanal tako da kliknemo na gumb “New channel” na dnu palete.

Zatim kliknemo na novi kanal „Alpha 1“ te odaberemo „Rounded Rectangle Tool“ (U) kojim ćemo napraviti pravokutnik sa zaobljenim kutovima. Na gornjoj alatnoj traci za radius upišemo 10 px, odaberemo bijelu boju kao „Foreground color“ i razvučemo pravokutnik preko većine radnog prostora. Držeći CTRL (Command Key na Mac-u)  kliknemo na thumbnail od našeg novog kanala – time smo selektirali rubove pravokutnika kojeg smo maloprije napravili.

Zatim kliknemo na RGB kanal, prvi na popisu, i vratimo se na „Layers“ paletu gdje i dalje vidimo našu selekciju. Napravimo novi layer. Kako bismo si olakšali, povući ćemo vodič kroz sredinu označenog pravokutnika da znamo do kuda ćemo povući gradijent. Da bismo povukli vodič trebamo kliknuti na gornje ravnalo i povući vodič prema dolje do sredine pravokutnika. Ako ne vidite ravnala kliknite na „View>Rulers“ ili pritisnite CTRL+R.

Sada možemo ispuniti pravokutnik s prvim gradijentom. Kliknite na „Foreground color“ i upišite nakon znaka # sljedeći kod -> 79bbef. Označili smo relativno svijetlu plavu boju, a za „Background color“ upišite 2193e0, što je malo tamnija plava boja. Sada odaberemo alat za gradijent („Gradient Tool“ (G)). Provjerite da je na alatnoj traci odabranog alata na vrhu prozora odabrana opcija „Linear Gradient“ te da gradijent ide „Foreground to Background“. Držeći SHIFT gumb na tipkovnici kliknite na sami vrh pravokutnika i povucite kursor do vodiča kojeg smo postavili na sredinu pravokutnika.

Odaberite „Rectangular Marquee Tool“ (M) te držeći ALT (Option Key na Mac-u) povucite pravokutnik preko gornjeg dijela naše selekcije sve do vodiča na sredini. Time smo smanjili naše označeno područje na donji dio pravokutnika. Sada ćemo taj dio ispuniti s još jednim gradijentom. Za „Foreground color“ upišite 0b6bb8, a za „Background color“ 0451b3. To su dvije malo tamnije nijanse plave boje. Naravno, možete odabrati i svoje boje. Ovo je samo primjer kojeg navodim kako bih vam olakšao rad uz tutorial. Ali na kraju ću vam pokazati kako možete vrlo lako mijenjati boju gotovog gumba. Sada opet odaberite „Gradient Tool“ (G) i također držeći SHIFT kliknite na sredinu pravokutnika (tamo gdje je vodič) i povucite do dna selektiranog dijela. I dobili smo i drugi gradijent.

Pritisnite CTRL+D kako bi se riješili selekcije i nakon toga kliknite na „View>Extras“ da maknemo i vodič. Kako bismo više istaknuli gumb, dodat ćemo okvir. Kliknite na „Layer>Layer Style>Stroke“. Za „Size“ upišite 2 px, a za boju odaberite dosta tamnu nijansu plave boje (npr. 000066).

Kad već uređujemo gumb, odmah ćemo dodati i sjenu. U lijevom izborniku kliknite na „Drop Shadow“ i jedino što trebamo promijeniti je kut pod kojim svijetlo pada („Angle“) i to na 90°.

Još malo pa gotovo. Da bi naš gumb izgledao još bolje i realističnije, malo ćemo posvijetliti gornji dio. Pritisnite CTRL i kliknite na Layer koji sadrži naš gumb, zatim na alatnoj traci kliknite na „Select>Modify>Contract“ i unesite 2 px.

U redu, sada ćemo napraviti novi Layer, postavimo bijelu boju kao „Foreground color“ – samo kratka napomena, najbrži način za resetirati boje (crna kao foreground i bijela kao background) je da pritisnete slovo D na tipkovnici, a zatim pritiskom na slovo X možete zamijeniti te dvije boje. Odaberite „Gradient tool“, ali sada ćemo promijeniti jednu postavku. Pri vrhu ekrana su opcije gradijenta i ovdje moramo promijeniti preset na „foreground to transparent“, odnosno u našem slučaju će gradijent ići od bijele boje do prozirnog.

Sada postavite kursor na vrh selekcije, držite SHIFT, kliknite i povucite do polovice pravokutnika. Pritisnite CTRL+D kako biste maknuli selekciju. Pošto smo ovaj gradijent napravili na posebnom layeru, možemo mu promijeniti „Opacity“, pa napravite to i postavite ga na recimo 80%.

Sada otvorite u Photoshopu sliku „arrow.png“ i kopirajte strelicu otvorenu datoteku gdje se nalazi gumb. Malo ćemo ju smanjiti, pa odite na „Edit>Free Transform“ i držeći SHIFT kliknite na jedan od kutova i povucite prema sredini strelice dok ne dođete do veličine koja vam odgovara. U paleti s layerima s desne strane kliknite na layer u kojem je strelica i povucite ju ispod layera s bijelim gradijentom, tako da gradijent ide i preko strelice.

Sada odaberite alat za tekst, za font odaberite „Verdana“, a za veličinu 30 px, kliknite negdje na ekran i upišite „Download“. Pozicionirajte tekst na sredinu gumba.

Duplicirajte tekst tako da kliknete desnim gumbom miša na layer s tekstom i kliknete na „Duplicate layer“. Promijenite boju doljnjeg teksta u crnu te ga strelicama na tipkovnici pomaknite dva puta u desno i jednom prema dolje.

I  to je to, gumb je gotov. Za kraj bih vam još samo pokazao jedan koristan trik. Recimo da ste napravili gumb, ali u zadnji čas ste se odlučili za druge boje na web stranici i sada gumb više ne paše. To se da vrlo jednostavno riješiti jer možemo naknadno mijenjati boju. Označite layer u kojem je gumb (kod mene je to Layer 1), kliknite na „Image>Adjustments>Hue/Saturation“.

Ovdje možete mijenjati „Hue“ i tako mijenjati boju, a sa „Saturation“ mijenjate zasićenost boje.

Nadam se da ste polovili kako se koriste neki osnovni alati u Photoshopu.

Do sljedećeg tutoriala!