Share
Acest tutorial își propune să introducă multe dintre instrumentele Adobe Illustrator care sunt esențiale pentru orice set de instrumente de designer și ar ajuta începătorii și designerii web intermediari să câștige încrederea în utilizarea Illustrator pentru Web Design. Vom începe prin stabilirea documentului pentru web și vom discuta cum pot fi folosite Artboard-urile pentru a seta mai multe dimensiuni ale ecranului. Vom învăța cum să creați o grilă de bază (inspirată de grila de bază a Teehan + Lax folosind instrumentele integrate de Illustrator). De asemenea, vom învăța cum să folosim simbolurile, instrumentele de aliniere, precum și stilurile de caractere și grafică pentru a crea un design consistent cu ușurință. Nu numai că acest lucru ne va ajuta în încadrarea firului, dar și în experimentarea aspectului designului mult mai ușor decât permite Photoshop.
Ah ... Adobe Illustrator. Adesea, o parte neglijată a setului de instrumente de web designer se întâmplă să fie unul dintre cele mai puternice instrumente de web design disponibile. Nu numai că este mult mai stabilă decât Photoshop, dar ne permite, de asemenea, să creăm machete precise și coerente cu precizie și ușurință. Dacă nu ați experimentat încă cu Illustrator ca instrument de încadrare a firelor sau dacă ați integrat-o în fluxul de lucru pentru designul web, veți pierde. Nu vă faceți griji, ziua poate fi încă salvată.
Am încercat să fiu la fel de cuprinzător și cât mai amănunțit pentru a putea apela la utilizatorii începători și intermediari, însă un pas dat o dată detaliat nu poate fi repetat, iar unele detalii vor fi lăsate cititorului să le completeze. învățați cum să configurați Artboards și grile pentru trei dimensiuni diferite ale ecranului, însă design-ul în sine ar fi pentru dimensiunea ecranului.
Cu asta din drum, Să începem. Dar, înainte de asta, descărcați Liga Gothic, Goudy Bookletter, Ostrich Sans și Chunk Typefaces de la Liga de tip mobil
Vom începe prin crearea unui document de 1280 x 800 pixeli cu 3 Artboards, unul pentru Screen, Tablet, Mobile, respectiv. Am decis să le așezăm pe orizontală și la o distanță de 400 pixeli, astfel încât celălalt document să nu ne distragă atenția de la lucru. Cele mai importante detalii se referă la unitățile (setate la pixeli), modul Color (setat la RGB) și modul Previzualizare (setat la pixeli). Toate acestea vă pot fi evidente, probabil pentru modul de previzualizare.
Deoarece programul Illustrator este un program vectorial, orice grafic creat poate fi infinit mărit și își păstrează precizia. În timp ce este deosebit de avantajos pentru menținerea compatibilității cu retina și pentru a rămâne fără pierderi, poate distorsiona gustul nostru mai rafinat de împingere a pixelilor, pe care toți l-am iubit. Setarea modului de previzualizare la pixel ne-ar permite să mărim și să vedem operele noastre de artă în pixeli. Puteți comuta între pixel și previzualizare utilizând comanda rapidă Ctrl + Alt + Y.
Cu asta, vom merge la Editare> Unități> Preferințe și vom seta toate unitățile la pixeli, dacă nu ar fi fost deja făcute.
După cum veți vedea că aveți 3 Artboard-uri așezate în fața dvs. Deschideți panoul Artboard-uri (Window>! Rtboards) și reglați setările pentru Artboard-urile dorite. În cazul nostru, voi folosi dimensiunea de 1280 x 800 pixeli pentru ecranul artboard și îl redenumiți ca atare. Pentru Tablet și Artboard-urile mobile voi alege încorporatele în iPad și iPhone. De asemenea, setați tabloul de artă mobil în modul portret și continuați înainte.
Acum vom crea grila. Creați un dreptunghi albastru (poate fi orice culoare) cu următoarele mărimi. Lățimea este menită a fi dimensiunea grilei, în timp ce lungimea este arbitrară și ușor reglabilă. Din moment ce știu în prealabil lungimea documentului pe care aș fi terminat-o, am ales grila pentru tabloul de bord "Ecran" la 4920 px.
Cu dreptunghiurile create, selectați unul din tabloul de bord "Ecran" și mergeți la Object> Path> Split into Grid. Aceasta oferă o unealtă puternică pentru crearea de rețele. Am ales 12 coloane și un jgheab de 24 px pentru o dimensiune totală de 960 (Lățimea coloanei este calculată automat). Aceasta împarte dreptunghiul în 12 grile și trebuie să le grupăm mai întâi pentru a le muta ca un singur obiect. Pentru a crea ghidajele, vom duplica grila pe care tocmai am creat-o și apăsați pe Ctrl + 5 sau View> Guides> Make Guides pentru a crea ghiduri. Repetați acești pași pentru tablourile de lucru Tablet și Mobile cu setările enumerate mai jos. Un pas final pentru rețea este de a seta opacitatea la 40%.
Pentru linia de bază, vom trasa o linie de greutate a stroke 1px pe toată lungimea celor trei tablouri și vom folosi efectul Transform pentru a face copii la intervale fixe. Acest lucru ne oferă avantajul de a putea să reglam linia de bază sau chiar să o extindem prin simpla ajustare a numărului de copii sau a intervalelor dintre ele. Pentru această rețea de bază, vom rămâne la grila de bază a lui Teehan + Lax de 6 pixeli. Setați Opacitatea la 20%.
Et Voila! Grila noastră de bază este creată. Tot ce a mai rămas este să blocăm stratul și suntem bine să mergem. Creați un strat nou și denumiți-l cu antetul. Vom organiza o secțiune diferită pentru fiecare strat în care apar secțiunile.
Pentru antet vom avea trei elemente. Primul este logo-ul, al doilea este navigația, iar al treilea este tratamentul tipografic. Logo-ul este creat prin desenarea unui dreptunghi de 140 x 168px cu un început de 15 puncte cu o rază de ieșire de 48px și o rază interioară de 42px. Puteți crea manual steaua și puteți regla numărul de puncte ținând apăsat butonul mouse-ului și apăsând tastele săgeată sus și jos. Raza interioară poate fi reglată apăsând tastele Ctrl și glisând mouse-ul cu butonul apăsat. Utilizați "Liga Gothic" la 48px pentru textul logo-ului.
Navigarea este un dreptunghi de 795 pixeli la 48 de pixeli. Panglica este creată prin adăugarea unui punct de ancorare în mijlocul muchiei din dreapta și tragerea înapoi a punctului de ancorare așa cum se arată. Elementele de navigare sunt create individual folosind un font "Goudy Bookletter" de 16 px. Link-urile inactive au un stil de caractere distinct, care în acest moment este o culoare mai deschisă. Pentru a distribui în mod egal elementele de navigare, mergeți la instrumentul de aliniere. Dacă opțiunea Distribuire spațiere nu este disponibilă, faceți clic pe panoul vertical și afișați opțiunile. Aliniați obiectele la un obiect cheie. În acest caz, veți selecta Acasă și distribui distanța cu 36 de pixeli.
Tratamentul tipografic are două elemente cu panglici. Prima panglică pe care o vom crea prin trasarea a trei dreptunghiuri. Pentru cele două dreptunghiuri de dimensiuni egale din spate, adăugați puncte de ancorare în mijloc și trageți-le înapoi pentru a crea o panglică, așa cum am făcut-o anterior pentru navigare. Selectați ambele forme și combinați-le folosind panoul Pathfinder și faceți din acestea o Cale compusă (Ctrl + 8). Apoi selectați dreptunghiul la mijloc și Calea de decalare cu 4 pixeli.
Selectați Calea de decalare și panglicile din spate și scade căile. Adăugați formele rezultate pentru a obține rezultatul dorit. Utilizați "Ostrich Sans" pentru a adăuga un "Hello" la 72px Bold și am terminat cu această panglică.
A doua panglică este creată folosind aceeași metodă. Creați o panglică. Apoi duplicați-l și oglindiți utilizând efectul Transformare.
Traseul offset și scade calea rezultată din panglică din spate. Utilizați "Sturp Sans" la 40px Bold.
Acum, când sunt făcute panglicile, vom continua tratamentul de tip. Aceasta este partea în care aș avea mai puține mâini și mai mult sau mai puțin sper că vizualele sunt destul de ușor să urmeze. Textul în sine este ușor de creat fără explicații. Cursele variază în funcție de grosimea de 1px, 3px și 6px. Ciclurile circulare sunt realizate prin crearea unei linii distanțate de dimensiune de 0px cu un decalaj de 12px și o margine rotunjită a razei. Efectul repetat al stelei se face prin crearea unei singure stele și folosirea copiilor efectului Transform la fiecare 18 pixeli.
În noul strat numit "Despre" vom crea următoarea secțiune. Blocați secțiunea anterioară creată până acum. În primul rând, vom crea poziția și fundalul acesteia. Vom folosi aceeași panglică ca în logo, singura diferență fiind dimensiunea. Creați două dreptunghiuri cu următoarele setări. Combinați-i și faceți o cale compusă (Ctrl + 8).
De asemenea, vom transforma acest lucru într-un simbol, astfel încât să îl reutilizăm pentru alte secțiuni. Salvați forma pe care tocmai am creat-o și salvați-o ca simbol grafic. Poziția folosește textul "Chunkfive" la 21px. Vom salva acest lucru ca un stil de caractere numit H2 - Secțiunea Rubrică.
Pentru secțiunea despre, am decis să am o mulțime de text și două imagini plutitoare. Illustratorul poate simula un astfel de efect. Începeți prin crearea celor două paragrafe. Primul paragraf va avea accent și va fi salvat ca un stil de caractere (accent), în timp ce paragraful ar merita propriul stil de caracter pentru a fi refolosit în cadrul proiectului.
Creați un dreptunghi de 304 x 247px pe partea de sus a textului pe care tocmai l-am creat. Accesați Object> Object Wrap> Make pentru a crea o imagine plutitoare. Vom regla marja la 24 px accesând opțiunile de înfășurare text prin Object> Wrap Text> Opțiuni Wrap Text.
Repetați acești pași pentru o altă imagine și plasați-o așa cum se arată.
Așa cum am creat deja simbolul, îl vom trage pur și simplu în această nouă secțiune (Layer: Portfolio) și tastați textul și aplicați stilul de caractere al secțiunii H2. Pentru elementul de portofoliu trageți un dreptunghi și creați textul așa cum este arătat.
Odată ce elementul de portofoliu este creat, vom face un simbol din acesta pentru reutilizare. Creați un simbol grafic pentru elementul de portofoliu și glisați în jos două instanțe de mai jos și distribuiți-le uniform cu 64 de pixeli.
Până acum repetăm aceleași lucruri. Cotația blocului este flotată în jurul textului.
Regulile orizontale sunt create folosind Efect> Transform & Distort> Transformare la un interval de 30px cu numărul relevant de copii.
Prindeți Icoanele sociale vectoriale de la joncțiunea Design grafic pentru butoanele de social media.
Pentru subsol vom copia logo-ul din antet și îl vom lipi aici. De asemenea, vom adăuga meniul site-ului și nota privind drepturile de autor.
Cadrul nostru de sârmă ar trebui să arate așa. Puteți să faceți clic pe acesta pentru a obține o previzualizare mai mare.
Și acum distracția. Vom începe să lucrăm la aspect, începând cu fundalul. Creați un strat nou în partea de sus a Ghidurilor și sub fiecare alt strat. Desenați un dreptunghi pentru a acoperi întreaga placă de artă utilizând RGB (247, 94, 80). Pentru texturi vom crea două straturi separate de umplere, ambele colorate RGB (0,0,0). Utilizați Texturizer sub Efect> Textură> Texturizer pentru a aplica un efect de cereale și un hârtie de notă cu Opacitate de 5%, cu Overlay Mode și 10% Overlay. Blocați acest strat de fundal, astfel încât să nu ajungem să îl mișcăm accidental (Illustratorul scoate o taxă destul de mare pe computer, altfel, ca urmare a unei mișcări accidentale).
Creați un nou grup Swatch în panoul Swatch și adăugați culori cu următoarele setări: RGB (247,94,80); RGB (233,200,97); RGB (232,223,156); RGB (145, 192, 158); RGB (125,119,105). Illustratorul are un panou de ghiduri de culori care oferă opțiuni de culoare, cum ar fi Tints / Shades, Cald / rece și Vivid / Muted
Aplicați rugina la antet cu o dimensiune relativă de 0,05% și setați detalii de 100. Setați stratul de umplere în RGB (63,60,53). Sub această umplere creați un alt RGB de umplere (247, 94, 80) și aplicați efectul Transform (Efect> Distort & Transform> Transform) cu următoarele setări.
Pentru ultimul strat de umplere, vom crea mai întâi un model. Măriți la 6400% și creați un dreptunghi alb 4 x 4. Creați pătrate de 1 x 1 px pe diagonală. Cu un model pixel creat, selectați-l în întregime și trageți-l în panoul de swatches. Veți putea să o utilizați acum. Creați un nou strat de umplere și aplicați modelul pe care tocmai l-am creat și setați opacitatea la 40% și Modul de amestecare pentru a multiplica. De asemenea, aplicați efectul Transformare la 4px verticală și 6px verticală. În cele din urmă, salvați acest lucru ca pe un stil grafic în panoul grafic.
Utilizați stilul pe care tocmai l-am creat și aplicați-l pe navigație și pe panglici din textul principal. Pentru logo-ul, mergeți la Efect> Stylize> Round Corners și setați raza la 5 px. Setați un RGB de culori 1px în culoarea 1px (63,60,53) și apoi aplicați un efect de transformare care reduce scorul până la 93% pentru un total de 3 copii. Apoi, creați stratul de umplere colorat RGB (237, 211, 129) cu un Shadow Drop 2px (X și Y Offset) setat la 8% Color Burn mode.
Pentru acest efect, setați stratul de umplere la RGB (233,200,97). Creați un strat de umplere sub acesta la RGB (55, 52, 46). Aplicați o transformare orizontală și verticală de 1px la acest strat și creați trei copii (ceea ce creează un efect de text 3d similar cu tragerea întregului lucru după duplicarea în Photoshop). Vom folosi o versiune de 2 x 2 px a modelului pe care l-am făcut mai devreme. Creați și trageți acest model în panoul Swatches și aplicați-l pe noul layer de umplere de mai jos. Setați-l la opacitate de 50% și transformați-l cu 6px orizontal și vertical. Salvați acest stil grafic.
Pentru textul întunecat obișnuit am aplicat un efect Roughen cu o dimensiune relativă de 2% și cu detaliu setat la 7. Diferitele curse sunt create utilizând modelul pe care l-am creat la început sau folosind o rugăciune de o dimensiune relativă de 0,1% la 100. Așa arată cum arată tratamentul nostru tipografic.
Pentru stroke am folosit combinații și variații ale modelelor folosite anterior împreună cu efectul Roughen.
Acum este o chestiune simplă de reaplicare a stilurilor pe care le-am creat mai devreme. Acest lucru este mai bine lăsat înțeles vizual, de aceea aș sugera să aruncați o privire la imagini. Selectați textul și veți vedea stilul de caracter relevant. Aici depinde efortul nostru inițial. Modificați textul pe care l-ați selectat și mergeți la opțiunile de panou și selectați Redefine Style Style și acest lucru se va aplica peste tot în stilul de caractere utilizat în document.
Ultimul stil de aspect pe care îl vom crea este substituentul pentru imagine. Setați cursa la interior de 4 pixeli cu culoarea albă. Aplicați o Shadow Drop de 2 px (X și Y offset) și setați Modul de amestecare și opacitatea pentru a multiplica la 35%
Continuă să lucrezi. Va trebui să faceți dublu clic pe simbolul pentru a le putea edita. Aplicați stilurile caracterului și aspectului pe care le-am dezvoltat pentru a reutiliza fără sfârșit. Odată satisfăcut de rezultat, apăsați Esc pentru a ieși din modul de izolare și veți vedea efectul aplicat în celelalte elemente de portofoliu. (O modalitate alternativă ar fi fost să rupeți legătura cu simbolul, să modificați stilul conținutului inimii și să redefiniți ulterior simbolul.)
Răbdarea, perseverența, munca grea și repetarea oferă o imagine mai clară.
Și aici este rezultatul final. Sper că ați găsit tutorialul util și sunt doar plin de emoție. Puteți încerca să lucrați la versiunile Tablet și Mobile, precum și să adăugați în Ilustrație și, probabil, mai multă profunzime și experimentare cu aspect și colorare. Am adăugat icoane sociale pe bara de navigare, de asemenea. Mi-ar plăcea să văd ce faceți, ca să împărțiți.
Accentsconagua