Animiamoci con i CSS! - III Parte

Buon pomeriggio e buon ferragosto a tutti.

Oggi termineremo il nostro menù CSS realizzando le immagini con Photoshop! (finalmente direte voi!!!). Il nostro menù è un menù per il web, quindi le immagini andranno ottimizzate e salvate per il web al fine di ottenere il minimo peso (in Kb) per la pagina che ospiterà il nostro menù. (Questo accorgimento andrebbe fatto per tutte le immagini di un sito web, più le immagini sono leggere più il sito si caricherà velocemente). Inoltre le immagini andranno salvate in png che gestisce le trasparenze.

Rivediamo velocemente il menù da realizzare: 

1. Home
2. Blog
3. Video
4. Curriculum
5. Contatti

Avremo bisogno di 5 immagini png, una per ogni bottone! Il procedimento è molto semplice, basterà disegnare 5 rettangoli di pari dimensioni, dargli il colore di sfondo deisderato, tagliare la parte sinistra aiutandoci con la forma del cerchio, scrivere i testi, unire i livelli testo con i rispettivi livelli dei bottoni e salvare tutti i livelli ottenuti! Ok ok... vediamo meglio nel dettaglio:

PASSO 1: apriamo photoshop e creiamo un nuovo documento abbastanza grande da contenere tutto il menù (diciamo 500x300 px). Andiamo sul menù laterale sinistro e scegliamo la forma del rettangolo. Dal menù sulla barra orizzontale in alto dovrebbero comparire le diverse forme, scegliamo il rettangolo. Cliccando sulla freccetta dell'ultima forma ("Strumento Forma Personale") spuntiamo dimensione fissa e impostiamola a 300x20 px (ovviamente potete scegliere liberamente le dimensioni che preferite). Confermiamo la dimensione e clicchiamo sul nostro livello di sfondo per creare la nuova forma. Ora duplichiamo la nostra forma 4 volte e mettiamo quelle ottenute una sotto l'altra con distanza di circa 1 o 2 px. Dovremmo ottenere una cosa simile:

Mi raccomando assicuratevi che i rettangoli siano equidistanti tra loro.

PASSO 2: colorate i rettangoli! Come? doppio click sul quadratino nero (se i vostri rettangoli sono neri) del livello relativo al rettangolo. Si aprirà la finestra con i colori, sceglietene uno per ogni rettangolo. Dovreste ottenere una cosa simile:

PASSO 3: prendete lo strumento testo, scegliete un font, dimensione adeguata ed un colore ed iniziate a scrivere le voci del vostro menù. Ogni voce deve avere un proprio livello di testo! Una volta scritte tutte le voci posizionatele nei bottoni allineandole a tutte a destra. Ora dobbiamo unire il livello testo con il relativo livello bottone (testo "home" con bottone più in altro, testo "portfolio" con secondo bottone ecc). Per unire due livelli basta selezionarli entrambi tenendo premuto "Ctrl" e cliccando poi con il destro sul livello forma e selezionare "Unisci livelli". Dovremmo ottenere 5 livelli (più uno dello sfondo), uno per ogni bottone. Ecco qua il risultato:

PASSO 4: manca solo il taglio della parte sinistra dei bottoni per formare la curva. Prendiamo lo strumento forma, selezioniamo l'ellisse e, sempre cliccando sulla freccetta, scegliamo "Cerchio". Disegnamo un cerchio di dimensioni adeguate sopra l'ultimo livello. Dovreste ottenere una cosa simile:

Per farvi vedere meglio il risultato ho colorato il cerchio di grigio. Ora clicchiamo col destro sul livello del cerchio e selezioniamo "Rasterizza livello". Ora dobbiamo selezionare il livello del cerchio e sottrarlo a tutti i livelli dei bottoni. Quindi "Ctrl" e Click sul livello del cerchio per evidenziarlo. Una volta che sarà selezionato dobbiamo cliccare su ogni livello e premere "Canc" (ci sono altri metodi per farlo ma mi è sembrato il più semplice da intraprendere). Fatto questo cancelliamo il livello del cerchio e rendiamo invisibile il livello sfondo. Ecco cosa si ottiene: (immagine salvata in png, quindi trasparente e senza sfondo rispetto a quelle sopra)

PASSO 5: abbiamo quasi finito. Dobbiamo solo salvare tutti i nostri livelli in png ed è fatta. Importante salvarli tutti come rettangoli delle dimensioni precedentemente impostate (quindi 300x20px). Creiamo un nuovo documento Photoshop delle dimensioni di 300x20 ed incolliamoci uno alla volta ilivelli dei bottoni. Allineamoli a destra, nascondiamo lo sfondo e salviamoli (uno alla volta) per il web facendo attenzione a scegliere il formato png. Ecco l' esempio del bottone about me (la prima immagini in jpg, la seconda in png con sfondo nascosto):

Dovrebbe essere tutto, le nostre immagini sono pronte per essere caricate e date come sfondo alle classi dell'elenco in Html! Vi assicuro che è più facile farlo che spiegarlo! Problemi?

Incomprensioni? Frustrazioni? Scriveteci e tutto sarà (forse =D) risolto!