Scontornare un'immagine

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 ad un prato.

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