Kako napraviti sjajnu veb dugmad u Adobe Photoshop-u CS3

  Od samih početaka veb dizajna , veb-dugmad ili veb-tasteri su jedan od najvažnijih elemenata korisničkog interfejsa. Adobe Photoshop nam omogućava da sa lakoćom napravimo tastere sa realističnim efektima presijavanja koji će privući pažnju korisnika.

  Iako su ranije ovakva dugmad korišćena u dizajnu navigacionih linkova danas ih sve više potiskuju mnogo jednostavniji CSS3 stilovi za koje postoji solidna podrška pretraživača. Veb dugmad urađena u Photoshopu i dalje su čest element veb interfejsa i u ovom tutorijalu ću objasniti jedan od  načina ( , a ima ih zaista mnogo) da se ona naprave. O tasterima veb navigacija kreiranim pomoću CSS3 biće reči u  nekom od narednih tutorijala.

  Za početak potrebno je otvoriti Adobe Photoshop CS3 i kreirati novi dokument (File>New ili Ctrl+N), a u prozoru koji se pojavi unesite parametre kao na slici.

  Izaberite Rounded Rectangle Tool (U) i pomoću nljega nacrtajte pravougaonik zaobljenih ivica (u zavisnosti od toga kavo dugme želite možete izabrati i druge alate i nacrtati krug, kvadrat, itd.). Pravougaonik treba centrirati na radnoj površini pomoću Move Tool-a (V).

  Sada u Layer paleti napravite kopiju sloja Shape 1 ( to je sloj na kome je pravougaonik ) tako što ćete ga prevući mišem na ikonicu Create New Layer u dnu palete.

Da bismo napravili metalni okvir oko dugmeta potrebno je selektovati sloj Shape 1 (mora biti postavljen ispod kopije), a zatim kliknite na taster Ad a layer style u dnu Layer palete. U prozoru koji se otvori čekirajte polje ispred reči Stroke, a zatim podesite parametre kao na slici. 

  U polju Fill Type izaberite opciju Gradient . Ispod će se otkriti nove opcije , a potrebno je kliknuti na polje Gradient ( odmah ispod Fill type).Otvoriće se Gradient editor  u kome podešavate izgled gradienta. Na slici je jedna od mogućnosti, ali možete uraditi i drugačije.

  Sada selektujemo sloj Shape 1 Copy i ponovo idemo na opciju Add a layer style. Podesite parametre Bevel and Emboss i Color Overlay kao na slikama.

    Pritisnite karticu Paths (pored palete layers), a zatim desnim klikom miša na Shape 1 copy Vector Mask pa na opciju Make selection.

   U prozoru koji se pojavi čekirajte New selection pa OK.

  Izaberite alat Rectangular marquee tool (M) i u opcijama koje će se pojaviti na vrhu ekrana izaberite Subtract from selection.

  

  Rectangular marquee tool-om obuhvtite donju polovinu selekcije da bi ste je uklonili.

   U paleti layers kreirajte novi sloj ( taster Create new layer ). Kliknite na ikonicu novog sloja(Layer 1), a zatim pritisnite taster D (Default Foreground and Background color). Idite na opciju Edit>Fill i u prozoru Fill u polju use izaberite Background color. Layer 1 je i dalje selektovan, pa u paleti layer podesite klizač Opacity na 50% .

  Idite na Select>Deselect , zatim pritisnite Ctrl+T  i par puta tater dole na tastaturi pa Enter.

  Dugme je, u principu, gotovo sada je samo potrebno dodati logo između Layer1 i Shape 1 Copy.

  Logo koji želite da ubacite otvorite u novom prozoru u Photoshopu i oba prozora smanjite. Logo mora biti na transparentnom sloju. Selktujte sloj i mišem ga prevucite u prozor u kome je dugme. U paleti Layers ga povlačeći mišem postavite između slojeva Layer1 i Shape 1 Copy. 

Pritiskom na tastere Ctrl+T pojaviće se tačke koje će vam omogućiti da podešavate veličinu (držite Shift za ravnomerno skaliranje), a pritiskom na strelice postavićete ga gde želite na dugmetu.

  Ovo je jedan od jednostavnijih načina za pravljenje veb dugmadi  ali na internetu možete pronaći još mnogo različitih rešenja. Evo nekoliko linkova koji vam mogu koristiti:

http://www.youtube.com/watch?v=lGZpzFA4ICo

http://www.supadupawebdesign.co.uk/tutorials/Adobe-Photoshop-2/Micro-Bevel-Button-28

http://naldzgraphics.net/tutorials/how-to-make-glossy-buttons-in-photoshop/

Kako napraviti spiralne ukrase u Adobe Illustrator-u CS4 (swirls, swooshes, vignette)

Spiralni ukrasi su jedan od najčešće korišćenih dekorativnih elemenata u dizajnu. Možemo ih videti gotovo svugde; na čestitkama, u uglovima stranica knjiga, kao delove logotipa, tetovaže,...

Prave se najčešće pomoću Adobe illustrator-a, a  njihova izrada nije previše tehnički zahtevna tako da se može raditi u gotovo svim verzijama programa. 

Da bi se počelo sa izradom ovih vinjeta (na internetu će te nailaziti na različite nazive kao na primer; swirl, twirl, ornaments, swooshes,...) potrebno je prvo napraviti četkice i naučiti kako se prave osnovni elementi spitala.

Četkice

