Allora... Comincio...
_Passo 1 : organizzare le foto
La creazione della struttura è molto semplice, se si predispongono già le foto ordinate secondo la posizione che occuperanno nella gallery, per capirci meglio riporto lo schema delle cartelle di questa gallery:
risorse
<DIR> alianti
- ALIANT10.jpg
- ALIANT11.gif
- ALIANT12.JPG
- ALIANT13.jpg
- ALIANT17.jpg
- ALIANT18.jpg
<DIR>
castelli- CASTL084.jpg
- CASTMNT.JPG
- CASTTRA.JPG
- DRENA.JPG
- FONTA.JPG
<DIR>
egizi- EGI1.JPG
- EGI12.JPG
- EGI14.GIF
- EGI2.JPG
- EGI4.JPG
- EGI6.JPG
<DIR>
natura
<DIR> fiori
- FIORI15.JPG
- FIORI17.JPG
- FIORI20.JPG
- FIORI21.JPG
- FIORI25.JPG
<DIR>
fulmini- LAMPO.JPG
- NATURA070.jpg
- NATURA087.jpg
- NATURA088.jpg
- NATURA089.jpg
- alianti.JPG
- cast.jpg
- egizi.jpg
- natura.jpg
Come si può notare, dentro la cartella risorse vi sono le 4 immagini che servono come anteprima per le sotto-gallery (Alianti, Castelli, Egizi, Natura). Le immagini delle sotto-gallery sono contenute rispettivamente in 4 cartelle dello stesso nome.
Volendo si può iterare la struttura, come per esempio in Natura, dove vi sono due immagini per le categorie Fiori e Fulmini, con altrettante cartelle contenenti appunto le immagini delle due sotto-gallery.
Spero che fin qui sia abbastanza chiaro... 
Quindi passiamo alla fase 2... 
_Passo 2 : creazione gallery
Prima di tutto creiamo una cartella chiamata webgallery (molto originale lo so 
).
Dopodiché possiamo finalmente aprire Photoshop.
Come già spiegato egregiamente da Mat, andiamo su File -> Automate -> Web Photo Gallery...
Si apre la finestra di dialogo, dove possiamo settare le varie impostazioni per la nostra gallery.
Rifacendomi sempre alla solita gallery di esempio, utilizzeremo lo stile Simple - Thumbnail Table, per creare la gallery principale ed anche per i livelli successivi di navigazione.
Per questo utilizzeremo una gallery in html che sarà facile da modificare.
Per le gallery vere e proprie, che si trovano alla fine, dove verranno mostrate le foto di una certa categoria, potremo anche utilizzare le gallerie in flash, che potranno essere personalizzate come già spiegato da Mat 
.
Ora analizziamo le impostazioni da dare nella finestra di dialogo.
La differenza sostanziale con il tutorial precedente è che seguiremo la struttura creata in precedenza, quindi selezioniamo
Use: Folder e diamo il percorso della nostra cartella risorse, dove si trovano le anteprime per le sotto-gallery.
A questo punto una cosa importante è quella di assicurarci di non aver messo la spunta su Include All Subfolders, altrimenti PS includerà tutte le immagini presenti in risorse, mentre noi vogliamo solo le anteprime.
Come cartella di destinazione scegliamo la cartella webgallery creata in precedenza.
Ora passiamo alla sezione Options:
Le categorie che ci interessano per ora sono soltanto Banner e Thumbnails.
In Banner scriviamo semplicemente il nome della galleria, in questo caso Web gallery ed eventualmente le altre informazioni, che io personalmente ho tralasciato.
In Thumbnails impostiamo la dimensione delle immagini di anteprima delle categorie, su quante colonne e righe si devono disporre ed eventualmente la dimensione del bordo.
Direi che non ci resta che cliccare su OK.
Attendiamo che PS faccia il suo lavoro, dopodiché dovrebbe aprire nel browser una galleria simile a questa:
Ci sono almeno due cose da rivedere: la prima è che se impostiamo le dimensioni a 200px per le anteprime, il titolo della gallery risulta troppo piccolo a confronto... Poi magari vorremmo avere la possibilità di cambiare il colore del bordo e di aggiungere un commento sotto la foto (che nel nostro caso sarebbe il titolo della sotto gallery).
Tutto questo lo vedremo dopo quando ci addentreremo nel codice html
Ora che abbiamo creato il primo livello, creiamo le sottogallery.
Partiamo dalla gallery Alianti. Lo stesso procedimento si applica invariato per Castelli ed Egizi.
Entriamo nella cartella webgallery. Osserviamo il contenuto:
webgallery
<DIR> images
<DIR> pages
- alianti.html
- cast.html
- egizi.html
- natura.html
<DIR>
thumbnails- index.html
- photos.js
- photos.xml
- UserSelections.txt
Le cartelle
images e
thumbnails le ho tralasciate perchè non ci interessano.
Entriamo nella cartella
pages e cancelliamone il contenuto, dopodiché creiamo 4 cartelle con i nomi delle 4 sotto-gallery,
alianti,
castelli,
egizi e
natura (diamo i nomi minuscoli che è meglio
).
Ora riapriamo PS, andiamo sempre in
File -> Automate -> Web Photo Gallery....
Per questa gallery, visto che non contiene altri livelli, possiamo scegliere lo stile che vogliamo, anche flash volendo...
Ora spostiamoci dentro la cartella
risorse e selezioniamo come cartella di partenza
alianti e come destinazione la cartella
alianti appena creata dentro
pages.
Per quanto riguarda le
Options, nella sezione
Banner, diamo un titolo diverso, per esempio "Alianti".
Questa volta potremmo volere modificare le impostazioni delle immagini vere e proprie della galleria, per questo rimando al primo post di Mat
.
Clicchiamo su
OK ed osserviamo il risultato nel browser.
Se non ci piace, possiamo sempre portarci dentro la cartella
pages/alianti e cancellarne interamente il contenuto, dopodiché ripetere l'operazione precedente, modificando a piacimento i diversi parametri.
Ora possiamo ripetere l'operazione per altre gallerie senza sotto-gallery, in questo esempio
Castelli ed
Egizi.
Vediamo ora come creare un ulteriore livello per la gallery
Natura.
Per quanto riguarda questa gallery, sceglieremo di nuovo lo stile
Simple - Thumbnail Table e valgono le stesse considerazioni della gallery principale.
Alla fine, per le gallery
fiori e
fulmini, visto che sono le ultime della struttura potremo crearle come le gallery
Alianti,
Castelli ed
Egizi, quindi potremo applicare qualsiasi stile. Io per semplicità ho sempre tenuto lo stesso.
Alla fine dovremmo avere questa struttura:
webgallery
<DIR> images
<DIR> pages
<DIR> alianti
<DIR> images
<DIR> pages
<DIR> thumbnails
- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
castelli
<DIR> images
<DIR> pages
<DIR> thumbnails
- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
egizi
<DIR> images
<DIR> pages
<DIR> thumbnails
- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
natura
<DIR> images
<DIR> pages
<DIR> fiori
<DIR> images
<DIR> pages
<DIR> thumbnails
- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
fulmini
<DIR> images
<DIR> pages
<DIR> thumbnails
- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
thumbnails- index.html
- photos.js
- photos.xml
- UserSelections.txt
<DIR>
thumbnails- index.html
- photos.js
- photos.xml
- UserSelections.txt
Ecco siamo arrivati alla fine del lavoro con PS.
Ora la gallery è creata... o quasi...
In effetti per ora ha un enorme difetto, semplicemente non funziona!
Questo perché dobbiamo dare i collegamenti giusti modificando l'html, inoltre curiosando un po' nel codice scopriremo come personalizzare ulteriormente la nostra gallery secondo i nostri gusti, scherzo
Visto che non è un corso di html (anche perché non saprei farlo...
) vedremo solo come cambiare il colore del bordo, la grandezza del titolo ed aggiungeremo i titoli delle sezioni... Questo però alla prossima puntata, ora me ne vado a dormire
Spero di non essere stato troppo pedante, di sicuro mi sono dilungato, ma mi piacciono i tutorial molto precisi, anche a costo di essere banali, quindi ho spiegato tutto nel dettaglio (almeno spero).
Cmq la parte divertente deve ancora arrivare
Ciaooooo
Anteros
6
Anteros, il Jan 31 2008, 02:02 PM, ha scritto:
