Share
Le icone sono parte inseparabile di un design GUI (interfacce utente grafiche). Stavo scaricando, acquistando e creando icone per anni, poi un giorno ho deciso di creare il mio set di icone utilizzabili. Qualcosa che aiuti gli altri progettisti della GUI a rendere il lavoro più veloce e migliore. Questo articolo spiega in dettaglio il processo di creazione e le fasi che stavo attraversando con questo progetto e può fungere da guida quando si decide di creare qualcosa di simile. Sono andato giù più di un percorso creativo prima di finalizzare questo carattere "GUI Design Icons".
Poiché questo articolo è un po 'più lungo, l'ho diviso in capitoli. È possibile utilizzare questi collegamenti per passare al capitolo desiderato.
Stavo letteralmente disegnando schizzi di interfacce grafiche utente per anni, e questa idea è stata per tutto il tempo nella mia testa. Ho pensato di creare un righello - stencil - con ogni icona frequentemente utilizzata nella progettazione della GUI?
Ammettiamolo: ho perso la possibilità di essere il primo. Qualcun altro l'aveva già fatto. Ho trovato un bel righello in acciaio (stencil) di DesignCommision (vedi foto), che puoi acquistare su uistencils.com.
L'ho subito ordinato. Dopo averlo visto dal vivo, ero ancora più determinato a crearne uno da solo. La mia idea era di farlo un po 'diversamente - con la plastica. Non c'è niente di sbagliato con l'acciaio inossidabile. È brillante, moderno, è bello. Ma non puoi vederlo, i bordi sono nitidi e distrugge le matite e graffia le dita (non è poi così male, ma lavorare con esso non è molto comodo).
All'inizio c'era una carta, un sacco di carta, matite, pennarelli e molto tempo. Nel frattempo (nel tempo di non-disegno) stavo esplorando varie GUI, cercando ciò che può tornare utile e ho finito con molte carte piene di disegni. Questi puoi anche vedere qui (clicca per ingrandire la foto). Una volta deciso che ne avevo abbastanza di schizzi, ho segnato tutte le icone che potrei provare a ricreare sul computer. Questo è dove sono saltato nella seconda fase.
Il tempo necessario per gli schizzi non era nulla in confronto al tempo trascorso in Adobe Illustrator. Come puoi vedere, le icone sono abbastanza semplici, ma devi preoccuparti della massima precisione, il meno possibile (senza punti inutili) e - la cosa più importante - coerenza nello stile.
Se dai un'occhiata più da vicino al righello di DesignCommision, questa è la più grande imperfezione: le icone non hanno uno stile unificato. La maggior parte delle icone è semplice, ma l'icona dell'utente ha una struttura molto dettagliata. La maggior parte delle icone ha dimensioni simili, ma il pulsante play è troppo grande (e largo). La maggior parte delle icone sono costituite da linee rette, ma le icone "i" e quelle del libro sono irragionevolmente arrotondate ... e così via.
Lascia che ti mostri il processo di creazione di due icone: l'icona del lucchetto e l'icona di caricamento dell'animazione. All'inizio ne ho creati due guide (abbastanza a caso) nel documento - e ho cercato di mantenere le dimensioni delle icone lungo queste guide. Non che ogni icona sia dalla prima guida al secondo, ma per mantenere approssimativamente la scala.
Il più veloce per creare icone è immaginare l'icona come un composto di forme base. È sempre più veloce eliminare metà cerchio anziché disegnare il semicerchio a mano (con lo strumento Penna). Mantenere il lavoro con lo strumento Penna al minimo ti aiuterà a creare forme precise in un breve lasso di tempo. Invece di usare lo strumento penna, prova a pensare alle forme base usate e agli strumenti Pathfinder per separarle a seconda delle necessità.
L'icona del lucchetto sbloccato è ancora più semplice (e più veloce) da creare.
Non pensare di poter rendere tutto perfetto al primo tentativo, proprio come le icone del lucchetto. In effetti ho stampato un sacco di carte per vedere le icone in formato più grande e su carta (ci crediate o no, la carta è ancora migliore per le regolazioni). Successivamente, ho aggiunto alcuni dettagli, corretto alcune aree e cancellato alcune parti. E poi applicato questi cambiamenti in Illustrator.
Le immagini qui sotto mostrano il mio processo. Dopo aver stampato le icone in una dimensione più grande, ho scelto il pennarello nello stesso colore (non chiedere perché grigio, mi piace) e ho aggiunto alcune parti in cui non ero soddisfatto. Anch'io
segnato altre imperfezioni con un pennarello rosso (come il cambio di dimensioni, il peso del tratto, ecc.). Per eliminazione, Ho usato il nastro di correzione bianco o solo un pezzo di adesivo bianco.
Come puoi vedere qui sotto, le icone più semplici sono solo linee di varie lunghezze e angoli, ma con lo stesso peso.
Ora torniamo alla creazione. Diamo un'occhiata a come creare un'altra icona, usata per caricare le animazioni.
La regolazione di questa icona è ancora più semplice perché è stata creata da due sole righe, tutto quello che devi fare è:
Uno dei principali vantaggi di queste icone avrebbe dovuto essere la possibilità di combinarli. Ad esempio per posizionare un piccolo segno più accanto all'icona utente per avere un'icona Aggiungi utente o una piccola croce sull'icona della cartella per creare un rimuovi cartella icona. E così via. Di seguito viene mostrato un esempio di una lente di ingrandimento, che è possibile combinare con un segno più e meno.
Il mio piano originale consisteva nell'aggiungere numeri, che potevano essere posizionati per esempio sull'icona del calendario o nell'icona della bolla dei commenti.
Ecco come appare in Illustrator: icon, in / over / accanto al quale ho inserito alcune piccole icone di esempio per testare l'aspetto.
Per evitare la confusione tra quale icona viene disegnata e che è appena stata copiata, ho cambiato il colore di quello copiato in un grigio più chiaro.
E ora per testare ...
... e stampa, aggiusta e modifica.
Citerò brevemente una funzione molto utile in Adobe Illustrator. Le tavole da disegno, che sono state introdotte in Illustrator CS4, ti consentono di avere più pagine in un unico documento. Puoi dire - niente di nuovo nei prodotti della concorrenza, ma considera la possibilità di diverse dimensioni delle pagine e posizioni diverse. È possibile aggiungere le pagine mentre si aggiungono le pagine nel proprio lavoro. E quindi aggiungevo e aggiungevo le tavole da disegno ...
... e stavo spostando le icone inutilizzate di lato, mentre trasferivo quelle finali nelle nuove tavole da disegno.
Mi ha aiutato molto, specialmente con la stampa e le correzioni. Senza tavole da disegno, dovrei usare i livelli o un documento grande (ma non puoi stampare facilmente solo una parte di questa grande tela).
Volevo rendere il righello davvero polivalente. Stavo pensando a tutti i modi possibili per renderlo ancora migliore. Ad esempio con l'aggiunta di linee di divisione. In Illustrator è molto semplice, basta disegnare una linea e quindi, aggiungere un effetto Zig Zag per creare una linea seghettata (a), una linea a zigzag (b), impostare correttamente le opzioni nella finestra Traccia per rendere le linee tratteggiate (c), o punteggiato (d).
Forse hai notato che durante la creazione dell'icona del lucchetto abbiamo lasciato il buco della serratura in bianco, quindi sembra il buco, ma non lo è. Puoi semplicemente rilevare questo cambiando il colore del livello sottostante.
Non importava prima, ma per il prodotto finale, abbiamo bisogno di icone in un solo colore, senza tratti ed effetti, e idealmente come un solo oggetto. Per raggiungere questo obiettivo, utilizzeremo due funzioni Espandi aspetto ed Espandi e la tavolozza Pathfinder. Ecco il processo:
Se passiamo decine di giorni dopo, entriamo nella fase in cui tutte le icone sono state finite e preparate in questo modo. Quindi ho creato un nuovo documento con le dimensioni del righello stencil e ho iniziato a posizionare queste icone. Come bonus, ho aggiunto alcuni pulsanti.
Poiché è un righello stencil che verrà ritagliato, le icone non possono avere galleggiante parti - perché non c'è modo di farlo. Come puoi vedere nella prossima immagine, se vuoi fare qualcosa come me, devi cancellare queste parti (parti incrociate) o unirti a queste parti con linee sottili (cerchiate).
Ecco in dettaglio queste "linee di congiunzione": vedi l'icona dell'antenna. È inoltre possibile notare che il riempimento nell'icona della batteria è già stato eliminato.
Il righello nel suo aspetto finale in Illustrator ha questo aspetto. Tutto ciò di cui avevo bisogno era solo per trovare qualcuno che lo fabbricasse.
Ho inviato molte e-mail per trovare la compagnia giusta. All'inizio sembrava che non ci sarebbe stato alcun problema nel farla produrre. Poi ho scoperto che c'era un problema e uno grosso. Le icone erano troppo piccole (a volte il laser taglia la parte sbagliata). L'intero sovrano era troppo spesso (a volte troppo spesso per inserirvi una matita), e il numero di tagli rendeva il prezzo del prodotto finale irrealistico.
Dopo il primo entusiasmo, ho avuto solo un campione, molti documenti stampati e una certa avversione a fare qualsiasi altra cosa con questo progetto. Quindi ho sospeso questo progetto, poiché c'erano molte altre cose divertenti da fare ...
Dopo alcuni mesi di abbandono, ho ricominciato a pensare al progetto. Il righello è sparito, che ne dici di qualcos'altro con queste icone? Che dire di un font, qualcosa di simile avvolgimenti, ma con lo stile? Il
l'entusiasmo era tornato e stavo lavorando di nuovo. Come vedrai tra poco, creare un font da icone preparate come queste è divertente.
Per il lavoro di font è stato necessario creare un altro documento (con una sola tavola da disegno), con dimensioni 1000 per 1000 pt.
Successivamente, ho iniziato a copiare le icone dal documento originale in livelli separati e ho ridimensionato queste icone in modo che corrispondessero alle dimensioni del documento (per riempire bene il documento). Poiché tutte le icone erano già senza tratti ed effetti, il ridimensionamento era una questione di un solo clic. Oltre a posizionare le icone piccole nel mezzo del documento, basta usare la palette Allinea. Seleziona Allinea alla tavola da disegno e fai clic su Allinea orizzontale Centro e Allinea verticale al centro per allineare tutto.
Ora vedevo le grandi icone una per una e le posizionavo nella giusta posizione di fronte a piccole icone (nel caso queste grandi icone possano essere combinate con quelle piccole). L'ho fatto a mano. Come puoi vedere nella prossima immagine, l'icona per i commenti è spostata verso il basso, mentre l'icona per il documento è spostata verso l'alto. L'ultima parte dell'immagine mostra l'icona del calendario con tutte le piccole icone mostrate per evitare che i contorni si sovrappongano.
L'icona del fuoco mostra che abbiamo un documento di 1000 per 1000 pt, ma in rari casi possiamo superare i limiti. Per l'icona del segnalibro (e alcune altre icone speciali), non è necessario preoccuparsi di tutte le icone piccole. Nel foro laterale possiamo posizionare solo un segno più, segno meno e freccia.
Esporta icone per FontLab
Una volta che tutte le icone sono state posizionate nel punto giusto, era giunto il momento di estrarle da Illustrator. Ovviamente in modo che possano essere utilizzati in software per la creazione di font (nel nostro caso FontLab, ma è lo stesso per ogni altro software).
Fare questo a mano per quasi 200 icone richiederebbe ore di lavoro - qualsiasi perché farlo quando puoi usare una sceneggiatura? Non fa parte di Illustrator, ma ho usato uno script. Che è disponibile per quelli che ordinano il font.
Lavorare con lo script è davvero facile. Caricalo, eseguilo e hai tutti i layer esportati come file EPS. E abbiamo finito con Illustrator.
Beh, creare un font in FontLab non è per un articolo, è un argomento per un grande libro. Ma creare un font "dingbats" dalle icone EPS preparate è facile. Come vedrai, qualsiasi altro software di creazione di font farebbe il lavoro, perché abbiamo solo bisogno di caricare i file EPS in singoli caratteri e impostare la larghezza.
All'inizio abbiamo un nuovo carattere vuoto.
Per creare un nuovo personaggio, fai doppio clic su una casella qualsiasi, quindi imposta la dimensione (larghezza) su 1000 (come abbiamo fatto in Illustrator).
Importa il file EPS desiderato e ... questo è tutto.
La procedura è leggermente diversa con le icone grandi. Vogliamo mostrarli dietro quelli piccoli, quindi abbiamo bisogno che non occupino spazio. Quindi impostiamo la loro larghezza a zero.
Un rapido test con la finestra di anteprima mostrerà se funziona correttamente. Nella finestra di anteprima ho iniziato con il carattere "k" (icona della cartella, che dovrebbe avere larghezza pari a zero). Ciò significa che il secondo carattere "V" (icona per ricaricare) inizia a essere visualizzato dall'inizio e quindi sopra l'icona precedente.
E questo è tutto. Dopo un'ora di clic il carattere è pronto, quindi l'unica cosa che rimane è impostare il nome ed esportarlo.
Le seguenti foto mostrano il test delle anteprime di Microsoft Word.
E ora abbiamo un font completo.
Grazie per aver letto la tua strada attraverso un lungo articolo. Spero che tu abbia imparato qualcosa di nuovo e di ispirazione oggi. Come puoi vedere dall'articolo, i miei piani originali erano piuttosto diversi, ma il font risultante si è rivelato ottimo. A volte inizi in una direzione creativa e finisci per percorrere un diverso percorso creativo.
Il font "GUI Design Icons" è disponibile per l'acquisto da myfonts.com.
Iscriviti al feed RSS di Vectortuts + per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.
Accentsconagua