Categoria:Icone di servizio/Istruzioni

Questo pratico manuale ti insegnerà a sclerare per ore con GIMP ottenendo uno sgorbio infame che spaccerai per un'icona moderna e accattivante. Segui attentamente queste istruzioni affinché le icone tendano a essere uniformi perché, nel caso tu non l'abbia notato dal titolo di questa categoria, sono icone di sistema, quindi abbastanza importanti.

NB: queste indicazioni tengono conto che uno usi GIMP perché chi le ha scritte non aveva voglia di controllare se sono valide anche con altri programmi.

Scelta dell'immagine

Prima di tutto bisogna decidere il soggetto dell'icona. Qui serve fantasia, ma in genere è bene usare cose che richiamano in modo sarcastico l'idea che si vuole comunicare. Ad esempio la cacca d'oro per rappresentare la qualità o la faccia di cazzo di Corona per le cose che danno lustro al nostro bel paese.

Quando cerchi queste foto preferisci quelle professionali, perché quelle fatte da pirla qualunque con l'Alcatel della nonna tendono a essere sgranate, scure e inquadrate come il cazzo. É quasi impossibile ottenere un disegno pulito partendo da una foto fatta male, e poi chi te lo fa fare. Inoltre usa foto almeno di 300 px di dimensione, quelle più piccole sono inservibili.

Ritocchi

Questo argomento è troppo complesso per parlarne qui, si suppone che tu sappia fare fotomontaggi se ti vuoi imbarcare in questa avventura. In caso contrario dovrai trovare foto che già sono adatte così come sono, che vadano solo ritagliate, ma spesso ciò è impossibile o comunque sconsigliato perché non vogliamo decorare il nostro sito con roba fatta da altri.

In generale, tenta di ottenere una forma complessiva di lato e altezza simili, ovvero non troppo allungata in una direzione. Questo serve a far apparire l'icona sempre ben "bilanciata" nel resto, inoltre una forma allungata tende a diventare poco comprensibile a piccole dimensioni.

Una volta realizzato il fotoritocco bisogna ritagliarlo in modo che lo sfondo sparisca. Più facile di un fotoritocco vero e proprio ma serve mano ferma; in genere evita di fare i bordi troppo "pelosi", un effetto di sfumatura tipico di chi usa strumenti di ritaglio automatico o una gomma troppo "morbida" perché ha paura di sbagliare. Se non sei capace, lascia perdere.

Ridimensionamento

Le icone devono avere tutte la stessa dimensione e gli stessi margini. Per ottenerli:

• Fai una selezione circolare dell'immagine in modo che questa rientri in un cerchio il più piccolo possibile; più riuscirai a restringere il cerchio senza "tagliare" l'immagine, più questa verrà centrata e ben distanziata dal resto.
• Ritaglia l'immagine alla selezione, che in pratica vuol dire che la tavolozza sarà ora un quadrato in cui il cerchio di cui sopra è inscritto.
• Scala l'immagine a 230 px.
• Porta la superficie a 250x250 px, centrando l'immagine. Questo creerà 10 px di margine intorno all'icona.
• Muovi verso l'alto il livello di 10 px (serve per accogliere l'ombra, vedi dopo).

Cartonizzazione

Anche se le icone partono da una base reale, devono raggiungere un effetto "fumettoso", ovvero con pochi dettagli e tinte cariche.

• Copia il visibile e incollalo come nuovo livello, poi rendi invisibili gli altri livelli. In questo modo potrai fare modifiche senza rovinare il "prototipo".
• Regola i Livelli e la Saturazione (menù "Colori") fino ad ottenere un disegno ben staccato, luminoso e a tinte cariche. In genere basta spostare la Gamma (freccina centrale in "Livelli di ingresso") leggermente in alto e il Punto Bianco in basso, poi se serve si puo' aumentare leggermente la Saturazione (menu Colori → Tonalità-saturazione).
• Duplica il livello e rendi invisibile l'altro, sempre per lavorare senza rovinare i passaggi precedenti.
• Sfocatura Gaussiana Selettiva (da Filtri → Sfocature) finché non si riconoscono solo le forme principali e non i dettagli minuti. Qui non c'è una regola universale, ma in genere si ottengono buoni risultati portando il Delta a metà barra e lasciando il Raggio di Sfocatura com'è. Se ci sono aree in cui il dettaglio è importante (scritte, capelli ecc.), sfoca solo sul resto dell'immagine; puoi farlo selezionando solo le parti da sfocare, oppure duplicando il livello, sfocandolo tutto e poi cancellando le parti non interessate.

Bordo

Sempre allo scopo di dare un effetto fumettoso, bisogna aggiungere un bordo spesso intorno al profilo esterno dell'icona, e bordi più sottili all'interno per separarne le parti principali. Il bordo esterno dev'essere di 3 pixel, mentre le linee interne di 2. Ci sono vari modi per ottenere automaticamente il bordo esterno, ad esempio:

• Alfa a selezione sull'intera immagine (menu Livello → Trasparenza), poi allarga la selezione di 3px (menu Seleziona → Allarga).
• Apri un nuovo livello vuoto, poi riempilo di nero (menu Modifica → Riempi).
• Duplica questo livello e spostalo in fondo agli altri livelli. Questo farà da base per il bordo esterno.
• Alfa a selezione dal livello nero in cima e riduci di 1px (menu Seleziona → Riduci).
• Cancella e deseleziona.
• Sfumatura gaussiana a 3px.
• Imposta il livello come "luce forte". Questo completerà il bordo in modo che sfumando verso l'interno lo renda più "morbido".
  • A volte il colore nero non rende bene, soprattutto su immagini chiare. In questo caso è meglio usare un colore scuro più affine a quello del soggetto, ad esempio sul giallo funziona meglio il marrone.

Infine aggiungi le linee principali interne a mano con pennello nero (Hardness 050) e dimensione 2px, attivando lo "Sfoca delineatura" con qualità 100 e peso 400; questo serve ad ottenere linee curve sufficientemente naturali, ma ci vuole comunque mano ferma. Traccia queste linee solo dove occorre separare soggetti diversi dell'immagine per farli spiccare maggiormente, in particolare per separare le cose che stanno davanti da quelle che stanno dietro. In genere non serve separare le singole componenti di un oggetto complesso, a meno che non appaiano troppo confuse nell'insieme.

Ombreggiatura

Per dare l'impressione che l'icona fluttui a mezz'aria è necessario aggiungere un'ombra.

• Duplica il livello nero che era rimasto in basso, quello che fa da base per il bordo.
• Sfumatura gaussiana di 10px.
• Muovi il livello di 10px verso il basso (strumento Sposta).
• Riduci opacità al 35%