Share
În acest tutorial, veți crea un site web verde în stil organic cu Adobe Illustrator. Acest tutorial vă arată cum să creați ilustrații grafice vectoriale și să aplicați acest aspect layout-urilor web. Să începem!
Cu puțin timp în urmă, am scris un tutorial intitulat "Utilizați Adobe Illustrator pentru a crea un layout curat al site-ului, care a fost întâmpinat cu mult fanfară cu opoziție la fel de notabilă". Acest tutorial a fost îndreptat spre oameni care au început doar în Illustrator. În cele din urmă a ajuns și pe prima pagină a Digg.
Pentru a dezactiva lucrurile pe piciorul drept, permiteți-mi să iau un moment pentru a sublinia faptul că acest design al site-ului web poate fi creat și în Photoshop! Cu toate acestea, scopul acestui tutorial avansat este de a explica cum să utilizați Adobe Illustrator pentru a crea un site web. Permiteți-mi, de asemenea, să distingem designul de codificarea frontală. În timp ce vă vom arăta cum să proiectați site-ul în Illustrator, acest lucru ar putea fi luat în continuare (cu utilizarea standardelor bazate pe XTHML / CSS) pentru a face funcția de proiectare.
Fără alte informații, iată cum să creați un site web peisaj verde în Adobe Illustrator.
Puteți găsi fișierele sursă în directorul numit "sursă" care a apărut în fișierele pe care le-ați descărcat. Poate doriți să le priviți pe scurt înainte de a începe.
Creați un document nou cu o lățime de 1160 de pixeli și o înălțime de alegere. Setați modul Color la RGB. Puteți lăsa Raster Effects la High 300ppi deoarece designul nostru nu face uz de efecte raster.
Prefer sa lucrez cu un browser in fundal, pentru a obtine o idee mai buna despre cum va arata designul final cand o sa fie completa.
Proporțiile ecranelor browserului nu sunt aceleași cu cele ale documentului de 1160 pixeli, astfel încât veți folosi Instrumentul de selecție directă (A) și faceți clic și trageți deasupra zonei evidențiate în roșu. Apoi, folosind Instrumentul de selecție directă din nou (fără deselectarea a ceva) faceți clic pe unul dintre punctele pe care le-ați selectat și trageți totul spre linia neagră din dreapta, care este dimensiunea documentului dvs..
Un site web cu o lățime de 960 de pixeli sau mai mic va funcționa bine pentru majoritatea vizitatorilor unui site web. Documentul nostru este setat la o lățime de 1160 pixeli pentru a compensa persoanele cu monitoare mai mari care pot întinde fereastra browserului mai larg. Spațiul dintre ghidajele verticale verticale măsoară 960 pixeli și reprezintă zona în care tot conținutul dvs. principal ar trebui să rămână între ele. Orice afacere în afara acestor ghiduri are potențialul de a ieși din vedere pentru unii vizitatori.
Acest pas este esențial pentru crearea unui site lizibil. Asigurați-vă că știți care este aspectul site-ului când este vizualizat la zoom 100%. Nu trebuie să lucrați la zoom de 100%, dar trebuie să fii conștient de aspectul site-ului când se vede la dimensiunea reală (100%). Pentru a schimba zoom-ul, puteți face clic în colțul din stânga jos al ferestrei documentului.
Primul pas este de a crea dealurile. Desenați o elipsă utilizând instrumentul Ellipse (L).
Duplicați elipsa și suprapuneți-o.
Mergeți cele două forme în Pathfinder folosind opțiunea Subtract from Shape Area. Duplicați forma, faceți-o puțin mai mică și deplasați-o spre dreapta și în jos, după cum se arată mai jos.
Selectați ambele forme și accesați Object> Blend> Blend Options. Selectați Pași specificați din meniul derulant, introduceți o valoare și faceți clic pe OK.
Mergeți la Object> Blend> Make. Puteți ajusta amestecul dacă nu sunteți mulțumit de rezultate, accesând Object> Blend> Blend Options ...
Mergeți la Object> Distort plicuri> Make with Warp ... Selectați Arc din meniul derulant și schimbați glisoarele pentru a crea un arc plăcut. Faceți clic pe OK când ați terminat.
Pentru a manipula în continuare formele, trebuie să le extindem accesând Object> Expand. Faceți clic pe OK.
Acum, când forma ta este extinsă, poți face să pară mai mult un deal. Utilizând instrumentul Pen (P) desenați o altă formă care urmează conturul benzilor.
Folosiți mai întâi Pathfinder pentru a tăia zonele dealurilor care sunt extra. Straturile ambele formează una peste alta și le conferă un gradient luxuriant.
Așezați dealul pentru a suprapune ușor ghidajul albastru. Acest lucru va sugera că dealurile continuă mai departe spre stânga atunci când site-ul este vizualizat la o dimensiune medie a browserului.
Faceți alte dealuri utilizând aceeași tehnică. Experimentați cu reglarea distanței și dimensiunii formelor și a arcului pentru a crea o mică varietate.
Desenați o formă simplă de arc care va deveni un drum pe dealuri. Dați-i și un gradient subtil gri.
Mai jos am variat flip-ul orizontal al dealurilor pentru a da o mică variație piesei. De asemenea, observați că atât dealul din stânga, cât și dealul din dreapta se extind chiar lângă ghidul albastru.
Apoi vom crea cerul. În cele din urmă, acest lucru este configurat astfel încât atunci când este codificat utilizând XHTML / CSS, cerul se va repeta pe termen nelimitat atât pe partea stângă, cât și pe partea dreaptă, indiferent cât de mare este ecranul browserului.
Creați un gradient de culoare deschisă și plasați-l în spatele dealurilor.
Uneori, este mai eficient să reglați un gradient, mergând la Edit> Colors> Recolor Artwork ... Acum veți putea selecta fiecare culoare (cercul de sus) și mutați cursorul în jurul pentru a obține doar culoarea pe care o căutați (cerc inferior). Modificările pe care le faceți sunt vizibile în timp real, înainte de a apăsa OK, deci asigurați-vă că caseta de dialog Live Color nu acoperă obiectul pe care îl recolorați.
Apoi vom adăuga mici detalii pe dealuri și drumuri. Am decis să fac niște mașini blocate. Când sunt defalcate la cele mai simple forme, mașinile sunt foarte ușor de creat. Începeți prin a desena forma de bază pe care o va lua mașina. Utilizați această formă ca ghid.
În funcție de aspectul pe care îl cauți, este posibil să nu trebuie să faci totul perfect simetric. Mașinile pe care le creez sunt oarecum capricioase, astfel încât formele să aibă o calitate arbitrară în privința lor. Apoi trageți pe acoperiș.
Desenați hota, parbriz și bara de protecție.
Desenați partea laterală a mașinii.
Desenați ferestrele și o pereche de elipse pentru roți. Asta e!
Duplicați mașina și schimbați culoarea pentru ao amesteca. Faptul că mașina este arcuită ajută și ea să se potrivească bine drumului arcuit.
Utilizând instrumentul Pen, trageți o formă de pasăre de bază. Duplicați și răsturnați aceeași formă pentru a crea rapid un volum de păsări.
Vom crea norii pe cer, mai întâi prin desenarea unui dreptunghi folosind instrumentul Rectangle (M).
Folosind Instrumentul Warp (Shift + R), răsuciți dreptunghiul până când îl vedeți mai mult ca un nor. Ar putea fi mai ușor să deformați mai mult dreptunghiul dacă ajustați dimensiunea zonei de urzeală. Realizați acest lucru fie prin dublu clic pe instrument, fie prin menținerea opțiunii Option + Shift, apoi faceți clic și trageți pentru a modifica dimensiunea.
După ce ați terminat formarea generală a norului, este posibil să observați că deformarea unui obiect tinde să dea o abundență de puncte suplimentare. Aceste puncte adiționale fac forma mai complexă decât trebuie să fie. Simplificați numărul de puncte pe care le are forma prin accesarea Obiect> Cale> Simplificare. Reglați Curbe Precision până când forma devine mai fină.
Utilizând Instrumentul de selecție directă, puteți regla punctele și nodurile pentru a reflecta mai exact orice formă pe care încercați să o creați.
Utilizați Instrumentul Creion (N) pentru a desena o formă aleatorie de munte. Datorită naturii continue a desenului cu ajutorul creionului, este uneori mai dificil să închideți calea când ați terminat desenul. Pentru a închide ușor o cale, țineți apăsată tasta Option înainte de a termina.
Obiectele care sunt mai departe de vizualizator nu au nevoie de detalii atât de detaliate. Faceți clădiri prin îmbinarea dreptunghiurilor simple folosind modulul Pathfinder.
Acoperiți clădirea accesând Object> Distortare plicuri> Faceți cu Warp ... Selectați Arc din meniul derulant și introduceți valori care vă arată bine.
Aceasta ar trebui să arate arta ta chiar acum. După cum puteți vedea, pe măsură ce obiectele devin mai îndepărtate, ele devin mai ușoare. Utilizați aceste cunoștințe atunci când vă creați aspectul. Acest lucru vă ajută într-adevăr să dați designului o calitate naturală.
Utilizând instrumentul Star, trageți un triunghi. Pentru a ajusta numărul de puncte pe care o stea le folosește săgețile sus și jos în timp ce desenați forma. În timp ce desenați forma, odată ce are 3 puncte, țineți apăsată tasta Shift pentru a face ca baza triunghiului să fie perfect orizontală.
Desenați o elipsă și îmbinați-o cu marginea de jos a triunghiului.
Dați formei un gradient verde.
Utilizați triunghiuri mici în interiorul zonei principale pentru a vă oferi detalii mai detaliate. Utilizați un dreptunghi pentru baza arborelui.
Duplicați și modificați dimensiunea copacilor pentru a crea o pădure.
Reglați Opacitatea unei elipse pentru a crea o umbră stilizată pentru fiecare copac.
Din nou, folosind instrumentul Pencil, desenați o formă organică pentru a crea o piatră.
Deselectați forma principală a rocilor și desenați alte forme anormale care vor deveni mușchi și umbre. Utilizați Pathfinder pentru a împărți formele și pentru a scăpa de resturile inutile.
Asta trebuie să rămâi cu tine.
Așezați pietrele la întâmplare pe tot parcursul designului și dați-le o umbră ca și dvs. pentru copaci.
Creați o formă a frunzei utilizând instrumentul Pen.
Oferirea de culori a frunzelor se va adăuga la realismul său. Utilizând Instrumentul Creion (N), trageți o formă care arată ca a mea de mai jos. Utilizați paleta Pathfinder și împărțiți frunza în secțiuni. Ștergeți formele rămase care nu fac parte din frunze.
Selectați fiecare secțiune a frunzei și dați-i o schimbare subtilă a culorii pentru a simula lumina lovind fiecare parte a frunzei.
Desenați o elipsă foarte îngustă care va deveni tulpina frunzei.
Utilizați Instrumentul Warp pentru a modela elipsa în ceva mai natural.
Dați frunzele și tulpinile o schimbare de culoare pentru a descompune monotonia frunzelor. Mergeți la Edit> Colors> Adjust Balance Balance ... apoi mutați glisoarele după preferințele dvs..
Așezați frunzele într-un cluster în colțul designului.
Adăugați titlul site-urilor în secțiunea de sus. Dacă titlul dvs. va fi scris utilizând un font standard ca Helvetica, sunteți destul de mult făcut cu acest pas. Dacă titlul dvs. nu va utiliza un font de sistem, atunci nu ezitați să îl îmbunătățiți cu efecte cum ar fi o umbră de picătură sau o margine mărunțită, de exemplu.
Acesta este rezultatul antetului complet al site-ului. Observați cum este păstrat conținutul principal între ghidajele albastre care măsoară lățimea de 960 pixeli.
Creați secțiunea principală de conținut a site-ului. Am decis să creez o temă prietenoasă pământului, astfel încât albastrul a fost o alegere potrivită pentru acest design.
Utilizând instrumentul creion crează o formă de gheață înaltă.
Dați formei de gheață o strălucire interioară pentru a adăuga adâncime la ea, mergând la Efect> Stylize> Glow Inner ... Desenează forme asemănătoare mai mici de gheață și le pune sub forma mai mare. Nu trebuie să dați acestor alte forme străluciri interioare.
Utilizați Instrumentul creion pentru a crea niște roci mici pentru a adăuga interes pentru cascadă.
Vom folosi o perie de imprastiat pentru a forma o masa de bule. Desenați o elipsă și trageți-o în paleta de perii. Selectați Pensulă nouă pentru scatter și apăsați OK. Dacă paleta de perii nu este vizibilă, accesați fereastra> Perii.
Setați dimensiunea, distanța și scatterul la întâmplare și reglați glisoarele. Este important să reglați atât triunghiurile negre cât și cele gri, astfel încât formele dvs. să fie suficient de aleatoare.
Cu ajutorul instrumentului Pen Tool, faceți clic pe peria de dispersie pe care tocmai ați făcut-o și trasați o linie. Schimbați greutatea liniei pentru a modifica mărimea cercurilor sau faceți dublu clic pe peria de împrăștiere pentru mai multe opțiuni.
Pentru a edita în continuare cercurile, extindeți pur și simplu linia accesând Object> Expand Appearance.
Utilizați instrumentul Pen pentru a desena forme de pește.
Plasați piatra pe care ați atras-o mai devreme în partea de jos a paginii pentru a crea un subsol.
Utilizați peria de scatter pe care ați folosit-o pentru bule pentru a crea o textură pentru subsol. Pentru a face textura restrânsă în zona dreptunghiului subsolului, trageți simplu un dreptunghi peste forma bulei, selectați bulele și dreptunghiul și apăsați Command + 7 pentru a crea o mască. Sau, utilizați zonele de formă Intersect în Pathfinder pentru a elimina bulele din afara zonei dreptunghiului.
Navigarea mea poate fi reprodusă cu ușurință folosind CSS. Țineți cont de acest lucru atunci când vă creați și dvs. Orice text care utilizează un font care nu este un font de sistem va trebui să fie o imagine. Acum este obișnuit și preferat să se utilizeze CSS ori de câte ori este posibil și nu imagini.
Creați câteva elemente care pot îmbunătăți aspectul folosind forme simple.
Am decis că vreau ca imaginea să fie inserată în text. Pentru aceasta, selectați elementul care va fi inserat și mergeți la Object> Wrap Text> Make. Reveniți la Object> Wrap Text> Opțiuni de împrăștiere a textului pentru a ajusta spațiul dintre elemente și text.
Faceți câmpurile de introducere a formularului utilizând un dreptunghi, rotunjind colțurile, dându-i un accident exterior și, în final, umpleți un gradient subtil. Toate aceste efecte sunt ușor modificabile făcând dublu clic pe fiecare efect din paleta Aspect.
Creați un buton prin tragerea din nou a unui dreptunghi, dându-i colțurilor rotunjite un ușor accent și o umbră.
Adăugați alte elemente pentru a finaliza designul.
Acesta este aspectul designului final. Observați cum toate informațiile critice sunt păstrate în ghidajele albastre. De asemenea, subsolul va fi repetat folosind CSS.
Tocmai ați învățat cum să creați un site web peisaj verde în Adobe Illustrator. Stilul de design al site-ului web poate crea un site diferit, oferindu-i un aspect unic. Începeți cu propriul dvs. design și vedeți ce puteți face! Imaginea finală este mai jos sau puteți vedea o versiune mai mare aici.
Accentsconagua