Cum se construiește un site web în Illustrator

Pasul 1

Creați un document Illustrator care are o lățime de 960 de pixeli din înălțimea pe care o alegeți, în funcție de conținutul și designul pe care îl aveți în vedere. Un site web de 960 de pixeli se potrivește cu cea mai populară lățime a rezoluției monitorului de 1.024 de pixeli când se iau în considerare barele de derulare și marginea ferestrelor.

Pasul 2

Creați o schiță trasată manual a designului vizual al site-ului dvs., dacă nu ați făcut-o deja. Acest lucru vă va oferi o referință utilă pentru crearea în cadrul Illustratorului.

Pasul 3

Creați-vă designul utilizând instrumentele de imagine și text pentru un antet elaborat. Dacă includeți în ea text, cum ar fi mesaje într-un blog, lăsați goale spațiul din acea zonă sau creați o margine care o înconjoară pentru o simplă schiță.

Pasul 4

Adăugați ghidaje pentru designul dvs. pentru a delimita diferitele secțiuni ale designului. Acest lucru este foarte important pentru că veți folosi acele ghiduri pentru a face reduceri, care vor defini marginile elementelor de pe site-ul dvs. Web. Ghidajele vă pot ajuta să aliniați obiectele cu precizie. Faceți clic pe rigla verticală sau orizontală și trageți mouse-ul spre locul în care doriți ca ghidajul să fie poziționat.

Pasul 5

Verificați dublu locația ghidurilor pentru acuratețe și exactitate. Trageți-le mai departe, dacă este necesar, pentru a separa fiecare element, cum ar fi imaginile de navigație care vor fi linkurile de pe site-ul dvs.

Pasul 1

Selectați "Object" din meniu, apoi selectați "Cut" și "Create from the guides". Când creați ghidajele, veți vedea mici cutii neagră în fiecare tăietură cu numărul corespunzător. Selectați "File" din meniu și apoi "Salvați pentru web și dispozitive." Selectați instrumentul pentru a selecta tăierea, care este a doua pictogramă din meniul de instrumente situat în partea dreaptă a ecranului de sub pictograma de mână. Selectați toate tăieturile.

Pasul 2

Selectați setările de optimizare dintre opțiunile afișate în partea dreaptă a ecranului. Puteți alege configurații prestabilite sau puteți crea un profil personalizat, în funcție de dorința ca imaginile dvs. să fie fișiere JPEG, GIF sau PNG. De asemenea, puteți ajusta calitatea imaginilor.

Pasul 3

Previzualizați diferitele configurații făcând clic pe filele "2-up" și "4-up". În colțul inferior al fiecărei previzualizări veți vedea informațiile despre optimizare, cum ar fi dimensiunea fișierului și timpul de redare al browserului. Faceți clic pe butonul "Salvați". Decideți dacă doriți să salvați imaginile și codul și să navigați în zona respectivă folosind tasta "Unde".

Pasul 4

Alegeți formatul lucrării dvs. Dacă controlați XXXX și doriți doar imaginile deoarece veți adăuga un cod mai târziu, selectați "Numai imaginile". Dacă sunteți începător sau preferați ca XXXX să fie generat pentru dvs., alegeți opțiunea "XXXX și imagini". Dacă preferați poziționarea elementelor care vor fi organizate cu foi de stil cascadă în loc de tabele, selectați "Configurare implicită" și "Export ca straturi CSS" în fila "Straturi".

Pasul 5

Deschideți fișierul XXXX din interiorul unui browser pentru a vedea munca dvs. Editați fișierele cu un program de web design.