Pre nego što počnemo sa crtanjem spirala potrebno je napraviti četkice. Ja sam se odlučio za jednu klinastog oblika, koja će učiniti da se sprale sužavaju ka vrhu, i drugu u obliku lista.

Prvo je potrebno nacrtati krug pomoću Elipse Tool-a (L), (levi taster miša i Shift za pravilan krug), a zatim koristeći Direct Selection Tool (A) kliknite na krug pa na desni čvor koji će se pojaviti na kružnici. Povucite čvor u desno držeći pritom Shift.

Pritisnite Shift + C (Convert Anchor Point Tool) i kliknite na čvor koji ste prethodno prevlačili da biste zaobljeni oblik promenili u ugao.

Poterbno je napraviti trougao pomoću Polygon Tool-a tako što kliknete bilo gde na radnoj površini, a onda u polje sides unesite broj 3. Pritisnite V (Selection Tool) i povlačenjem   

srednjeg desnog čvora na Bounding Box-u u levo suzite trougao u oblik klina.

               

Objekat selektujte, a zatim idite na Object> Transform> Rotate i u prozoru koji se pojavi u polje Angle unesite vrednost -90. Ovaj objekat prekopirajte (Ctrl+C, Ctrl+V) jer će ta kopija takođe biti jedan od oblika četkice.

Postavite ove objekte tako da se preklapaju (kao na sklici), a potom ih oba selektujte pomoću Selection Tool-a. U paleti Align (nalazi se sa desne strane ekrana, a ako nije vidljiva pritisnite Shift+F7) kliknite na opciju Vertical Align Center. Pošto su objekti poravnati, u paleti Pathfinder (Shift+Ctrl+F9) kliknite na opciju Minus Front.

Sada imamo dva oblika od kojih ćemo napraviti četkice na sledeći način. Kliknite na oblik, a zatim ga prevucite u paletu Brushes (F5) i u prvom prozoru koji se pojavi čekirajte New Art Brush  zatim OK, a u sledećem prozoru unesite ime četkice (npr. brush 1, brush 2,...) i opet OK. 

Linije i spirale

Pomoću Pen Tool-a nacrtajte nekoliko linija koje će biti osnova za spirale. Oblik linija možete menjati pomoću Direct Selection Tool-a tako što ćete pomerati linije koje usmeravaju čvor. Kada to završite selektujte linije i u paleti Brush izaberite četkicu kao na slici (treća odozgo na slici, nalazi se u Adobe paketu među Artistic četkicama).

Spirale se prave pomoću alata Spiral tool, a da biste stekli osećaj da rukujete njime potrebno je malo vežbe. Spirala se pravi tako što kliknete na radnu površinu, držite miš i prevlačite. Držeći Space pomerate spiralu, a pritiskom na strelice gore i dole na tastaturi povećavate i smanjujete broj krugova. Držeći Ctrl povećavate i smanjujete ugao spirale.
Kada ih nacrtate selektujte ih i u paleti Brush izaberite četkicu klinastog oblika koju smo ranije napravili i promenite debljinu linije u padajućem meniju Stroke (izaberite veličinu koja najviše odgovara, možete i sami uneti vrednost).

Sada polako dodajte spirale na linije tako da se dobije razgranata forma kao drvo ili stabljika cveta ili šta vam god padne na pamet. Krajevi spirala će ostati da štrče iz glavnih linija, njih ćemo kasnije ukloniti.

Kada završite sa dodavanjem spirala sledeći korak je uklanjanje viškova pomoću Eraser Tool-a (Shift+E). Prvo morate otvoriti Layer paletu i kliknuti na strelicu ispred naziva sloja (layer 1).

Pronađite među putnjama osnovne linije iz prethodnih koraka i kliknite na prazno polje (iza polja sa slikom oka), da bi ste ga zaključali i zaštitili u narednom koraku.

 Sad uklanjamo viškove pomoću Eraser Tool-a tako što jednostavno kliknemo i prevu;emo preko dela koji \elimo da uklonimo. Zaklju;ane putanje 'e ostati netaknute.

 Kada je to gotovo, otključajte slojeve koje ste zaključali u predhodnim koracima. Izaberite Paintbrush tool (B) i u polju stroke izaberite četkicu u obliku lista koju smo ranije napravili. Nakon toga povlačite kratke crte pored linija i spirala .Ako se desi da su oblici listova deformisani, u polju stroke promenite širinu linije.

 Vinjeta je skoro gotova, sada je još  samo potrebno selektovati ceo oblik (Selection Tool (V)), a zatim idite na Object>Expand Appearance (pre ovog kopraka pametno je napraviti kopiju objekta jer više nećete moći da ga modifikujete). Potezi četkice će sada biti konvertovani u oblekte.Posto je oblik vinjete i dalje selektovan, u paleti Pathfinder izaberite opciju Unite.

 Elementi vinjete su sada sjedinjeni u jedan objekat kome možete menjati veličinu i boju po želji.

Alternativno rešenje

  Ovo je samo jedan od načina za crtanje vinjeta. Često se koristi i Twirl tool kojim možete da uvijate bilo koji objekat u spiralu. Najčešće se nacrta jednostavna spirala na isti način kao sto je opisano u prethodnom primeru samo sa debljim linijama, a onda Twirl tool-om uvijate delove linija praveći tako nove spirale (duplim klikom na ikonicu twirl tool-a otvara se prozor u kome možete podesiti veličinu četkice, oblik i td).

Ovako izgleda spirala pravljena pomoću twirl tool-a.