In fase di progettazione di un sito internet la resa dei colori è sicuramente uno dei problemi principali.
Occorre, per esempio, tenere conto che le piattaforme Windows e Macintosh usano una diversa regolazione Gamma (regolazione che evita che i mezzi toni risultino troppo scuri). In particolare sulle piattaforme Windows i colori risultano sempre più brillanti.
Fireworks mette a disposizione un comando che consente di vedere come risulterà il progetto sulla piattaforma non in uso (Visualizza > Gamma Windows o Visualizza > Gamma Macintosh).
Per immagini a tinte piatte (sfondi , pulsanti, testo, ecc.) l'uso della tavolozza Web-Safe a 216 colori garantisce che i colori usati saranno riprodotti fedelmente da qualsiasi browser e anche con vecchie schede video che supportino al massimo 256 colori.
Ma sapete come si riconosce se il colore scelto è web-safe? Usando la numerazione esadecimale il codice RGB deve contenere solo i valori 00, 33, 66, 99, CC, FF (che nella numerazione decimale corrispondono ai numeri 0, 51, 102, 153, 204, 255).
È comunque possibile ampliare la palette di colori a nostra disposizione usando il web dithering. Il processo di dithering accosta due o più pixel di colore diverso in modo che l'occhio percepisca un colore diverso.
Il Web Dither usato da Fireworks accosta due colori web-safe in modo da produrne un terzo. Questo consente di avere a disposizione 46.656 colori web-safe.
Se nel nostro progetto decidiamo di usare questi colori aggiuntivi risulterà molto utile averli rapidamente a disposizione all'interno di una palette personalizzata. Vediamo con un esempio come mettere in pratica questi concetti.
Stiamo realizzando un progetto per un sito internet e vogliamo usare per l'interfaccia i colori del logo aziendale che è quelle riportato qui sotto. Il processo è estremamente veloce e non ci soffermeremo dunque sulle varie particolarità, ma andremo ad elencare cursoriamente i passaggi necessari
(Il logo e il nome della ditta sono un parto della mia fantasia, qualunque riferimento ad aziende realmente esistenti è quindi da ritenersi puramente casuale.)
Procediamo:
- Creare un nuovo di dimensioni 100x100 e sfondo bianco.
- Disegnare un quadrato 20x20
- Aprire il pannello riempimento e dal menu a discesa selezionare Dithering Web
- Nella pannello compariranno tre vaschette di colore diverse. Partendo dall'alto la prima è quella che permette di scegliere un colore non Web-Safe. Usando il contagocce prelevare il colore dalla scritta del logo (#C8130B).
- Nelle due vaschette sottostanti si possono vedere i due colori che Fireworks usa per riprodurre il colore scelto (#CC3300 e #CC0000)
- Disegnare altri quadratini delle stesse dimensioni prelevando i colori in punti diversi dell'immagine
- Disporre i vari quadrati uno dopo l'altro in file ordinate.
- Esportare l'immagine come file GIF salvandola in una cartella in cui possa essere ritrovata facilmente.
- Aprire il pannello Campioni colori e dal menu delle opzioni (freccia nera in alto a destra) scegliere Aggiungi campioni colore.
- Recuperare il file salvato precedentemente e sotto alla palette Web-Safe 216 compariranno tutti i campioni di colore prelevati dal logo.
Nel pannello Riempimento Dithering Web è presente l'opzione Trasparente. Selezionandola ed esportando l'immagine come GIF o PNG con trasparenza indice o trasparenza alfa è possibile ottenere l'effetto di un vero riempimento colorato trasparente.
Attenzione: se si usa un colore in Dithering Web per un contorno impostato su Antialiasing o Morbidezza il colore non sarà più Web-Safe.
