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 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.