Come progettare siti web in Illustrator

February 27

Come progettare siti web in Illustrator


Adobe Illustrator è un programma di illustrazione grafica vettoriale che permette di creare immagini vettoriali e forme con una varietà di strumenti e filtri grafici. Utilizzare Illustrator per progettare il look e l'aspetto del tuo sito web, e quindi esportare le immagini da Illustrator a un programma di costruzione pagina web.

istruzione

1 Creare un nuovo documento in Adobe Illustrator. Impostare la larghezza di 960 pixel e impostare il "Modo colore" su "RGB". Dare un nome al documento e fare clic su "OK".

2 Utilizzare lo strumento rettangolo per creare un layout di base. Disegnare rettangoli grigi all'interno del bordo nero "tavola da disegno" per corrispondere a elementi grafici e testuali che si desidera includere nella vostra pagina web. Regolare il layout fino a quando si è soddisfatti, e salvare il lavoro.

3 Creare linee guida intorno alle vostre caselle grigie. Per creare una linea guida, cliccare sui righelli orizzontali o verticali ai bordi dello schermo e trascinare il mouse sopra l'area di lavoro. Rilasciare il mouse per impostare la guida. È possibile regolare nuovamente guide cliccando e trascinandoli con il mouse.

4 Eliminare i caselle grigie; verrà lasciato con uno spazio di lavoro vuoto delineato da diverse guide.

5 Creare gli elementi grafici della vostra pagina web, come loghi, icone e testo mock-up utilizzando la tavolozza degli strumenti Adobe Illustrator. Utilizzare le linee guida quando si posiziona i tuoi elementi grafici sulla pagina web. Una volta terminata la creazione l'aspetto visivo del tuo sito web, salvare il lavoro.

6 Selezionare "Guide" dal menu "Visualizza" e cliccare su "Guide Clear" per cancellare tutte le guide sul vostro schermo. Sarà necessario creare nuove guide per salvare i singoli elementi del vostro mock-up per l'uso sul web.

7 Scegli una sezione del tuo sito web mock-up, come ad esempio il menu di navigazione o le icone grafiche, e trascinare una nuova serie di guide intorno a questa sezione in modo che ogni singolo elemento della sezione è incapsulato in una scatola.

8 Selezionare "Slice" dal menu "Oggetto" e fare clic su "Crea da Guide." I numeri vengono visualizzati nelle caselle create; queste caselle sono grafici "fette" che possono essere salvati come immagini singole per l'uso in una pagina web. Selezionare "Salva per Web e dispositivi" dal menu "File" per aprire una nuova finestra di dialogo.

9 Clicca su "fetta strumento di selezione" nella finestra "Salva per Web e dispositivi". Selezionare le fette da esportare cliccando su di essi nella finestra del visualizzatore. Impostare il "Tipo di immagine" a "JPEG" e fare clic su "Salva" per salvare le fette come singole immagini.

10 Ripetere i passaggi 6 a 9 per creare immagini individuali di tutti gli elementi grafici della vostra pagina web. Una volta che avete gli elementi grafici salvati, importarli in un programma di progettazione di pagine web come Adobe Dreamweaver.

Consigli e avvertenze

  • Per creare le fette da singoli elementi della tua pagina web design senza l'utilizzo di guide, utilizzare lo strumento di selezione per trascinare una casella intorno all'elemento, quindi selezionare "Slice" dal menu "Oggetto" e fare clic su "Crea dalla selezione."
  • Adobe Illustrator è un'applicazione grafica e può solo progettare gli elementi visivi di un sito web. Per costruire un sito web completo, avrete bisogno di un programma di costruzione del sito Web come Adobe Dreamweaver.