Tutorial di Grafica

Durante la creazione dei vostri siti web potrebbe capitarvi di aver bisogno di un'immagine senza il suo sfondo.

Ci sono tanti metodi, tutto dipende dal risultato che si vuole ottenere, dalla qualità dell'immagine, dal tipo di immagine e da altri fattori.

Questo breve tutorial vorrebbe aiutarvi a "esplorare" qualche sistema. Ovviamente ognuno potrà personalizzare ciò che è scritto in questa pagina.

Lo scopo del tutorial è comunque quello di farvi vedere un maggior numero di comandi che potrebbero esservi di una qualche utilità.

Cominciamo da una cosa semplice.

METODO 1 - UTILIZZARE LA BACCHETTA MAGICA

Procuratevi un'immagine che abbia uno sfondo di colore abbastanza differente dal soggetto principale.

Io ho scelto questa (clicca per ingrandire):

Come potete vedere ho scelto un'immagine "marroncina" e nera (il cagnolino) posta su di uno sfondo totalmente differente azzurro e bianco.

Io utilizzerò il programma di Photoshop CS4 ver. 11.0 ma se utilizzate altri programmi (per esempio GIMP) riuscite ad ottenere la stessa cosa.

Aprite la vostra immagine con il vostro programma di grafica digitale.

Fate una copia del vostro cagnolino su di un altro livello (sempre utile averne una..) e rendete invisibile l'originale.

Create un nuovo livello, coloratelo di un colore sgargiante (nel mio caso ho scelto il rosso) e mettetelo sotto la copia di prima.

Questo livello ci servirà per vedere se abbiamo "scontornato" bene il nostro amichetto a quattro zampe.

Tornate sul livello di copia che per comodità chiamerò "livello cagnolino".

Selezionate la bacchetta magica.

Questo strumento permette di selezionare tutta l'area che ha un determinato colore (quando noi clicchiamo su di un colore viene selezionata l'area che ha quel colore).

Funziona bene su superfici che hanno un colore abbastanza omogeneo, se abbiamo invece troppe variazioni tonali è meglio utilizzare altri strumenti.

Quando seleziono la bacchetta magica mi appare la sua barra delle opzioni subito sotto la barra dei menù.

Ci vuole un po' di pratica per capirla tutta ma per questo esempio consiglio di settarla nel seguente modo:

• Cliccate sulla seconda icona dei quadrati sovrapposti (che significa che continuiamo ad aggiungere delle selezioni). In questo modo se clicchiamo più volte le selezioni si aggiungeranno una all'altra.
• Impostate la tolleranza circa a 20. Questo valore indica che variazione di colore viene selezionata. In questo caso una variazione di +20 e -20.
• Mettete la spunta in anti-alias. Questo serve per rendere meno netto il contorno che si sta selezionando.
• Mettete la spunta in contigui. Questo è importante. se non è selezionata quando cliccheremo sul bianco la bacchetta magica selezionerà non solo la nuvola ma anche il bianco negli occhi del cagnolino. Selezionando contigui invece la bacchetta seleziona solo le aree in prossimità di dove clicchiamo.

Per imparare le potenzialità della bacchetta magica l'unico sistema è la pratica. Provate sulla stessa immagine a selezionare la stessa area impostando in maniera differente le varie opzioni.

Torniamo al nostro cagnolino.

Cliccate su una parte dello sfondo e vedrete che apparirà una selezione.

Continuate a cliccare nelle parti non selezionate dello sfondo e pian piano vedrete che riuscirete a selezionare tutto il cielo.

A questo punto potete direttamente cancellare lo sfondo cliccando sul tasto della vostra tastiera CANC.

Facendolo però vi accorgete subito che rimane un alone azzurro antiestetico attorno al cagnolino.

Proviamo quindi ad utilizzare un altro sistema.

Premete ctrl + z oppure andate su modifica-passo indietro in modo da tornare alla situazione dello sfondo presente e selezionato.

Ora premete ctrl + shift + i oppure andate su selezione - inversa.

Ora avete selezionato il cagnolino e non lo sfondo.

Ora creiamo una maschera cliccando sul pulsante apposito posto in basso nella barra dei livelli.

Vedrete apparire a fianco all'icona del livello una sagoma nera (dove c'era il cielo) e l'immagine ora ha lo sfondo rosso.

Siamo nella stessa situazione di prima, abbiamo ancora l'alone azzurro attorno al cagnolino.

Questa volta però possiamo lavorare sulla maschera per diminuire questo problema.

Clicchiamo con il tasto destro sulla maschera e selezioniamo "aggiungi maschera a selezione". In questo modo il nostro cagnolino ritorna ad essere selezionato.

Andiamo ora sul menù selezione e poi su migliora bordo.

si aprirà una finestra come quella che potete vedere qui sotto:

Giocando un po' sui vari valori (io li ho impostati come potete vedere qui sopra) e con un po' di pratica si può ottenere una selezione molto interessante per noi.

