NAZIV OBJEKTA ZNANJA *
Postavka layouta- design u Photoshopu i Ilustratoru
PROLOG
Autor *
Klasifikacija *
Težina *
Ključne reči *
Ko sluša *
Trajanje *
Komentari autora
dr Katarina Kaplarski
IM-lD-VDJ-PostavkaLayouta
osnovni nivo
layout, veb dizajn
Student OAS
30 min
SADRŽAJ
Apstrakt
Definisanje dokumenta za veb u Photoshopu i Ilustratoru, koje se alatke koriste pri izradi layouta i koji su
popularni modeli veb stranica u poslednjih par godina.
Cilj *
Kreiranje mokapa veb stranice pre nego što se pristupi kodiranju.
Uvodne napomene
Naziv sekcije (1)
Postavka layouta- design u Photoshopu i Ilustratoru
Sadržaj sekcije (1)
Prilikom kreiranja predloga dizajna, art direkcije ili prototipa veb sajta služimo se Photoshopom i/ili Illustratorom.
Da bi nam ovi fajlovi poslužili i u kasnijoj fazi razvoja veb sajta - dugmići, pozadine,prelomne linije... trebalo bi
voditi računa o rezoluciji i veličini fajla.
Oba programa imaju predefinisane veb strukture koje možete da izaberete kada započnete rad sa File>New,
a možete i sami da unesete dimenzije koje vam odgovaraju.
Mogu se koristiti jedan ili drugi program, ili oba u kombinaciji. Ilustrator je zgodan zbog preglednosti jer postoji
mogućnost kreiranja više ARTBOARD-ova, što je naročito značajno pri pravljenju koncepta za responsive
design.
Artboardovi funkcionišu slično kao lejeri. Da biste radili na jednom artboardu potrebno je da on bude uključen. Pošto
ćete u budućnosti raditi na responsive prototiovima kao što možete videti na sajtu http://mediaqueri.es/
Možete koristiti ove pdf kartice kao reference
---> media file
IM-lD-VDJ-PostavkaLayouta-1up.pdf
media file <--
---> media file
IM-lD-VDJ-PostavkaLayouta-2up.pdf
media file <--
---> media file
IM-lD-VDJ-PostavkaLayouta-5up.pdf
media file <--
Pri kreiranju layouta dobro je uključiti lenjir View>Rulers (CTRL+R) , važi za oba programa.
Takođe je korisno koristiti Guides View> Guides zbog uravnanja elemenata.
U zavisnosti od početne ideje i zamisli treba izabrati program za izradu prototipa ili mokapa (mockup).
Ovi grafički mokapi se šalju klijentu na odobrenje pre nego što se započne programiranje. Zato je
važno savladati postavljanje grafičkog layouta, kako bi u sledećoj fazi - kodiranja imali što manje
posla sa grafičkim elementima.
Naziv sekcije (2, ...n)
Popularni modeli veb stranica
Sadržaj sekcije (2, ...n)
Pogledaćemo sada neke od aktuelnih trendova u veb dizajnu kako biste se inspirisali za vaše projekte.
 Fiksirana header šlajfna - static navigation bar
Ovo se postiže korišćenjem CSS position: fixed; Posetiocima se uvek prikazuje gornja šlajfna kao da
je zalepljena za browser dok skroluju sajt. Kao na primer http://www.novacrystallis.com/
i http://www.theorydesign.ca/
 Velike foto-pozadine
Ako su dobre fotografije, ovaj stil može biti veoma koristan i lep za oko. Pri ovakvom dizajnu treba
voditi računa o skalabilnosti fotografija od velikih do malih ekrana.
http://www.davidia-int.hr

CSS transparencija
Znači da možete postaviti providan layer preko foto pozadine
http://blog.squarespace.com/

Bedževi za društvene mreže
Promocija sajtova preko društvenih mreža je danas jedan od nezamenjivih segmenta marketinga. Možete
dizajnirati sami svoje bedževe , a možete preuzeti i gotove.
Ovde možete preuzeti besplatne ikonice:
http://www.hongkiat.com/blog/free-social-media-icon-sets-best-of/
 Ilustrovani veb sajtovi
Ilustracije se koriste na razne načine da bi se doprinelo specifičnom izgledu veb sajta. Na primer sajt
http://undergrad.biola.edu/ koristi kombinaciju ilustracija i fotografija da bi dobili efekat zabane
atmosfere za studente , dok sajt http://lucuma.com.ar/ koristi ilustracije samo kao pozadine.
Kviz sajt u vezi sa zemljotresima je pametno koncipiran i jasno ilustrovan
http://quakequizsf.org/

Full-screen tipografija
Pored trenda velikih fotografija, veoma se često koristi i velika tipografija. Ovo su dizajnerska rešenja
inspirisana plakatima i posterima.
http://thegeekdesigner.com/

Vertikalna navigacija
Ako se uradi dobro može da bude veoma elegantno rešenje
http://www.designbombs.com/

Veb prezentacija na jednoj stranici
ponekad uz pomoć parallax scrolla , a ponekad je jednostavno sav sadržaj na jednoj strani
http://www.goslingo.com/

Kružni elementi na veb stranicama
Kao deo navigacije ili kao vitalan element - krugovi se sve više pojavljuju na internetu.
Zanimljiv ali ne baš mnogo funkcionalan sajt je http://luciasoto.com/ pozadina se menja na scrollom
Upečatljiv krug se koristi na ovom sajtu koji je kombinovan i sa velikim fotografijama u pozadini.
http://www.svenkils.de/
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
Photoshop i
Ilustrator tutorijali
za web dizajnere
Exporting prototip
HTML fajl iz
Ilustratora (video
tutorijal)
URL
http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-webdesigners/
http://www.lynda.com/home/Player.aspx?lpk4=109879&playChapter=False
REČNIK POJMOVA I SKRAĆENICA
Termin
Opis
mokap - mockup
U dizajnu mokap je model proizvoda u pravoj veličini – naročito se koristi u dizajnu
pakovanja. U veb dizajnu se mokapom može smatrati statična slika koja predviđa izgled
sajta.
http://en.wikipedia.org/wiki/Mockup
PODOBJEKTI ZNANJA (slučajevi korišćenja, procedure korak po korak, reference, itd.)
Naslov podobjekta znanja
Sadržaj podobjekta znanja
OSTALI PREDLOŽENI SADRŽAJ OD STRANE AUTORA
Naslov
Sadržaj
Download

NAZIV OBJEKTA ZNANJA * Postavka layouta