Utilizzare trasparenze e aloni

Ultimo aggiornamento il 12 gen 2022

Informazioni sulle immagini web trasparenti e opache

La trasparenza rende possibile creare immagini non rettangolari per il web. La trasparenza dello sfondo, supportata dai formati GIF e PNG, preserva i pixel trasparenti nell'immagine e consente allo sfondo della pagina web di essere visibile attraverso le aree trasparenti dell'immagine. (Anche se il formato JPEG non supporta la trasparenza, puoi specificare un colore di sfondo per simulare l'aspetto della trasparenza nell'immagine originale.)

Pulsante web senza trasparenza (sinistra) e con trasparenza (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.

GIF senza trasparenza dai bordi netti (sinistra) e con trasparenza dai bordi netti (destra)

Preservare la trasparenza dello sfondo in un'immagine GIF o PNG

I formati GIF e PNG‑8 supportano un solo livello di trasparenza—i pixel possono essere completamente trasparenti o completamente opachi, ma non parzialmente trasparenti. (Al contrario, il formato PNG‑24 supporta la trasparenza multilivello; cioè, puoi avere fino a 256 gradi di trasparenza in un'immagine, che vanno dall'opaco al completamente trasparente.)

Apri o crea un'immagine contenente trasparenza e scegli File > Salva per web.
Nella finestra di dialogo Salva per web, selezionare GIF, PNG‑8 o PNG‑24 come formato di ottimizzazione.
Selezionate Trasparenza.
Per i formati GIF e PNG‑8, specifica come trattare i pixel parzialmente trasparenti nell'immagine originale. Puoi fondere questi pixel con un colore opaco o creare una trasparenza dai bordi netti.

Creare un’immagine GIF o PNG con alone

Quando conosci il colore di sfondo della pagina web su cui verrà visualizzata un'immagine, puoi usare la funzione alone per riempire o fondere i pixel trasparenti con un colore alone che corrisponde allo sfondo della pagina web.

Apri o crea un'immagine contenente trasparenza e scegli File > Salva per web.
Nella finestra di dialogo Salva per web, selezionare GIF, PNG‑8 o PNG‑24 come formato di ottimizzazione.
Effettuate una delle seguenti operazioni per i formati GIF e PNG-8:
  • Per mantenere trasparenti i pixel completamente trasparenti e fondere i pixel parzialmente trasparenti con il colore alone, seleziona Trasparenza. Questa opzione previene l'effetto alone che vedi quando posizioni un'immagine con anti-alias su uno sfondo di pagina web diverso dallo sfondo dell'immagine. Questa opzione previene anche i bordi dentellati della trasparenza dai bordi netti.

  • Per riempire i pixel trasparenti con il colore opaco e fondere i pixel parzialmente trasparenti con il colore opaco, deseleziona Trasparenza.

Selezionate un colore dal menu Alone:
  • Colore contagocce (per usare il colore nella casella campione del contagocce)

  • Bianco, Nero o Altro (per selezionare un colore usando il selettore colore)

Crea trasparenza dai bordi netti in un file GIF o PNG‑8

Usa la trasparenza dai bordi netti quando non conosci il colore di sfondo di una pagina web o quando lo sfondo della pagina web contiene una texture o un motivo. Tuttavia, tieni presente che la trasparenza dai bordi netti può causare bordi frastagliati nell'immagine.

Apri o crea un'immagine contenente trasparenza e scegli File > Salva per web.
Nella finestra di dialogo Salva per web, selezionare GIF o PNG‑8 come formato di ottimizzazione.
Selezionate Trasparenza.
Selezionate Nessuno dal menu Alone.

Creare un’immagine JPEG con alone

Sebbene il formato JPEG non supporti la trasparenza, puoi specificare un colore alone per simulare l'aspetto della trasparenza nell'immagine originale. Il colore opaco riempie i pixel completamente trasparenti e si fonde con i pixel parzialmente trasparenti. Quando inserisci il JPEG in una pagina web con uno Sfondo che corrisponde al colore alone, l'immagine sembra fondersi con lo Sfondo.

Apri o crea un'immagine contenente trasparenza e scegli File > Salva per web.
Nella finestra di dialogo Salva per web, selezionare JPEG come formato di ottimizzazione.
Seleziona un colore dal menu Alone: Nessuno, Colore Strumento Contagocce (per usare il colore nella casella campione dello Strumento Contagocce), Bianco, Nero, o Altro (per selezionare un colore usando il Selettore colore).

Se selezionate Nessuno, il colore alone è il bianco.