- Learn
- Guida Fireworks
- Creazione di una interfaccia. Parte I: progettare l’interfaccia
Creazione di una interfaccia. Parte I: progettare l’interfaccia
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 150×50 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.
- Creare un documento 500×300 con sfondo bianco.
- 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
- Disegnare un rettangolo 160x 200 con AR 30 px a partire dal punto V1O1 verso destra Il colore può essere qualunque.
- Disegnare un rettangolo 120×156 a partire dal punto V2O2 verso destra.
- Selezionare entrambi i rettangoli sovrapposti e scegliere Elabora > Unisci > Ritaglio interno
- Disegnare un rettangolo 335×55 con AR 50 px a partire dal V4O3 verso destra
- Selezionare il rettangolo forato e quello appena tracciato e scegliere Elabora > Unisci > Insieme
- 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.
- 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.
- Selezionare tutto e scegliere Elabora > Unisci > Insieme.
- Applicare alla figura ottenuta un riempimento Satin scegliendo il gradiente Rame.
- Attribuirle poi un effetto dal vivo Smusso interno Attenuato con parametri 5 – 75% – 3 – 135 – sollevato.
- Disegnare un rettangolo 260×35 AR 50 px a partire dal punto V6O4 verso destra.
- Applicare a questo rettangolo un effetto dal vivo Rilievo concentrico con parametri 2 – 75% – 2 – 135 deselezionando Mostra oggetto.
- 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.
Se vuoi aggiornamenti su Creazione di una interfaccia. Parte I: progettare l'interfaccia inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
iBlio, oggetti pronti per l’IoT con bluetooth low energy
I dispositivi di iBlio sono pensati per controllare a distanza sensori e attuatori sfruttando la tecnologia bluetooth low energy e […]