Immagini Web con trasparenze e aloni

La trasparenza consente di creare immagini non rettangolari per il Web. La trasparenza dello sfondo, supportata dai formati GIF e PNG, mantiene i pixel trasparenti nell’immagine in modo che lo sfondo della pagina Web sia visibile attraverso le aree trasparenti dell’immagine. Poiché il formato JPEG non supporta la trasparenza, potete specificare un colore alone per simulare l’effetto di trasparenza dell’immagine originale.

Pulsante con e senza trasparenza
Pulsante per il Web senza trasparenza (a sinistra) e con trasparenza (a destra)

L’alone di sfondo, supportato dai formati GIF, PNG e JPEG, simula la trasparenza riempiendo o fondendo i pixel trasparenti con un colore alone uguale al colore di sfondo della pagina Web. L’alone di sfondo dà buoni risultati se lo sfondo della pagina Web è un colore in tinta unita e se ne conoscete le caratteristiche.

Per creare una trasparenza o un alone di sfondo nell’immagine ottimizzata, l’immagine di partenza deve contenere delle trasparenze. Per creare una trasparenza, potete creare un nuovo livello o usare la Gomma per sfondo o la Gomma magica.

Quando lavorate con i file GIF o PNG-8, potete creare trasparenze con contorni netti, in cui tutti i pixel dell’immagine originale con una trasparenza superiore al 50% diventano completamente trasparenti nell’immagine ottimizzata, mentre tutti i pixel con un’opacità superiore al 50% diventano completamente opachi. Usate la trasparenza con contorni netti quando non conoscete il colore di sfondo della pagina Web o quando lo sfondo contiene texture o pattern. Tuttavia, questo tipo di trasparenza può creare bordi scalettati nell’immagine.

Immagine GIF con e senza trasparenza con contorni netti
Immagine GIF senza trasparenza con contorni netti (a sinistra) e con trasparenza con contorni netti (a destra)

Conservare la trasparenza di sfondo di un’immagine GIF o PNG

I formati GIF e PNG-8 supportano un solo livello di trasparenza; i pixel possono cioè essere completamente trasparenti o completamente opachi, ma non parzialmente trasparenti. Il formato PNG-24 supporta invece le trasparenze multilivello; ovvero, in un’immagine è possibile avere fino a 256 gradi di trasparenza, da opaco a completamente trasparente.

  1. Aprite o create un’immagine con trasparenza e scegliete File > Salva per Web.
  2. Nella finestra di dialogo Salva per Web, selezionate GIF o PNG-8 come formato di ottimizzazione.
  3. Selezionate Trasparenza.
  4. Per il formato GIF e PNG-8, specificate come trattare i pixel semitrasparenti dell’immagine originale. Potete sfumare questi pixel con un colore alone o creare una trasparenza con contorni netti.

Creare un’immagine GIF o PNG con alone

Se conoscete il colore di sfondo della pagina Web in cui verrà visualizzata l’immagine, potete usare la funzione alone per riempire o fondere i pixel trasparenti con un colore alone uguale al colore dello sfondo della pagina Web.

  1. Aprite o create un’immagine con trasparenza e scegliete File > Salva per Web.
  2. Nella finestra di dialogo Salva per Web, selezionate GIF o PNG-8 come formato di ottimizzazione.
  3. Effettuate una delle seguenti operazioni per i formati GIF e PNG-8:
    • Per mantenere completamente trasparenti i pixel trasparenti e fondere con il colore alone i pixel semitrasparenti, selezionate Trasparenza. Questa opzione impedisce il verificarsi dell’effetto alone quando si inserisce un’immagine con anti-alias sullo sfondo di una pagina Web diverso dallo sfondo dell’immagine. Inoltre, evita la formazione di bordi scalettati provocati dalle trasparenze con contorni netti.

    • Per riempire i pixel trasparenti con il colore alone e fondere i pixel semitrasparenti con il colore alone, deselezionate Trasparenza.

  4. Selezionate un colore dal menu Alone:
    • Colore contagocce (per usare il colore della casella campione contagocce)

    • Bianco, Nero o Altro (per selezionare un colore con il Selettore colori)

Creare la trasparenza con contorni netti nei file GIF o PNG-8

Usate la trasparenza con contorni netti quando non conoscete il colore di sfondo della pagina Web o quando lo sfondo contiene texture o pattern. Tuttavia, questo tipo di trasparenza può creare bordi scalettati nell’immagine.

  1. Aprite o create un’immagine con trasparenza e scegliete File > Salva per Web.
  2. Nella finestra di dialogo Salva per Web, selezionate GIF o PNG-8 come formato di ottimizzazione.
  3. Selezionate Trasparenza.
  4. Selezionate Nessuno dal menu Alone.

Creare un’immagine JPEG con alone

Poiché il formato JPEG non supporta la trasparenza, potete specificare un colore alone per simulare l’effetto di trasparenza nell’immagine originale. Il colore alone riempie i pixel completamente trasparenti e si fonde con i pixel semitrasparenti. Quando inserite un’immagine JPEG in una pagina Web il cui colore di sfondo corrisponde al colore alone dell’immagine, quest’ultima sembra fondersi con lo sfondo della pagina.

  1. Aprite o create un’immagine con trasparenza e scegliete File > Salva per Web.
  2. Nella finestra di dialogo Salva per Web, selezionate JPEG come formato di ottimizzazione.
  3. Selezionate un colore dal menu Alone: Nessuno o Colore contagocce (per usare il colore della casella campione contagocce), Bianco, Nero o Altro (per selezionare un colore con il Selettore colori).

Se selezionate Nessuno, il colore alone è il bianco.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online