Creare sprite per CSS con Photoshop

Avete presente quel leggero ritardo nel mostrare l'immagine di rollover che a volte si avverte posizionando il mouse su un pulsante di un sito? È, come ben sapete, dovuto al tempo necessario perché quell'immagine venga caricata nella memoria cache del browser.

Possiamo ovviare a questo fastidioso problema creando una particolare immagine detta sprite. Uno sprite non è che un un'unica immagine composta da tutte le immagini che compongono i diversi stati di un pulsante, ordinate in un una data griglia. Essendo questa particolare immagine caricata una sola volta in cache, renderà immediatamente disponibili gli stati di rollover dei pulsanti.

Vedremo in questo articolo, quindi, come realizzare una serie di pulsanti raffiguranti le classiche "bandierine" per la scelta della lingua del sito, partendo dalla creazione e ottimizzazione dei file di Photoshop fino al relativo file CSS necessario a creare gli effetti di rollover dei pulsanti.

Creiamo per prima cosa il codice HTML di base:

Definiamo, quindi, le dimensioni del div che conterrà la frase "Scegli la lingua" e le nostre tre "bandierine". Diciamo che il div contenitore avrà dimensioni 360px per 24px.

Passiamo quindi a creare l'immagine necessaria in Adobe Photoshop.

Lavorare su Photoshop

Apriamo il programma e creiamo un nuovo file da 360px per 24px:

Aggiungiamo uno sfondo selezionando l'intera immagine tramite la combinazione di tasti Mela+A su Mac o CTRL+A su Windows, e riempiamo con un grigio medio tramite il menu Immagine - Modifica riempi - Grigio al 50%: ci sarà utile come riferimento visivo quando applicheremo gli stili di livello.

Rinominiamo il livello in "sfondo" e facciamo doppio click sul livello alla destra del nome per aprire la finestra di stile livello.

Portiamoci sulla voce Sfumatura e cliccando sull'anteprima della sfumatura andiamo a modificarla.

Cliccando in prossimità del centro della sfumatura andremo a creare due ulteriori stop colore per la nostra sfumatura, e, numericamente, li andiamo a posizionare, rispettivamente, al 49% e al 51%.

Impostiamo i colori da sinistra verso destra dei quattro stop colore con i seguenti valori: #262626, #737373, #8c8c8c, #d9d9d9:

L'utilizzo degli stili di livello ci permette di poter modificare in qualsiasi momento le impostazioni della sfumatura.

Creiamo ora un nuovo livello e selezioniamo la strumento Selezione rettangolare; scegliamo la modalità in "dimesione fissa" impostandone la larghezza a 48px e la l'altezza a 24px. Selezioniamo una porzione dell'immagine sulla destra. Portandoci sul righello verticale cliccando e mantenendo premuto, trasciniamo una guida sul bordo sinistro della selezione. Posizioniamo le guide anche sui bordi superiore, inferiore, e destro. Avremo così una guida per disegnare un rettangolo di 48x24.

Impostiamo il colore di primo piano sul bianco e selezioniamo lo strumento Rettangolo in modalità "forma livello". Affidandoci alle guide creiamo un rettangolo di 48x24 px sul lato destro dell'immagine. Rinominiamo il livello in "spagnolo hover" e impostiamo il metodo di sovrapposizione colore su "luce soffusa":

Duplicate il livello e, con lo strumento Sposta, spostatelo alla sinistra del precedente. Rinominate il livello "francese hover". Trascinate una guida verticale sul lato sinistro del livello come riferimento. Duplicate quest'ultimo livello e rinominatelo "inglese hover", trascinate un ultima guida sul lato sinistro del livello come riferimento:

Creiamo infine un ultima selezione sul livello "sfondo" da 96x24 px sulla sinistra della nostra immagine, e trasciniamo una guida sul lato destro della selezione:

Creiamo ora un nuovo livello e rinominiamolo "spagnolo". Creiamo con lo strumento Rettangolo in modalità "forma livello" un rettangolo leggermente più piccolo all'interno del primo rettangolo creato dalle guide, sulla destra dell'immagine, che identificano il livello "spagnolo hover".

Con un doppio click sulla miniatura colore del livello impostiamo il colore sul rosso, ci servirà solamente come riferimento visivo nella palette livelli.

Tramite la combinazione di tasti Mela+T su Mac oCTRL+T su PC, impostate le misure del rettangolo appena creato a 24x16px.

Rimanendo sul livello "spagnolo" selezionate con lo strumento Selezione rettangolare in modalità normale l'area racchiusa dalle guide corrispondente al livello "spagnolo hover". Passando allo strumento Sposta centrate il rettangolo in orizzontale e in verticale tramite i pulsanti di allineamento nella barra delle opzioni strumento:

Facciamo doppio click alla destra del nome del livello e apriamo la finesra di stile livello. Selezioniamo la sovrapposizione sfumatura e impostiamo, come visto in precedenza, gli stop colore rispettivamente al 25% colore rosso, al 26% colore giallo, al 74% colore giallo, e al 75% colore rosso:

Aggiungiamo una leggera ombra per staccare. Impostatene i valori come in figura:

Duplicate il livello e rinominatelo "francese". Impostatene lo stile di livello in modo da ricreare i colori e l'orientamento della bandiera francese. Spostate e centrate all'interno delle guide che delimitano il livello "francese hover" come visto in precedenza.

Fate lo stesso per il livello della bandiera inglese, con la differenza però di dover impostare una serie di livelli sovrapposti che ci serviranno per creare lo "Union Jack", la bandiera del Regno Unito. I livelli saranno in successione:

