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!
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
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
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
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)
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.
