Cursul UI/UX Design Tools

Primul contact al utilizatorului cu aplicaţia web este, de obicei, contactul vizual. De aceea, o aplicaţie trebuie să distribuie în mod corespunzător resurse care se bazează pe vizualizare şi să fie acceptabilă din punct de vedere estetic. Factorul principal, când vine vorba de estetica aplicaţiilor sunt, cu siguranţă, resursele grafice, care indică importanţa procesării şi pregătirii acestora.Toate acestea sunt subiecte pe care le abordează acest curs.

Conţinutul cursului include studierea celor două instrumente ale companiei Adobe – Photoshop şi Illustrator. Photoshop este de ani de zile un factor inevitabil în fotografia digitală şi prelucrarea fotografiilor, în timp ce Illustrator este un instrument axat pe desen şi grafica vectorială. Ambele programe sunt instrumente tradiţionale în producţia web.

Conţinutul propriu-zis presupune familiarizarea cu mediile de lucru, importarea sau crearea resurselor grafice proprii, procesarea resurselor grafice şi stocarea sau exportarea pentru nevoile aplicaţiei. Deoarece cea mai mare parte a acestui curs este dedicată celor două instrumente, vor fi analizate şi prezentate opţiunile din cadrul acestor instrumente, precum şi utilizarea lor.

În timpul studierii programului Illustrator şi Photoshop, vom explica utilizarea spaţiului de lucru, crearea noilor documente, explicăm ce sunt panourile, unde se găsesc acestea şi cum se pot accesa, modul în care acestea pot fi grupate, precum şi diferite tehnici care permit propria definire şi adaptare a spaţiului de lucru, modul de utilizare a instrumentelor pentru introducerea datelor şi procesarea textului, explicăm ce sunt formele vectoriale, ce este grafica raster, cum se pot exporta imaginile finalizate într-un format care să se potrivească site-ului şi altele.

Descrierea şi scopul cursului UI/UX Design Tools

Cursul UI/UX Design Tools este oferit cursanţilor cu scopul instruirii acestora să utilizeze Adobe Photoshop şi Adobe Illustrator cu scopul procesării resurselor din aplicaţiile web.

După finalizarea cursului, cursantul va fi capabil să creeze singur o imagine sau să o importe într-o aplicaţie, precum şi să deseneze o imagine folosind un program pentru desenul vectorial, folosind imaginea respectivă în continuare ca o resursă grafică. Resursa actuală se va putea modifica prin diverse instrumente disponibile în cadrul celor două programe abordate în cadrul cursului, iar apoi va putea să salveze resursa în formatul care îndeplineşte standardele cerute.

Pentru o frecventare cât mai simplă a cursurilor şi o acumulare cât mai eficientă a noilor competenţe pentru programarea web, întregul material didactic din curs este împărţit în 6 unităţi tematice, adică în aşa-numitele module. În cadrul primului modul, cursanţii se vor familiariza cu unul dintre cele mai populare şi cerute programe - Illustrator. Cu această ocazie, toţi viitorii programatori Frontend vor învăţa bazele graficii raster şi vectoriale, precum şi tehnicile necesare pentru organizarea spaţiului de lucru, crearea, deschiderea şi salvarea documentelor, precum şi navigarea în cadrul documentelor.

După modulul introductiv, urmează cursurile care vor pune accentul pe lucrul cu obiectele vectoriale şi culori. În această parte a cursului, cursanţii vor lucra la editarea căilor vectoriale şi  a punctelor de ancorare, vor învăţa aplicarea efectelor asupra obiectelor vectoriale, dar se vor familiariza şi cu instrumentul Paintbrush... Al treilea modul se va ocupa cu lucrul cu obiectele raster şi cu textul, precum şi cu pregătirea resurselor pentru web. Această parte a cursului va familiariza cursanţii, printre altele, şi cu instrumente pentru introducerea textului, precum şi cu instrumentele populare, cum ar fi Blob Brush şi Eraser.

În a doua parte a cursului vă aşteaptă un modul dedicat programului Photoshop, respectiv operării cu documentele sale, panoul History, organizarea spaţiului de lucru şi alte opţiuni şi posibilităţi ale acestui program popular. Pe măsură ce cursul se apropie de sfârşit, cursanţii vor învăţa despre tehnicile de salvare a  conţinutului web şi a documentelor de diferite formate. Pe lângă acest lucru, cursanţii se vor familiariza şi cu termenii cum ar fi Detection Tools, Selection Menu şi Refine Edge.

Cursul UI/UX Design Tools vă va răspunde la următoarele întrebări:

1. La ce se foloseşte Illustrator?

Acest program are o serie de posibilităţi pe care le putem folosi pentru obţinerea soluţiilor grafice foarte creative şi interesante. Illustratorul poate fi folosit pentru crearea diferitor logouri, precum şi pentru desenarea diferitor obiecte şi, în plus, îl putem folosi pentru crearea iconiţelor şi a diferitor obiecte grafice.

2. De ce, pe lângă Photoshop, Illustrator este un program inevitabil în domeniul designului?

Illustrator este un program de mare importanţă pentru munca voastră, deoarece vă va ajuta să îndepliniţi mai repede şi mai uşor anumite sarcini de design. Pe măsură ce progresaţi cu învăţarea materiei, veţi fi mai productivi şi mai eficienţi în urma proiectării soluţiilor grafice.

3. La ce se foloseşte Photoshop CC?

