Come creare un’icona: consigli sempre validi

In rete si trovano moltissimi tutorial che insegnano a creare icone di qualsiasi tipo e su qualsiasi argomento e soggetto. Ma prima o poi arriva il momento in cui ci si stufa di seguire le istruzioni a puntino: colora qui con questo colore, colora di là con quest’altro, abbassa l’opacità al valore tot., imposta questo determinato stile di livello con valori x, y, z…

Uff, è un po’ noioso, alla fine, perché uno vorrebbe arrivare a  fare tutto da solo: sapere già individuare i giusti parametri per tutto, i colori che funzionano, gli effetti dosati nella maniera giusta perché non risultino troppo pesanti.

Creare icone non è esattamente la più facile delle operazioni: ci vuole tempo, studio, allenamento, uno spirito acuto di osservazione. Non c’è ‘la ricetta magica’ che va bene per tutto; sarebbe impossibile, vista la grande varietà di stili e di risultati che si possono ottenere.

Il segreto è osservare molto, sperimentare, e studiare, ove possibile, le icone già fatte da altri designer: spesso, infatti, si trovano dei pacchetti con i file sorgente (eps, o psd), molto utili per imparare i piccoli trucchi dei ‘maestri’.

Però si possono dare ugualmente dei consigli che, in genere, aiutano a lavorare meglio e a ottimizzare i tempi. Prendo a riferimento Photoshop, ma questi consigli possono valere ugualmente anche se sei abituato a lavorare con Illustrator o altri software.

matita1. Comincia da uno schizzo su carta

Un’icona è un disegno piccolo, ma complesso, ed è meglio lavorare prima con carta, matita e gomma, per dare corpo all’idea, fare aggiustamenti, modifiche, varianti. Sta a te decidere quanto deve essere dettagliato lo schizzo: c’è chi abbozza solo la forma e le linee principali, chi individua zone di luce e di ombra, e chi dà anche il colore. Cerca di creare un disegno con una forma chiara e definita già sulla carta. Non appesantirlo con troppi dettagli, specialmente se l’icona finale dovrà essere di piccole dimensioni. Solo quando sei convinto del tuo disegno, puoi scansionarlo e cominciare a lavorare al computer.

2. Tieni presente quanto sarà grande l’icona nello schermo

Le icone di dimensioni medio-grandi in genere sopportano bene gradazioni sottili di colore, sfumature delicate, colori tenui, bordi non troppo grossi e anche di colore non troppo scuro. Le icone di dimensioni più piccole, invece, non sono riconoscibili se si adottano questi stili: risulterebbero confuse, poco definite. Perciò, più piccola è l’icona, più i bordi dovranno essere definiti, i colori decisi (almeno per certi particolari), i contrasti forti; anche le zone di luce e ombra devono essere nette. In dimensioni grandi, queste immagini possono sembrare un po’ grossolane, ma quando si rimpiccioliscono, si vedono molto bene, e risultano molto più chiare di quelle menzionate sopra. Insomma, ci sono icone pensate per essere grandi, e icone pensate per essere piccole; per questo motivo è consigliabile, qualora serva rimpicciolire un’icona, ridisegnarla (almeno in certi particolari). Anche se si usano programmi vettoriali che permettono di ridimensionare senza perdita di qualità, il risultato sarà migliore se l’icona viene ridisegnata.

Ecco un esempio:
mail_grandemail_piccola

mail2_grandemail2_piccola

La prima icona è molto bella in dimensioni grandi ma, se ridimensionata, diventa poco chiara; la seconda, invece, anche se in dimensioni molto piccole, mantiene un’ottima visibilità.

3. Come ridisegnare l’immagine in digitale

Crea un nuovo documento impostando delle dimensioni un po’ più grandi di quelle che dovrà avere l’icona finale. A meno che tu non stia disegnando delle mini-icone (quelle proprio piccolissime…), che allora il discorso è un po’ diverso. Con un’immagine più grande, potrai lavorare meglio. In genere, 300 0 400 px per lato vanno bene.

Ricrea il disegno tracciando varie forme con lo strumento ‘Penna‘; comincia da quelle visivamente più significative, che daranno ‘sostegno’ a tutta la composizione. Inizialmente riempi queste forme con tinte piatte.  Crea tutti i vari elementi, disponendo correttamente quelli in primo piano e quelli in secondo piano. Puoi assegnare un livello a ciascuna forma; in caso di molti livelli, può tornare utile raggrupparli, in modo da individuarli più facilmente e mantenere più ordinato lo spazio di lavoro.

4. Come colorare dando volume e dettaglio alle superfici

Cerca di individuare le zone di luce e di ombra nel tuo disegno; in caso di superfici complesse e di trasparenze, ti torneranno senz’altro utili le Modalità colore dei livelli; gioca con le varie possibilità che ti offrono, e anche con le trasparenze. Gli stili livello sono anch’essi strumenti molto preziosi, ma non farti ingannare dai nomi assegnati dal Photoshop: ad esempio, ‘Bagliore interno’ non deve necessariamente servire a creare un bagliore; anzi, potrebbe essere perfetto per creare un’ombra, o un riflesso.

5. Come creare luci e ombre

Luci e ombre possono essere rese in svariati modi:

  • con gli stili livello di Photoshop: si può settare la dimensione, il colore, l’estensione dell’omra o della luce, e anche la direzione. E’ veloce e pratico, ma non sempre questo metodo va bene per tutte le situazioni.
  • si crea un nuovo livello e si disegna la zona di luce o di ombra con lo strumento Penna, riempiendola con un colore o con una sfumatura (per la luce si usa il bianco, per le ombre un colore più scuro rispetto alla tinta dell’oggetto che crea l’ombra); per creare in giusto effetto, di solito si abbassa l’opacità del livello. Si può anche sfumare il contorno con il filtro Sfoca, o lasciare il contorno netto per dare alla superficie un aspetto lucido.

6. Cambia il punto di vista

Quando avrai terminato la tua icona, alzati e osservala da lontano, oppure zumma per vederla più piccola. Cerca di capire se anche a piccole dimensioni l’immagine è riconoscibile e conserva dettaglio.

Infine, salva l’immagine alle dimensioni desiderate, usando la comoda funzione ‘Salva per Web’.

Altre letture:

The Making of an Icon
Professional technique for creating icons

3 thoughts on “Come creare un’icona: consigli sempre validi

  1. Pingback: I migliori post della settimana #33 | EmaWebDesign :: Web Programming / Web Design / SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *