Share
Acest tutorial este perfect pentru utilizatorii Adobe Illustrator de la început până la intermediari. Vom aborda modul de structurare a unui site web și îl vom pregăti pentru utilizare pe web. De asemenea, vom folosi cele mai recent lansate Website Elements Freebie pentru a micsora design-ul.
Începe o Nou document cu o lățime de 960 x și o înălțime de alegerea ta. Am ales această lățime, deoarece acest site va presupune probabil trafic de internet care au monitoare de dimensiuni medii și mari. O lățime de 960 de pixeli este o dimensiune sigură care va favoriza majoritatea vizitatorilor. Ultima, pune-ți Modul color la RGB.
Marginea neagră arată dimensiunea documentului (numită Artboard) pe care am creat-o. Îmi place să plasez o captură de ecran a unei ferestre de browser pe stratul propriu în timp ce proiectez, pentru a obține o idee bună despre ceea ce va arăta site-ul meu când va fi făcut.
Următorul pas este foarte important. Asigurați-vă că sunteți conștient de ce zoom vă vedeți la document. Cand totul este spus si facut, site-ul dvs. va fi vazut la 100%. Simțiți-vă liber să măriți și micșorați în timp ce lucrați la aspectul dvs., dar asigurați-vă că toate textul și elementele de design sunt citite atunci când sunt vizualizate la 100%. Utilizați meniul derulant evidențiat mai jos (sau introduceți doar procentajul dorit) pentru a schimba zoom-ul.
Sidenote: uneori, Adobe Illustrator este testat și nu afișează numerele pe măsură ce le introduceți în zona de mărire evidențiată mai jos. De exemplu, dacă introduceți 58%, uneori numerele nu se modifică pe măsură ce tastați. În acest caz, apăsați repetat după ce introduceți valorile și documentul va fi redimensionat la numărul pe care l-ați introdus.
Artboard-ul poate fi schimbat între vizibil și invizibil, mergând la Afișați> Ascundeți Artboard. Problema cu aceasta este că durează puțin mai mult decât arătarea și ascunderea ghidurilor (Comanda + Cheie Semicolon) Deci, îmi pare mai bine să folosesc ghiduri și să ascund Artboard. Pe parcursul depunerii unui întreg site web, veți găsi mult mai ușor să apăsați o comandă rapidă, decât să mergeți în partea de sus a ecranului și să selectați de fiecare dată o listă.
Este posibil să vă fie ușor să stabiliți echilibrul și o ierarhie plăcută prin desenarea mai întâi a unor cutii de gri simple pe pagina dvs. Dreptunghiurile subțiri reprezintă locul în care intenționez să folosesc textul, în timp ce cutiile mari de gri vor fi imagini.
După ce aveți o idee generală despre aspectul aspectului, puteți adăuga ghidajele și eliminați casetele gri.
Folosind doar ghidajele ca referință, adăugați alte elemente, cum ar fi navigarea, textul și strângerea în sus unde vor merge logo-ul, imaginile și pictogramele. Este util să activați și să dezactivați ghizii (Comanda + Cheie Semicolon), în timp ce finisați aspectul. Dacă ghizii pe care i-ați desenat nu funcționează la fel de bine cum credeți, reglați-le definitiv după cum doriți.
Sidenote: când activați și dezactivați ghidajele, acestea se blochează automat. Nu puteți muta ghidajele blocate. Pentru a debloca ghidaje, apăsați rapid Comandă + Opțiune + punct și virgulă.
Continuați să finalizați antetul cu imagini, pictograme și grafică.
Mai jos am decis să adaug o culoare albastru deschis pentru a îmbunătăți antetul.
Adăugați stil pentru textul dvs., asigurându-vă că decideți ce link-uri și titluri vor arăta. Consider că este mult mai ușor și mai rapid să realizați cât mai multe elemente de design în interiorul Illustratorului, astfel încât să mă pot concentra pe programarea și codarea site-ului când vine momentul.
Există câteva moduri diferite de a pregăti un design pentru utilizare în interiorul unui editor WYSIWYG (Ceea ce vedeți este ceea ce obțineți), cum ar fi Adobe Dreamweaver. Prima metodă este utilizarea de felii. Felii pot fi făcute folosind ghidaje sau o selecție. Pentru a utiliza ghidajele pentru a face felii primul ghidaje de tragere pe pagina dvs. în jurul fiecărui obiect, care va necesita propria legătură. De exemplu, o pictogramă care, atunci când se face clic, merge la o anumită pagină. Mai jos am patru iconițe, fiecare pictogramă va duce vizitatorul la o altă pagină web sau zonă a site-ului.
Am tras ghiduri între fiecare icoană și doar în afara zonei albastre. Este, de obicei, mai curat dacă trageți ghidajele la aproximativ 1 sau 2 pixeli în afara zonei pe care o tăiați. Acest lucru garantează că niciuna dintre lucrările dvs. de artă nu va fi întreruptă.
Sidenote: Nu trageți ghidaje de-a lungul întregului aspect. În schimb, faceți secțiuni una câte una. De exemplu, faceți mai întâi zona antetului. Ștergeți toate ghizii prin accesarea Vizualizați> Ghiduri> Ghiduri clare. Salvați felii pentru web (discutate într-un pas ulterior) și repetați acest proces pentru alte domenii ale layout-ului.
Odată ce ai ghidat, următorul pas este să faci din ele felii. Pentru a face ca felii din ghizii să meargă Obiect> Slice> Creați din ghiduri. Uneori, Illustrator nu poate face felii la prima încercare. Am constatat că uneori trebuie să repet acest pas de trei sau patru ori înainte ca Illustrator să facă efectiv felii. Mai jos, cutiile cu numere negre indică faptul că au fost făcute felii.
Pentru a salva felii pentru a fi utilizate pe un site web, mergeți la Fișier> Salvare pentru Web și dispozitive ... Folosește Instrumentul pentru selectarea plantei (K) evidențiate în colțul din stânga sus pentru a selecta felii specifice pe care doriți să le salvați. Selectați mai multe felii simultan, ținând apăsată tasta Shift. Reglați setările din dreapta pentru a se potrivi nevoilor dvs. Imaginile JPEG funcționează cel mai bine pentru elementele care au mai multe culori, în timp ce formatul de fișier GIF funcționează bine pentru elementele care au suprafețe mari de culoare și nu au multe culori în general; formatul de fișier PNG funcționează bine pentru o grafică transparentă mai vechi browsere IE). Poate doriți să testați calitatea față de tipul de fișier și să ajustați Calitate pentru a salva lățimea de bandă. Odată ce sunteți gata, faceți clic pe Salvați.
Decideți unde doriți să salvați imaginile. Am ales Desktop-ul. În format selectați Numai imagini, apoi faceți clic pe Salvați.
Pe desktop-ul dvs. veți avea acum un dosar numit Imagini. În interiorul acestui dosar vor fi secțiunile specifice (imagini) pe care le-ați selectat. Aceste imagini sunt ideale în rezoluție și dimensiune de fișier pentru utilizare pe web.
Goliți ghizii, mergând la Vizualizați> Ghiduri> Ghiduri clare. Acum, trageți noi ghidaje în jurul zonei următoare pe care doriți să o tăiați. Starea de hover (atunci când mouse-ul este peste navigație) va fi roșu, în timp ce starea off va fi gri. Va trebui să faceți ambele versiuni ale navigației. Pentru a realiza în mod eficient acest lucru, mai întâi faceți totul de navigare roșu apoi du-te la Fișier> Salvare pentru Web și dispozitive ...
Selectați felii specifice pe care doriți să le salvați. Din moment ce navigarea mea nu este alcătuită din imagini sau din abundență de culori, am decis că tipul de fișier pentru navigare va fi GIF, apoi faceți clic pe Salvați. De asemenea, rețineți că, dacă utilizatorul dvs. are un font acceptat pe web, atunci este posibil să decideți să utilizați textul html în locul imaginilor.
Puteți da imaginilor dvs. un nou nume în acest moment. Cu toate acestea, acestea sunt denumite automat pentru dvs., astfel încât acest lucru nu este obligatoriu.
Dacă ați salvat imaginile în aceeași locație ca înainte, veți observa că folderul Imagini de pe desktopul dvs. include acum imaginile suplimentare pe care tocmai le-ați salvat.
Rețineți că acesta este doar un flux de lucru posibil. În mod alternativ, ați putea să plasați state și să stingeți undeva în documentul dvs., să creați toate feliile dvs. și să le exportați împreună.
Cealaltă metodă de a crea felii este selectarea unui obiect, apoi mergeți la Obiect> Slice> Creați din selecție. Crearea de felii folosind ghidaje sau dintr-o selecție este bine, de asemenea. Utilizați un flux de lucru pe care îl considerați confortabil și cel mai bun pentru proiectul în care lucrați.
Cu ocazia nu va trebui să includeți textul care se încadrează într-o felie. De exemplu, subsolul va avea text care este scris în interiorul editorului WYSIWYG. În acest caz, ștergeți textul înainte sau după ce ați făcut felii, dar anterior salvați felii pentru web.
Mai jos veți observa că am șters textul după ce au fost făcute felii.
Observați site-ul final. După cum puteți vedea, stabilirea unui site web în Adobe Illustrator este simplă și eficientă. Puteți experimenta rapid cu designul și dați acestei faze a procesului de web design atenția și credeți că are nevoie. Puteți vedea imaginea finală de mai jos sau puteți vedea o versiune mai mare aici.
Accentsconagua