Comunicazione Visiva: ricostruire lo schema geometrico di uno stampato cartaceo e di un sito web con Adobe Illustrator
Continua oggi il nostro corso di comunicazione visiva, con l’implementazione di quanto analizzato nella lezione precedente, intitolata Architettura di una griglia di Layout.
Quest’oggi cercheremo di ricostruire nella pratica lo schema geometrico di un sito web utilizzando Adobe Ilustrator CS3.
Ecco il video tutorial della lezione
Di seguito vi riporto anche una guida scritta passo a passo …
Partiamo con un esempio concreto:
Prendiamo lo ScreenShoot di una pagina che ci piace molto, nel mio caso ho scelto quello di un mio lavoro.
STEP – 1: Impostiamo Illustrator
Per prima cosa dovremo predisporre il nostro ambiente di lavoro, quindi apriamo illustrator e creiamo un nuovo documento delle dimensioni dell’immagine da voler elaborare.
Come faccio ad avere lo ScreenShoot di una pagina web di tutta la sua dimensione?
Per catturare l’immagine da schermo basterà premere il tasto STAMP sulla tastiera ed aprire un qualsiasi editor per immagini (anche paint) ed incollarla li dentro.
Altrimenti potrete utilizzare due ottimi programmi gratuiti: ScreenSnapr e Tumbalizr.
Dove trovo le dimensioni dell’immagine?
Inserite lo ScreenShoot in una cartella e con un click singolo su di essa, troverete nella barra a lato della cartella, tutti i suoi dettagli, tra cui anche il formato in PIXEL.
Ora non ci resta che entrare in Illustrator e creare un nuovo documento andando nel menu File -> Nuovo (New) oppure semplicemente premendo CTRL + N.
Fissiamo Larghezza (Width) a 700 px e Altezza (Height) a 667 px, ovviamente l’unità di misura (Units) dovrà essere imposta in pixels con una modalità di colore (Color Mode) fissata su RGB.
STEP-2: Importiamo la nostra immagine
Una volta premuto OK per la creazione del nuovo documento, dovremo importare l’immagine su cui lavorare.
Per fare ciò dirigiamoci nel menu FILE e selezioniamo la voce Inserisci (Place) ed andiamo ad importare la nostra immagine.
STEP-3: Alcuni ShortCut
Gli shortcut sono delle abbreviazioni a richiami di funzioni del programma e servono per snellire la fase di sviluppo.
- ALT + Rotella centrale del mouse = zoom in avanti o indietro
- SPACE (barra spaziatrice) + Selezione del mouse (click del mouse su un’area) = spostamento sul piano della nostra immagine
- CTRL + R = Visualizzazione dei righelli sia verticale che orizzontale
- CTRL + U = Smart Giude (linee guida) servono per visualizzare i punti di ancoraggio e posizionare le immagini in modo più preciso sulla nostra tavola
STEP-4: Creiamo la griglia degli oggetti
Per questione di ordine andiamo a creare un nuovo livello (CTRL + L) di lavoro su cui operare, andando nella paletta dei livelli e facendo click su crea nuovo livello.
Attiviamo i righelli premendo in sequenza i tasti CTRL + R, ed andiamo a tracciare delle righe orizzontali e verticali sulla nostra immagine per evidenziare le parti essenziali che la compongono.
Nel mio caso, per esempio avrò diverse aree distinte tra:
- banner
- menu
- contenuto del sito
- chiusura della pagina
Per disegnare le linee azzurre che vedete nell’immagine qui sotto dovrete posizionarvi sul righello e tenendo premuto il tasto sinistro del mouse, tirate una linea verso il basso.
Così facendo potrete creare la griglia riportata in figura, la stessa tecnica funziona diverse volte e in caso di errore per cancellare l’ultima riga tracciata premete CTRL + Z.
STEP-5: Disegnamo i BOX
Creiamo un altro livello di lavoro sul quale andremo ad evidenziare bene le aree principali della pagina.
Attiviamo le linee guida premendo CTRL + U ed andiamo a selezionare lo strumento rettangolo dalla barra laterale dell’applicazione.
Poi non resta che disegnare i rettangoli come in figura:
STEP-6: Nominiamo i BOX
Ora creiamo un ulteriore livello ed andiamo a selezionare lo strumento testo dalla barra degli strumenti.
E nominiamo ogni box creato.
STEP-7: Misuriamo le dimensioni dei BOX
Siamo arrivati all’ultimo step.
Non resta che misurare la dimensione dei Box, per far ciò dirigiamoci nel menu alto ed entriamo nella voce Finestra (Window) ed andiamo a selezionare Navigatore (Navigator).
Si aprirà il box corrispondente, l’unico problema è che l’unità di misura è il pixel, pertanto per avere una migliore precisione dovremo impostare il millimetro.
Premiamo il tasto desto del mouse, sul tab INFO ed andiamo a selezionare la voce Preferenze (User Interface Preferences), nella tendina andiamo a premere sulla voce Unità di misura ed andiamo ad impostare il millimetro.
Ora possiamo liberamente ottenere la misura precisa di ogni songolo box, semplicemente selezionandolo col mouse.
Un tutorial semplice ed intuitivo utile per capire come impostare i nostri lavori sia web che cartacei.
Per chi avesse bisogno di un manuale utente, di Adobe Illustrator consiglio la lettura di questo PDF messo a disposizione gratuitamente da Adobe.
Si ringrazionano i prof. Enrico Delitala e la prof. Paola Trapani
per la fornitura del materiale didattico.
Altri articoli correlati:
Alberto TrussardiFondatore del progetto webfandom, è un Web Designer freelance di Bergamo che collabora in tutta Italia con diverse aziende nel campo dello sviluppo web e marketing online. Ama l’arte e la poesia, due ottime compagne che lo aiutano a trovare ispirazione per i lavori che svolge.
![Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]](http://www.webfandom.com/wp-content/uploads/2010/05/texture_vecchia_carta-150x150.jpg "Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]")
……. Adesso mi spieghi come hai fatto a parlare 10 minuti di fila senza sbagliare ….
Complimenti come al solito è molto chiaro sia lo scritto che il video.
Ottimo proverò a farlo.
???
Poi alla fine rileghi tutto sotto forma di eBook vero
Ovvio Ste!!
@Federico: l’ho rifatto 20 volte alla fine è uscita una cosa orecchiabile … Almeno non ci sono intoppi nel discorso.
Grande!!! A dopo ciao!
Bhe Albe ho avuto la conferma che sei un pazzo! XD XD
Complimenti manca solo l’hd al al video e poi è perfetto.
Ecco è pronto: http://www.youtube.com/watch?v=VzHzRK-lZcU&feature=player_profilepage
Direi ottimo articolo complimenti.
Complimenti, quando vedo i tuoi tutorial imparo sempre qualche cosa di nuovo.
Complimenti Albi! Veramente fatto bene e chiaro! Good Job!
sai come far apparire il navigatore in modo da poter modificare anche la x e y? perchè a me appare una finestra dove però non mi è permesso regolare le coordinate…
devi selezionare il punto d’incontro degli assi dei righelli e trascinarlo al punto di ancoraggio dell’immagine nel vertice alto-sinistro….
… Spero di essere stato chiaro, nel video è mostrato.
Ottimo tutorial come sempre SHARE IT!!
Complimenti per il video e per i post: tutti molto interessati! Seguo il tuo corso veramente con piacere
Buon lavoro!