CARICAMENTO...
  1. Illustrator CC e il web design: l'accoppiata vincente
  2. Adobe Illustrator: lo strumento Shaper
  3. Adobe XD: un interessante software in beta da tenere d'occhio
  4. Strumenti utili per web designer e sviluppatori
  5. I cardini del design responsivo
1 / 5
Graphic Designer

Illustrator CC e il web design: l'accoppiata vincente

7789 VISUALIZZAZIONI
PUBBLICATO IL: 03 maggio 2017

Il sito web perfetto dovrebbe essere responsivo, graficamente accattivante, leggibile, originale, unico e, per quanto possibile, diverso da tutti gli altri. Insomma, si deve distinguere!



Illustrator CC e il web design

Via dedocomunicazione.it

Non sembra facile ottenere tutto questo, ma c’è un software che può aiutarci nell’impresa. È Illustrator CC e potrebbe diventare il migliore amico di ogni web designer, infatti realizza fantastici layout per il web grazie ad alcune peculiarità e funzionalità. Le caratteristiche che rendono Illustrator CC adatto al web design sono molte, sarebbe impossibile analizzarle tutte, limitiamoci a scorrere le più curiose.

Illustrator CC e il web design

RAGIONARE IN PIXEL

Illustrator CC e il web design

Via Adobe.com

In AI, infatti, è possibile lavorare direttamente per il web sfruttando la funzione di allineamento dei pixel in modo da esportare una grafica nitida e pulita. Attivando questa proprietà, tutti i segmenti orizzontali e verticali dell’oggetto vengono allineati alla griglia dei pixel: in questo modo si ottengono tratti nitidi.

Se si prevede di salvare una grafica in formato bitmap è possibile vedere in anteprima come Illustrator divide gli oggetti in singoli pixel, per farlo è sufficiente andare sul menu Visualizza e scegliere la voce anteprima pixel.

STRUMENTO TRASFORMA

I classici strumenti che permettono di ruotare, spostare e scalare la grafica possono collaborare nella creazione di una grafica adattabile ai pixel in maniera precisa ed essere utili quando si progetta per il web. Illustrator infatti lavora con i vettori, di conseguenza possiamo modificare le proprietà degli elementi grafici a seconda delle proprie necessità.

RIUTILIZZARE LA GRAFICA

Una soluzione per perdere poco tempo è riutilizzare le stesse icone su più progetti. Quasi ogni sito, oggi, ha le icone che rimandando ai social network. Queste icone possono ragionevolmente essere utilizzate su più progetti ed il bello è che Illustrator ci permette di “riciclarle” creando la copia di un simbolo ed inserendola nel pannello simboli.

Ma non è tutto! Poniamo il caso di essere quasi alla fine di un progetto e di aver utilizzato lo stesso simbolo più volte. Il nostro cliente ci chiede di modificarne il colore. Bisogna cambiarlo manualmente a ciascun simbolo?

La risposta è no. Se lo abbiamo salvato nel pannello dei simboli, è sufficiente cambiare quello originale e tutti gli altri, di conseguenza, subiranno le medesime modifiche.

LA SCALA A 9 PORZIONI

In ActionScript, impostando un valore per la proprietà scale9Grid di un oggetto di visualizzazione, viene attivata la modifica in scala a 9 porzioni per tale oggetto e viene definita la dimensione dei rettangoli che formano la griglia. Sostanzialmente, andiamo a dividere il nostro elemento in 9 aree uguali. Queso potrebbe essere un valido aiuto per scalare in modo appropriato gli oggetti in maniera che compaiano ordinatamente sulla tua pagina web. Utilizziamo l’esempio di un banner che contiene il testo al suo interno: grazie a questa scala, è possibile aumentare o diminuire le dimensioni del banner senza modificare il testo. È anche possibile scalare l’altezza del testo ma non la sua larghezza o viceversa.

FONT PER IL WEB

typekit

Via Typekit

Non perdere tanto tempo a cercare il font perfetto che sia anche adattabile alle pagine web. Questa ricerca diventa molto più agile se si ricorre a Font Typekit, dove per ogni font viene indicato l’utilizzo più indicato.

GENERARE ED ESTRARRE AUTOMATICAMENTE IL CODICE CSS

Illustrator CC e il web design

Via webdesignerdepot.com

Illustrator CC e il web design vanno a braccetto, tanto che è possibile esportare il codice CSS per singoli oggetti oppure per interi layout realizzati in Illustrator. Il bello è che si può anche effettuare l’operazione inversa: partendo direttamente dalla grafica vettoriale viene creato il codice CSS in modo che il codice creato contenga tutte le specifiche (colori e sfumature comprese) dell’oggetto in questione.

GENERARE IL CODICE CSS DELL’INTERO PROGETTO

L’aspetto interessante all’interno di Illustrator è che si può ottenere il codice di tutto il progetto creato con un semplice clic. Il codice andrà poi spostato all’interno di un foglio di stile HTML per poi creare il sito vero e proprio.

FILE SVG (Scalable Vector Graphics)

Illustrator CC e il web design

Questo tipo di file permette di scalare oggetti grafici rendendoli, tra l’altro, comprimibili dai browser. In Illustrator è possibile salvare in formato SVG responsive. Gli SVG tradizionali non permettevano di modificare le dimensioni senza perdere alcune proprietà dell’immagine originale quindi, dovendo adattare la stessa grafica a monitor e device differenti , si poteva fare poco per salvaguardare proporzioni e nitidezza. Un file in formato SVG responsive permette, invece, di modificare le dimensioni dell’oggetto in HTML.

Se proprio preferisci continuare a non avere a che fare con la progettazione di siti internet ricorda che puoi andare incontro alle esigenze dello sviluppatore che lavora nel tuo team semplicemente sfruttando le potenzialità che Illustrator ti mette a disposizione. In questo modo risparmierete entrambi tempo, fatica e anche denaro.

Illustrator CC e il web design non dovrebbero avere più segreti ora che abbiamo analizzato queste funzionalità. Tutto quello che resta da fare è sperimentare e convincersi che anche un grafico può affacciarsi al mondo del design per siti web senza timori.

Illustrator CC e il web design: l'accoppiata vincente

FOCUS TAG

COMMENTI (1)

emanuela.zacchia@live.it
28 settembre 2017 - 11:55
Grazie veramente illuminante

Lascia un commento


Pubblica commento

Total-Photoshop è di proprietà di Logic Media s.r.l.
Via Staurenghi 37, 21100 Varese - Telefono e Fax: 0332.288642 - P.iva: 03269350124