[Video] Realizza con Illustrator il tuo layout web perfetto

realizzare-layout-web-illustratorImmagine originale tratta da Fotolia
Tempo stimato di lettura: 2 minuti, 0 secondi
Pubblicato il 3 novembre 2014

Illustrator è un ottimo strumento che realizza fantastici layout per il web grazie ad alcune caratteristiche e funzionalità che  posizionano box ed immagini in modo preciso in termini di pixel, cosa fondamentale per poi tradurre il design realizzato in una pagina web.

Illustrator, a differenza di Photoshop utilizzando i vettori; di conseguenza possiamo modificare le proprietà degli elementi grafici a seconda delle esigenze e dei progetti. Se hai lavorato su un progetto stampa e poi devi utilizzare gli stessi elementi grafici per un progetto web o mobile puoi facilmente ridimensionare e scalare la grafica senza perdere la qualità dell’immagine.

Il web è sempre in evoluzione e continuo cambiamento e sempre più ci sono dei dispositivi che supportano differenti risoluzioni video e se devi creare un progetto per questi dispositivi illustrator ti permette di cambiare facilmente la dimensione o scalare le immagini per adattarlo alle diverse risoluzioni.

Prima di passare alla fase di disegno sul software è buona cosa prepararci un pochino, realizzando a mano due elementi fondamentali della progettazione di un sito web:

  • La mappa sito;
  • Una bozza del layout del sito a mano per capire come sarà implementato il layout per il web e ciò che riporterai poi in maniera più appropriata e corretta con illustrator.

Questa fase è importante per stabilire la dimensione di base del tuo layout e per capire se devi utilizzare una struttura a griglia e tante altre cose che devi già sapere nel momento in cui disegni il tuo layout.

Nel Video vi mostro:

  1. come realizzare i box del layout e soprattutto come posizionarli correttamente all’interno di esso grazie al Pannello Trasforma che permette di posizionare gli elementi utilizzando l’asse X e l’asse Y della nostra tavola di disegno;
  2. come fare delle vere e proprie operazioni di calcolo all’interno del pannello Trasforma per calcolare l’esatta distanza dall’asse X e Y
  3. come utilizzare la funzione sezione di Illustrator per creare delle aree segmentate predefinite che ci permettono poi di inserire gli elementi grafici facilmente nella fase successiva;
  4. come creare multi-pagine o tavole di disegno multiple, come gestirle, duplicarle e modificarle grazie al Pannello Tavole Disegno.

Illustrator ci permette di realizzare un ottimo progetto web grazie a queste funzioni e caratteristiche implementate dagli sviluppatori proprio per utilizzarlo come strumento di design e progettazione web. Conoscevi queste funzioni? A presto con un altro videotutorial!

  • Non ho mai fatto un sito con Illustrator, forse vale la pena approfondire anche se io mi trovo bene con Photoshop che tra l’altro ha tutte le funzioni menzionate nel video a parte i calcoli delle coordinate x-y

Shares