Share
Acest articol este dedicat unui subiect care este aproape de inima mea, dar în același timp mi-a dat unele dureri de cap puternice în primele zile ale procesului meu de proiectare.
Dacă nu l-ați ghicit deja din titlu, este vorba despre ceva profund legat de designul icoanelor, mai precis de icoanele de linie și de cele două metode destul de diferite de a le produce: compensări vs. lovituri. Deci, dacă vă creați propria sau modificați un pachet de pictograme de la Envato Market, acest articol vă va ajuta.
Acestea fiind spuse, dați-vă în jos și să trecem peste principalele avantaje și dezavantaje ale utilizării una peste alta.
Ei bine, este o întrebare foarte bună, mai ales dacă începeți doar ca designer de icoane, deoarece într-un anumit moment îmi amintesc că mă întrebam exact aceeași întrebare.
Pentru cei care deja știu răspunsul, bine purtați-ne cu noi, deoarece va dura doar câteva secunde pentru a face pe oricine altcineva să accelereze.
Icoanele de linie sunt icoane care delimitează diferitele secțiuni ale blocului de construcție dintr-o compoziție, folosind contururi mai subțiri sau mai groase sau linii.
Există două tipuri principale de icoane de linie, care sunt de fapt destul de similare, diferența principală fiind utilizarea sau, mai degrabă, lipsa formelor de umplere colorate.
Indiferent dacă decideți să mergeți complet goală și să utilizați numai linii sau să adăugați detalii prin completarea spațiului gol dintre aceste linii, totul depinde de dvs..
În acest moment, lucrurile s-ar putea să nu pară atât de complicate, cel puțin la suprafață, dar de îndată ce faceți procesul de creare a icoanelor reale, lucrurile s-ar putea să înceapă să fie încurcate. Acest lucru se datorează în principal faptului că există o mulțime de voci vizionate care vorbesc despre diferitele metode de creare a icoanelor reale, dar nu sunt multe dintre ele care fac o comparație directă a celor două procese.
Așa că am crezut că pot intra și fac această mică piesă scrisă pentru a face dreptate ambelor metode.
Bine, deci știm acum ce icoane de linie sunt, dar cum să le facem să le creăm?
Așa cum am menționat în introducere, există două modalități de bază de a crea aceste icoane. Prima este folosirea căilor offset, care vă cere să creați o formă de bază și apoi să adăugați o compensație la ea, pe care o veți transforma într-o piesă de linie, prin tăierea formei mai mici de cea mai mare.
Cel de-al doilea se bazează pe utilizarea formelor de bază ale Illustratorului combinate cu Instrument Pen (P) pentru a crea căi care folosesc numai curse mai subțiri sau mai groase, astfel încât nu se umple.
Voi trece peste fiecare dintre ele în următoarele minute și încercați să aruncați cât mai multă lumină pe ambele, astfel încât, în cele din urmă, puteți decide singură care dintre ele vă convine cel mai bine.
În primul rând, ce înseamnă cuvântul "offset"?
Ei bine, când este folosit ca un substantiv, trebuie să spun că nu am găsit nicio definiție valabilă acolo care să se apropie de utilizarea sa în design. Pe de alta parte, atunci cand este folosit ca adjectiv, lucrurile incepe sa aiba un sens mai putin, deoarece "plasate departe de o linie centrala; în afara centrului "îl apropie de modul în care Illustrator îl folosește.
Acum, pentru a fi sincer, nu pot spune că manualul oficial Adobe Illustrator face o treabă foarte bună în a explica lucrurile, deoarece instrumentul este listat sub un titlu oarecum înșelător "Obiecte duplicate offset", ceea ce este puțin incorect.
Acest lucru se datorează faptului că obiectele rezultate nu sunt de fapt duplicate, deoarece un duplicat are aceleași caracteristici, deci dimensiunea, culoarea și forma ca omologul său original. Cred că cuvântul real pe care ar fi trebuit să-l folosească este "copie", deoarece o copie poate fi "similară sau identică" cu originalul, ceea ce este de fapt ceea ce offsetul Illustratorului nu.
Chiar cred că ar fi putut face o treabă mai bună dacă ar fi numit doar ceva simplu ca "The Offset Path Tool" și i-ar fi descris funcțiile utilizând câteva subtitrări și secțiuni diferite.
Ele fac lucrurile mai clare odată ce începeți să citiți textul real al textului:
"Puteți crea o replică a unui obiect, pornit de la obiectul selectat până la o distanță specificată, utilizând comanda Calea de decolare sau Efectul Path Offset. Compensarea obiectelor este utilă atunci când doriți să creați forme concentrice sau să faceți mai multe replicări ale unui obiect cu distanțe regulate între fiecare replicare. "
Încă am găsit că definiția este puțin vagă, așa că am decis să încerc să explic conceptul, examinând în detaliu procesul actual pe care Illustrator îl urmează pentru a-l crea.
Deci, o cale de offset este în esență o copie a unui obiect selectat care a fost creat prin împingerea căii sale spre exteriorul formei originale, oferindu-vă astfel o versiune puțin mai mare a acelui obiect care este identică sub formă și culoare, dar nu în dimensiune.
Acum, nu știu despre crearea mai multor forme concentrice, dar acest instrument poate fi perfect potrivit pentru crearea de icoane de linie.
Da, există câteva trucuri pe care trebuie să le cunoașteți atunci când le folosiți în acest scop, dar voi vorbi despre ele în următoarele momente.
Procesul depinde de tipul de pictogramă pe care o veți crea. Dacă vă amintiți bine, în primul capitol am vorbit despre cele două tipuri de icoane de linie care sunt în prezent utilizate de designeri: pur linii goale sau line icoane cu forme de umplere.
Deoarece instrumentul Offset Path creează o copie a formei originale, aceasta implică faptul că procesul de creare a liniilor se va concentra pe utilizarea a două obiecte, identice în ceea ce privește forma, dar diferite în mărime.
Indiferent de tipul de pictograme de linie cu care vă decideți să lucrați, procesul de creare a offsetului real este identic. Mai întâi, creați forma originală și apoi selectați-o cu ea Obiect> Cale> Calea offset unde veți fi întâmpinați de o mică fereastră pop-up cu o grămadă de opțiuni.
Primul este ofset care, după cum deja știți, controlează distanța la care Illustrator va crea și poziționa calea copiei.
A doua opțiune este se alătură, care controlează aspectul general al îmbinărilor finale ale unei forme, oferindu-vă următoarele trei opțiuni:
În funcție de stilul vizual pe care îl alegeți, ați putea alege unul peste celălalt. Un lucru pe care ar trebui să-l țineți cont este că acestea se alătură lucrați numai pe forme care au articulații ascuțite, și nu colțuri rotunde.
De exemplu, dacă aveți un pătrat și doriți să creați un offset și să-i stabiliți colțurile Rundă, puteți face acest lucru cu ușurință. Pe de altă parte, dacă aveți un dreptunghi rotunjit, singurul tip de ofset pe care o veți obține este Rundă indiferent de ce ați setat se alătură opțiunea pentru.
Acest lucru nu ar trebui să fie o problemă, deoarece nu vedeam pe nimeni dornic să creeze o formă de colț rotunjită, cu un contur ciudat.
A treia și ultima opțiune este Mitra Limit. Am încercat să caut o prezentare oficială Adobe a opțiunii, dar nu am putut găsi una directă. În schimb, am găsit o explicație cu adevărat plăcută Accident vascular cerebral„s Lățimea colțarului, care cred că funcționează la fel ca ofset's unul:
"Controlul limitei miterului când programul trece de la o îmbinare ascuțită (ascuțită) la o îmbinare teșită (pătrată). Limita implicită a miterului este de 10, ceea ce înseamnă că, atunci când lungimea punctului atinge de zece ori greutatea cursei, programul trece de la o miteră la o îmbinare ascuțită. O limită de miter de 1 duce la o îmbinare înclinată. "
Dacă încercați acest lucru, s-ar putea să găsiți implicit Mitra Limit pentru ofset este 4 (nu 10), dar altele decât acestea, sunt aproape identice.
Bine, așa că probabil am trecut puțin prea tehnic pe această temă, dar am vrut să explic lucrurile cât mai bine posibil.
În acest moment știm cum să creăm offsetul, dar cum îl folosim pentru a crea pictograma liniei reale? Îți voi arăta mai întâi procesul pentru linia goală.
Pentru cei care se întreabă de ce îi numesc "icoane goale", să spunem doar că am găsit expresia mai simplă de înțeles pentru cineva care este nou în joc. Acestea fiind spuse, indiferent de tipul icoanelor pe care le alegeți, fie că sunt goale sau pline, ele sunt ambele icoane de linie.
Acum, deoarece găsesc de obicei exemple mai explicite decât textul pur, vă voi purta prin procesul de creare a unei mici pictograme de proiect pentru animale de companie proprii.
Deoarece aveam nevoie de ceva de bază, care să poată explica cu ușurință conceptul, am decis să creez o mică pictogramă de document, care este rapidă și ușor de creat.
Atunci când creați icoane, există câteva lucruri pe care designerul trebuie să le decidă. Prima decizie este, de obicei, aceea de a alege dimensiunea de bază a pictogramei. Acest pas este foarte important, deoarece veți dori să începeți de la cea mai mică dimensiune și să creați versiuni mai mari din acesta, care, în funcție de necesitățile proiectului, ar putea fi 32 x 32 px, 64 x 64 px, 96 x 96 px, etc.
Sfat rapid:Dacă vă întrebați de ce ar trebui să porniți de la o dimensiune mai mică și să lucrați până la ceva mai mare, atunci este destul de simplu: când creați icoane perfect pixel care au valori impare (de exemplu 3) și alegeți o dimensiune de bază relativ mai mare (64 x 64 px), dar apoi decideți că doriți să adăugați și unul mai mic (32 x 32 px) atunci ați putea observa că lucrurile încep să se rupă. Acest lucru se datorează faptului că un număr împărțit împărțit în jumătate vă va da o valoare zecimală, care nu poate fi fixată corect la Pixel Grid.
Puteți citi mai multe despre subiect prin trecerea peste unele dintre celelalte tutoriale ale mele:
În cazul nostru, să spunem că dorim să mergem cu o bază relativ mare 96 x 96 px.
Odată ce ne-am decis cu privire la mărimea noastră, atunci trebuie să începem să ne gândim la greutatea liniilor noastre. Acest pas este la fel de important, deoarece va trebui să creăm forma principală, asigurându-vă că lăsăm un spațiu între ea și laturile noastre 96 x 96 px grilă, deoarece în acest caz liniile vor fi poziționate.
Acest decalaj va reprezenta grosimea efectivă a liniilor noastre, deoarece vom aplica o cale de decalare a formei originale și apoi vom crea "pictograma liniei" prin tăierea formei mai mici de cea mai mare folosind deschizător de drumuri„s Minus Front opțiune.
Pentru acest exemplu, vom merge cu o grosime de 4 px,ceea ce înseamnă că forma noastră principală va avea un decalaj de 4 px între partea superioară și cea inferioară a rețelei noastre.
Dacă vă întrebați de ce suntem interesați numai de partea superioară și de partea inferioară, asta se datorează faptului că icoanele de documente sunt de obicei mai înalte, dar puțin mai înguste în ceea ce privește lățimea. Dacă acest lucru ar fi un obiect diferit, am fi putut fi necesar să luăm în considerare atât partea stângă, cât și cea dreaptă, deoarece veți dori ca lucrurile să fie consecvente.
Acum, să începem să construim pictograma prin desenarea a 64 x 88 px rotunjit cu un dreptunghi 4 px Radius colț, pe care o vom colora folosind o nuanta mai inchisa de gri si o pozitie in centrul grila.
După cum puteți vedea, atât partea de sus, cât și partea de jos a formei au asta 4 px care vom folosi drept valoare a offsetului.
Deci, haideți să alegeți forma și să creați compensarea prin accesarea Obiect> Cale> Calea offset și intrarea 4 px în ofset câmpul de valoare, lăsând se alătură și Limita de miter la valorile lor implicite.
De îndată ce faceți clic pe O.K, Illustratorul va crea obiectul nostru offset, care va avea exact aceeași formă și culoare ca și forma originală a documentului.
Acum, pentru a crea conturul liniei, vom selecta pur și simplu ambele forme și vom folosi deschizător de drumuri„s Minus Front opțiunea de a decupa forma mai mică de cea mai mare.
După cum puteți vedea, acum avem o nouă formă care are un tot-în jurul 4 px grosime.
Destul de cool, corect?
Acum, să terminăm pictograma, adăugând câteva linii de text folosind Instrumentul dreptunghiular (M) astfel încât să pară un document real. Când creați formele, asigurați-vă că aceștia au același lucru 4 px grosimea drept conturul principal, deoarece pictogramele de linie sunt de obicei coerente din punct de vedere al grosimii.
Deci, în acest moment, ar trebui să aveți o idee de bază despre cum să creați "icoane goale" folosind uneltele incredibil de puternice Instrumentul de deplasare a offsetului.
Vom analiza acum crearea aceleiași pictograme pentru document, dar de data aceasta vom folosi linii în combinație cu forme de umplere.
Procesul este aproape identic - singura diferență importantă este că de data aceasta nu vom tăia forma mai mică decât cea mai mare. În schimb, vom folosi cel mai mic ca formă de umplere, iar compensația ca și conturul pictogramei.
Deci, să creăm același lucru 64 x 88 px rotunjit dreptunghi cu 4 px Radius colț, și poziționați-o spre centrul rețelei noastre.
Apoi, cu forma selectată, mergeți la Obiect> Cale> Calea offset și da-i o compensare 4 px așa cum am făcut-o cu pictograma anterioară.
Odată ce ați făcut acest lucru, pur și simplu colorați forma originală folosind o nuanță mai închisă de gri pentru ao face să iasă din tabloul de bord, apoi adăugați liniile mici de text.
După cum puteți vedea, ambele procese sunt foarte ușor de înțeles și de aplicat, dar există câteva lucruri pe care trebuie să le cunoașteți atunci când utilizați Calea offset instrument pentru a crea aceste tipuri de icoane. Vom vorbi despre aceste aspecte de îndată ce vom trece peste Strokes astfel încât să putem avea o perspectivă mai mare asupra celor două.
Această metodă este pentru mulți designeri acolo "drept" unul de la "icoane linia" ar trebui să fie create folosind linii / căi reale și nu umple forme. Aceasta este probabil o declarație corectă, dar să fim cinstiți, majoritatea oamenilor de acolo care cumpără icoanele noastre nu le pasă, de vreme ce ei vor termina să le folosească ca fișiere .png oricum.
Comparativ cu metoda anterioară, procesul în sine nu este cu totul altfel, deoarece vom folosi în continuare Ilustratorforme de bază, cum ar fi Dreptunghi (M) și Instrument rotunjit dreptunghi, dar nu vom tăia nimic. În schimb, vom transforma formele în linii, eliminându-le culoarea de umplere și oferindu-le o greutate mai mică sau mai groasă.
Împreună cu formele de bază, vom folosi de asemenea Instrument Pen (P) pentru a adăuga detaliile și delimitările secțiunilor pictogramelor în funcție de complexitatea compoziției.
Acestea fiind spuse, să trecem peste procesele de creare a icoanelor goale și pline folosind această metodă, prin crearea aceleiași mici pictograme de documente.
Indiferent de modul în care faceți crearea acestor tipuri de icoane, va trebui întotdeauna să decideți cu privire la dimensiunea de bază și la grosimea liniei pe care o veți utiliza.
Deoarece în acest caz vom crea exact aceeași pictogramă, mărimea noastră va rămâne aceeași, deci 96 x 96 px, și la fel și grosimea liniei noastre (4 px).
Dacă pentru metoda precedentă trebuia să creați două forme, pentru aceasta vom avea nevoie doar de una pe care o vom transforma în schița documentului prin rotirea culorii de umplere cu cursa.
Deci, folosind Instrument rotunjit dreptunghi, selectați aceeași culoare gri ca înainte și apoi schimbați umplutura cu cursa apăsând Shift-X. După cum puteți vedea, acest lucru va elimina orice culoare de umplere și vă va permite să desenați folosind căi, ceea ce este exact ceea ce dorim.
Sfat rapid: The Shift-X swap-ul de culori funcționează atâta timp cât nu aveți culori atribuibile umplerii și cursei. Dacă aveți două culori, atunci acestea vor fi doar inversate, ceea ce nu este ceea ce ne dorim atunci când ne confruntăm cu icoane de linie. Deci, dacă aveți mai mult decât o culoare de umplere, trebuie să vă asigurați că ați îndepărtat cea de-a doua.
Acum, schimbați Accident vascular cerebral„s Greutate la 4 px și începeți să desenați forma principală a pictogramei făcând clic și apoi trăgând astfel încât, în cele din urmă, să aveți a 68 x 92 px forma cu a Raza de colț de 6 px.
Dacă vă întrebați de ce valorile s-au schimbat, aceasta se datorează faptului că, în loc să creați o formă de bază și apoi să adăugăm o compensare, vom crea conturul documentului utilizând curse. Acum, dacă ar fi să aruncăm o privire mai atentă la conturul creat cu metoda traseului offset, am observat că are o lățime de 72 px...
... și o afară Raza de colț de 8 px cu doar 4 px pentru cel interior.
Explicația este destul de simplă. Din moment ce Illustrator aliniază în mod implicit cursa spre interior, înseamnă că grosimea liniei va fi împărțită în mod egal pe fiecare parte a căii, deci 2 px pentru o parte și alta 2 pentru celălalt.
Acum, chiar dacă forma are exact aceeași lățime ca și conturul anterior creat folosind metoda offset, dacă verificăm Panoul de transformare vom vedea asta Lăţime valoarea este de fapt mai mică, deoarece Illustrator indică dimensiunea căii reale și nu obiectul. Dacă am extins calea și i-am transformat într-o formă, ar avea exact aceleași valori ca și cea creată utilizând prima metodă, deoarece Illustrator ar considera acele 2 px din fiecare parte (68 + 4 = 72).
În comparație cu metoda anterioară în care a trebuit să lăsați un decalaj care avea exact aceeași valoare ca grosimea liniei, de data aceasta va trebui să poziționați forma astfel încât calea ei (care este de obicei reprezentată de culoarea stratului) să pară un decalaj de doar 2 px între secțiunile de sus și de jos ale rețelei.
Sfat rapid: depinzând de Greutate de dumneavoastră Accident vascular cerebral¸ va trebui intotdeauna sa va asigurati ca atunci cand proiectati pictograma pe grila, va lasati un gol care are o valoare de jumatate din calea Greutatea accidentală, deoarece atunci când desenați formele făcând clic și trăgând, Illustrator nu numără numărul de pixeli care se află în afara liniei indicatorului de cale. Deci, va trebui să vă asigurați că aveți în vedere acest lucru și trageți lăsând un mic decalaj în cazul în care laturile traseului dvs. întâlnesc frontierele grila actuală, astfel încât design-ul dvs. se va potrivi în interiorul acelui spațiu.
După ce vom avea schița documentului, putem selecta Instrument Pen (P) și începeți să adăugați 4 px linii groase de text pentru a termina pictograma.
Acum, că am văzut cum să creăm pictograma liniilor goale, să aruncăm o privire asupra procesului de creare a icoanelor de linie cu forme de umplere utilizând aceeași metodă.
Procesul de creare a acestui tip de pictogramă este aproape identic cu cel pentru liniile goale. Singura diferență este că va trebui să creați un duplicat al conturului dvs. principal și să îl transformați într-o formă de umplere prin schimbarea culorii acestuia cu umplutura.
Deci, să începem prin crearea schiței principale prin desenarea a 68 x 92 px forma cu a Raza de colț de 6 px. Dacă vă simțiți leneși, puteți crea o copie a celei pe care o avem deja, deoarece ar trebui să accelereze puțin lucrurile.
După ce avem forma poziționată peste rețea, trebuie să creați o copie a acesteia (Control-C> Control-F) și apoi întoarceți cursa cu umplerea acesteia apăsând Shift-X. Apoi schimbați pur și simplu culoarea folosind același gri închis ca înainte, asigurându-vă că îl trimiteți în spate folosind Aranjați> Trimiteți înapoi opțiune. În cele din urmă, adăugați liniile mici de text și sunteți bine să mergeți.
În acest moment, am trecut peste fiecare dintre cele două metode pe care le putem folosi pentru a crea pictograme de linie. Așa cum am promis la începutul acestui articol, voi vorbi acum despre avantajele și dezavantajele folosirii uneia dintre metode asupra celeilalte, astfel încât, în cele din urmă, puteți decide cine vă este cel mai potrivit.
Nu contează tipul de pictogramă de linie pe care o creați Calea offset metoda poate fi cu ușurință instrumentul dvs. "du-te la", și nu eu nu spun doar pentru că eu îl folosesc zilnic. Spun asta pentru că există câteva lucruri care o fac deosebit:
Ca și în cazul oricărui instrument, Calea offset are câteva dezavantaje care pentru unii ar putea fi un întreruperi:
Chiar dacă Calea offset este un instrument grozav, asta nu înseamnă Strokes metoda nu poate fi o alternativă viabilă. Există câteva avantaje pe care ar trebui să le cunoașteți înainte de a decide dacă această metodă este potrivită pentru dvs.:
Acum că am văzut părțile bune, să luăm câteva secunde și să vorbim despre cele rele:
Există o comparație rapidă dar în profunzime a două metode minunate de creare a icoanelor de linie care ar trebui să indice care este cel mai potrivit pentru dvs..
Ca întotdeauna, sper că ați învățat ceva nou și dacă aveți întrebări sau doriți doar să împărtășiți o parte din cunoștințele dvs., postați comentariul dvs. în secțiunea de mai jos și vă voi întoarce cât de repede pot!
Accentsconagua