Kurs UI/UX Design Tools

Prvi kontakt korisnika sa web aplikacijom najčešće je vizuelan. Zbog toga je neophodno da takva aplikacija pravilno distribuira resurse koji pomažu u vizuelizaciji, kao i da bude estetski prihvatljiva. Glavni faktor u estetici aplikacije su svakako grafički resursi, što ukazuje i na značaj njihove obrade i pripreme, čime se ovaj kurs bavi. 

Sadržaj kursa podrazumeva izučavanje dva alata kompanije Adobe – Photoshop i Illustrator. Photoshop je godinama unazad nezaobilazan faktor u digitalnoj pripremi i obradi fotografija, dok je Illustrator alat sa fokusom na crtanje i rad sa vektorskom grafikom. Oba programa su tradicionalni alati u web produkciji.

Sam sadržaj obuhvata upoznavanje sa radnim okruženjima, uvoz ili kreiranje sopstvenih grafičkih resursa, obradu grafičkih resursa i čuvanje ili izvoz za potrebe aplikacije. Kako je najveći deo ovog kursa posvećen dvama alatima, tokom njegovog trajanja istražuju se njihove opcije i njihova upotreba. 

Tokom proučavanja Illustratora i Photoshopa biće objašnjeno korišćenje radnog prostora, kreiranje novih dokumenata, šta su paneli, gde se nalaze i kako se mogu grupisati, kao i različite tehnike koje omogućavaju sopstveno definisanje i prilagođavanje radnog prostora, kako se koriste alati za unos i obradu teksta, šta su vektorski oblici, šta je rasterska grafika, kako eksportovati kompletirane slike u format koji odgovara web stranici i slično.

Opis i ciljevi UI/UX Design Tools

Kurs UI/UX Design Tools je tu da osposobi polaznika za upotrebu programa Adobe Photoshop i Adobe Illustrator u svrhu obrade resursa web aplikacije.

Polaznik će nakon odslušanog kursa biti u stanju da samostalno kreira sliku ili je uveze u aplikaciju, kao i da nacrta sliku pomoću programa za vektorsko crtanje, koristeći je dalje kao grafički resurs. Aktuelni resurs moći će da modifikuje kroz različite alate dostupne u okviru dva programa koje kurs obrađuje, a zatim da sačuva resurs u formatu koji zadovoljava tražene standarde. 

Zbog što jednostavnijeg praćenja nastave i efikasnijeg usvajanja novih veština za web programiranje, celokupno gradivo kursa je podeljeno u 8 tematskih celina, takozvanih modula. Prolazeći kroz prvi modul, polaznici će se upoznati sa veoma popularnim i traženim programom – Illustratorom. Tom prilikom svi budući Frontend programeri savladaće osnove rasterske i vektorske grafike, kao i potrebne tehnike za organizaciju radnog prostora, kreiranje, otvaranje i čuvanje dokumenata, kao i navigaciju u okviru dokumenata.

Nakon uvodne tematske celine na red dolaze predavanja koja će staviti akcenat na rad sa vektorskim objektima i bojama. U tom delu kursa prisutni će raditi na uređivanju vektorskih putanja i tačaka sidrenja, primeni efekata na vektorskim objektima, upoznavanju sa Paintbrush Toolom... Treći modul će se baviti radom sa rasterskim objektima i tekstom, kao i pripremom resursa za web. Ovaj deo kursa, između ostalog, upoznaće polaznike sa alatima za unošenje teksta, ali i sa popularnim alatima kao što su Blob Brush i Eraser. 

U drugoj polovini kursa očekuje vas modul posvećen Adobe Photoshopu, odnosno radu sa njegovim dokumentima, history panelu, organizaciji radnog prostora i drugim opcijama i mogućnostima ovog popularnog programa. Kako se kurs bude bližio kraju, polaznici će učiti o tehnikama čuvanja sadržaja za web i dokumenata različitih formata. Osim toga, upoznaćete se i sa pojmovima kao što su Detection Tools, Selection Menu i Refine Edge.

