Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 17 di 66
  • livello principiante
Indice lezioni

Creazione di una interfaccia. Parte I: progettare l'interfaccia

Nella prima parte useremo gli strumenti descritti fino ad ora per disegnare un'interfaccia.
Nella prima parte useremo gli strumenti descritti fino ad ora per disegnare un'interfaccia.
Link copiato negli appunti

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
  1. Disegnare
    un rettangolo 160x 200 con AR 30 px a partire dal punto V1O1 verso destra Il
    colore può essere qualunque.
  2. Disegnare
    un rettangolo 120x156 a partire dal punto V2O2 verso destra.
  3. Selezionare
    entrambi i rettangoli sovrapposti e scegliere Elabora > Unisci >
    Ritaglio interno
  4. Disegnare
    un rettangolo 335x55 con AR 50 px a partire dal V4O3 verso destra
  5. Selezionare
    il rettangolo forato e quello appena tracciato e scegliere Elabora >
    Unisci > Insieme
  6. 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.
  7. 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.
  8. Selezionare
    tutto e scegliere Elabora > Unisci > Insieme.
  9. Applicare
    alla figura ottenuta un riempimento Satin scegliendo il gradiente Rame.
  10. Attribuirle
    poi un effetto dal vivo Smusso interno Attenuato con parametri 5 - 75% -
    3 - 135 - sollevato.
  11. Disegnare
    un rettangolo 260x35 AR 50 px a partire dal punto V6O4 verso destra.
  12. Applicare
    a questo rettangolo un effetto dal vivo Rilievo concentrico con parametri 2
    - 75% - 2 - 135 deselezionando Mostra oggetto.
  13. 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.

Ti consigliamo anche