Grafica  »  Guide  »  Guida Fireworks 

Questo è il primo di una serie di tutorial che vi aiuteranno a realizzare una vera e propria interfaccia web con tanto di effetti rollover disgiunti e link come quella che potete vedere cliccando qui.

Ho cercato di essere il più chiara possibile nella spiegazione senza dover ricorrere a immagini e per riuscirci ho usato alcune convenzioni che dovrete tenere presenti durante tutti i tutorial:

• le dimensioni delle figure verranno date nella forma 150x50 dove il primo numero si riferisce sempre alla larghezza e il secondo all'altezza;
• AR indica il valore della rotondità degli angoli dei rettangoli arrotondati;
• per indicare i punti di riferimento nei tracciati uso l'intersezione delle linee guida verticali e orizzontali: per esempio V3O5 indica il punto in cui si incontrano la terza linea verticale (da sinistra) e la quinta orizzontale (dall'alto);
• Per brevità i parametri degli Effetti dal vivo vengono riportati uno di seguito all'altro come si presentano nella finestra partendo dall'alto a sinistra.

1. Creare un documento 500x300 con sfondo bianco.
2. Impostare le seguenti linee guida e bloccarle

• Verticali: 10 - 30 - 150 - 160 - 170 - 220 (pixel dal bordo sinistro)
• Orizzontali:10 - 32 - 40 - 50 - 85 - 95 - 125 - 188 - 210

3. Disegnare un rettangolo 160x 200 con AR 30 px a partire dal punto V1O1 verso destra Il colore può essere qualunque.
4. Disegnare un rettangolo 120x156 a partire dal punto V2O2 verso destra.
5. Selezionare entrambi i rettangoli sovrapposti e scegliere Elabora > Unisci > Ritaglio interno
6. Disegnare un rettangolo 335x55 con AR 50 px a partire dal V4O3 verso destra
7. Selezionare il rettangolo forato e quello appena tracciato e scegliere Elabora > Unisci > Insieme
8. Selezionare lo strumento Penna: cliccare su V6O6 e trascinare, tenendo premuto MAIUSC, fino al punto V5O6. Rilasciare il mouse. Spostarsi su V5O7 e cliccare. Spostarsi su V5O6 e cliccare. Spostarsi su V6O6 e cliccare. La forma si chiude. Togliere il contorno e, se necessario riempire di colore.
9. Sempre con lo strumento Penna: cliccare su V5O2 e trascinare, tenendo premuto MAIUSC, fino al punto V5O3. Rilasciare il mouse. Spostarsi su V6O3 e cliccare. Spostarsi su V5O3 e cliccare. Spostarsi su V5O2 e cliccare. La forma si chiude. Togliere il contorno e, se necessario riempire di colore.
10. Selezionare tutto e scegliere Elabora > Unisci > Insieme.
11. Applicare alla figura ottenuta un riempimento Satin scegliendo il gradiente Rame.
12. Attribuirle poi un effetto dal vivo Smusso interno Attenuato con parametri 5 - 75% - 3 - 135 - sollevato.
13. Disegnare un rettangolo 260x35 AR 50 px a partire dal punto V6O4 verso destra.
14. Applicare a questo rettangolo un effetto dal vivo Rilievo concentrico con parametri 2 - 75% - 2 - 135 deselezionando Mostra oggetto.
15. Eliminare le linee guida e salvare il documento.

Questa lezione ci ha permesso di creare la struttura. Nella seconda parte impareremo a creare i pulsanti da inserire.

Altri articoli

Altre guide

Altre newsletter