Facendo ora un altra volta ctrl + shift + i per fare nuovamente selezione inversa e passando con un pennello nero sul bordo del nostro cagnolino (facendo attenzione di avere selezionato la maschera), otterremo una cosa come questa qui sotto:

Volendo noi potremmo sostituire lo sfondo rosso con lo sfondo che desideriamo.. Per esempio potrete fare delle cose come queste:

Per renderlo più reale bisognerebbe modificare un po' i colori, le ombre ed aggiungere dei peli ma non è lo scopo di questo piccolo tutorial.

METODO 2 - UTILIZZARE SOLO LA MASCHERA

Il metodo che vi sto per spiegare è più adatto per immagini che hanno uno sfondo non omogeneo oppure con lo sfondo troppo uguale al soggetto stesso.

Scegliete un'immagine adatta a questo (soggetto dellos tesso colore dello sfondo o sfondo non omogeneo).

Io ho scelto questo cucciolo (clicca sull'immagine per ingrandirla):

Aprite l'immagine con il programma di grafica digitale, fate un livello di copia in modo da tenere da parte l'originale e lavorare su questo.

Sotto il livello di copia creare un livello interamente riempito di un colore sgargiante, io sceglierò il verde.

D'ora in poi (salvo altre indicazioni) lavoreremo sul livello di copia quindi spegnete quello originale.

Sul livello di copia create una maschera con l'apposito pulsante (vedi sopra).

Ora facendo attenzione di avere la maschera selezionata, colorate di nero tutte le zone dello sfondo che non vi interessano (utilizzate un pennello per esempio).

Pian piano vedrete trasparire il colore del vostro livello sotto (nel mio caso verde).

Se sbagliate vi basterà colorare di bianco la parte che volete vedere e magicamente vi riapparirà.

Se volete un consiglio inizialmente "sbozzate" il tutto utilizzando un pennello di grandi dimensioni e avendo l'immagine a tutto schermo. Successivamente prendete un pennello più piccolo e zoomate sulla zona da sistemare.

Dovrete ottenere una cosa di questo tipo:

Tenete conto che l'immagine scelta da me è relativamente semplice da scontornare, ma ce ne saranno alcune molto ma molto più complesse.

Ora procediamo come fatto precedentemente per migliorare il bordo.

Aggiungiamo la maschera alla selezione ed utilizziamo lo strumento migliora bordo e questa volta lo ingrandiamo pun po' invece di ridurlo.

Io ho usato le seguenti impostazioni, ma voi le dovrete variare in base all'immagine che state trattando:

Ora Passando con il pennello bianco attorno al cucciolo (tenendo la maschera selezionata) potrete migliorare di un po' i contorni Ottenendo una cosa come questa:

Ora non ci resta altro che spostare il nostro amico a quattro zampe in un altro posto come per esempio in mezzo a un prato.

Ora sta a voi provare e riprovare. L'unico sistema per migliorare è sperimentare.

Questo piccolo tutorial vi vuole spiegare una sequenza da eseguire per ottenere un effetto nevicata. Si danno per scontate le basi del Photoshop.

Ovviamente non è l'unico modo e probabilmente ce ne sono anche di migliori, se volete potete segnalarne anche voi inviando una mail.

Per gli esempi viene utilizzato Photoshop CS4 nella versione 11.0.

L'immagine di partenza che sceglierete dovrebbe essere un paesaggio innevato, non scegliete immagini troppo soleggiate, a lavoro concluso probabilmente risulterebbero finte.

L'immagine scelta da me è questa:

La prima cosa da fare è scurire un po' il cielo altrimenti risulta innaturale per una nevicata.

Faccio una copia della foto e la chiamo cielo. In questo modo ho da parte una copia dell'originale.

Seleziono la parte del cielo con la bacchetta magica opportunamente calibrata (voi utilizzate il metodo che più preferite) e creo una maschera che mi faccia vedere solo questa parte selezionata.

Creo una "regolazione livelli" che sia associata SOLO al livello cielo. (cliccare sull'apposito pulsante posto in basso che indica due cerchi con la parte in comune annerita).

Sposto il segnalino che era sul bianco verso sinistra in modo che il cielo si scurisca. Ogni foto è a se quindi ci vuole un po' di occhio per decidere di quanto modificare i livelli.

Quello che ottengo nel mio caso è questo:

Si possono notare delle parti che rimangono troppo chiare e danno un senso di "finto". (Per esempio fra le fronde degli alberi, la montagna piena di alberi sullo sfondo..)

Per sistemare questo problemino basta selezionare la maschera del livello "cielo" e utilizzando un pennello con colore bianco ma con poca opacità, passare su queste zone che diverranno quindi più scure.

Fare più passaggi fino a quando non ottenete un effetto più reale possibile.

Il mio risultato è questo:

La differenza vi sembra poca ma aiuta a dare un'impressione di "realismo".

Ora che abbiamo preparato lo sfondo dobbiamo pensare a creare la nevicata vera e propria.

Dopo aver fatto un nuovo livello ho creato un pennello apposito.

Ho selezionato un pennello tondo normale e poi modificando le impostazioni e regolazioni ho creato un pennello che in modo casuale cambia leggermente sfumatura, dimensione e posizione al passaggio.

Per questa parte ci vuole un po' di pratica e conoscenza di ogni possibile opzione (forma punta del pennello, dinamica forme, dispersione, dinamica colori, disturbo, bordi bagnati ecc). Vi consiglio di provare su di un altro file tutte le varie opzioni in modo da poterle sfruttare al meglio.

Dopo aver creato il pennello lo riduco a 1 px, utilizzo un colore bianco in primo piano e grigio di sfondo.

Lo passo in senso diagonale dall'alto a destra fino basso a sinistra. In modo casuale e senza riempire troppo l'immagine.

Cerco di riempire più la parte alta che la parte bassa.

Sfoco questo livello (utilizzando filtro - sfocatura - controllo sfocatura) e successivamente do anche un effetto movimento (utilizzando filtro - sfocatura - effetto movimento).

Come vedete qui sopra ho scelto di fare una sfocatura che va dall'alto a destra al basso a sinistra. Questo sarà il senso della mia nevicata.

Creo un altro livello, aumento il pennello di qualche pixel (per esempio 4 px) e faccio gli stessi passaggi.

Io ho fatto questi passaggi per 5 volte, cambiando la dimensione del pennello: 1px, 4px, 7px, 12px, 22px.

Più il pennello è grande e più dovete essere parsimoniosi con le pennellate e cercate di non coprire troppo lo sfondo.

Io ottengo una cosa come questa:

Ci sono ancora delle cose che non mi convincono come per esempio il fatto che ho troppi fiocchi di neve davanti agli alberi in primo piano.

Per eliminarne un po' creo delle maschere per ogni livello della neve dove elimino dei fiocchi da questa zona (in basso a sinistra) specialmente elimino i fiocchi che hanno le dimensioni più piccole (che quindi saranno più lontani) lasciando quelli più grandi.

Questo è ciò che riesco ad ottenere. Cosa ne pensate?
Assomiglia almeno un po' ad una nevicata?

Le tipologie di immagini supportate dal web sono sostanzialmente 3: JPG, GIF e PNG che a loro volta si possono suddividere in varie tipologie. Ho creato questo piccolo articolo al solo scopo di confrontarle fra di loro.

°°°JPG°°°
Le JPG supportano una grande gamma cromatica ed è particolarmente adatta per visualizzare fotografie o grafiche con molte variazioni cromatiche. Solitamente è più pesante delle altre tipologie di immagini e non supporta nè l'animazione nè la trasparenza. Come si può vedere qui a destra lo sfondo infatti non è trasparente ma bianco. Le JPG sono sempre dei rettangoli.

°°°GIF "normale"°°°
Le immagini GIF sono state create appositamente per il web e in linea generale sono meno pesanti delle jpg. Questa tipologia ha una minor scala cromatica rispetto alle jpg ma supporta la trasparenza. Ha infatti un solo bit per la trasparenza e per tanto non ha "gradazioni" di trasparente al contrario delle png24. Come si può vedere dall'immagine qui a sinistra il non avere gradazioni di trasparenza puà creare antiestetici aloni attorno all'immagine (non si ha con le png24 ma con le png8 si). Può inoltre supportare animazioni (vedi gif animate).

°°°GIF animata°°°
Le GIF animate, come si può vedere dall'esempio qui a sinistra, hanno la possibilità di supportare animazioni. Si possono creare con programmi appositi e non con i più classici programmi di grafica base. Supportano la trasparenza ma non ha gradazioni di trasparenza per tanto un pixel o è visibile o non lo è. Spesso le GIF animate vengono utilizzate per creare banner.

°°°PNG8°°°
Le PNG8 sono una tipologia di PNG. Supportano la trasparenza ma senza gradazioni come le gif. Come si può vedere dall'esempio qui a sinistra può quindi capitare che si venga a creare un antiestetico alone attorno all'immagine. Non supporta le animazioni.

°°°PNG24°°°
Le PNG24 sono una tipologia di PNG. Hanno a disposizione ben 24 byte per gestire la trasparenza e questo determina varie gradazioni di questo tipo. Come si può vedere dall'immagine qui a sinistra in questo modo l'immagine si fonde bene con lo sfondo e non vengono creati antiestetici aloni. Questo comporta però un maggior peso dell'immagine.

°°°PNG animate°°°
E' da poco tempo che sono in circolazione le PNG animate. Sono supportate solamente da alcuni browser (IE ancora le visualizza come immagini statiche) e non sono tanti gli elaboratori di immagini che permettono di realizzarle. E' per questi motivi che ancora non sono molto diffuse. La trasparenza è supportata ma ha solamente 1 grado di trasparenza. Non appare però l'alone bianco attorno all'immagine perché viene riempito con i colori dell'immagine stessa. Nell'esempio qui a sinistra potete infatti vedere che la parte rossa è molto più estesa. Se visualizzate un'immagine non animata state usando un browser che non la supporta. Se utilizzate Modzilla Firefox oppure Opera non dovreste avere questo problema.