Adobe Illustrator è un programma di disegno che crea la grafica vettoriale per una vasta gamma di usi, tra cui stampa, movimento e web. La grafica vettoriale usano formule matematiche per presentare le immagini, a differenza di altri formati, come GIF, che utilizzano un insieme di punti. Anche se non specificamente progettato come un programma di web design, Illustrator ha strumenti avanzati per l'esportazione grafici creati all'interno del programma per l'utilizzo del sito web e genera anche il codice necessario per la visualizzazione all'interno di un browser.

istruzione

Creazione di un layout

1 Creazione di un documento di Illustrator che è larga 960 pixel con una altezza di vostra scelta a seconda del contenuto e design che avete in mente. Un sito 960 px di larghezza è conforme alla più popolare larghezza di risoluzione del monitor di 1024 px, una volta la barra di scorrimento della finestra e bordi sono presi in considerazione.

2 Creare uno schizzo disegnato a mano del layout visivo di base del tuo sito web se non l'hai già fatto. Questo vi fornirà un utile riferimento per la creazione all'interno di Illustrator.

3 Creare il layout utilizzando gli strumenti di immagine e di testo per un colpo di testa stilizzata. Se il progetto include lo spazio per il testo, come post del blog, lasciare lo spazio in quella zona vuoto o creare un bordo intorno ad esso per un facile delineazione.

4 Aggiungere guide per il vostro disegno per delimitare le diverse sezioni del layout. Questo è molto importante perché si utilizzare tali guide per fare a fette, che definiscono i confini degli elementi sul tuo sito web. Guide può aiutare allineare gli oggetti con precisione. Fare clic sul righello verticale o orizzontale e trascinare il mouse per cui si desidera che la guida per essere collocata.

5 Doppio controllo il posizionamento delle vostre guide per precisione e accuratezza. Disegnare più se necessario separare ogni elemento, come le immagini di navigazione che saranno link sul vostro sito.

Generazione di codice

6 Selezionare "Oggetto" dal menu, quindi selezionare "fetta" e scegliere "Create da Guide." Quando vengono create le fette si vedrà piccole scatole nere all'interno di ogni fetta con un numero corrispondente. Selezionare "File" dal menu e scegliere "Salva per Web e dispositivi." Selezionate lo strumento selezione sezioni, che è la seconda icona nel menu degli strumenti nella parte destra dello schermo sotto l'icona della mano. Selezionare tutte le fette.

7 Selezionare le impostazioni di ottimizzazione delle opzioni sul lato destro dello schermo. È possibile scegliere impostazioni predefinite o creare un profilo personalizzato a seconda se si desidera che le immagini siano JPEG, GIF o PNG. È inoltre possibile regolare la qualità delle immagini.

8 Anteprima diverse impostazioni facendo clic sul "2-up" e le schede "4-up". Nell'angolo inferiore di ogni anteprima è possibile visualizzare le informazioni di ottimizzazione, come la dimensione del file e il browser tempo di rendering. Fare clic sul pulsante "Salva". Decidere dove si desidera che le immagini e il codice per essere salvate e selezionare quella zona utilizzando il "Dove:" pulsante.

9 Scegliere il formato per il vostro lavoro. Se siete abili in HTML e desideri solo le immagini, perché si aggiungere il codice in un secondo momento, scegliere "Solo immagini." Se sei un principiante o preferiscono avere il codice HTML generato per voi, scegliere l'opzione "HTML e le immagini". Se si preferisce per il posizionamento degli elementi da organizzare con Cascading Style Sheets, invece di tabelle, selezionare il pulsante "Impostazioni predefinite" e scegliere "Esporta come livelli CSS" nella scheda "Livelli".

10 Aprire il file HTML dall'interno di un browser per visualizzare il vostro lavoro. Modificare i file con un programma di web design.