Grafica  »  Guide  »  Guida Fireworks 

Passiamo a creare la struttura di base del layout, cioè la barra orizzontale e quella verticale in cui troveranno posto i menu. Creiamo un nuovo documento 760x420 pixel con sfondo bianco e risoluzione 72 pixel/pollice. trasciniamo due linee guida orizzontali a 100 px e a 115 px, e una verticale a 150 px. tracciamo poi due rettangoli entrambi senza contorno e con colore di riempimento #FFCC00:

1. dimensioni 782x120 px, posizione X = -22, Y = -20
2. dimensioni 172x334 px, posizione X = -22, Y = 85

Selezioniamo i due rettangoli e uniamoli (Elabora > Combina tracciato > Insieme).

Spostiamoci in una parte vuota del documento e creiamo la figura di ritaglio al cui interno troverà posto il logo. Per ottenerla tracciamo un cerchio 125x125 senza contorno e con un colore di riempimento qualsiasi. Sempre con il cerchio selezionato, scegliamo lo strumento Coltello e tracciamo una linea orizzontale che lo divida in due. Cancelliamo quindi la parte inferiore.

tracciamo un rettangolo con gli angoli arrotondati 210x43, smusso 50, senza contorno e con un qualunque colore di riempimento.
Posizioniamo il rettangolo in X = 250, Y = 202 e il semicerchio in X = 313, Y = 140. Selezioniamoli entrambi e scegliamo Elabora > Combina tracciato > Insieme.

La figura ottenuta deve essere spostata in posizione X = 9, Y = 18 (se la figura dovesse risultare sotto ai rettangoli portarla in primo piano usando il pannello Livelli). Selezioniamo tutto e scegliamo Elabora > Combina tracciato > Ritaglio interno. Con la figura gialla ottenuta ancora selezionata dal pannello Ispezione Proprietà impostiamo Effetti > Smusso e rilievo > Smusso interno con i seguenti parametri: forma = Liscio, larghezza = 7, contrasto = 75%, morbidezza = 3, angolo = 135, preimpostazione pulsante = Sollevato.

Salviamo il documento nella cartella "originali" con il nome interfaccia.png

Per finire apriamo il file logo.png, selezioniamo tutto e copiamo. Chiudiamo quindi logo.png e incolliamo in interfaccia.png. Con il logo selezionato scegliamo Elabora > trasformazione > trasformazione numerica > Ridimensiona, verifichiamo che entrambe le opzioni siano attive e impostiamo l'altezza su 90.

Portiamo il logo in posizione X = 17, Y = 23, verifichiamo la riuscita del lavoro controllando l'anteprima nel browser (tasto F12) e salviamo.

Altri articoli

Altre guide

Altre newsletter