Kurs UI/UX Design Tools će vam odgovoriti na pitanja:

1. Čemu služi Illustrator?

Adobe Illustrator je program čija je prvenstvena uloga kreiranje i obrada svih vektorskih elemenata, ali, osim toga, ovaj program pruža korisnicima mogućnost korišćenja elemenata rasterskog tipa.

Adobe Illustrator ima veliki broj mogućnosti koje možemo koristiti kako bismo dobili vrlo kreativna i zanimljiva grafička rešenja. Illustrator možemo koristiti da bismo kreirali različite logoe, kao i da bismo iscrtavali različite objekte, a pored toga, možemo ga upotrebiti i za kreiranje ikonica i različitih grafičkih objekata. Ovaj kurs, koji možete pohađati kao online kurs ili tradicionalno u učionici, omogućiće vam da naučite sve potrebne tehnike i upoznate alate koji su vam neophodni za rad u programu Adobe Illustrator CC.

2. Zašto je, pored Photoshopa, Illustrator nezaobilazan program u dizajnu?

Adobe Illustrator je program od velikog značaja za vaš rad jer će vam pomoći da brže i lakše savladate određene dizajnerske zadatke tokom kreiranja modernih aplikacija i web stranica. Kako budete napredovali sa prelaskom gradiva na ovom kursu, tako ćete biti sve produktivniji i efikasniji prilikom dizajniranja svojih grafičkih rešenja.

Adobe Illustrator spada među kompleksne programe koji pružaju izuzetno veliki izbor opcija, dodatnih specifikacija i mogućnosti uređivanja. Upravo zbog svih svojih vrlina ovaj program izborio je važno mesto u svetu print i web dizajna i postao program bez koga je gotovo nemoguće dokazati stručnost u ovim oblastima i dostići najviše ciljeve.

3. Čemu sve služi Photoshop CC?

Adobe Photoshop je program koji prvenstveno služi za obradu fotografija i njihovu montažu. Osim toga, ovaj veoma popularni program nudi i brojne druge mogućnosti koje se tiču dizajna flajera, banera i vizuelnog identiteta web sajtova. Program Adobe Photoshop poseduje mnoge moćne alatke od kojih su neke predviđene za selekciju, izmenu rezolucije i veličine grafike, dok pojedine korisne alatke pomažu pri bojenju ili korekciji boje na fotografiji. Ovaj program dizajnerima i developerima pruža mogućnost rada u slojevima, odnosno layerima, kao i priliku za rad sa maskama, tačnije maskiranje određenih delova grafike koji su suvišni ili nepotrebni prilikom dizajniranja krajnjeg proizvoda za korisnike.

4. Da li se Photoshop može koristiti za pripremu fotografija za web?

Photoshop ima jako široku primenu, pa je zbog toga neophodno da ga znaju i web dizajneri. Sam program se u web dizajnu može koristiti na različite načine. Od toga da samo prilagodite veličinu fotograifje za određeni sajt, preko detaljne obrade fotografije sa ubacivanjem efekata, do dizajniranja celokupnog izgleda sajta.

Photoshop ima veoma široku i rasprostranjenu primenu u web dizajnu, a sama grafika/fotografija na webu služi da posetiocu sajta privuče pažnju i da ga zadrži na određenoj stranici. Ovo je još jedan razlog zašto je dobro znati da kvalitetno obrađujete fotografije, a za to vam je neophodno da znate kako da koristite ovaj program.

5. Zašto ne mogu da budem web dizajner bez programa Photoshop?

Ovaj program je jedan od osnovnih alata neophodnih za rad svakog modernog dizajnera. Iz ovog razloga je neophodno proći obuku za Photoshop, savladati ovaj program i nadograđivati ga u skladu sa novim alatkama koje se menjaju i prilagođavaju s ciljem bolje i lakše upotrebe.

