Share
Înainte de a ajunge la proiectarea icoanelor, există câteva linii directoare și principii care merită studiate. Dacă doriți să creați modele eficiente de icoane, atunci ar trebui să adoptați o abordare holistică în privința unor aspecte precum audiența, dimensiunea, simplitatea, iluminarea, perspectiva și stilul. Acest articol vă oferă un bun loc de pornire pentru crearea de icoane care funcționează bine împreună și se potrivesc fără probleme în cadrul desenelor.
Icoanele se încadrează în sistemele grafice. Indiferent dacă sunt concepute pentru aplicații desktop sau site-uri Web, o pictogramă este unul dintre elementele grafice care trebuie să lucreze împreună armonios. Transportați această logică și în seturile de pictograme. Icoanele pot fi apreciate individual pentru soluțiile lor estetice, dar ele nu funcționează singure. Evaluați design-ul icoanelor dvs. în raport cu sistemul grafic pe care îl utilizați. Asigurați-vă că fiecare pictogramă diferă de pictogramele din jur, în timp ce lucrați împreună ca un întreg.
În articolul Proiectând o limbă iconică la Turbo Milk, autorul Yegor Gilyov afirmă: "Dacă trebuie să desenați mai multe icoane, trebuie să vă gândiți la imagini pentru întregul set de icoane înainte de a continua să ilustrați activitățile". Acesta este unul dintre cele două puncte majore făcute în acest articol privind designul icoanelor. El continuă să explice cum neputința de a planifica cum întregul set de icoane va lucra împreună de la început va asigura o pierdere imensă de timp, deoarece reproiectarea va fi inevitabilă.
Veți avea considerații diferite dacă proiectați un intranet pentru o companie mică, și nu pentru un produs care poate fi vândut pe plan internațional. Atunci când creați icoane, considerațiile culturale sunt importante. Simbolurile pot diferi pentru elementele comune pe care le puteți utiliza pentru desenele sau modelele dvs..
Turbo lapte are un alt mare articol numit 10 Greseli în Design Icon. În ea, ei subliniază câteva exemple clare în care multe modele de icoane se înșeală. Acestea discută caracteristicile naționale și sociale la punctul șapte al articolului. "Este întotdeauna necesar să țineți cont de condițiile în care va fi folosită pictograma dvs. Un aspect important aici este caracterul național." Tradițiile culturale, împrejurimile și gesturile pot să difere radical de la o țară la alta ". Ei continuă să ofere un exemplu despre modul în care cutiile poștale diferă foarte mult între țări. Apple utilizează același exemplu în Ghidul Interfeței Umane.
Deci, proiectarea unei pictograme internaționale bazată pe designul cutiei poștale rurale a unei țări este o idee proastă - un exemplu specific de ce să nu faci. Ei subliniază modul în care pictograma Apple Mail este mai ușor de recunoscut deoarece ștampilele au o universalitate culturală mai mare.
Dacă te duci în vector și faci pictograma ta în Illustrator, există o tentă inerentă de a scala designul și încerca să-l folosești la orice dimensiune. Acest lucru nu funcționează cu pictogramele. Ceea ce arata bine la 512px arata ca o frotiu neclar la 16px. Icoanele ar trebui să aibă un design de bază care este folosit ca punct de plecare, dar fiecare dimensiune de ieșire trebuie să aibă propriul design optimizat.
Design-ul de pictograme nu este unul de design este egal cu soluție scalabilă mediu deși. Acesta este motivul pentru care Photoshop este la fel de bună ca și alte programe. Pentru designerii care fac icoane în Illustrator, ei încă vor să le curețe în Photoshop sau să sară prin niște cercuri pentru a-și face icoanele să arate bine la dimensiuni mici, atunci când sunt trimise direct de pe Illustrator. Deci, nu cumpărați în mitul că designul icoanelor este un mediu bazat exclusiv pe vectori. Suntem de ieșire pixeli aici, la urma urmei.
Există, de asemenea, instrumente vectoriale în Photoshop și măști pe care le puteți profita de faptul că egal cu câmpul de joc scalabil între programe. Dacă sunteți la fel de versat cu Illustrator și Photoshop, puteți găsi un flux de lucru care merge bine între cele două programe. Luați în considerare utilizarea obiectelor inteligente. De asemenea, puteți lua în considerare utilizarea unui add-on Photoshop numit Icon Builder.
Abordarea luată pentru icoanele mici și designul icoanelor mari este foarte diferită. Firewheel are un articol bun care acoperă subiectul de scalare numit Icon Design: Bitmap vs Vector. De asemenea, examinați acest articol pe dimensiunea de proiectare a imaginilor de la Mezzoblue. Acesta acoperă câteva probleme inerente cu proiectarea icoanelor pentru dimensiuni mici.
Cu sistemele de operare care au acum pictograme care scal la dimensiuni mari (512 de pixeli până la 512 de pixeli este gigantic pentru o pictogramă), tentatia creste pentru a fi ilustrativa cu designul icoanelor tale. În timp ce un nivel de realism poate adăuga interes pentru un design icoanic, acesta nu trebuie să înlocuiască capacitatea sa de a funcționa pur și simplu și eficient.
Smashing Magazine are un rezumat al liniilor directoare ale Apple Human Interface privind designul de icoane. Secțiunea pe Realismul în Aqua face unele puncte bune despre limitările realismului în designul icoanelor și subliniază când simbolismul este necesar. Această secțiune dezbate chestiunile în conflict între realism și simplitate în designul icoanelor.
Încercați să nu supracomplicați modelele de pictograme. Aveți grijă să plasați prea multe elemente într-un design icoan sau să ilustrați prea mult o pictogramă. Sunt sigur că toată lumea este familiarizată cu simbolul comun pentru pictogramele RSS. Vedeți exemplul de mai jos de la Smashing Magazine. Aceste pictograme marchează ilustrațiile, menținând în același timp calitățile simbolice puternice ale pictogramei. Illustraționarea și îmbrăcarea icoanelor prea mult conduce la o recunoaștere mai mică, în special la dimensiuni reduse. Așadar, aveți grijă să puneți mult în proiectarea icoanelor.
Există momente în care interesul estetic al icoanei merită să-și piardă unele din impactul său iconic. este întotdeauna un apel de judecată, iar nevoile vor varia în funcție de fiecare proiect. Comparați unul dintre seturile de pictograme de mai jos cu un design simplu pentru RSS, cum ar fi cel din Psdtuts +. Există un act de echilibrare prin aducerea icoanelor în stilul designului site-ului dvs. Web. Doriți să adăugați interes și compliment designul, dar nu pierdeți impactul iconic al pictogramei.
Pictogramele de mai jos arată foarte bine. Cu toate acestea, este nevoie de o judecată pentru a stabili dacă pierderea unei recunoașteri rapide a simbolului merită designul adăugat în jurul simbolului. La o dimensiune mare funcționează foarte bine, deoarece funcționează similar cu ilustrațiile. Cu toate acestea, la dimensiuni mai mici, poate fi preferată o soluție mai puțin îmbrăcată.
Este important ca realismul pe care îl adăugați la desenele dvs. să funcționeze coerent. Dacă utilizați o sursă de lumină care vine dintr-o direcție, atunci lipiți-o. Sau riscați să pierdeți designul integrat al icoanelor dvs. De asemenea, luați în considerare sursa de lumină a designului pe care vor fi plasate icoanele dvs. Dacă sursa de lumină a pictogramelor este în contradicție cu site-ul web sau cu aplicația în care le folosiți, atunci designul va apărea amator.
În Ghidul utilizatorilor Windows Vista, există o secțiune privind iluminarea și umbrirea pictogramelor. Ghidul conține reguli specifice pentru Setul de Iconuri Vista. Acest lucru oferă standarde mai exigente pentru designerii icoanelor și asigură un sistem de pictograme unificat. Următoarea este o regulă specifică pentru a vedea un exemplu, "Utilizați umbre pentru a ridica obiecte vizual din fundal și pentru a face obiectele 3D să pară împământate, mai degrabă decât plutesc incomod în spațiu". În acest ghid există mai multe reguli.
Gama de perspective din cadrul setului dvs. de design icoane ar trebui să funcționeze împreună. Dacă aveți icoane privite de la dreapta înainte, atunci lipiți-vă de asta. Dacă plasați unul la un anumit unghi, asigurați-vă că toate pictogramele funcționează astfel. Imaginați-vă că o cameră este plasată dintr-un punct de vedere specific și căutați toate obiectele din aceeași perspectivă. Acest lucru ajută la menținerea consecvenței în design-ul icoanelor.
Un sistem de design pe scară largă, ceva asemănător unui sistem de operare software, poate avea nevoie de mai multă flexibilitate decât asta. Apple acoperă Icon Perspective în Ghidul Interfeței Umane. Ei au o utilizare mai flexibilă a perspectivei. "Diferitele perspective sunt realizate prin schimbarea poziției unei camere imaginare captuind pictograma." Imaginea de mai jos prezintă diferența de perspectivă între o pictogramă de aplicație (Top) și o pictogramă a Barei de instrumente (Fund).
Lumina și perspectiva contribuie cu siguranță la stilul unei icoane, deși există mulți alți factori care pot contribui și la stil. Dacă încercați să potriviți pictograma dvs. într-un design de site web în stil grunge, veți adăuga probabil textura stilului de design al pictogramei.
Seturile de pictograme au caracteristici unice care îi fac să iasă în evidență. În ghidul de pictograme Echo, setul este descris ca fiind "un set nou de pictograme propuse pentru includerea în Fedora. Proiectate cu o perspectivă dinamică, pictogramele Echo urmăresc să pară mai realiste, menținând în același timp un design curat și simplu prin utilizarea contrastului ridicat și a petelor de culori vibrante. " Un alt mod în care acest set se evidențiază este prin utilizarea consistentă a contururilor. Vedeți imaginea de mai jos pentru un exemplu.
Proiectarea icoanelor pentru site-uri web este o modalitate bună de a începe cu proiectarea icoanelor. Adesea există doar câteva icoane necesare pentru proiectarea unui site. Începeți simplu, cu un mic proiect de proiectare a site-ului web, în cazul în care aveți obligația de a proiecta doar o mână de icoane sau mai puțin. Aceasta este o modalitate bună de a câștiga experiență în proiectarea icoanelor.
Porniți procesul de proiectare a icoanelor cu ajutorul cercetării. Luați în considerare metaforele simbolice comune folosite pentru a descrie pictograma pe care vreți să o faceți. Faceți schița cât mai mult necesar pentru a bloca conceptul. Complimentați stilul design-ului icoanelor cu designul site-ului pe care îl veți folosi. Luați în considerare culoarea, perspectiva și aspectul grafic al site-ului.
Designul Hicks are o prezentare rapidă SlideShare pe tema Icon Design. O secțiune a prezentării acoperă procesul său de proiectare. Oferă câteva exemple vizuale deosebite. Mai jos este un exemplu al etapei de schițare.
Odată ce ați creat un set unic sau mic de pictograme pentru site-uri Web, vă recomandăm să creați pictograme pentru aplicații. Odată ce ați făcut acest lucru de câteva ori, puteți obține mâncărime pentru a crea un set profesional mare de icoane. Vânzarea de icoane poate fi un efort profitabil pentru un designer. Dacă creați un set unic și profesionist, îl puteți apoi vinde. Mai jos sunt două seturi profesionale de design de icoane de la designeri care servesc drept surse de inspirație excelente.
Acest set de pictograme are o combinație de profesionalism, o mare varietate de simboluri, realism cartoon și design distractiv. Când Jesse Bennett-Chamberlain din 31 a folosit aceste icoane pentru reproiectarea Expression Engine, am fost înăbușit. Este un design minunat al site-ului, iar icoanele se potrivesc foarte bine cu stilul.
"Chalkwork este un set unificat din punct de vedere vizual icoanelor fără drepturi de autor proiectate cu atenție. Construit pentru a acoperi unele dintre cele mai comune nevoi de iconițe ale designerilor web și software, întreaga familie Chalkwork oferă sute de metafore de calculator și de internet într-un stil consistent vizual la 3 dimensiuni diferite, în până la 6 formate de fișiere. - set de icoane de la Dave Shea.
Săriți cu capul înainte în proiectarea icoanelor. Puteți să începeți cu câteva proiecte aici pe Psdtuts + pentru a vă aduce picioarele ude. Doar în această săptămână, am publicat un tutorial de design de icoane de la Constantin, numit Crearea unui design Icon de Hat High Graduation Hat. Am publicat un tutorial al secțiunii PLUS de la Fabio cu privire la proiectarea icoanelor înainte de cel numit New Plus Tutorial - Creați un "Time Machine" ca Icon. Fabio a publicat, de asemenea, un tutorial cu ceva timp în urmă numit Handy Web 2.0 Icons în Photoshop.
Vaclav a publicat câteva tutoriale excelente aici pe design-ul icoanelor numite Ilustrarea unei pictograme Cone Trafic în Photoshop și Crearea unei Icoane Cool Yellow Clic. Dacă mergem înapoi, puteți verifica tutorialul de la Collis numit Efectuarea unui Photoshop Shield. Acestea sunt toate locuri excelente pentru a începe sau a practica designul icoanelor.
Fii entuziasmat atunci când următorul proiect de client solicită crearea de pictograme. Sau practici de a face icoane prin intermediul tutoriale aici. Odată ce ați stăpânit aceste tehnici, încercați să faceți un mic set de icoane. Sau du-te mare și de a crea un set complet pentru revânzare. Spuneți-ne despre resursele de pictograme suplimentare din comentariile de mai jos.
Dacă sunteți interesat să obțineți ajutor cu designul icoanei aplicației, Envato Studio are o colecție mare de designeri de pictograme pentru aplicații pe care ați dori să le explorați. De asemenea, puteți să aruncați o privire asupra icoanelor de pe Envato Market.
Accentsconagua