Lavora con noi

Grafica

Siti tematici

Speciali

Photoshop e layout

Grafica » Articoli » Tutorial Photoshop

Pagine:

RSS

Creare sprite per CSS con Photoshop

di: Giuseppe Caruso 16 Novembre 2007

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:

<div class="flags-container">
<p>Scegli la tua lingua</p>
<div class="flags">
<a class="flag" id="english" href="#" title="English">English</a>
<a class="flag" id="french" href="#" title="Français">Français</a>
<a class="flag" id="spanish" href="#" title="Español">Español</a>
</div>
</div>

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:

Figura 1 - Screenshot: creazione di un nuovo file

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%.

Figura 2 - Screenshot: sfumatura