Bez obzira na to da li se opredelite da gradite karijeru u oblasti web ili print dizajna, poznavanje rada u ovom programu je nešto što će vam biti neophodno da biste pronašli odličan posao. Prema tome, ovo je jedna alatka koja će vam pomoći i olakšati rad, uz nju ćete imati mogućnost da kroz niz različitih alatki dobijete nova i zanimljiva dizajnerska rešenja. Pored toga, kada naučite da koristite ovaj program, možete kombinovati alatke iz programa na vama svojstven način i tako kreirati samostalna grafička rešenja.

6. Koja je razlika između vektorske i rasterske grafike?

Vektorska grafika je ona u kojoj se čuvaju samo osnovni elementi slike, dok se do ostatka dolazi matematičkim putem, a rasterska grafika ona u kojoj sa znaju pozicija i boja svake tačke na slici. 

Ako, na primer, hoćemo da na slici imamo jednu liniju, kod vektorske grafike treba da znamo samo njenu početnu i krajnju tačku, a program za nas može izračunati sve tačke između. Dok bismo kod rasterske grafike morali da znamo poziciju i boju svake od tačaka koje čine liniju. 

Kada hoćemo da napravimo neki logo na računaru, mnogo je bolje u tu svrhu koristiti vektorsku grafiku, dok, na primer, za fotografije koristimo rasterski format.

I Photoshop i Illustrator mogu da rade sa oba tipa grafike, ali je svaki od dva programa specijalizovan za poseban tip. Tako je Photoshop orijentisan na rastersku grafiku, dok je Illustrator namenjen za vektorsku grafiku.

7. Zašto je potrebno znati obradu fotografija kroz Photoshop?

Web aplikacije su vrlo često praćene bogatom i obilnom grafikom. Ova grafika je većinom sadržana u različitim slikanim ili crtanim materijalima. Bilo da se radi samo o web prezentaciji, aplikaciji ili igri. Da bismo rukovali ovim resursima, neophodno je da poznajemo neki od programa za rad sa grafikom, a Adobe Photoshop je jedan od najboljih u svojoj kategoriji, koji priznaje veliki broj profesionalaca i zajednica.

Znanja koja steknete tokom ovog kursa moći ćete da primenite za rad na raznovrsnim projektima. Ovaj program koriste mnogi stručnjaci, poput grafičkih dizajnera koji stvaraju digitalne umetničke slike, reklame, kao i kompletan korporativni imidž i modne fotografije.

Plan i program predavanja:

1. Illustrator CC Basics

• Uvod u Illustrator
• Organizacija radnog prostora
• Kreiranje, otvaranje i čuvanje dokumenata
• Navigacija u okviru dokumenata

2. Vektorsko crtanje i selekcija

• Crtanje prostih geometrijskih objekata
• Selekcija vektorskih putanja i objekata
• Crtanje alatima Pen, Pencil i Curvature

3. Boje vektorskih putanja i oblika

• Uvod u rad sa bojama
• Paneli Swatches i Color Guide
• Vrste ispuna i kontura vektorskih putanja i objekata
• Paneli Appearance i Transparency
• Paintbrush Tool

4. Transformacije vektorskih objekata

• Uređivanje vektorskih putanja i tačaka sidrenja
• Transformacija vektorskih putanja i objekata
• Paneli Pathfinder i Align

5. Rad sa tekstualnim i rasterskim objektima u Illustratoru

• Alati za unos teksta, paneli Character i Paragraph
• Unošenje rasterske grafike i njeno pretvaranje u vektorske putanje

6. Illustrator kao alat za web razvoj

• Kreiranje Moodboarda i Wireframea
• Kreiranje vektorskih resursa za web

7. Photoshop CC Basics

• Uvod u rastersku grafiku
• Upoznavanje sa programom
• Organizacija radnog prostora
• Rad sa dokumentima
• Navigacija i rad sa više otvorenih dokumenata
• Dodaci i pomagala u radu

8. Photoshop kao alat za web razvoj

• Kreiranje Mockupa i upotreba Frame Toola
• Kreiranje i obrada rasterske grafike za web