Siete maniaci della griglia?
La mazzetta Pantone è li, sempre pronta a portata di mano? Conoscete a memoria il numero della tipografia di fiducia? Beh, se siete tutto questo (e altro ancora) è molto probabile che il vostro mondo ruoti attorno alla grafica per la stampa.
Ma se un giorno vi venisse la voglia di provare a fare grafica per il web?
Siete pronti per sperimentare? Avete le nozioni necessarie per preparare un layout da passare allo sviluppatore? Sapete da cosa iniziare?
Il passaggio dalla stampa al web non è semplice né totalmente indolore, ma con alcune semplici regole vi daremo una mano per evitare gli errori più grossolani nei quali solitamente incorre chi, per la prima volta, prova a creare un layout web.
Prendete carta e penna quindi, cominciamo:
SOFTWARE
Per quanto possa apparire banale, mi è capitato di parlare con persone che volevano usare Illustrator o InDesign per fare il proprio sito web, quindi non lo do per scontato e lo metto come punto iniziale della lista. Per fare un sito web vi serve un software come Photoshop, Gimp o quello che vi pare, purché lavori con immagini bitmap e, soprattutto, che sia utilizzato anche dal programmatore che poi dovrà mettere mano al vostro layout. Per un periodo ho lavorato con uno sviluppatore che usava Gimp per tagliare e montare i miei layout, ed era il delirio perché, per quanto sia free e capace di fare tanto, Gimp non è minimamente paragonabile al software di casa Adobe, e nell’aprire i miei file il programmatore perdeva l’80% di quello che era il mio lavoro. Ci siamo dovuti accordare e ho provveduto io a fare i tagli che servivano.
RISOLUZIONE
Nella stampa la risoluzione ideale è 300dpi o giù di li, a seconda del formato (più e grande più scende la risoluzione, come nel caso dei manifesti 6x3mt) affinché non ci sia perdita di definizione. Per la grafica web è sufficiente lavorare a 72dpi, non servono immagini enormi per apparire belli online.
UNITÀ DI MISURA
Nel web il concetto di millimetri e centimetri non esiste, si usa il pixel, che sta per “Picture Element”, ovvero la cosa più piccola che possiamo trovare su un monitor. Mettetevi bene in testa che mezzo pixel non esiste.
Il vostro layout di partenza, quindi, dovrà tener conto del pixel come unità di misura.
Attualmente si parte da un layout che abbia come larghezza 940px circa, ma si lavora in modo tale da far si che il layout sia flessibile, ovvero che, a risoluzioni di monitor maggiore, non si perdano dettagli lateralmente.
Per ovviare a questa necessità alcuni grafici usano pattern di fondo, c’è chi preferisce colori piatti e chi ancora usa immagini a tutto schermo come background. La risoluzione di partenza è soggettiva e dipende da quale uso si dovrà fare del sito. Se si progetta solo per tablet o smartphone, la risoluzione sarà diversa, ovviamente.
COLORE
Su carta siete stati abituati a usare la quadricromia, CMYK, e la mazzetta pantone per avere la precisione di alcuni colori. Sul web tutto questo non esiste. Dovrete creare un documento in RGB, quindi un metodo di colore additivo, e non potrete avere la certezza che il colore, a video, sarà uguale su tutti i monitor. Il controllo che avete sempre avuto sui vostri colori in fase di stampa, nel web, ve lo dovrete scordare.
Il più delle volte i colori saranno diversi da monitor a monitor, da sistema operativo a sistema operativo e anche da browser a browser. L’unico modo per uscire vivi e immuni da crisi di nervi è quello di fregarsene.
I FONT
Fino ad oggi siete stati abituati a scegliere uno o più font e a utilizzarli come meglio credevate?! Beh, potete anche dimenticarvi questa cosa.
Ogni sistema operativo ha dei font di default che usa per il web. Fino a qualche tempo fa la soluzione stava nei cosiddetti font web safe, ovvero su una lista di font universali da usare senza problemi. Adesso, finalmente, potete usare altri font, come quelli offerti da Google font. Li scaricate e li usate tranquillamente. Sarà poi cura del programmatore integrarli attraverso codice.
Anche per i font l’unità di misura che dovrete adoperare è il pixel e non il punto tipografico. Ricordatevi che il vostro lavoro non andrà in stampa, ma passerà nelle mani di uno o più sviluppatori che “taglieranno” il vostro layout e lo rimonteranno da capo, quindi mantenete i font editabili, senza rasterizzare i livelli di testo, e date i nomi a tutti i livelli, per pietà!!!
Nel web i font sono editabili, selezionabili e scalabili, “vivi” insomma.
Questo non solo per far pesare di meno la pagina che viene caricata, ma anche per permettere lo zoom dei testi, per permettere al layout di scalare, adattandosi alle diverse risoluzioni e, cosa che a volte viene sottovalutata, per permettere a chi non è normodotato, di “leggere” i contenuti delle pagine web con i Browser alternativi. Sistemi che leggono a voce quello che c’è dentro una pagina web.
Con questo voglio solo dirvi che dovrete mantenere, nel creare il vostro sito, un certo equilibrio nell’uso dei font e negli effetti che volete dare loro.
Se non vi interessano i contenuti, e volete che il titolo di pagina abbia un tot di effetti grafici, potete comunque decidere di utilizzare del testo sotto forma di immagine, ma vi consiglio di non abusare di testo sotto forma di immagini.
Evitate di usare font con le grazie sul web. A meno che non li usiate con dimensioni considerevoli e per testi brevi, i font con le grazie sono sconsigliati perché sono difficili da leggere sul monitor, soprattutto a dimensioni ridotte.
STRUTTURA
Il web ha una struttura consolidata alla quale l’utente è ormai abituato. Logo e menù occupano quasi sempre le stesse posizioni. Va bene essere creativi, ma se pensate che posizionare il menù ad X nell’angolo basso in destra del vostro sito sia la soluzione ideale per sfondare sul web, beh, buona fortuna! Il mio consiglio è quello di interfacciarvi sempre col programmatore, che solitamente ha alle spalle qualche anno in più di esperienza nel settore web. Lui vi potrà aiutare a creare una struttura che sia coerente e usabile. Anche comprare qualche buon manuale di grafica per il web è un’ottima soluzione 🙂
ESPORTAZIONE FILE
L’esportazione per il web, attraverso Photoshop, avviene usando il comando “Salva per il web”, perché offre diversi strumenti per il salvataggio ottimale dei file.
I formati più usati sono solitamente 3:
- Jpeg: Usato per immagini fotografiche, ricche di sfumature e dettagli. Solitamente la compressione usata va dal 65% in su. Le Jpeg non supportano le trasparenze;
- Gif: Usato per immagini con trasparenze e per animazioni, è stato quasi del tutto soppiantato dal formato Png. Le gif permettono di salvare immagini che hanno larghe superfici di colore uniforme, senza troppe sfumature, mantenendo un peso contenuto. Il limite di colori consentiti per l’esportazione è di 256
- Png 8 e 24 bit. Permettono di salvare immagini con trasparenze e con più di 256 colori. È un formato versatile e relativamente leggero. Non ha la perdita di definizione delle jpeg, e il limite dei colori delle gif
Nel salvataggio delle immagini per il web, fate diverse prove per capire con quale formato sia meglio esportare una data immagine. Lo strumento “salva per il web” di Photoshop permette di comparare i diversi formati.
MOUSE
Ogni volta che passate il mouse su un pulsante questo, solitamente, cambia il suo stato, si accende. Tutto quello che è “interazione”, nel web, è qualcosa che un grafico ha disegnato e uno sviluppatore ha realizzato.
Se volete che al passaggio del mouse il vostro pulsante si accenda, e che al click dia l’impressione di essere realmente schiacciato, allora dovrete disegnare questi diversi stati. In figura potete vedere il lavoro fatto, per alcuni pannelli, nel sito Fio.psd
Questo è più o meno tutto quello che dovete sapere per partire. Adesso potete affrontare il primo layout web senza paura di sbagliare… ma se c’è qualcosa che manca chiedete pure, siamo qui anche per questo.
