Share
Cu acest tutorial aș dori să vă arăt câteva trucuri despre crearea de linii și margini curate atunci când lucrați cu tendința de design plat, în Adobe Illustrator. Simple straturi de stiluri și reutilizarea stilurilor grafice pentru a vă ajuta fluxul de lucru sunt cele mai eficiente, astfel încât ar trebui să puteți crea un set de pictograme potrivite în cel mai scurt timp.
Pentru a începe, să creăm o placă de artă care să fie 500 x 500 pixeli. Din moment ce icoanele noastre sunt mai degrabă modul și au o mulțime de linii drepte, ar fi mai bine să lucrați cu o rețea pentru a asigura o formă perfectă de cristale pixel. Deci, să creăm o rețea care să fie 1px și apoi afișați și Fixat la retea după cum se arată mai jos.
În timp ce icoanele dvs. încearcă să păstreze în minte folosirea pictogramei în sine și unde va fi plasată. Pentru aceste icoane mă voi lipi de o dimensiune generală 128 x 12 pixeli care este destul de obișnuit în lumea pictogramelor. Din moment ce urmăm tendința de design plat, vom rămâne cu culori de bază și unghiuri ascuțite de 45 ° cu umbre exagerate.
Voi crea cadru de sârmă al acestor icoane cu forme de bază, apoi ajustând stilul formelor folosind o mână de Stiluri grafice. Deci, pentru a începe selectați Instrument rotunjit dreptunghi și a crea un dreptunghi care este 20 x 80 pixeli și prindeți-o în tabloul de artă.
Apoi, selectați Instrument de elipsă (L) și să creeze mai multe cercuri concentrice. Primul fiind 70 x 70 pixeli, atunci 55 x 55 px, atunci 40 x 40 px, și, în sfârșit 15 x 15 pixeli. Acum aranjați-le după cum vedeți mai jos.
Selectează Instrumentul dreptunghiular (M) și desenează câteva care acoperă jumătate din formele pe care tocmai le-am creat. Vom utiliza aceste pentru a decupa forme care ulterior vor deveni zone umbrite. Înălțimea / lățimea nu contează, doar asigurați-vă că acestea se aliniază exact la centrul celorlalte forme. De asemenea, vom face o umbra aruncata astfel incat trageti un pătrat și rotiți-l 45º și plasați-o astfel încât marginea liniei diagonale să se întâlnească cu partea inferioară a celui mai mare cerc și a dreptunghiului rotunjit de jos.
Utilizarea deschizător de drumuri vom folosi o combinație de Uni, Minus Front, și intersecta pentru a schimba aceste forme de dreptunghi în suprapunerile noastre de umbră. Amintiți-vă când utilizați aceste instrumente că va afecta forma, astfel încât va trebui să duplicați aceste obiecte pentru a crea rezultatul dorit. În captura de ecran de mai jos am aplicat culoarea roșie în obiect, iar stratul alb va fi umbrele noastre mai târziu.
Acum trebuie să facem umbra. Începeți prin duplicarea celui mai de jos mâner și a celor mai mari forme de cerc Uni într-un singur obiect. Duplicați această nouă formă și împingeți-o spre stânga 15px. Vizita Obiect> Blend> Blend Options ... și introduceți pași suficienți, astfel încât să existe o tranziție lină (cu care am rămas 50), atunci Face amestecul. Acum Extinde obiectul și Uni pentru a forma o singură formă. Măriți imaginea la forma Instrumentul de selecție directă (A) și selectați punctele suplimentare care nu sunt necesare și le eliminați, asigurându-vă că ați închis căile (Command + J) după ce ați terminat. În sfârșit, aliniați acest obiect la spatele tuturor celorlalte forme, dacă nu ați făcut-o deja.
Din moment ce icoanele noastre sunt doar "Sorta Flat", să facem câteva lucruri importante. Selectați elementele principale (cele în roșu) și duplicați-le de două ori. Folosind săgețile de pe tastatură, împingeți cele mai multe duplicate deasupra 1px. Direcția pe care o împingeți pe cel mai înalt element depinde de direcția de culoare. Deci, pentru forma mânerului inferior, împingeți-o spre stânga, dar pentru forma rotundă interioară, împingeți-o spre dreapta spre zona roșie. Selectați cele două dublări și utilizați Minus Front să lași o bucată de lumină. Puteți vedea acest lucru în verde în imaginea de mai jos.
Prin completarea formelor noastre principale, să le formăm. Selectați toate elementele care alcătuiesc lupa și rotiți-le 45º în sens orar.
Acum, selectați toate elementele care vor alcătui umbrele. Acestea sunt părțile albe de pe mâner și inelele exterioare, precum și umbra lungă. Umpleți-le cu negru plat și aruncați-le Opacitate la 15% și asigurați-vă că eliminați orice margini pe care le aveți. Odată ce sa terminat, du-te la Fereastră> Stiluri grafice și când apare fereastra, faceți clic pe Nou element în partea de jos dreapta de lângă pictograma coș de gunoi pentru a crea un stil grafic în afara acestui efect.
Selectați zona mânerului și navigați la dvs. Aspect (fereastră> Aspect) și introduceți informațiile de mai jos. Culoarea de bază va avea o culoare cenușie, apoi vom adăuga un alt strat pe partea superioară a acelui umplut cu un gradient alb-negru setat 45º cu un Opacitate de 25% și Mod de amestecare setat la Acoperire. Odată finalizată, salvați-o ca pe Stilul grafic de asemenea.
Selectează cel mai de jos cerc și vom aplica aproape același stil, dar vom folosi o nuanță mai deschisă de gri. Încă o dată, salvați acest lucru ca pe Stilul grafic.
Selectați cercul interior și aplicați același stil de brichetă pe care tocmai l-am făcut, inversați gradientul astfel încât acesta să fie de la lumină la întuneric.
Selectați cel mai interior cerc care va fi obiectivul nostru. Același stil va fi folosit și pentru această formă, doar în loc de gri, vom folosi o culoare accentuată de albastru. Asigurați-vă că ați creat și a Stilul grafic de asemenea.
În cele din urmă, vom adăuga evidențele noastre. Selectați toate elementele verde și completați-le cu un alb plat, apoi aruncați Opacitate până la 25%. Asigurați-vă că salvați acest lucru ca pe un Stilul grafic de asemenea. Ultimul cerc rămas pe formă este un punct de atracție dur, așa că vom lăsa ca la alb la 100%, doar asigurați-vă și eliminați marginea.
Să creăm crestăturile pentru forma noastră de unelte. Selectează Instrument rotunjit dreptunghi și a crea un dreptunghi care este 20 x 110 pixeli și prindeți-o în tabloul de artă. Acum dublați această formă de trei ori și rotiți-le la 45º unghiuri pentru a face o formă de floare.
Apoi, selectați Instrument de elipsă (L) și să creeze mai multe cercuri concentrice. Primul fiind 90 x 90 pixeli, atunci 60 x 60 px, și, în sfârșit 30 x 30 px. Acum aranjați-le după cum vedeți mai jos.
Selectați forma florii și cel mai de jos cerc și Uni lor. Apoi selectați cel mai mic cerc și duplicați-l. Acum, selectați unul dintre cercurile mici duplicate și cele mai mari forme și Minus Front să lase un întreg în mijloc.
Acum să facem din nou niște umbre. Începeți prin a crea dreptunghiuri care acoperă jumătate din forme. Din moment ce avem terminalele suplimentare, vom adauga cateva umbre la acestea. Se aliniază colțurile pentru umbrele de viteză în punctul în care cercul întâlnește capătul uneltei.
Acum creați umbră. Duplicați forma ansamblului inferior și loviți-o 15px ca și pictograma noastră anterioară. Amestec cele două forme Extinde și Uni lor.
Acum creați evidențiați. Nu uitați să vă îndreptați spre culoarea roșie
În cele din urmă, rotiți formele 45º și să ne aplicăm Stilul grafic de la început. Această pictogramă este destul de ușoară, așa că vom folosi doar stilul gri mai închis, asigurându-vă că inversăm gradientul pentru cercul interior.
Pictograma ochiului nostru folosește o mulțime de cercuri. Deci, selectați Instrument de elipsă (L) și să creeze mai multe cercuri concentrice. Primul fiind 120 x 120 pixeli, atunci 50 x 50 px, și, în sfârșit 20 x 20 px. Acum aranjați-le după cum vedeți mai jos.
Selectați cel mai mare cerc și treceți la Convertizor Tool Point Anchor (Shift + C). Selectați cele două puncte din stânga și din dreapta și faceți clic pentru a le face puncte clare. Acum, selectați Instrumentul de selectare directă (A) îndreptați ancora de vârf în jos 20px. Repetați acest lucru și pentru partea de jos, de asemenea, numai, îndemn în loc.
Acum, selectați toate aceste forme împreună și rotiți-le 45º sensul acelor de ceasornic. După ce luăm umbrele și scoatem evidența noastră, o vom roti înapoi, astfel încât acestea să aibă o perspectivă corectă.
Selectează Instrument de elipsă (L) și de a crea un oval care este 15 x 20 px și aliniați-o așa cum se vede mai jos.
Creați umbrele și subliniază cum am făcut înainte. Împărțirea formelor în jumătate cu dreptunghiuri și folosirea funcției deschizător de drumuri panou.
Selectați din nou toate formele noastre și rotiți-le înapoi 45º, apoi aplicați stilurile noastre grafice. Folosind cea mai ușoară culoare gri pentru partea principală a ochiului, albastrul cu gradientul inversat pentru iris și un gri închis pe care îl vom prezenta acum elevului.
Suntem la jumătatea drumului cu setul nostru de pictograme! Să creați una care să reprezinte chat sau comentarii. Cu Instrument rotunjit dreptunghi creați un dreptunghi care este 80 x 75 pixeli
Acum cu Instrumentul dreptunghiular (M) creați un dreptunghi care este 25 x 15 pixeli apoi aliniați-o spre partea inferioară și 15px din dreapta.
Cu Instrument de elipsă (L) creați trei cercuri care sunt 15 x 15 pixeli și aliniați-le spre centrul dreptunghiului rotunjit așa cum se vede mai jos.
Activați Instrumentul de selecție directă (A) și selectați punctul din stânga jos care alcătuiește dreptunghiul de jos, apoi îndepărtați-l pentru a forma un triunghi cu unghi drept, asigurându-vă că închideți calea când ați terminat.
Selectați dreptunghiul rotunjit și triunghiul și Uni ei să facă o formă completă. Odată unit, duplicați această formă de bule de vorbire și o răsuciți orizontal și o împingi în jos și spre dreapta 15px sub alte forme.
Cum am făcut cu pictograma ochi, selectați toate formele și apoi rotiți-o 45º. Vom lucra la umbre și subliniază în acest unghi, astfel încât atunci când îl vom roti înapoi, vor fi difuzate corect.
La fel ca în pictogramele anterioare, să creăm muchii ascuțite pentru a indica umbrele și evidențiază. Fii constient de umbrele tale. Vrei să creezi iluzia că cercurile dau o umbra cu adevărat lungă peste balon și că bula de sus aruncă o umbră peste cea de jos. Pentru umbrele aruncate din cercuri, voi folosi pur și simplu un dreptunghi care are aceeași înălțime cu cercul și suficient de larg pentru a se potrivi peste bule, apoi elimina excesul.
Acum rotiți înapoi formele și aplicați stilurile grafice. Bubul de jos va fi gri-închis, în timp ce cel de sus va fi gri-ul nostru mai deschis și punctele vor fi accentul nostru albastru
Să mergem la ceasul nostru. Cu Instrument de elipsă (L) creați mai multe cercuri concentrice. Primul fiind 100 x 100 pixeli, atunci 75 x 75 px, și, în sfârșit 10 x 10 pixeli. Acum aranjați-le după cum vedeți mai jos.
Acum vom crea mâinile ceasului. Selectează Instrumentul dreptunghiular (M) creați un dreptunghi care este 10 x 30 pixeli, altul este 10 x 20 px, și altul este 2 x 30 px. Acum aliniați-le astfel încât partea de jos a dreptunghiurilor să se întâlnească cu mijlocul cercurilor.
Treceți la Rotiți instrumentul (R) și selectați dreptunghiul lung. Poziționați cursorul peste punctul central al formei, apoi faceți clic și trageți acel punct în partea de jos a dreptunghiului, asigurându-vă că acesta rămâne în centrul și se fixează în partea inferioară. Acum rotiți forma 135º sensul acelor de ceasornic. Repetați acest pas pentru bucata de dreptunghi scurt, rotiți-o numai în sens contrar acelor de ceasornic.
Selectați cel mai mic cerc din centru și mâna lungă și slabă Uni împreună și le puneți deasupra celorlalte mâini. Acum, selectați toate formele și rotiți-le 45º
Tăiați formele în jumătate așa cum am făcut înainte și creați umbra noastră de casting, precum și cele mai importante momente. Pentru a evidenția totuși, mi-a plăcut ideea de a avea o evidențiere în interiorul zonei întunecate, care ar cădea pe secțiunea de jos. acest lucru îi conferă un pop de dimensionalitate care nu ar fi acolo ar trebui să fie folosiți așa cum am făcut.
Rotiți formele înapoi și aplicați-vă Stiluri grafice. Fața va fi gri deschis, marginea exterioară și mâinile minute și oră vor fi gri mai întunecate, iar a doua mână va fi culoarea accentului nostru
Pentru ultima noastră pictogramă, să creăm un calendar. Selectează Instrument rotunjit dreptunghi și a crea un dreptunghi care este 90 x 80 pixeli.
Duplicați acest dreptunghi rotunjit și aliniați-l în colțul din dreapta jos. Nu există nici un punct la care să nu se alinieze exact, dar funcția de rupere ar trebui să vă anunțe când sunteți aproape. Odată ajuns acolo, du-te duplicat în sus și peste la stânga 20px. Acum în deschizător de drumuri selectați panoul Divide din lista de pictograme din partea de jos. Apoi treceți la Instrumentul de selecție directă (A) și selectați forma inferioară a fundului și scoateți-o. Apoi scoateți colțul din dreapta jos al curbei, astfel încât să aveți o dreaptă 45º margine.
Selectează Instrumentul dreptunghiular (M) creați un dreptunghi care este 90 x 25 pixeli și aliniați-o la partea de sus a formei. După dublarea dreptunghiului rotund mare de fund selectați atât dreptunghiul drept drept superior, cât și cel rotunjit și utilizați intersecta de la deschizător de drumuri panou.
Apoi, creați două Rounded Rectangles care sunt puternice 15 x 30 pixeli iar colțurile sunt rotunjite suficient pentru a forma o formă de pilula. Apoi, aliniați-le la partea de sus a elementului așa cum se vede mai jos.
Treceți la Instrumentul tip (T) și tastați un număr. Oricine doriți, voi folosi "9", deoarece este primul care a venit în minte. Pentru fontul să folosim "Helvetica" cu o dimensiune de 50px. Nu te duci Obiect> Extindeți și convertiți tipul într-o cale.
Selectați toate formele și rotiți-o 45º. Acum, adăugați umbrele și subliniază cum am făcut înainte. Rețineți că foldul pe care l-am creat în colțul de jos va arunca o umbră. Pentru aceasta vom face doar un dreptunghi care are aceeași înălțime ca și foldul și intersecta din duplicarea dreptunghiului inferior.
În cele din urmă, rotiți înapoi formele și aplicați stilurile grafice. Dreptunghiul inferior rotunjit va fi gri deschis, pliul va fi alb plat, forma pilula va fi gri închis, dreptunghiul de sus va fi culoarea accentului nostru, iar numărul va fi același gri închis de la elevul nostru în ochi pe care l-am creat.
Și cu asta setul nostru de pictograme este complet. Am continuat și am adăugat o culoare de fund plat folosind un gri închis pentru a ajuta icoanele să iasă în evidență. Simțiți-vă liber să le spațiați așa cum doriți în tabloul de artă.
Sper că am putut să vă arăt că, deși icoanele plate sunt în mod inerent "plate", nu trebuie să fie fără stil. Ce alte icoane vă pot aduce?
Accentsconagua