Costruire le basi per la progettazione di un sito Web o di un blog in Adobe Illustrator ti offre un modo rapido per prototipare modelli di pagina e aspetto del sito per la tua azienda o per i tuoi clienti. Poiché l’output nitido e nitido degli strumenti di disegno vettoriale produce file di piccole dimensioni, puoi condividere più file con i tuoi programmatori tramite semplici allegati e-mail e archiviare i tuoi progetti senza la necessità di grandi quantità di spazio su disco. Il modo in cui imposti i tuoi file di lavoro è fondamentale per ottenere ottimi risultati.
1
Fare clic sul menu a discesa “File” e scegliere “Nuovo” per creare un nuovo documento di Adobe Illustrator. Assegna un nome al documento e imposta il menu a discesa Nuovo profilo documento su “Web”. Il menu Dimensioni offre automaticamente tre opzioni standard per le dimensioni della pagina del sito Web: “640 x 480”, “800 per 600” e “1024 per 768”. Per creare una dimensione personalizzata, verifica di aver impostato il menu Unità su “Pixel” e inserisci una larghezza e un’altezza nei campi per tali misurazioni.
2
Fare clic sul triangolo accanto ad Avanzate per rivelare le sue opzioni di impostazione. Verificare che il documento utilizzi la modalità colore RGB e gli effetti raster con risoluzione dello schermo a 72 pixel per pollice. Soprattutto, attiva la casella di controllo nella parte inferiore della sezione Impostazioni avanzate in modo che i tuoi oggetti si allineino alla griglia di pixel di Adobe Illustrator. Questa impostazione assicura che quando si utilizzano gli strumenti di disegno di Illustrator, il loro output veramente verticale e orizzontale si allinei con una griglia che corrisponde alla risoluzione dello schermo di 72 ppi utilizzata per la grafica e il design Web, evitando i bordi sfumati che apparirebbero se gli oggetti cadessero tra i limiti dei pixel .
3
Fare clic sul pulsante “OK” per creare il file. Si noti che Adobe Illustrator aggiunge automaticamente un’area di ritaglio che definisce le dimensioni della pagina Web e visualizza i segni di ritaglio agli angoli.
4
Fare clic sul menu a discesa “Finestra” e scegliere “Colore” per visualizzare il pannello con lo stesso nome. Se desideri utilizzare solo colori sicuri per il Web, fai clic sul menu “Flyout” nell’angolo superiore destro del pannello e imposta la visualizzazione dei colori su “RGB sicuro per il Web”.
5
Fai clic sul menu a discesa “Finestra” e scegli “Livelli”. Fare clic sul menu “Flyout” nell’angolo superiore destro del pannello e selezionare “Nuovo livello” per visualizzare la finestra di dialogo Opzioni livello. Per semplificare il tuo lavoro, potresti voler assegnare lo stesso colore di livello a tutti i livelli che contengono tipi specifici di elementi dell’interfaccia del sito web. Assegna un nome a ogni livello che crei in modo da poter identificare quali risorse contiene con uno sguardo al pannello Livelli. Utilizzare sottolivelli con nome per posizionare elementi subordinati all’interno di un livello. Ad esempio, puoi creare un sottolivello chiamato “Casa” all’interno di un livello chiamato “Menu principale”. Potresti trovare più facile creare prima gli elementi e nominarli – o persino organizzarli – in seguito, ma puoi creare i livelli di cui avrai bisogno prima di iniziare il tuo lavoro. Crea un livello chiamato “Etichette”, sul quale creerai elementi di testo che identificano lo scopo di ciascuno degli elementi dell’interfaccia.
6
Fai clic sul menu a discesa “Visualizza”, seleziona il relativo sottomenu “Righelli” e scegli “Mostra righelli” per visualizzare i righelli orizzontali e verticali calibrati per corrispondere al sistema di misurazione basato sui pixel nel documento. Le guide righello risiedono su livelli specifici, quindi fai clic sul livello a cui desideri assegnare le guide per assicurarti che finiscano nella posizione corretta.
7
Trascina le guide del righello dal righello orizzontale o verticale corrispondente sulla tavola da disegno, in corrispondenza delle posizioni e delle dimensioni degli elementi dell’interfaccia. Per posizionare le guide in posizioni precise, fai clic sul menu a discesa “Visualizza”, seleziona il relativo sottomenu “Guide” e disattiva “Blocca guide”. Dopo aver selezionato una guida con uno strumento di selezione, è possibile posizionarla utilizzando i campi di misurazione nel pannello Controllo o Trasforma.
8
Usa il pannello Colore per mescolare l’ombra che desideri utilizzare per un singolo oggetto o un insieme di oggetti. Fare clic sul menu “Flyout” nell’angolo in alto a destra del pannello Colore e scegliere “Crea un nuovo campione” per creare un campione di colore cliccabile dal colore selezionato. Per impostazione predefinita, Adobe Illustrator utilizza la formula del colore RGB del tuo colore come nome per il tuo campione. Ignora il valore predefinito per assegnare nomi di campioni significativi, come “Home menu principale” o “Riquadro barra laterale”.
9
Seleziona il primo livello su cui desideri aggiungere gli elementi della pagina Web. Utilizzare lo strumento Rettangolo per disegnare caselle per gli elementi del menu. Puoi fare clic sulla tavola da disegno per visualizzare la finestra di dialogo Rettangolo e inserire una larghezza e un’altezza esatte per il tuo oggetto. Le tue caselle possono rappresentare elementi dell’interfaccia o segnaposto effettivi che indicano le dimensioni in cui apparirà un elemento dell’interfaccia.
10
Seleziona lo strumento “Tipo” e premi “Ctrl-T” per aprire il pannello Carattere. Imposta il tuo carattere tipografico su un carattere sicuro per il Web, un segnaposto o un carattere tipografico che apparirà sulle tue pagine Web tramite un sistema di sostituzione del tipo come Cufon o Typekit.
11
Passa al tuo livello Etichette e identifica gli elementi dell’interfaccia con singole etichette composte. Usa un colore contrastante per questi elementi di tipo in modo che non si fondano con i tuoi elementi di design.
12
Salvare il file con un nome di documento descrittivo che identifichi il sito Web, il client e lo scopo del layout. Invia il file al tuo programmatore per ulteriori sviluppi.