Share
Questo tutorial è perfetto per gli utenti di Adobe Illustrator di livello intermedio o intermedio. Tratteremo come impaginare un sito web e prepararlo per l'uso sul web. Inoltre, utilizzeremo il Freebie degli elementi del sito Web recentemente rilasciato per simulare il design.
Inizia un Nuovo documento con una larghezza di 960px e un'altezza di tua scelta. Ho scelto questa larghezza perché questo sito Web probabilmente incorrerà nel traffico internet che ha monitor da medio a grande. Una larghezza di 960 pixel è una dimensione sicura che favorirà la maggior parte dei visitatori. Infine, imposta il tuo Modalità colore a RGB.
Il bordo nero mostra la dimensione del documento (chiamata la tavola da disegno) che abbiamo creato. Mi piace posizionare uno screenshot vuoto di una finestra del browser sul proprio livello mentre sto progettando, per avere una buona idea di come sarà il mio sito Web una volta terminato.
Il prossimo passo è molto importante. Assicurati di sapere a quale zoom stai visualizzando il documento. Quando tutto è stato detto, il tuo sito web sarà visto al 100%. Sentiti libero di ingrandire e rimpicciolire mentre lavori sul tuo layout, ma assicurati che tutti gli elementi di testo e di disegno siano leggibili se visualizzati al 100%. Utilizza il menu a discesa evidenziato sotto (o digita semplicemente la percentuale desiderata) per modificare lo zoom su.
Sidenote: a volte Adobe Illustrator diventa difficile e non mostra i numeri mentre vengono digitati nell'area di zoom evidenziata di seguito. Ad esempio, se digiti il 58% a volte i numeri non cambiano mentre stai digitando. In questo caso, premi semplicemente Invio dopo aver inserito i tuoi valori e il tuo documento verrà ridimensionato al numero inserito.
La tavola da disegno può essere spostata tra visibile e invisibile andando a Visualizza> Nascondi tavola da disegno. Il problema è che ci vuole un po 'più di tempo per mostrare e nascondere le guide (Comando + Tasto punto e virgolaQuindi, trovo il modo migliore per usare le guide e nascondere la tavola da disegno. Nel corso della stesura di un intero sito web, sarà molto più semplice premere un comando rapido anziché andare nella parte superiore dello schermo e selezionare da un elenco ogni volta.
Potresti trovare facile stabilire un equilibrio e una bella gerarchia disegnando inizialmente semplici caselle grigie sulla tua pagina. I rettangoli sottili rappresentano dove intendo usare il testo mentre le grandi caselle grigie saranno immagini.
Dopo aver un'idea generale di come apparirà il layout, puoi aggiungere guide e rimuovere le caselle grigie.
Usando solo le guide come riferimento, aggiungi altri elementi come navigazione, testo e stringi dove andranno il logo, le immagini e le icone. È utile attivare e disattivare le guide (Comando + Tasto punto e virgola), mentre si sta rifinendo il layout. Se le guide che hai disegnato non funzionano bene come pensavi, regolale definitivamente come meglio credi.
Sidenote: quando si attivano e disattivano le guide, vengono automaticamente bloccate. Non è possibile spostare le guide bloccate. Per sbloccare le guide premere rapidamente Comando + Opzione + Punto e virgola.
Continua a finalizzare la tua intestazione con immagini, icone e grafica.
Di seguito ho deciso di aggiungere un colore azzurro per migliorare l'intestazione.
Aggiungi stile al tuo testo, assicurandoti di decidere quali link e titoli avranno l'aspetto. Trovo molto più facile e veloce realizzare tanti elementi di design all'interno di Illustrator, così posso concentrarmi sulla programmazione e sulla codifica del sito web quando verrà il momento.
Ci sono un paio di modi diversi per preparare un disegno da usare all'interno di un editor WYSIWYG (What You See Is What You Get), come Adobe Dreamweaver. Il primo metodo sta usando le fette. Le fette possono essere fatte usando le guide o una selezione. Per utilizzare le guide per creare delle sezioni, trascina prima le guide sulla pagina attorno a ciascun oggetto che richiederà il proprio collegamento. Ad esempio, un'icona che, quando viene cliccato, passa a una pagina specifica. Sotto ho quattro icone, ciascuna icona condurrà il visitatore a una pagina web o un'area del sito diversa.
Ho disegnato delle guide tra ogni icona e appena fuori dall'area blu. Di solito è più pulito se si disegna le guide di circa 1 o 2 pixel al di fuori dell'area che si sta affettando. Questo assicura che nessuna opera d'arte venga tagliata.
Sidenote: non disegnare guide sull'intero layout in una sola volta. Invece, fai sezioni una alla volta. Ad esempio, prima fai l'area dell'intestazione. Cancella tutte le tue guide andando a Visualizza> Guide> Cancella guide. Salva le tue fette per il web (discusso in una fase successiva) e ripeti questo processo per altre aree del layout.
Una volta che hai disegnato le tue guide, il prossimo passo è di farne delle sezioni. Vai a fare fette dalle tue guide Oggetto> Sezione> Crea da Guide. A volte, Illustrator non può fare fette la prima volta che provi a farlo. Ho scoperto che a volte devo ripetere questo passaggio tre o quattro volte prima che Illustrator realizzi delle sezioni. Sotto, le caselle numerate nere indicano che le fette sono state fatte.
Vai a salvare le tue fette per l'uso su un sito web File> Salva per Web e dispositivi ... Utilizzare il Slice Select Tool (K) evidenziato nell'angolo in alto a sinistra per selezionare le fette specifiche che si desidera salvare. Seleziona più fette contemporaneamente tenendo premuto Maiusc. Regola le impostazioni sulla destra in base alle tue esigenze. Le immagini JPEG funzionano meglio per gli articoli che hanno diversi colori, mentre il formato file GIF funziona bene per gli oggetti che hanno grandi aree di colore e non molti colori in generale, il formato file PNG funziona bene per la grafica trasparente (anche se potrebbe richiedere un lavoro per regolare vecchi browser IE). Si consiglia di testare la qualità rispetto al tipo di file e regolare il Qualità per risparmiare larghezza di banda. Una volta pronto, fai clic Salvare.
Decidi dove vuoi salvare le immagini. Ho scelto il desktop. Sotto formato seleziona Solo immagini, quindi fai clic su Salva.
Sul tuo desktop ora avrai una cartella chiamata immagini. All'interno di questa cartella ci saranno le fette specifiche (immagini) che hai selezionato. Queste immagini sono ideali per la risoluzione e la dimensione del file da utilizzare sul Web.
Cancella le tue guide andando a Visualizza> Guide> Cancella guide. Ora, traccia nuove guide attorno all'area successiva che vuoi tagliare. Lo stato di passaggio del mouse (quando il mouse è sopra la navigazione) sarà rosso, mentre lo stato di disattivazione sarà grigio. Dovrai effettuare entrambe le versioni della navigazione. Per ottenere questo risultato, per prima cosa fai in modo che tutta la tua navigazione diventi rossa File> Salva per Web e dispositivi ...
Seleziona le fette specifiche che vuoi salvare. Poiché la mia navigazione non è composta da immagini o da un'abbondanza di colori, ho deciso che il tipo di file migliore per la navigazione sarà GIF, quindi fai clic su Salvare. Inoltre, tieni presente che se il tuo utente utilizza un font supportato dal web, puoi decidere di utilizzare il testo html al posto delle immagini.
Puoi dare alle tue immagini un nuovo nome a questo punto. Tuttavia, vengono automaticamente denominati per te quindi non è obbligatorio.
Se hai salvato le tue immagini nella stessa posizione di prima, noterai che la cartella Immagini sul desktop ora include le immagini aggiuntive che hai appena salvato.
Tieni presente che questo è solo un possibile flusso di lavoro. In alternativa, puoi inserire gli stati di attivazione e disattivazione in qualche punto del documento, creare tutte le sezioni ed esportarle insieme.
L'altro metodo per creare fette è selezionando un oggetto che poi va a Oggetto> Sezione> Crea da selezione. Anche la creazione di sezioni usando le guide o una selezione va bene. Usa un flusso di lavoro che trovi comodo e migliore per il particolare progetto su cui stai lavorando.
A volte non è necessario includere il testo che rientra in una sezione. Ad esempio, il piè di pagina avrà il testo che viene digitato all'interno dell'editor WYSIWYG. Se questo è il caso, elimina semplicemente il testo prima o dopo aver effettuato le sezioni, ma prima di salvare le sezioni per il web.
Qui sotto noterai che ho cancellato il testo dopo che sono state fatte le fette.
Osserva il sito web finale. Come puoi vedere, la creazione di un sito Web in Adobe Illustrator è semplice ed efficace. Puoi rapidamente sperimentare con il design e dare a questa fase del processo di web design l'attenzione e il pensiero di cui ha bisogno. È possibile visualizzare l'immagine finale qui sotto o visualizzare una versione più grande qui.
Accentsconagua