Photoshop – Dugme, uključeno-isključeno

Da vidimo kako da dobijemo dugme, koje će imati dva stanja: uključeno i isključeno, a može se upotrebiti, i za web prezentaciju, i za interfejs vaših aplikacija. Pokrenite Photoshop i otvorite novi dokument (Ctrl+N), i na njemu novi sloj (layer) sa kombinacijom tastera „Ctrl+Shift+N“. Alatkom za selekciju „Marquee Tool“ napravite selekciju koja može biti pravougaonog ili zaobljenog oblika. Potom izaberite alatku „Linear Gradient“ i povucite od vrha selekcije ka dnu, boje podesite tako da vam svetlija bude gore (Foreground). Iskopirajmo sloj sa dugmićem, jednostavno u prozorčiću „Layers“ prevucite sloj sa gradijent dugmićem na dugme „Create a New layer“ na dnu prozora.

Sada ćemo našem dugmiću dodati senku, izaberite meni „Layer -> Layer Style -> Drop Shadow…“ i u novom dijalog prozoru podesite: Distance – 5px i Size – 5px. Ostaje vam samo da dodate neki tekst u dugme, tj. naslov na koji možete da „bacite“ samo blagu senku. Na ovaj način ste kreirali dugme „ISKLJUČENO“. Snimite rad, tj. ovu sliku kao poseban fajl, pošto prelazimo na doterivanje drugog „uključenog“ dugmića.

Pošto ste snimili prethodni rad, kreiraćemo drugo dugme i to upotrebom već postojećeg rada. Kliknite na „oko“ unutar prozora „Layers“ pored sloja na kome smo prethodno radili, da bi sakrili prethodni sloj. Izaberite sloj koji smo na početku iskopirali. Dodaćemo efekt „Inner Shadow“ i izvršiti podešavanja:

  • Opacity – 90%
  • Distance – 6px
  • Choke – 0%
  • Size – 9px
Na kraju podešavanja kliknite na „OK“. Vezaćemo sada sloj sa tekstom za ovaj naš sloj, jednostavno klinite u polje, desno pored „oka“, i to ispred sloja teksta. I ovako „ulančane“ slojeve pomerite za jedan piksel dole i desno. Izaberite alat „Move Tool“, i strelicama na tastaturi pomerite slojeve za po jedan piksel. Na ovaj način ste dobili i dugme „UKLJUČENO“. Sada ostaje samo da ih ubacite u web stranicu.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.