Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Disegniamo un logo aziendale con Fireworks

Breve tutorial su come controllare la resa dei colori per il Web in Fireworks
Breve tutorial su come controllare la resa dei colori per il Web in Fireworks
Link copiato negli appunti

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:

  1. Creare un nuovo di dimensioni 100x100 e sfondo bianco.
  2. Disegnare un quadrato 20x20
  3. Aprire il pannello riempimento e dal menu a discesa selezionare Dithering Web
  4. 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).
  5. Nelle due vaschette sottostanti si possono vedere i due colori che Fireworks usa per riprodurre il colore scelto (#CC3300 e #CC0000)
  6. Disegnare altri quadratini delle stesse dimensioni prelevando i colori in punti diversi dell'immagine
  7. Disporre i vari quadrati uno dopo l'altro in file ordinate.
  8. Esportare l'immagine come file GIF salvandola in una cartella in cui possa essere ritrovata facilmente.
  9. Aprire il pannello Campioni colori e dal menu delle opzioni (freccia nera in alto a destra) scegliere Aggiungi campioni colore.
  10. 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.


Ti consigliamo anche