1. blu pieno
2. trasparente-bianco-trasparente diagonale a sinistra
3. trasparente-bianco-trasparente diagonale a destra
4. trasparente-rosso-trasparente diagonale a sinistra
5. trasparente-rosso-trasparente diagonale a destra
6. trasparente-bianco-trasparente verticale
7. trasparente-bianco-trasparente orizzontale
8. trasparente-rosso-trasparente verticale
9. trasparente-rosso-trasparente orizzontale

L'unica differenza sarà quella di utlizzare gli stop per l'opacità del colore:

Perché non abbiamo semplicemente importato nel livello una immagine della bandiera inglese, vista la sua complessità? Perchè in questo modo ci siamo creati, come tutti i livelli creati finora, una versione basata su forme vettoriali e stili di livello completamente modificabile ma soprattutto senza limite di dimensione o risoluzione. Un'immagine, invece, rimane legata alle sue reali dimensioni in pixel e il suo eventuale ingrandimento o riduzione la portano inevitabilmente a sgranarsi.

Raggruppiamo i livelli che formano la bandiera inglese e rinominiamo il gruppo in "inglese" per comodità.

Spegniamo ora la visibilità dei livelli "spagnolo hover", "francese hover" e "inglese hover".

Iniziamo adesso a creare le slice, le porzioni di immagine, necessarie a creare il nostro sprite. L'immagine sprite sarà composta da un background principale, e tre immagini di bandiere in stato normale e tre in stato hover, per un totale di sette immagini. Le sistemeremo in verticale, su quattro file da due colonne. Iniziamo.

Selezioniamo lo strumento Coltello e tramite le guide create in precedenza sezioniamo l'immagine nella prima porzione da 48x24 px sulla sinistra per creare il background principale del div contenitore:

Ripetiamo per le singole bandiere seguendo le guide impostate in modo da ottenere delle immagini da 48x24 px:

Nel menu File scegliamo Salva per web e selezioniamo la preimpostazioni Gif 64 dithered, esportiamo tutte le "porzioni utente:

Avremo in questo modo esportato tutte le porzioni immagine che abbiamo creato. Dovremo ora esportare le porzioni di immagine delle bandiere nello stato "hover", con il background chiaro, renderemo, quindi, visibili i relativi livelli.

"Accendiamo", dunque, i livelli "spagnolo hover", "francese hover" e "inglese hover".

Nel menu File scegliamo Salva per web, lasciamo le impostazioni di esportazione immagine precedenti e, nella finestra di salvataggio delle immagini, selezioniamo mantenendo premuto il tasto SHIFT tutte e tre le immagini delle bandiere in stato hover e scegliamo nella finestra di salvataggio "Porzioni selezionate" senza dimenticare di aggiungere al nome file "-hover", senza le virgolette.

A questo punto si fermerebbe la "normale" creazione ed esportazione delle porzioni immagine per la creazione dei nostri rollover. Andiamo avanti, invece, con la creazione dello sprite.

Creaimo una nuova immagine che, come abbiamo anticipato, sarà composta da due colonne larghe 48px ciascuna per quattro linee alte 24px ciascuna dove andremo a posizionare le singole immagini appena esportate. La grandezza base delle immagini esportate è di 48x24 px. La nostra immagine sarà, quindi, di 96px (48x2colonne) per 96px (24x4righe).

Apriamo le sette immagini che abbiamo esportato, e in successione, selezioniamole (Mela+A su Mac o CTRL+A su PC) e trasciniamole nello sprite tramite lo strumento sposta. Sistemiamole come nell'immagine allegata:

Esportiamo tramite il menu File - Salva per web utilizzando la preimpostazione Gif 64 dithered. Chiamiamo l'immagine "flags_sprite.gif":

Bene, andiamo a creare il codice CSS per la nostra barra delle lingue.

Il CSS

Per prima cosa impostiamo le dimensioni e un background per il div contenitore. Impostiamo infine l'immagine di sfondo utilizzando il nostro sprite. Ricordiamo che il background principale si trova in basso nella griglia dello sprite, per cui, essendo in un'immagine l'angolo in alto a sinistra il nostro punto x=0 e y=0, la sua posizione sarà x=0 e y=-72 px.

Floattiamo il paragrafo a sinistra per permettere alle bandiere di posizionarsi alla sua destra. Centriamo il testo verticalmente impostandone l'altezza di linea. Azzeriamo i margini e aggiungiamo del padding per scostarlo dai bordi. Impostiamone famiglia di font e colore testo:

Floattiamo il div contenitore delle bandiere a destra in modo da accostrale al bordo destro e ne impostiamo la larghezza come somma delle tre bandiere, 48x3 px = 144px:

Impostiamo sulla classe dei link le caratteristiche comuni a ogni link cominciando dalle dimensioni, le quali dovranno andare a "ritagliare" come fossero una maschera le nostre immagini. Impostiamone il float a sinistra di modo che si accostino l'una all'altra. Impostiamo l'overflow su hidden e l'indentazione testo a -200px, in modo da permettere la lettura dei link agli screen reader ma di nasconderne la vista a video. Impostiamo lo sprite come immagine di sfondo ma senza alcuna ripetizione:

Impostiamo, infine, lo spostamento dell'immagine di sfondo per i diversi stati dei link tramite il selettore id dei singoli lins in base alla griglia dello sprite:

Otterremo, come risultato finale il nostro esempio.

Tutti i file sono disponibili per il download.