Adobe Illustrator è un programma di progettazione che consente di creare grafica vettoriale per una grande varietà di usi tra cui stampa , moto e web . La grafica vettoriale utilizzano 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 non dispone di strumenti avanzati per esportare grafica creati all'interno del programma per l'utilizzo di web e genera anche il codice necessario per la visualizzazione all'interno di un browser . Cose che ti serviranno
Web design software di editing
Show More Istruzioni
Creazione di un layout
1

Crea un documento di Illustrator che è larga 960 pixel di altezza la tua scelta a seconda del contenuto e il design che avete in mente . Un sito di 960 px di larghezza conforme alla più famosa larghezza risoluzione del monitor di 1024 px , una volta la barra di scorrimento e bordi della finestra vengono prese in considerazione .
2

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

Crea il tuo layout utilizzando l'immagine e gli strumenti di testo per un colpo di testa stilizzata . Se il progetto include lo spazio per il testo, ad esempio blog, lasciare lo spazio in quella zona vuota o creare un bordo intorno ad esso per una facile delineazione .
4

Aggiungi guide per il vostro disegno per delimitare le diverse sezioni del il layout . Questo è molto importante perché si utilizzerà quelle guide per fare le fette , che definiscono i confini degli elementi sul tuo sito web. Le guide possono aiutare allineare gli oggetti con precisione . Fare clic sul righello orizzontale o verticale e trascinare il mouse dove si desidera che la guida per essere collocata .
5

doppio controllare il posizionamento delle vostre guide per precisione e accuratezza . Disegna di più se necessario separare ogni elemento , come le immagini di navigazione che saranno link sul vostro sito .
Generare codice
6

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

Selezionare le impostazioni di ottimizzazione delle opzioni sul lato destro dello schermo . È possibile scegliere le impostazioni predefinite oppure 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 diverse impostazioni di anteprima

facendo clic sulle schede " 2 -up " e "4 - up " . Nell'angolo in basso di ogni anteprima è possibile visualizzare le informazioni di ottimizzazione come la dimensione del file e il tempo di rendering del browser . Fare clic sul pulsante "Salva" . Decidere dove si desidera che le immagini e il codice da salvare e navigare a quella zona utilizzando il " Dove : " pulsante
9

Scegliere il formato per il vostro lavoro . . Se siete esperti in HTML , e solo desidera che le immagini , perché verrà aggiunto il codice per loro più tardi , scegliere " solo immagini. " Se sei un principiante o preferiscono avere il codice HTML generato per voi , scegliete l'opzione " HTML e immagini " . Se si preferisce per il posizionamento degli elementi da organizzare con fogli di stile CSS al posto di tabelle , selezionare il pulsante "Default Settings " e selezionare " Esporta come CSS Livelli" nella scheda " Livelli" .
10 < p > Aprire il file HTML da un browser per visualizzare il vostro lavoro. Modificare i file con un programma di web design .