Share
In questo tutorial, ti mostrerò come creare un'illustrazione in stile cartone animato di un cervello, quindi come convertire l'immagine da utilizzare come icona per OSX e Vista. Discuterò anche alcuni punti sui dettagli per il design di icone. Iniziamo!
Di seguito è l'immagine finale su cui lavoreremo. In questo tutorial creeremo anche un'icona da questo. Vuoi accedere ai file Vector Source completi e alle copie scaricabili di ogni tutorial, incluso questo? Unisciti a Vector Plus per soli 9 $ al mese.
Raccogli alcuni materiali di riferimento e immagini / illustrazioni di cervelli. I libri di medicina sono una fonte perfetta. Il cervello è tanto complesso esternamente quanto internamente. Le cose principali da tenere a mente sono che il cervello è una forma ovale complessiva che forma la materia grigia, quindi c'è il cervelletto e il tronco cerebrale. Guardando dalla vista frontale / superiore, il cervello è bipolare e consiste di due emisferi.
Mi piace disegnare un modulo base su carta o digitalmente prima, prima di portarlo su Illustrator. Questo è particolarmente vero con una forma organica, poiché non sei sicuro di come sarà, quindi sarà utile tratteggiare le basi prima di passare ai vettori..
Quando elabori l'aspetto del cervello, considera quanto segue:
Punto di vista - Da che parte stai andando a rendere il tuo cervello? Una vista laterale tende a non essere così dimensionale, quindi ti suggerisco di posizionarla un po 'di lato per integrare la linea che separa i due emisferi.
Modulare - Un cervello sembra quasi una grande rete di tubi non uniformi piegati insieme su una palla da spaghetti. Questi tubi avere una curvatura unica, ma puoi riutilizzare elementi come S e M zigzag a forma di, T intersezioni e vari altri elementi nel tuo cervello; ricordati solo di mantenere la forma complessiva e di allargarla in alcuni punti. Esagerare - Non stiamo andando per un rendering anatomicamente corretto realistico. Utilizza le curve per accentuare determinate aree. Semplificare - Non devi fare tanti ghirigori come un vero cervello. Ancora una volta, non stiamo realizzando un rendering realistico, quindi evita dettagli inutili. Questo perché quando arriverà a convertire l'immagine in un'icona, alcuni dettagli potrebbero andare persi o rompersi se visualizzati a risoluzioni più piccole. Ho persino omesso il cervelletto e il tronco cerebrale per semplificare l'immagine. coerente - Mantieni coerente la tua linea artistica. Lo spessore della linea determina la vicinanza e il peso delle curve tra di loro, quindi tenetelo a mente.
Potrebbe essere un passaggio non necessario per alcuni, ma di solito passo su uno schizzo a matita in Flash per produrre linee pulite e quindi lavorare da quello in Illustrator, anche se non esitare a utilizzare il tuo flusso di lavoro preferito.
Crea una tela da 512 pixel per 512 pixel in Illustrator. Importa il tuo disegno sulla tela e usando lo strumento Penna, inizia a creare la grafica al tratto. Se sei a tuo agio con lo strumento Pennello di Illustrator o se utilizzi un tablet, puoi utilizzarlo, ma convertilo in contorni dopo. Assicurati di intersecare la curvatura tenendo conto della direzione e crea pieghe e sovrapposizioni appropriate.
Mantieni le pieghe estreme con estremità affilate e, per pieghe più morbide, crea più estremità arrotondate o aggiungi anche piccole pieghe per supportare la struttura visiva. Unisci tutte le forme in un singolo riempimento utilizzando lo strumento Unisci tracciato e rinomina il livello in "linework".
Usa il Bucket Bool per riempire di colori, quindi Estrudi.
Dopo aver ordinato tutti i disegni al tratto, utilizzare lo strumento Secchiello pittura dinamica per creare i riempimenti. Seleziona la linea grafica e usa un colore rosa leggermente desaturato per la base, non renderlo grigio o troppo rosa, ma dipende da te.
Poiché lo strumento bucket è una funzione di pittura dinamica, i tuoi vettori diventeranno un oggetto sotto un gruppo di pittura dinamica. Per risolvere il problema e separarli, vai su Oggetto> Pittura dinamica> Espandi. Ciò convertirà il tuo gruppo di pittura dinamica in un normale gruppo di riempimenti nella tavolozza dei livelli. Quindi vai avanti e separa i riempimenti di colore rosa su un altro livello e rinominalo "base".
Abbiamo bisogno di aggiungere ulteriori dettagli per rendere il cervello lucido e tridimensionale aggiungendo luci e ombre. Decidi da quale direzione proviene la luce. Nel mio caso, è standard in alto a sinistra. Crea un nuovo livello denominato "highlights". Ora usando lo strumento Penna, inizia a creare forme molto arrotondate di fronte alla tua luce presunta usando un colore leggermente più luminoso della tua base.
Tieni presente che non dovrebbe essere realistico, ma dare un senso di lucentezza aggiungendo qualche specularità. Mantengalo semplice e non aggiunga troppo, perché i colori si fonderebbero alle più piccole risoluzioni.
Mentre le alte luci sono arrotondate e sono abbastanza indipendenti, le ombre saranno adiacenti ai bordi, opposti ai punti salienti. Su un altro livello chiamato "ombre", usando lo strumento penna e un colore più scuro dalla base, create delle ombre. Assicurati di aggiungerli in luoghi in cui le forme del cervello si sovrappongono e proiettano ombre l'una sull'altra.
Duplica il tuo lavoro di linea e i livelli di base su uno nuovo chiamato "gradiente", che utilizzeremo per aggiungere un'altra funzione di ombreggiatura al cervello. Usa di nuovo lo strumento Unisci percorso per unire la linea arte e il rosa base in un unico riempimento. Quindi, crea un riempimento sfumato, utilizzando una tonalità di rosa diversa da quelle già utilizzate e un colore tenue. Ho usato una sfumatura di rosa con un po 'di arancio. Imposta il livello sopra a tutto il resto e imposta la modalità di fusione su "Colore".
L'ultimo passo è creare dell'ombra sotto il cervello, strettamente per l'uso dell'icona. Duplica il livello base e mettilo sotto di esso. Riempi le forme con il nero e usa Effetti> Effetti di Photoshop> Sfocatura> Sfocatura gaussiana con valore 10px per sfocare l'ombra. Assicurati di ridimensionare e posizionare tutto in modo che nulla tocchi il bordo della tela e che anche l'ombra non sia tagliata da essa.
Dovresti finire con 6 elementi principali: "sfumatura", "linework", "evidenzia", "sfumature", "base rosa" e "ombra". L'illustrazione finale è sotto. Ora sei pronto per convertire l'illustrazione in un'icona di file!
L'ultimo Mac OS Leopard e, naturalmente, il prossimo Snow Leopard supporta le dimensioni delle icone fino a 512 pixel per 512 pixel, mentre Windows Vista supporta solo 256 px per 256 px. Mac OSX supporta tutti i tipi di formati da utilizzare come icona, a causa del modo in cui il sistema operativo esegue il rendering delle immagini. Sfortunatamente, Windows si occupa del formato ICO, che non è coerente tra Vista e la versione precedente di Windows.
Mac OSX è dotato di un'utile utility chiamata "Icon Composer" e si trova in Root> Developer> Applicazioni> Utility. Fa parte degli strumenti gratuiti di sviluppo di Apple disponibili qui (è richiesto un account gratuito).
Windows non ha alcuna utilità nativa che puoi usare, ma c'è un editor di icone gratuito IcoFX che può esportare in ICO, tra le altre cose.
Per gli scopi di questo tutorial, userò solo l'immagine originale 512x512 e consentirò al software di ridimensionarlo automaticamente. Le risoluzioni richieste per Mac OS sono 512x, 256x, 128x, 32x, 16x. Stranamente, per Windows, sono 256x, 48x, 32x, 24x, 16x.
In realtà, modificherai e perfezionerai l'icona di ogni gradino che è ridimensionato, perché c'è un'incredibile perdita di dettagli, e alle risoluzioni più basse le forme saranno indistinguibili e dovrai ricorrere alla modifica manuale fino a pixel.
Se non vuoi iscriverti ad Apple e scaricare gli strumenti per sviluppatori solo per ottenere Icon Composer, sei fortunato, perché Mac OS supporta PNG RGBA standard nelle sue icone. Tutto ciò che devi fare è salvare il tuo file da Illustrator come PNG 512x512 con trasparenza, aprirlo con Anteprima, fare clic su Modifica> Copia per copiare l'immagine. Quindi vai nella cartella in cui vuoi cambiare l'icona e fai clic con il tasto destro del mouse> Ottieni informazioni (o Comando + I). Cerca l'icona nell'angolo in alto a sinistra accanto al nome della cartella e fai clic su di essa. Si evidenzierà con un colore blu chiaro.
Una volta evidenziato, puoi andare avanti e fare clic su Modifica> Incolla. E questo inserirà il PNG che hai precedentemente copiato.
Il rovescio della medaglia è che l'immagine è ancora 512px per 512px, anche per le dimensioni più piccole che influiscono sulla memoria durante la visualizzazione dell'icona. Un altro è il fatto che avrai difficoltà a ripristinarlo se hai scambiato una delle icone di sistema.
Per creare un file ICNS OSX nativo, eseguire Icon Composer e trascinare il 512px per 512px PNG nella stessa dimensione. Il programma ti chiederà se vuoi copiare e ridimensionare l'immagine su altre risoluzioni. Se desideri creare un'immagine separata per ciascuno, vai avanti. A questo punto, lascerò semplicemente ridimensionare il computer per me.
Puoi vedere che c'è una scheda Maschere in basso. Quello che fa, ti permette di importare un'immagine indipendente che gestirà la trasparenza. Dal momento che stiamo usando PNG, siamo pronti per andare su File> Esporta e salvare un file ICNS.
Se apri il nostro nuovo ICNS in anteprima, vedrai che si tratta di un contenitore per 5 immagini delle rispettive dimensioni.
A questo punto, è complicato implementare l'ICNS come un'icona, dato che non puoi semplicemente copiarlo e incollarlo come un intero file. Se ti piacciono le personalizzazioni sul tuo Mac, e simili alle icone personalizzate, o sei un designer che deve testare i loro disegni, ti suggerisco un'utility CandyBar molto carina. Non è gratuito, ma ne vale la pena, se hai intenzione di prendere sul serio la personalizzazione.
Vista è diverso da Windows XP. Sono state introdotte icone con compressione PNG e sono state trasferite a Windows 7, consentendo di creare icone carine con trasparenza adeguata. Windows gestisce le icone tramite i file ICO. Sono l'equivalente di ICNS per Mac, che sono contenitori per immagini per varie risoluzioni.
Utilizzeremo un'applicazione freeware chiamata IcoFX. Windows non supporta risoluzioni di icone superiori a 256px per 256px, quindi ti suggerisco di esportare un'immagine di 256px direttamente da Illustrator per evitare una compressione extra.
Vai su File> importa immagine per importare il tuo 256 png png. Usa impostazioni 256x256 a 32 bit.
Nel pannello di sinistra, fai clic con il tasto destro del mouse su> nuova immagine per importarne una con la risoluzione successiva. Puoi andare avanti e creare un'importazione personalizzata di 128x128 come dimensione extra. Quindi importa il resto delle immagini.
Una volta caricate tutte le immagini, sei pronto per salvare il file come file ICO.
Per cambiare un'icona di una cartella / posizione in Vista, in questo caso cambierò l'icona "il mio computer". Fare clic destro su di esso, scegliere Proprietà. Se stai modificando una scorciatoia, vai alla scheda Collegamento o se si tratta di una cartella vai alla scheda Personalizza. Fai clic sul pulsante Scegli icona e seleziona il file ICO che hai salvato.
Conferma la scelta dell'immagine e l'icona dovrebbe ricaricare in quella personalizzata.
Ora conosci il processo di creazione di un'icona da zero, sia per Mac OSX che per Windows Vista. Sia che tu abbia letto il tutorial della Sezione 1 per seguire il processo di illustrazione, sia che sia saltato direttamente alla Sezione 2 per vedere come convertire le immagini in icone di sistema utilizzabili, ti ringrazio per aver seguito il tutorial e spero di vedere qualche grande arte di personalizzazione! Ci sono molti ottimi posti per iniziare.
Iscriviti al feed RSS di Vectortuts + per rimanere aggiornato con le ultime esercitazioni e articoli vettoriali.
Accentsconagua