Share
Questo articolo è dedicato a un argomento che mi sta a cuore ma allo stesso tempo mi ha dato forti mal di testa nei primi giorni del mio processo di progettazione.
Se non l'hai già indovinato dal titolo, beh, è qualcosa di profondamente correlato al design delle icone, più precisamente alle icone delle linee e ai due diversi metodi per produrle: offset e tratti. Quindi, sia che tu stia creando il tuo o modificando un pacchetto di icone da Envato Market, questo articolo ti aiuterà.
Detto questo, allacciate le ciglia e andiamo oltre i principali pro e contro dell'usare l'uno sull'altro.
Beh, questa è davvero una bella domanda, specialmente se stai iniziando come designer di icone, dato che ad un certo punto mi ricordo di essermi posto la stessa identica domanda.
Per coloro che già conoscono la risposta, beh, tieni duro con noi, dato che ci vorranno solo un paio di secondi per rendere tutti gli altri alla velocità.
Le icone di linea sono icone che delimitano le diverse sezioni del blocco di una composizione, utilizzando linee o profili più sottili o più spessi.
Esistono due tipi principali di icone di linea, che sono in realtà piuttosto simili, la differenza principale è l'uso o piuttosto la mancanza di forme di riempimento colorate.
Se decidi di andare completamente nudi e utilizzare solo le linee, o aggiungere dettagli riempiendo lo spazio vuoto tra quelle linee, dipende da te.
A questo punto, le cose potrebbero non sembrare così complicate, almeno in superficie, ma non appena si procede nel processo di creazione delle icone reali, le cose potrebbero iniziare a diventare un po 'confuse. Questo è principalmente dovuto al fatto che ci sono un sacco di voci che parlano di diversi metodi di creazione delle icone reali, ma non ce ne sono molte che fanno un confronto diretto tra i due processi.
Così ho pensato di poter intervenire e fare questo piccolo pezzo scritto per rendere giustizia ad entrambi i metodi.
Ok, ora sappiamo quali sono le icone delle linee, ma come possiamo realizzarle?
Come accennato nell'introduzione, ci sono due modi fondamentali per creare queste icone. Il primo utilizza i percorsi offset, che richiede di creare una forma base e quindi aggiungere un offset, trasformandolo in un elemento lineare eliminando la forma più piccola da quella più grande.
Il secondo si basa sull'uso delle forme base di Illustrator combinate con il Strumento penna (P) per creare percorsi che utilizzano solo tratti più sottili o più spessi, quindi nessun riempimento.
Vado a esaminare ciascuno di essi nei minuti seguenti e cerco di versare più luce possibile su entrambi, in modo che alla fine tu possa decidere da solo quale ti si addice meglio.
Prima di tutto, cosa significa la parola "offset"?
Bene, se usato come sostantivo, devo dire che non ho trovato alcuna definizione valida là fuori che si avvicinasse al suo uso nel design. Dall'altro lato, quando viene usato come aggettivo, le cose cominciano a essere un po 'più sensate dal "posto lontano da una linea centrale; la spiegazione "fuori centro" lo avvicina al modo in cui Illustrator lo utilizza.
Ora, ad essere onesti, non posso dire che il manuale ufficiale di Adobe Illustrator faccia un ottimo lavoro nello spiegare le cose, dal momento che lo strumento è elencato sotto un titolo un po 'fuorviante "Offset oggetti duplicati", che è un po' errato.
Questo perché gli oggetti risultanti non sono in realtà duplicati, poiché un duplicato ha le stesse caratteristiche, dimensioni, colore e forma della controparte originale. Penso che la parola che dovrebbero usare sia "copia", dal momento che una copia può essere "simile o identica" all'originale, che è in realtà ciò che l'offset di Illustrator fa.
Credo davvero che avrebbero potuto fare un lavoro migliore se l'avessero appena chiamato qualcosa di semplice come "The Offset Path Tool" e descritto le sue funzioni usando un paio di sottotitoli e sezioni differenti.
Rendono le cose un po 'più chiare una volta che inizi a leggere il corpo reale del testo:
"È possibile creare una replica di un oggetto, partendo dall'oggetto selezionato di una distanza specificata, utilizzando il comando Offset Path o l'effetto Offset Path. La compensazione di oggetti è utile quando si desidera creare forme concentriche o realizzare molte repliche di un oggetto con distanze regolari tra ciascuna replica. "
Ho trovato la definizione ancora un po 'vaga, quindi ho deciso di provare a spiegare il concetto osservando attentamente il processo effettivo seguito da Illustrator per crearlo.
Quindi, un percorso di offset è fondamentalmente una copia di un oggetto selezionato che è stato creato spingendo il suo percorso verso l'esterno della forma originale, dando così una versione leggermente più grande di quell'oggetto che è identico nella forma e nel colore ma non nella dimensione.
Ora, non so come creare più forme concentriche, ma questo strumento può essere perfetto per creare icone di linea.
Sì, ci sono un paio di trucchi di cui devi essere a conoscenza quando lo usi per questo scopo, ma ne parlerò nei seguenti momenti.
Bene, il processo dipende dal tipo di icona che stai per creare. Se ricordi bene, nel primo capitolo ho parlato dei due tipi di icone linea attualmente utilizzate dai designer: linee pure nude o icone di linea con forme di riempimento.
Poiché lo strumento Offset Path crea una copia della forma originale, ciò implica che il processo di creazione delle linee si concentrerà sull'utilizzo di due oggetti, identici in termini di forma ma di dimensioni diverse.
Indipendentemente dal tipo di icone di linea che decidi di utilizzare, il processo di creazione dell'offset effettivo è identico. Per prima cosa, crei la tua forma originale, e poi con essa selezionata, vai Oggetto> Percorso> Percorso offset dove sarete accolti da una piccola finestra pop-up con un sacco di opzioni.
Il primo è Compensare che, come già sai, controlla la distanza con cui Illustrator creerà e posizionerà il percorso della copia.
La seconda opzione è Si unisce, che controlla l'aspetto generale dei join finali di una forma, fornendo le seguenti tre opzioni:
A seconda dello stile visivo che stai cercando, puoi scegliere l'uno sull'altro. Una cosa che dovresti prendere in considerazione è che questi Si unisce funziona solo su forme con giunzioni a punta e non con angoli arrotondati.
Ad esempio, se hai un quadrato e vuoi creare un offset e impostarne gli angoli Il giro, puoi farlo facilmente. D'altra parte, se hai un rettangolo arrotondato, l'unico tipo di Compensare quello che otterrai è Il giro non importa cosa tu abbia impostato Si unisce opzione a.
Questo non dovrebbe essere un problema dal momento che non vedrei nessuno desideroso di creare una forma d'angolo arrotondata con qualche strano contorno ad angolo.
La terza e ultima opzione è Limite di Mitra. Ho provato a cercare una presentazione Adobe ufficiale dell'opzione, ma non sono riuscita a trovarne una diretta. Invece, ho trovato una spiegazione molto bella del Ictus'S Limite angolo limite, che immagino funzioni allo stesso modo di Compensarequello è:
"Il limite di mitra controlla quando il programma passa da una giunzione a squadra (appuntita) a una unione smussata (squadrata). Il limite di mitra predefinito è 10, il che significa che quando la lunghezza del punto raggiunge dieci volte il peso della corsa, il programma passa da un raccordo a mitra a un angolo smussato. Un limite di mitra di 1 risulta in un'unione smussata. "
Se verifichi questo, potresti trovare quello predefinito Limite di Mitra per il Compensare è 4 (non 10) ma a parte questo, sono praticamente identici.
Ok, quindi probabilmente siamo diventati un po 'troppo tecnici sull'argomento, ma volevo spiegare le cose nel modo più completo possibile.
A questo punto sappiamo come creare l'offset, ma come lo usiamo per creare l'icona della linea effettiva? Per prima cosa ti mostrerò il processo per la linea nuda.
Per quelli che stanno chiedendo perché li chiamo "icone della linea nuda", diciamo che ho trovato l'espressione più semplice da capire per qualcuno che è nuovo al gioco. Detto questo, indipendentemente dal tipo di icona che scegli, che sia nuda o piena, sono entrambe icone di linea.
Ora, poiché di solito trovo che gli esempi siano più espliciti del puro testo, ti guiderò attraverso il processo di creazione di una piccola icona di progetto per animali da compagnia.
Poiché avevo bisogno di qualcosa di base, che potesse facilmente spiegare il concetto, ho deciso di creare una piccola icona di documento, che fosse veloce e facile da creare.
Quando si creano le icone, ci sono un paio di cose su cui il progettista deve decidere. La prima decisione è solitamente quella di scegliere la dimensione base per l'icona. Questo passaggio è molto importante dal momento che vorrai iniziare dalla dimensione più piccola e creare versioni più grandi da esso, che, a seconda delle esigenze del tuo progetto, potrebbero essere 32 x 32 px, 64 x 64 px, 96 x 96 px, eccetera.
Consiglio rapido:Se ti stai chiedendo perché dovresti iniziare da una dimensione più piccola e arrivare a qualcosa di più grande, beh, è piuttosto semplice: quando crei icone perfette con pixel che hanno valori di numeri dispari (per esempio 3) e scegli una dimensione di base relativamente più grande (64 x 64 px) ma poi decidi che vuoi anche aggiungerne uno più piccolo (32 x 32 px) allora potresti notare che le cose iniziano a rompersi. Questo perché un numero dispari diviso a metà ti darà un valore decimale, che non può essere digitato correttamente sul Pixel Grid.
Puoi leggere di più sull'argomento esaminando alcuni dei miei altri tutorial:
Nel nostro caso, diciamo che vogliamo andare con una base relativamente ampia di 96 x 96 px.
Una volta che abbiamo deciso le nostre dimensioni, dobbiamo iniziare a pensare al peso delle nostre linee. Questo passaggio è altrettanto importante poiché dovremo creare la forma principale, assicurandoci di lasciare uno spazio tra esso e i lati del nostro 96 x 96 px griglia, poiché è qui che verranno posizionate le linee.
Tale spazio rappresenterà lo spessore effettivo delle nostre linee, poiché applicheremo un percorso di offset alla forma originale e quindi creeremo l'icona di linea ritagliando la forma più piccola da quella più grande utilizzando esploratore'S Fronte meno opzione.
Per questo esempio, andremo con uno spessore di 4 px,il che significa che la nostra forma principale avrà una lacuna 4 px tra i lati superiore e inferiore della nostra griglia.
Se ti stai chiedendo perché siamo interessati solo ai lati superiore e inferiore, beh, questo è dovuto al fatto che le icone dei documenti sono generalmente più alte ma leggermente più strette in termini di larghezza. Se questo fosse un oggetto diverso, potremmo aver bisogno di considerare entrambi i lati sinistro e destro poiché vorrai che le cose siano coerenti.
Ora, iniziamo a costruire l'icona disegnando a 64 x 88 px rettangolo arrotondato con a Raggio angolare di 4 px, che coloreremo usando una tonalità di grigio più scura e posizioneremo al centro della nostra griglia.
Come puoi vedere, entrambi i lati superiore e inferiore della forma hanno quello 4 px gap che useremo come valore del nostro offset.
Quindi, selezioniamo la forma e creiamo l'offset andando a Oggetto> Percorso> Percorso offset e entrando 4 px nel Compensare valore campo, lasciando il Si unisce e Limite di mitra ai loro valori predefiniti.
Non appena clicchiamo ok, Illustrator creerà il nostro oggetto offset, che avrà la stessa forma e lo stesso colore della forma originale del nostro documento.
Ora, per creare il contorno della linea, selezioneremo semplicemente entrambe le forme e useremo esploratore'S Fronte meno opzione per ritagliare la forma più piccola da quella più grande.
Come puoi vedere, ora abbiamo una nuova forma che ha un tuttofare 4 px contorno spesso.
Molto bello, giusto?
Ora, finiamo l'icona, aggiungendo un paio di righe di testo usando il Strumento rettangolo (M) in modo che assomigli ad un vero documento. Quando crei le forme, assicurati che abbiano lo stesso 4 px il valore dello spessore come contorno principale, poiché le icone di linea sono generalmente coerenti in termini di spessore.
Quindi a questo punto dovresti avere un'idea di base su come creare "icone a linea nuda" usando l'incredibilmente potente Offset Path Tool.
Daremo ora un'occhiata alla creazione della stessa icona del documento, ma questa volta useremo le linee in combinazione con le forme di riempimento.
Il processo è quasi identico, l'unica differenza fondamentale è che questa volta non taglieremo la forma più piccola da quella più grande. Invece useremo il più piccolo come una forma di riempimento e l'offset come contorno dell'icona.
Quindi, creiamo la stessa cosa 64 x 88 px rettangolo arrotondato con il Raggio angolare di 4 px, e posizionarlo verso il centro della nostra griglia.
Quindi, con la forma selezionata, vai a Oggetto> Percorso> Percorso offset e dargli un compenso 4 px come abbiamo fatto con l'icona precedente.
Dopo averlo fatto, colorare semplicemente la forma originale usando una sfumatura di grigio più scuro per farlo risaltare dalla tavola da disegno, quindi aggiungere le piccole righe di testo.
Come puoi vedere, entrambi i processi sono davvero facili da capire e da applicare, ma ci sono un paio di cose di cui dovresti essere a conoscenza quando usi Offset Path strumento per creare questo tipo di icone. Parleremo di questi aspetti non appena andremo oltre Strokes metodo in modo da poter avere una prospettiva più ampia rispetto ai due.
Questo metodo è per molti designer là fuori "giusto" poiché "le icone di linea" dovrebbero essere create usando linee / percorsi reali e non riempire le forme. Questa è probabilmente un'affermazione equa, ma siamo onesti, la maggior parte delle persone là fuori che acquistano le nostre icone non si preoccupano molto, dal momento che finiranno per usarle come file .png comunque.
Rispetto al metodo precedente, il processo stesso non è poi così diverso, dal momento che ne utilizzeremo ancora alcuni IllustratoreLe forme di base come il Rettangolo (M) e Strumento rettangolo arrotondato, ma non taglieremo nulla. Invece, trasformeremo le forme in linee, rimuovendo il loro colore di riempimento e dando loro un peso di traccia più sottile o più spesso.
Insieme alle forme base, useremo anche il Strumento penna (P) per aggiungere dettagli e delimitatori di sezioni alle icone in base alla complessità della composizione.
Detto questo, esaminiamo i processi di creazione di icone di linee sia nude che piene usando questo metodo, creando la stessa piccola icona di documento.
Non importa come procedi nella creazione di questo tipo di icone, dovrai sempre decidere le dimensioni della base e lo spessore della linea che utilizzerai.
Dato che in questo caso creeremo esattamente la stessa icona, la nostra dimensione rimarrà la stessa, quindi 96 x 96 px, e così sarà lo spessore della nostra linea (4 px).
Se per il metodo precedente avessimo bisogno di creare due forme, per questa abbiamo solo bisogno di una che trasformeremo nel contorno del documento sfogliando il suo colore di riempimento con il suo tratto.
Quindi, usando il Strumento rettangolo arrotondato, selezionare lo stesso colore grigio di prima e quindi scambiare il riempimento con il tratto premendo Shift-X. Come puoi vedere, questo rimuoverà tutti i colori di riempimento e ti consentirà di disegnare usando i percorsi, che è esattamente quello che vogliamo.
Consiglio rapido: Il Shift-X lo scambio colore funziona finché non hai i colori assegnati sia al riempimento che al tratto. Se hai due colori, li invertirà solo, il che non è ciò che vogliamo quando gestiamo le icone di linea. Quindi, se hai più di un semplice colore di riempimento, dovresti assicurarti di rimuovere il secondo.
Ora, cambia il Ictus'S Peso a 4 px e inizia a disegnare la forma principale dell'icona facendo clic su e quindi trascinando in modo che alla fine si abbia a 68 x 92 px forma con a Raggio dell'angolo di 6 px.
Se ti stai chiedendo perché i valori sono cambiati, è perché invece di creare una forma base e quindi aggiungere un offset, creeremo la struttura del documento direttamente usando i tratti. Ora, se dovessimo osservare da vicino la struttura creata con il metodo del percorso di offset, noteremmo che ha una larghezza di 72 px...
... e un fuori Raggio dell'angolo di 8 px con giusto 4 px per quello interno.
La spiegazione è abbastanza semplice. Dato che Illustrator di default allinea il tratto all'interno, ciò significa che lo spessore della linea sarà equamente diviso su ciascun lato del percorso, quindi 2 px per un lato e un altro 2 per l'altro.
Ora, anche se la forma ha la stessa larghezza dello schema precedente creato usando il metodo di offset, se controlliamo il Trasforma pannello lo vedremo Larghezza il valore è in realtà più piccolo, poiché Illustrator indica la dimensione del percorso effettivo e non l'oggetto. Se espandessimo il percorso e lo avessimo trasformato in una forma, avrebbe gli stessi identici valori di quello creato usando il primo metodo, dal momento che Illustrator prenderebbe in considerazione quei 2 px da ogni lato (68 + 4 = 72).
Rispetto al metodo precedente in cui dovevi lasciare uno spazio che avesse lo stesso valore dello spessore della linea, questa volta dovrai posizionare la forma in modo che il suo percorso (che di solito è rappresentato dal colore del livello) lasci un vuoto di giusto 2 px tra le sezioni superiore e inferiore della griglia.
Consiglio rapido: dipende da Peso del tuo Ictus¸ dovrai sempre assicurarti che quando stai progettando l'icona sulla griglia, lasci uno spazio che ha un valore pari a metà del percorso Peso del colpo, poiché quando si disegnano le forme facendo clic e trascinando, Illustrator non conta il numero di pixel che si trovano al di fuori della linea dell'indicatore del percorso. Dovrai quindi ricordarti di tenerlo a mente e disegnare lasciando un piccolo spazio in cui i lati del percorso incontrano i bordi della griglia attuale, in modo che il tuo disegno si adatti a quello spazio.
Una volta che abbiamo il profilo del nostro documento, possiamo selezionare il Strumento penna (P) e inizia ad aggiungere il 4 px linee di testo spesse per completare l'icona.
Ora che abbiamo visto come creare l'icona delle linee nude, diamo un'occhiata al processo di creazione di icone linea con forme di riempimento usando lo stesso metodo.
Bene, il processo per creare questo tipo di icona è praticamente lo stesso di quello per le linee nude. L'unica differenza è che dovrai creare un duplicato del tuo schema principale e trasformarlo in una forma di riempimento scambiando il suo colore di tratto con il suo riempimento.
Quindi, iniziamo creando il profilo principale disegnando a 68 x 92 px forma con a Raggio dell'angolo di 6 px. Se ti senti pigro, puoi semplicemente creare una copia di quello che già abbiamo, dal momento che dovrebbe accelerare un po 'le cose.
Una volta posizionata la forma sulla griglia, è necessario crearne una copia (Control-C> Control-F) e quindi capovolgere il suo tratto con il suo riempimento premendo Shift-X. Quindi cambia semplicemente il suo colore usando lo stesso grigio scuro di prima, assicurandoti di inviarlo alla parte posteriore usando il Disponi> Porta in secondo piano opzione. Infine aggiungi le piccole righe di testo e sei a posto.
A questo punto, abbiamo esaminato ciascuno dei due metodi che possiamo usare per creare icone di linea. Come ho promesso all'inizio di questo articolo, ora parlerò brevemente dei vantaggi e degli svantaggi dell'uso di un metodo rispetto all'altro, in modo che, alla fine, tu possa decidere da solo quale ti si addice meglio.
Non importa il tipo di icona della linea che stai creando, il Offset Path metodo può facilmente essere il tuo strumento "vai a", e no non sto solo dicendo perché lo uso quotidianamente. Lo sto dicendo perché ci sono molte cose che lo fanno risaltare:
Come con qualsiasi strumento, il Offset Path ha un paio di svantaggi che per alcuni potrebbe essere un rompicapo:
Anche se il Offset Path è un grande strumento, che non significa il Strokes il metodo non può essere un'alternativa valida. Ci sono un paio di vantaggi di cui dovresti essere a conoscenza prima di decidere se questo metodo è giusto per te:
Ora che abbiamo visto le parti buone, prendiamo un paio di secondi e parliamo di quelli cattivi:
Ecco qui, un confronto veloce ma approfondito di due fantastici metodi per la creazione di icone linea che dovrebbero indicare quale si adatta meglio al flusso di lavoro.
Come sempre, spero che tu abbia imparato qualcosa di nuovo, e se hai qualche domanda o vuoi solo condividere alcune delle tue conoscenze, pubblica il tuo commento nella sezione qui sotto e ti risponderemo non appena posso!
Accentsconagua