Photoshop este un program folosit iniţial pentru editarea şi asamblarea fotografiilor. În plus, acest program oferă şi o serie de alte opţiuni privind designul flyerelor, bannerelor şi identităţii vizuale a site-urilor. Programul Photoshop are multe instrumente, dintre care unele sunt concepute pentru selectarea, modificarea rezoluţiei şi dimensiunea graficii, în timp ce altele ajută la colorarea sau corectarea culorilor într-o fotografie. Acest program oferă utilizatorilor posibilitatea de operare în straturi, adică în layere, precum şi posibilitatea de lucru cu măştile, respectiv mascarea anumitor părţi ale graficii, care sunt inutile sau în plus în timpul proiectării produsului final.

4. Se poate folosi Photoshop la pregătirea fotografiilor pentru web?

Photoshop are o sferă de aplicare largă, motiv pentru care designerii web trebuie să cunoască operarea în el. Programul propriu-zis poate fi folosit într-o varietate de moduri în designul web. De la ajustarea dimensiunii fotografiei pentru un anumit site, procesarea detaliată a fotografiilor cu introducerea efectelor, până la proiectarea aspectului integral al site-ului.

Photoshop are o aplicare foarte largă şi răspândită în designul web, iar grafica/fotografia de pe web serveşte pentru captarea atenţiei vizitatorului şi pentru menţinerea acesteia pe o anumită pagină. Acesta este un alt motiv pentru care este bine să ştiţi să prelucraţi fotografii de calitate, iar pentru acest lucru trebuie să ştiţi cum să utilizaţi acest program.

5. De ce nu mă pot ocupa cu designul web fără folosirea programului Photoshop?

Acest program este unul dintre instrumentele de bază, necesare în munca fiecărui designer modern. Din acest motiv, trebuie să finalizaţi un curs de Photoshop, să învăţaţi acest program şi să-l actualizaţi în conformitate cu noile instrumente care se schimbă şi adaptează pentru o utilizare mai bună şi mai uşoară.

Indiferent dacă decideţi să vă construiţi o carieră în designul web sau în print design, cunoaşterea operării în acest program va fi necesară pentru a vă găsi un job excelent. Prin urmare, acesta este un instrument care vă va ajuta şi facilita munca, cu acesta veţi avea ocazia să obţineţi soluţii de design noi şi interesante printr-o varietate de instrumente diferite. În plus, când învăţaţi să utilizaţi acest program, puteţi combina instrumentele din cadrul programului în propriul vostru mod şi astfel puteţi crea propriile soluţii grafice.

6. Care este diferenţa dintre grafica vectorială şi cea raster/bitmap?

Grafica vectorială este cea în care se păstrează doar elementele de bază ale imaginii, în timp ce restul apare matematic, iar grafica raster este cea în care sunt cunoscute poziţia şi culoarea fiecărui punct din imagine.

Dacă, de exemplu, dorim să avem o linie pe imagine, în grafica vectorială ar trebui să ştim doar punctul iniţial şi cel final, iar programul poate calcula toate punctele între acestea două, în timp ce în grafica raster trebuie să ştim poziţia exactă şi culoarea fiecăruia dintre punctele care alcătuiesc linia.

Când vrem să creăm un logo pe calculator, în acest scop este mult mai bine să folosim grafica vectorială în timp ce, de exemplu, pentru fotografii folosim formatul raster/bitmap.

Atât Photoshop, cât şi Illustrator pot funcţiona cu ambele tipuri de grafică, dar fiecare dintre cele două programe este specializat pentru un anumit tip. Astfel, Photoshop este orientat spre grafica raster, în timp ce Illustrator este destinat pentru grafica vectorială.

7. De ce este necesară cunoaşterea prelucrării fotografiilor în Photoshop?

Aplicaţiile web sunt, deseori, urmate de o grafică bogată şi plină de detalii. Acest tip de grafică este conţinută, în general, în diferite picturi sau desene, indiferent dacă este vorba doar de o prezentare web, de o aplicaţie sau de un joc. Pentru a manipula aceste resurse, trebuie să cunoaştem câteva programe de procesare grafică, iar Photoshop este unul dintre cele mai bune din categoria sa, recunoscut de un număr mare de profesionişti şi comunităţi.

Planul şi programa cursului:

1. Familiarizarea cu programul Illustrator

• Bazele graficii raster şi vectoriale
• Organizarea spaţiului de lucru, crearea, deschiderea şi salvarea documentelor şi navigarea în cadrul documentelor

2. Operarea cu obiectele vectoriale şi culorile

• Introducere în operarea cu culorile
• Tipuri de umpleri şi contururi ale căilor şi obiectelor vectoriale
• Editarea căilor vectoriale şi a punctelor de ancorare
• Transformarea căilor şi obiectelor vectoriale
• Distorsiunea obiectelor vectoriale
• Paintbrush Tool
• Operarea cu simbolurile
• Aplicarea efectelor asupra obiectelor vectoriale

3. Operarea cu obiectele raster şi textul şi pregătirea resurselor pentru web

• Instrumentele Blob Brush şi Eraser
• Instrumentele pentru inserarea textului
• Inserarea graficii raster şi transformarea ei în căi vectoriale
• Salvarea documentelor de diferite formate

4. Photoshop CC Basics

• Familiarizarea cu programul Photoshop
• Organizarea spaţiului de lucru
• Operarea cu documentele
• Navigarea şi operarea cu mai multe documente deschise 
• Elemente suplimentare şi auxiliare în timpul operării
• History panel 

5. Selection & Image

• Selecţiile – Bazele, Freeform Selection
• Detection Tools, Selection Menu & Refine Edge
• Editarea dimensiunii documentelor
• Transformations 

6. Creating Web Documents

• Salvarea conţinutului pentru web
• Salvarea documentelor de diferite formate