Share
Traducerea caracteristicilor "iconice" ale unui obiect în ceva care are semnificație metaforic și instantaneu recunoscut nu este o sarcină ușoară - în special atunci când designul trebuie să fie la fel de eficient la 48x48 pixeli, la fel ca la 256x256!
O pictogramă memorabilă și funcțională este frumoasă, iconică, semnificativă și funcțională. Iată câteva sfaturi înțelepte despre cum să creați icoane remarcabile.
Unul dintre aspectele cele mai importante ale designului icoanelor este acela de a crea o pictogramă care să fie imediat recunoscută. Indiferent dacă este vorba să reprezinte o broască albastră sau un creion de creioane, ceea ce încearcă să prezinte trebuie să fie identificabil dintr-o privire sau scopul icoanei este învins. O icoană trebuie, desigur, să fie "iconică" a metaforei pe care o reprezintă.
Într-un tutorial de proiectare a icoanelor de la Smashing Magazine, designerii de pictograme de master Vu și Min Tran discută despre procesul lor din spatele graficului creionului ca parte a lor Bright! Set de pictograme.
Desenarea unei pictograme înseamnă a desena caracteristicile cele mai tipice ale unui obiect astfel încât să poată surprinde acțiunea pictogramei sau să reprezinte conceptul și nuanța.
După cum probabil știți, există în general trei tipuri de creioane pentru a selecta:
- Corpul în formă de prism cu un capăt strălucitor cu glazură.
- Corpul în formă de prism cu o garnitură fixată pe corpul creionului de un inel metalic strălucitor.
- Cilindru în formă de corp fără o radieră.
Alegem al doilea tip pentru designul icoanelor, deoarece are toate elementele necesare, ceea ce face mai ușor pentru spectator să recunoască imaginea.
Uneori este mai bine să alegeți forma mai complicată a unui obiect, deoarece există mai puține alte elemente care împărtășesc acele caracteristici unice, făcând obiectul specific pe care încercați să-l portretiza mai ușor de identificat. Există o mulțime de obiecte cilindrice cu vârfuri de vârf, în afară de creioane (pixuri, markeri, cuie) și la dimensiuni mai mici, acestea ar putea fi indiscutabile, dar numai un creion are un corp în formă de prism, cu o garnitură atașată de un inel metalic alb strălucitor. Ea devine "iconic".
Pentru creatorii de pictograme DryIcons, o valoare cheie în procesul lor de proiectare este de a păstra icoanele lor destul de simple și de bază în stil-înțelept, spre deosebire de obiectivul pentru un stil definitiv. Acest lucru face ca icoanele să devină mult mai versatile și mai ușor de utilizat într-o serie de proiecte vândute odată ca un pachet complet pentru dezvoltatorii de software. Dacă pictograma dvs. se uită acasă într-o gamă mai largă de setări, piața potențială devine mai mare.
În ceea ce privește tendințele, simțim că este foarte important să păstrăm lucrurile simple și de bază, astfel încât să poată servi scopul lor inițial: să se încadreze în proiect, așa cum ar părea că ar fi așa cum ar trebui să fie. Aceasta este singura tendință pe care o urmăm.
Un sfat deosebit de util atunci când proiectați mai multe pictograme pentru un pachet este de a asigura coerența între ele nu numai în stil, dar și în detalii, cum ar fi sursa de lumină. În timp ce, de obicei, un gând secundar, orice nepotrivire a unei pictograme din pachet ar putea afecta serios calitatea generală a icoanelor.
În această imagine de ansamblu a icoanelor Windows Vista, se remarcă modul în care sursa de lumină sa schimbat între sistemele de operare, dar este în concordanță cu toate pictogramele din fiecare set.
Umbrele în obiecte cu pictograme Vista indică o profunzime reală, realistă, așa cum există în orice obiect din lumea reală. Icoanele Vista nu au umbrele plane de jos inferior drept care sunt implicite pentru pictogramele Windows XP. Sursa de lumină este, de asemenea, complet diferită în iconițele Vista. Toate obiectele se află acum direct în sursa de lumină. De la Windows 95 la Windows XP, sursa de lumină de pe toate pictogramele a venit întotdeauna din stânga sus și obiectele sunt rotite în sens invers acelor de ceasornic, departe de sursa de lumină. Poziționarea și iluminarea icoanelor Vista vor fi complet opuse în comparație cu Windows XP și cu pictogramele de sistem Windows mai vechi.
Icoanele trebuie adesea folosite într-o gamă largă de dimensiuni, prin urmare este o bună ocazie de a profita la maxim de natura scalabilă a graficii vectoriale pentru a crea un design minunat care poate fi folosit în mai multe scopuri.
În plus, cu pachete software vectoriale, cum ar fi Adobe Illustrator, orice formă, gradient și accident vascular cerebral care alcătuiesc pictograma pot fi modificate și modificate în orice moment, spre deosebire de un design bazat pe pixeli care are nevoie de redrawie atunci când se fac modificări.
Acest excelent tutorial de proiectare a icoanelor de aici, la VECTORUTS, trece prin procesul de creare a unei grafice uimitoare pe baza formelor si gradientilor de baza ale Illustratorului.
Dimpotrivă, grafica vectorială nu este mereu cea mai bună abordare pentru designerii icoanelor. Cu multe pictograme care necesită grafice vectoriale foarte mici, adesea nu reușesc să reproducă o randare clară atunci când sunt rasterizate. În aceste cazuri, redactarea completă a pictogramei la un număr de dimensiuni specificate oferă cel mai bun rezultat.
Designeri de interfețe web Designeri de incendiu evidențiază această abordare în discuția lor despre bitmap vs. vector:
Când luați o imagine vectorială, dimensionată inițial la 24x24 și scalați-o până la 16x16, proporțiile relative nu se potrivesc. Nu există nicio modalitate în care puteți distribui în mod egal 24 de pixeli de informație în 16 pixeli de spațiu (amintiți-vă că nu există nici un pixel de jumătate). Deci imaginea se estompează.
De asemenea, nu aveți posibilitatea de a scala în mod uniform 24 de pixeli de informații în sus în 32 de pixeli de spațiu. Din nou, imaginea se estompează.Mai mult, dacă luați aceeași imagine vectorală, dimensiunea inițială la 24x24 și o scară până la 48x48, acum dublați proporțiile. Nu mai aveți linii clare de 1 pixel. Aveți linii de 2 pixeli. Scalați-o mai mare (să zicem la 96x96) și aceste linii devin și mai groase.
Similar cu numărul unu, unde a fost menționat faptul că este esențial să se captureze caracteristicile "iconice" ale unui obiect, este de asemenea important să ne amintim că pot exista diferențe culturale uriașe în recunoașterea obiectelor de zi cu zi.
Turbomilk discuta acest lucru în roundup lor util de 10 greseli în Design Icon cu exemplul de o căsuță poștală. Ce ar putea fi forma și culoarea recunoscută a unei cutii poștale dintr-o țară, ar putea fi total greșită pentru alta.
Este întotdeauna necesar să țineți cont de condițiile în care va fi folosită pictograma dvs. Un aspect important aici este caracteristica națională. Tradițiile culturale, împrejurimile și gesturile pot să difere radical de la o țară la alta.
Utilizați imaginile universale pe care oamenii le vor recunoaște cu ușurință. Evitați focalizarea pe un aspect secundar al unui element. De exemplu, pentru o pictogramă de poștă electronică, o căsuță poștală rurală ar fi mai puțin recunoscută decât o ștampilă.
Notă: acordați o atenție deosebită acestei reguli atunci când proiectați icoane bazate pe semne de avertizare și de circulație, care diferă pe baza unei țări.
Dacă o pictogramă este creată ca o imagine neclară prezentată într-o formă circulară, este probabil să fie trecută cu vederea. Folosind culori puternice și o formă interesantă care întărește obiectul va ajuta pictograma să iasă în evidență. Amintiți-vă că icoanele rareori vor fi afișate pe un fundal monocolor - în majoritatea cazurilor se vor întâmpla multe în spatele lor, așa că va trebui să iasă în evidență. Luați în considerare, de asemenea, utilizarea luciu și umbrire pentru a crea un efect final mai dinamic.
Jasper Hauser, designerul din spatele icoanei Camino, se referă la acest lucru într-un interviu care discută despre "Ce face designul bun icoanelor?"
Practic, există două aspecte care sunt baza unei pictograme bune: 1) forma și 2) utilizarea culorii. Dacă te uiți la pictograma Appzapper, vei vedea că 1) are o formă originală și 2) folosește culori neregulate și o combinație de culori neregulate. Făcând un cerc albastru nu va ieși afară.
A fost deja menționat faptul că designerii icoanelor trebuie să găzduiască mici scări în creațiile lor de icoane. Cu toate acestea, cu dezvoltarea înainte de designeri de tehnologie ar trebui să fie, de asemenea, luând în considerare utilizarea de icoane la o scară mult mai mare decât standardul. Un exemplu de acest lucru are loc în Windows Vista, unde pictogramele pot fi scalate până la 256 pixeli înălțime!
Într-un interviu acordat lui Brian Brasher, artist de la Firewheel Design, el a fost întrebat:
John Marstall: Care este părerea dvs. privind trecerea la icoane mai mari și independența rezoluției?
Brian: Icoanele mai mari înseamnă mai multe detalii, ceea ce înseamnă o experiență GUI mai bogată, precum și eliminarea multor restricții pe care un creator de pictograme l-au pus pe el pentru a face o imagine lizibilă. Din nefericire, aruncarea acestor restricții înseamnă că o mulțime de icoane care arată destul de spirited la dimensiunea completă vor fi orori plini de noroi, cu cruzime la 32x32 și mai jos. O sabie cu două tăișuri. Vor fi pierderi.
Schițarea este un proces comun în orice aspect al designului și continuă în proiectarea icoanelor. Fleshing o serie de idei pe hârtie într-adevăr ajută la dezvoltarea unui produs concis care se potrivește cu cerințele de scopul său. Deoarece un design icoanal trebuie să se conformeze unui set definit de proporții și dimensiuni, fiind încă "iconic" și ușor de recunoscut, planificarea înainte este incredibil de importantă.
Michael Matas, un designer grafic care a creat icoane pentru platforma Mac OS X, împărtășește propriile practici de lucru:
Întotdeauna încep pe bordul meu alb. Încerc să vină cu metafore clare și clare pentru icoană. Am schițat idei diferite și, de obicei, sfârșesc să acopere întreaga tablă albă. Când voi veni cu o metaforă bună, încep să schițez aspectul icoanei și din ce unghi o voi trage. Mă duc în căutarea de imagini Google și căutarea de imagini a lui Watson și încerc să găsesc imagini bune pentru obiectul pe care îl desenez. Descarc tot ce mi se pare decent si le deschid totul in Photoshop. Creez un nou fișier Photoshop pentru a desena pictograma și pentru a înconjura acea fereastră cu imaginile pe care le-am descărcat de pe Web. Folosesc imaginile Web pentru a mă ajuta să-mi dau o idee despre aspectul texturii și al formei. Dar dacă pot, întotdeauna încerc să mă uit la obiecte reale pentru a vă inspira.
Misiunea unei pictograme este reprezentarea unei acțiuni sau a unei idei sub forma unui simbol grafic. Prin urmare, metaforele joacă un rol crucial în traducerea acelei acțiuni sau idei instantaneu către utilizator. La lansarea unui set de modele de pictograme proaspete pentru Macinstruct, echipa a conceput o serie de metafore pentru a reprezenta dificultatea tutorialelor lor online:
Poate că cele mai dificile icoane pe care le-am decis au fost manualele noastre de instruire. Aveam nevoie de o modalitate de a clasifica dificultatea tutorialelor noastre și am dorit o modalitate foarte eficientă de a arăta acest lucru. După câteva zile de brainstorming, am venit cu următoarele idei:
- Termometre: Tutorialele ușoare sunt reci, tutorialele medii sunt medii și tutorialele grele sunt fierbinți.
- Lumini de circulație: verde pentru portocaliu ușor, portocaliu pentru mediu și roșu pentru greu.
- Curele de karate: Curele albe, portocalii și negre, niveluri de calificare a karate.
- Puzzle-uri: Un puzzle cu o bucată pe latura. Piesele mai mici sunt mai grele.
- Teme de aviație: Ochelari de protecție pentru casca ușoară, veche și ochelari de protecție pentru medii, și cască pilot pentru luptător și mască de aer pentru greu.
- Imagini de inginerie: un manual și o placă de circuite, o placă de circuite și unele unelte și un osciloscop.
În cele din urmă, am stabilit toate aceste idei pentru unul voluntar al propriului nostru Ric Getter. Toată lumea a fost de acord că utilizarea protectorilor de buzunar pentru a indica dificultate a fost o idee grozavă!
Accentsconagua