Share
Ce veți creaAstăzi vă voi arăta cât de ușor este să vă creați propria ilustrare "Website Under Construction" folosind Adobe Illustrator. Sperăm că acest tutorial rapid vă va inspira să creați ceva unic al dvs., pe care îl puteți dezlănțui pe web. Luați o ceașcă de cafea și deschideți Illustrator, astfel încât să putem începe.
Deoarece scopul de a face acest tip de ilustrație este de a aduce un anumit caracter pe site-ul dvs., care este în curs de dezvoltare, ar trebui să luați în considerare câteva puncte-cheie care ar putea afecta produsul final.
Pentru a face acest lucru, va trebui să răspundeți la două întrebări relativ ușoare:
Numărul unu: cât de larg va fi containerul dvs. principal de conținut?
Acest lucru este de fapt foarte important, deoarece veți dori să aveți ilustrația dvs. potrivită într-un anumit spațiu (viewport), mai ales dacă faceți doar designul și nu partea de codificare.
Procedând astfel, veți avea o idee de bază despre mărimea (Lățimea și înălțimea) ilustrației dvs., ceea ce este necesar pentru a vă stabili singuri sau cu ajutorul prietenului dvs. de codificare.
Acum, dacă e a 960 px sau ceva mai mare (1024 px), ar trebui să luați întotdeauna o secundă și să decideți ce alte elemente vizuale veți folosi, ceea ce ne duce la a doua întrebare.
Modul în care vă centrați informațiile este foarte important, deoarece veți dori să acordați atenție utilizatorului unei anumite părți a paginii. Indiferent dacă este vorba de o mulțime de link-uri sociale sau de un formular de abonament, veți dori ca ilustrația să fie stadiul central, unde totul se întâmplă, deoarece întreaga idee este de a face ceva util și atractiv vizual în același timp.
În cazul meu, am decis că folosind a 960 x 480 px mărimea ar trebui să mă acopere, deoarece compoziția ar fi teoretic folosită pe un fond alb și va ocupa locul central.
Desigur, dacă faceți ilustrația pentru un proiect real, puteți merge întotdeauna mai mare în funcție de modul în care va fi afișat conținutul, dar pentru moment sper că 960 px Lățime va fi o potrivire perfectă pentru majoritatea dintre dvs. care citește acest lucru.
Potrivit Dicționarului de afaceri online, un brand poate fi definit ca un "design unic, simbol, cuvinte sau o combinație a acestora, folosite pentru a crea o imagine care identifică un produs și îl diferențiază de concurenții săi".
În piața de astăzi, este foarte important să vă stabiliți compania separată prin crearea unei imagini care să poată fi recunoscută cu ușurință utilizând câteva declanșatoare vizuale simple.
Întreaga idee din spatele proiectului pentru acest tutorial este de a construi ceva atrăgător care poate fi pus în aplicare de îndată ce terminați crearea produsului final.
Vă încurajez să vă faceți design-ul propriu prin "branding" ilustrația, astfel încât în cele din urmă veți avea o versiune unică a acestuia.
Cum, ai putea întreba?
Ei bine, iată câteva puncte de plecare.
Culoarea este ușor unul dintre instrumentele cele mai utile atunci când vine vorba de construirea de branduri, deoarece valoarea corectă vă poate distinge cu ușurință de dvs. față de concurenții dvs., atâta timp cât faceți acest lucru interesant.
M-am dus cu un galben frumos pentru accente și punctul principal de focalizare, dar asta nu înseamnă că trebuie să rămânem la el.
Odată ce ți-ai dat seama de schema de culori, poți să-ți arăți brand-ul sau compania, preluând o temă care descrie activitatea sa principală. Aici puteți ajunge în jos și creativ și să reflectați asupra elementelor vizuale pe care doriți să le comunicați.
De exemplu, dacă construiți un site web care se ocupă de analiza datelor, puteți crea ceva care să utilizeze diagrame grafice și indicatori procentuali, pentru a oferi spectatorilor un gust mic de ceea ce este vorba despre afacerea dvs..
Sau, dacă aveți de-a face cu un produs digital, să zicem o bucată de software, puteți crea o fereastră abstractă cu câteva funcții mici din cadrul programului propriu-zis, ceea ce ar da un indiciu cu privire la natura produsului dvs..
În acest tutorial special, am decis să merg cu ceva mai generic, deoarece am crezut că ați putea folosi versiunea mea ca punct de pornire și că ați putea construi acest lucru.
Acestea fiind spuse, să nu mai pierdem timp prețios și să fim creativi.
Adu Illustrator și creați un Document nou (Fișier> Nou sau Control-N) folosind următoarele setări:
Și de la Avansat fila:
Sfat rapid: După cum probabil ați ghicit deja, vom crea o ilustrație utilizând un flux de lucru pixel-perfect, așadar vă recomandăm cu insistență să citiți tutorialul meu despre cum să creați o lucrare de pixel perfectă, care vă va ajuta foarte mult.
Înainte de a începe să construim ceva, vă recomandăm cu insistență să identificați și să separați secțiunile principale ale ilustrației de stratul lor propriu, deoarece va fi mai ușor să vizați și să le modificați mai târziu dacă aveți nevoie să.
Privind compoziția noastră, folosim șase straturi, oferindu-le nume ușor de recunoscut, care vor ajuta la identificarea unui element specific din întreg.
După ce ați întins documentul, putem începe să lucrăm la ilustrația reală și vom face acest lucru prin crearea liniei de bază și a fundalului.
Poziționați-vă pe stratul liniei de bază și folosiți rotunjit Instrumentul dreptunghiului creați trei forme de lățime diferite cu o grosime de 6 px și a 3 px Radius colț. Colorați-le folosind o culoare roșu închis (# 3f3838) și apoi asigurați-vă că le poziționați 8 px unul de altul.
Apoi grupează-le folosind Control-G comanda rapidă de la tastatură și centralizați-le pe artboard folosind Aliniați panoul„s Centrul de aliniere orizontală opțiune, asigurându - vă că lăsați un decalaj de 46 px între ei și artboardde partea de jos.
Poziționați-vă pe stratul de fundal și utilizând Instrument de elipsă (L), creeaza o 536 x 536 px forma pe care o vom folosi #efefef apoi mascați parțial pentru a ascunde secțiunea inferioară care se află sub linia de sol.
Apoi, adăugați un altul mai mic 46 x 46 px cerc spre colțul din dreapta sus și colorați-o cu aceeași valoare (#efefef).
Sfat rapid: dacă doriți să utilizați o altă culoare pentru fundal, puteți face acest lucru cu ușurință, dar când exportați fișierul, încercați să îl eliminați, deoarece un fișier PNG transparent ar putea fi mai potrivit, mai ales când lățimea de conținut este mai mare decât ilustrația însăși.
Începeți să lucrați pe MacBook creând un 426 x 24 px bază cu fund rotund, pe care o vom folosi cu culoarea # e2e2e2 și apoi dați 6 px contur (#aaaaaa) folosind Calea offset instrument.
Sfat rapid: Puteți învăța cum să creați contururi, luând o privire la comparația mea în profunzime dintre căile de offset și strokes folosite ca metode pentru crearea de pictograme de linie.
Odata ce aveti formele principale pentru baza (1), incepeti sa adaugati cateva detalii, cum ar fi partea superioara mai usoara (Lăţime: 426 px; Înălţime: 16px; Culoare: # e2e2e2) (3), 426 x 6 px grosime de separare (# 3f3838) (2), evidențiază subtil (Culoare: alb; Mod de amestecare: Acoperire; Opacitate: 80%) (4) și zona touchpad-ului (5) pentru a face să pară un laptop real și nu o placă de masă.
Începeți să lucrați pe partea superioară a MacBookului, creând capacul și afișarea reală.
Mai întâi creați a 364 x 220 px dreptunghi cu un 18 px Radius colț aplicată în colțurile din stânga și din dreapta sus. Culoarea formei folosind # 756c6c și apoi dați-i a 6 px contur (# 3f3838) (2).
Apoi, creați un altul 184 x 328 px dreptunghi, colorați-l folosind culoarea de brand (care, în cazul nostru, este # edd87e), dați-i la fel 6 px contur (# 3f3838) și apoi poziționați cele două spre centrul capacului, lăsând un decalaj de doar 6 px între ele și baza lui MacBook (3).
Adăugați câteva evidențieri și o umbră pentru a da piesei un pic mai mult polonez (4).
Odată ce ați creat MacBook, puteți începe să lucrați la tema site-ului dvs., luați-vă timpul, creați-vă și aflați exact ce doriți să arătați spectatorilor.
În cazul nostru, este un layout simplu de site, cu un meniu de navigare de sus, un substituent de imagine, un buton de chemare la acțiune și câteva elemente amuzante, cum ar fi scara și zona albă nevopsită.
Când ați terminat, nu uitați să grupați împreună toate elementele MacBook folosind Control-G tastatură și apoi blocați stratul acesteia, pentru a putea trece la următoarea secțiune a ilustrației.
Începeți să lucrați pe macaragă și vedeți dacă puteți adăuga culoarea sau culorile mărcii la unele dintre piesele sale de compoziție, pentru a crea anumite culori de accent pentru a vă ajuta să realizați tema.
În cazul nostru, am folosit galbenul nostru însorit (# edd87e) pentru cabina de operare a macaralei și ascensorul lateral mic.
Continuați să lucrați la tema dvs. prin adăugarea de elemente care ar fi relevante pentru site-ul dvs. Web sau pur și simplu completați spațiul gol astfel încât ilustrația să nu se termine în căutarea dezechilibrată.
M-am hotărât să păstrez lucrurile simple prin adăugarea unui mic camion către partea dreaptă a MacBook-ului, care ar putea fi o metaforă pentru lucrurile care au fost reciclate în timpul construcției site-ului.
Finalizați ilustrația adăugând ultima piesă a puzzle-ului, care în cazul nostru este micul "imagine prefăcută" care este ținută de brațul macaralei.
Deci, acolo aveți-un ghid frumos și simplu de a construi un interesant ilustrație "Website Under Construction", care vă poate ajuta să vă distingeți brandul personal sau al companiei de restul.
Vă mulțumim pentru timpul și atenția acordată și asigurați-vă că ne arătați la ce ați venit după ce ați citit această piesă.
Din moment ce știu că este un tutorial rapid și nu am avut timp să vă conduc întregul proces creativ din spatele ilustrației, am să vă dau fișierul sursă editabil, pentru a putea să-l dați cu totuși inimii dorește. Vedeți linkul de descărcare din bara laterală dreaptă.
Accentsconagua