Share
Icoanele sunt parte inseparabilă a unui design GUI (interfețe grafice de utilizator). Am fost descărcarea, cumpărarea și crearea de pictograme de-a lungul vremurilor, apoi într-o zi am decis să-mi fac propriul set de pictograme utilizabile. Ceva pentru a ajuta alți designeri GUI să facă munca mai rapidă și mai bună. Acest articol explică în detaliu procesul de creare și etapele pe care le parcurg cu acest proiect și poate acționa ca îndrumare atunci când decideți să faceți ceva similar. Am coborât mai mult de o cale creativă înainte de a finaliza acest font "GUI Design Icons".
Din moment ce acest articol este puțin mai lung, l-am împărțit în capitole. Puteți utiliza aceste linkuri pentru a trece la capitolul dorit.
Am desenat schițe de interfețe grafice de utilizator literalmente de-a lungul vremii, iar această idee a fost tot timpul în capul meu. M-am gândit să fac un conducător - șablon - cu fiecare icoană frecvent necesară în proiectarea GUI?
Hai să ne confruntăm cu asta - am pierdut șansa de a fi primul. Cineva a făcut deja asta. Am gasit un rigid inox (stencil) de la DesignCommision (vezi fotografia), pe care il puteti cumpara la uistencils.com.
Am comandat-o imediat. După ce am văzut-o în direct, eram și mai hotărâtă să fac una singură. Ideea mea era să execut acest lucru un pic diferit - cu plastic. Nu este nimic în neregulă cu oțelul inoxidabil. Este strălucitor, modern, e frumos. Dar nu puteți vedea totuși, marginile sunt ascuțite și distrug creionul și vă răstoarne degetele (nu este așa de rău, dar lucrul cu acesta nu este foarte confortabil).
La început a fost o hârtie, o grămadă de hârtie, creioane, sfaturi de pâslă și o mulțime de timp. Între timp (în perioada de desenare), am explorat diverse GUI-uri, căutând ce poate fi util și încheiată cu multe lucrări pline de desene. Acestea se pot vedea și aici (faceți clic pentru o fotografie mai mare). Odată ce am decis că am avut destulă schiță, am marcat toate pictogramele pe care aș putea încerca să le recreez pe computer. Aici am sărit în faza a doua.
Timpul necesar pentru schițe nu era nimic în comparație cu timpul petrecut în Adobe Illustrator. După cum puteți vedea, icoanele sunt destul de simple, dar trebuie să aveți grijă de acuratețea maximă, cât mai puține puncte posibil (fără puncte inutile) și - cel mai important lucru - coerența stilului.
Dacă priviți mai îndeaproape conducătorul de la DesignCommision, aceasta este cea mai mare imperfecțiune - icoanele nu au un stil unificat. Cele mai multe dintre icoane sunt simple, dar pictograma utilizatorului are o schiță foarte detaliată. Majoritatea icoanelor au o dimensiune similară, dar butonul de redare este prea mare (și lat). Cele mai multe dintre icoane sunt făcute din linii drepte, dar icoanele "i" și cărțile sunt rotunjite nerezonabil ... și așa mai departe.
Permiteți-mi să vă arăt procesul de creare a două pictograme: pictograma de blocare și pictograma de încărcare a animației. La început am creat două ghiduri (destul de întâmplător) în document - și am încercat să păstrez dimensiunile icoanelor de-a lungul acestor ghiduri. Nu că fiecare icoană este de la primul ghid la cel de-al doilea, ci să păstreze aproximativ aceeași scală.
Cea mai rapidă generare a icoanelor este de a imagina pictograma ca un compus de forme de bază. Este întotdeauna mai rapid să ștergeți o jumătate dintr-un cerc decât să desenați jumătatea cercului manual (cu instrumentul Pen). Menținerea lucrului cu Instrumentul Pen la un nivel minim vă va ajuta să creați forme precise într-o perioadă scurtă de timp. În loc să utilizați instrumentul Pen, încercați să gândiți formele de bază folosite și instrumentele Pathfinder pentru a le distruge după cum este necesar.
Pictograma de blocare deblocată este chiar mai simplă (și mai rapidă) de creat.
Nu credeți că puteți face totul perfect la prima încercare - la fel ca icoanele lacătului. De fapt, am tipărit o mulțime de lucrări pentru a vedea icoanele cu o dimensiune mai mare și pe hârtie (credeți sau nu, hârtia este mai bună pentru ajustări). După aceasta, am adăugat câteva detalii, am ajustat unele zone și am șters câteva părți. Apoi au aplicat aceste modificări în Illustrator.
Imaginile de mai jos arată procesul meu. După ce am imprimat pictogramele într-o dimensiune mai mare, am ales caracterele în aceeași culoare (nu întreba de ce gri, îmi place foarte mult) și am adăugat câteva părți în care nu eram mulțumit. Am și eu
marcate alte imperfecțiuni cu un marker roșu (cum ar fi schimbarea mărimii, greutății accidentului etc.). Pentru ştergerea, Am folosit banda de corecție albă sau doar o etichetă albă.
După cum puteți vedea mai jos, simbolurile mai simple sunt doar linii în diferite lungimi și unghiuri, dar cu aceeași greutate.
Acum înapoi la creație. Să ne uităm la crearea unei alte pictograme - folosită pentru încărcarea animațiilor.
Ajustarea acestei pictograme este chiar mai simplă, deoarece este creată din două linii, tot ce trebuie să faceți este:
Unul dintre principalele avantaje ale acestor icoane ar fi trebuit să fie posibilitatea de a le combina. De exemplu, pentru a plasa un mic semn plus lângă pictograma utilizatorului pentru a avea o pictogramă de utilizator adăugată sau o cruce mică peste pictograma dosarului pentru a crea o eliminați dosarul icon. Si asa mai departe. Mai jos este prezentat un exemplu de lupă, pe care o puteți combina cu semnul plus și minus.
Planul meu inițial era de a adăuga numere, care ar putea fi plasate, de exemplu, pe pictograma calendar sau în pictograma bule de comentarii.
Iată cum arată în Illustrator - pictograma, în / peste / de lângă care am plasat câteva mici pictograme pentru a testa aspectul.
Pentru a evita confuzia dintre pictograma care este trasată și care este doar copiată, am schimbat culoarea copiatului într-o culoare mai deschisă.
Și acum pentru testare ...
... și tipărirea, ajustarea și schimbarea.
Voi menționa pe scurt o funcție foarte utilă în Adobe Illustrator. Artboard-urile, care au fost introduse în Illustrator CS4 vă permit să aveți mai multe pagini într-un singur document. Puteți spune - nimic nou în produse competitive, dar luați în considerare posibilitatea unor dimensiuni diferite ale paginilor și pozițiilor diferite. Puteți adăuga paginile, pe măsură ce adăugați paginile în lucrarea dvs. Și așa adăugam și adăugam tablourile de artă ...
... și am mișcat icoanele nefolosite în lateral, în timp ce mișc ultimele în noile tablouri de bord.
M-am ajutat foarte mult, mai ales cu imprimarea și corecțiile. Fără plăci de artă, aș fi nevoit să folosesc straturi sau un document mare (dar nu puteți tipări cu ușurință doar o parte din această pânză mare).
Am vrut să fac conducătorul cu adevărat multifuncțional. Mă gândeam la toate posibilitățile cum să o fac și mai bine. De exemplu, adăugând linii de divizare. În Illustrator este foarte simplu, trageți doar o linie și apoi adăugați un efect Zig Zag pentru a face o linie zgâlțită (a), linia de zig-zag (b), setați corect opțiunile din fereastra Stroke pentru a face liniile întrerupte (c) sau punctat (d).
Poate că ați observat că, în timpul creării icoanei de blocare, am lăsat gaura în alb, așa că arată ca gaura, dar nu este. Puteți detecta pur și simplu acest lucru schimbând culoarea stratului de bază.
Nu a mai avut importanță până acum, dar pentru produsul final avem nevoie de icoane într-o singură culoare, fără lovituri și efect, și în mod ideal ca un singur obiect. Pentru a realiza acest lucru, vom folosi două funcții Extindeți aspectul și extindeți și paleta Pathfinder. Iată procesul:
Dacă ne mișcăm zeci de zile mai târziu, intrăm în faza în care aveam toate icoanele terminate și pregătite în acest fel. Așadar, am creat un nou document în dimensiunea șeful de șablon și am început să introduc aceste icoane. Ca bonus, am adăugat câteva butoane.
Deoarece este un conducător de șablon care va fi tăiat, icoanele nu pot avea plutitor părți - pentru că nu există nici o modalitate de a face acest lucru. După cum puteți vedea în următoarea imagine, dacă doriți să faceți ceva ca mine, trebuie să ștergeți aceste părți (părți încrucișate) sau să vă alăturați acestor părți cu linii subțiri (încovoiate).
Iată aceste "linii de îmbinare" în detaliu - consultați pictograma antenei. De asemenea, puteți remarca faptul că umplerea pictogramei bateriei este deja ștearsă.
Conducătorul în aspectul final al lui Illustrator arată astfel. Tot ce aveam nevoie era doar să găsesc pe cineva care să-l fabrice.
Am trimis multe e-mailuri pentru a găsi compania potrivită. La început, a apărut că nu ar exista nici o problemă în ceea ce privește fabricarea ei. Apoi am aflat că a existat o problemă și una mare. Pictogramele erau prea mici (uneori laserul taie partea greșită). Întregul conducător a fost prea gros (uneori prea gros pentru a pune un creion în el), iar numărul de tăieturi a făcut ca prețul produsului final să fie nerealist.
După entuziasmul timpuriu, am avut doar o probă, multe lucrări tipărite și o aversitate de a face orice altceva cu acest proiect. Așa că am pus acest proiect în așteptare, deoarece au existat multe lucruri mai plăcute de făcut ...
După câteva luni de abandon, m-am gândit din nou la proiect. Domnitorul a dispărut, ce zici de altceva cu aceste icoane? Ce zici de un font, ceva de genul înfăşurările, dar cu stilul?
entuziasmul sa întors, iar eu lucram din nou. După cum veți vedea într-un moment, crearea unui font de la pictogramele pregătite ca acestea este distractiv.
Pentru lucrarea de scriere a fontului a fost necesar să se creeze un alt document (cu o singură placă de artă), de dimensiuni 1000 la 1000 pt.
După aceea, am început să copiez pictogramele din documentul original în straturi separate și am redimensionat aceste pictograme pentru a se potrivi dimensiunii documentului (pentru a umple frumos documentul). Deoarece toate pictogramele erau deja fără lovituri și efecte, redimensionarea era o chestiune de doar un singur clic. Pe lângă așezarea icoanelor mici în mijlocul documentului, trebuie doar să utilizați paleta Aliniere. Selectați Aliniere la Artboard și faceți clic pe Centrul de aliniere orizontală și Centrul de aliniere verticală pentru a ghida totul.
Acum m-am îndreptat să arăt una câte una marile icoane și să le pun în locul potrivit în fața icoanelor mici (în cazul în care aceste icoane mari pot fi combinate cu cele mici). Am făcut asta manual. După cum puteți vedea în imaginea următoare, pictograma pentru comentarii este mutată în partea de jos, în timp ce pictograma pentru document este mutată în partea de sus. În ultima parte a imaginii se afișează pictograma calendarului cu toate pictogramele mici afișate pentru a împiedica suprapunerea contururilor.
Pictograma focului arată că avem un document cu dimensiunea de 1000 de puncte, dar în cazuri rare putem depăși limitele. Pentru pictograma marcaj (și unele alte pictograme speciale), nu trebuie să ne pese de toate pictogramele mici. În gaura laterală putem plasa doar un semn plus, semn minus și săgeată.
Exportați pictograme pentru FontLab
Odată ce toate icoanele au fost plasate în locul potrivit, a venit timpul să le scoatem din Illustrator. Desigur, într-un mod care poate fi folosit în software-ul pentru crearea fonturilor (în cazul nostru FontLab, dar este același pentru orice alt software).
Făcând acest lucru manual, pentru aproape 200 de icoane, ar dura ore de lucru - de ce să faceți asta când puteți folosi un scenariu? Nu face parte din Illustrator, dar am folosit un scenariu. Ceea ce este disponibil pentru cei care comandă fontul.
Lucrul cu script-ul este foarte ușor. Încărcați-l, executați-l și aveți toate straturile exportate ca fișiere EPS. Și am terminat cu Illustrator.
Crearea unui font în FontLab nu este pentru un articol, este un subiect pentru o carte mare. Dar crearea unui font "dingbats" din icoanele EPS pregătite este ușor. După cum veți vedea, orice alt software de creare a fonturilor ar face acest lucru, deoarece trebuie doar să încărcați fișierele EPS în caractere individuale și să setați lățimea.
La început avem un font nou, gol.
Pentru a crea un caracter nou, faceți dublu-clic în orice casetă, apoi setați dimensiunea (latime) la 1000 (la fel ca în Illustrator).
Importați fișierul EPS dorit și ... asta este.
Procedura este puțin diferită de pictogramele mari. Vrem să le arătăm în spatele celor mici, de aceea avem nevoie de ei pentru a nu ocupa spațiu. De aceea am stabilit lățimea lor la zero.
Un test rapid cu fereastra de previzualizare va arăta dacă funcționează corect. În fereastra de previzualizare am început cu caracterul "k" (pictograma dosarului, care ar trebui să aibă o lățime zero). Aceasta înseamnă că al doilea caracter "V" (pictograma pentru reîncărcare) începe să fie afișat de la început și, prin urmare, deasupra pictogramei anterioare.
Și asta e tot. După o oră de clic pe font este gata, așa că singurul lucru rămas este setarea nume și exportul.
Următoarele fotografii arată testarea previzualizărilor din Microsoft Word.
Și acum avem un font complet.
Vă mulțumim că ați citit un astfel de articol lung. Sper că ați învățat astăzi ceva nou și inspirat. După cum puteți vedea din articol, planurile mele originale erau destul de diferite, dar fontul rezultant sa dovedit excelent. Uneori începeți într-o singură direcție creativă și ajungeți să călătoriți într-o altă cale creativă.
Fontul "GUI Design Icons" este disponibil pentru achiziționare de la myfonts.com.
Abonați-vă la Vectortuts + RSS Feed pentru a rămâne la curent cu cele mai recente tutoriale vectoriale și articole.
Accentsconagua