Guida utente Annulla

Creare gallerie di foto per il Web

Nota:

Per creare delle gallerie per il Web con Photoshop CS5, consultate Creare una galleria di foto per il Web nell’Aiuto di Adobe Bridge. Per utilizzare il precedente plug-in facoltativo della Galleria di foto per Web descritto negli argomenti seguenti, scaricatelo e installatelo per Windows o Mac OS.

Le gallerie di foto per il Web

Una galleria di foto per il Web è un sito Web costituito da una home page con immagini in miniatura e pagine con immagini in dimensioni reali. Ogni pagina contiene dei collegamenti che consentono ai visitatori di navigare nel sito. Ad esempio, quando un visitatore fa clic su un’immagine in miniatura nella home page, viene caricata una pagina della galleria con l’immagine associata in dimensioni reali. Tramite il comando Galleria di foto per Web potete generare automaticamente una galleria di foto per il Web da un gruppo di immagini.

Home page della galleria di foto per Web in Photoshop
Home page della galleria di foto per Web

Photoshop offre molti stili da selezionare con il comando Galleria di foto per Web. Se avete una buona conoscenza del codice HTML, potete creare un nuovo stile o personalizzare uno stile esistente modificando un gruppo di file di template HTML.

Ciascun template degli stili della galleria include diverse opzioni. Se usate uno stile predefinito, alcune opzioni potrebbero non essere disponibili.

Creare gallerie per il Web con Adobe Bridge

Adobe Bridge offre funzioni aggiornate per la creazione di gallerie di foto per il Web. Per istruzioni, consultate Creare gallerie Web nell’Aiuto di Adobe Bridge o guardate le esercitazioni di seguito.

Utilizzare il precedente plug-in facoltativo per Photoshop

  1. Scaricate e installate il precedente plug-in della Galleria di foto per Web per Windows o Mac OS.

  2. (Facoltativo) In Adobe Bridge selezionate i file o la cartella che desiderate usare.

    Le immagini verranno visualizzate nell’ordine in cui appaiono in Bridge. Se preferite un ordine diverso, potete modificarlo in Bridge.

  3. Effettuate una delle seguenti operazioni:

    • In Adobe Bridge, scegliete Strumenti > Photoshop > Galleria di foto per Web.

    • In Photoshop, scegliete File > Automatizza > Galleria di foto per Web.

  4. Scegliete uno stile per la galleria dal menu a comparsa Stili. Nella finestra di dialogo viene visualizzata in anteprima la home page con lo stile selezionato.

  5. (Facoltativo) Immettete un indirizzo e-mail come informazione di contatto per la galleria.

  6. Scegliete i file sorgente per la galleria dal menu Usa.

    Immagini selezionate da Bridge

    Usa le immagini selezionate prima di aprire la finestra di dialogo Galleria di foto per Web.

    Cartella

    Usa le immagini da cartelle selezionate con il pulsante Sfoglia (Windows) o Scegli (Mac OS). Selezionate Includi tutte le sottocartelle per includere anche le immagini all’interno delle sottocartelle.

  7. Fate clic su Destinazione e selezionate una cartella in cui memorizzare le immagini e le pagine HTML per la galleria. Quindi fate clic su OK (Windows) o Scegli (Mac OS).

  8. Selezionate le opzioni di formattazione per la galleria per il Web. Scegliete una voce dal menu Opzioni per visualizzare i diversi set di opzioni. Consultate Opzioni di Galleria di foto per Web.

  9. Fate clic su OK. Photoshop posiziona i seguenti file HTML e JPEG nella cartella di destinazione:

    • Una home page per la galleria denominata index.htm o index.html, a seconda delle opzioni specificate in Estensione. Per visualizzare la galleria in anteprima, aprite questo file in qualsiasi browser Web.

    • Le immagini JPEG, in una sottocartella per le immagini.

    • Le pagine HTML, in una sottocartella per le pagine.

    • Le immagini in miniatura JPEG, in una sottocartella per le miniature.

Verificare che i colori corrispondano

Se lavorate con foto in uno spazio colore di lavoro con gamma ampia come ProPhoto RGB o Adobe RGB, i colori delle immagini potrebbero risultare diversi in una galleria di foto per Web visualizzata da un browser che non sia in grado di leggere i profili colore incorporati. In tal caso, provate a convertire i profili immagine in sRGB (utilizzato per impostazione predefinita dalla maggior parte dei browser) prima di ottimizzarli o includerli in una galleria di foto per Web. Li potete convertire in sRGB in uno dei seguenti modi. Può essere una buona idea lavorare con una copia delle immagini.

Se usate Elaboratore immagini, potete salvare i file direttamente in formato JPEG nella dimensione desiderata. In questo caso, accertatevi di disattivare Ridimensiona immagini nelle opzioni di Immagini grandi.

Generale

Opzioni per le estensioni dei file, la codifica e i metadati.

Estensione

Consente di specificare .htm o .html come estensione del nome del file.

Usa codifica UTF-8 per l’URL

Consente di usare la codifica UTF-8.

Aggiungi attributi di larghezza e altezza per le immagini

Consente di specificare le dimensioni, riducendo il tempo necessario per lo scaricamento.

Mantieni tutti i metadati

Consente di conservare tutti i metadati.

Banner

Opzioni di testo per il banner che compare in ogni pagina della galleria. Immettete il testo necessario per ciascuna delle seguenti voci:

Nome sito

Il nome della galleria.

Fotografo

Il nome della persona o dell’organizzazione che ha realizzato le foto della galleria.

Info di contatto

Informazioni di contatto per la galleria, ad esempio numero di telefono o indirizzo.

Data

La data che compare in ogni pagina della galleria. Per impostazione predefinita, Photoshop usa la data corrente.

Font e Dimensione font

(Disponibile solo per alcuni stili di sito) Opzioni per il testo del banner.

Immagini grandi

Opzioni per le immagini principali che compaiono in ciascuna pagina della galleria.

Aggiungi collegamenti numerici

(Disponibile solo per alcuni stili di sito) Consente di inserire una sequenza numerica (che inizia da 1 e termina con il numero totale di pagine presenti nella galleria) in orizzontale lungo il bordo superiore di ogni pagina della galleria. Ogni numero rappresenta un collegamento verso la pagina corrispondente.

Ridimensiona immagini

Consente di ridimensionare le immagini sorgente per inserirle nelle pagine della galleria. Scegliete una dimensione dal menu a comparsa o immettete una dimensione in pixel. Per Vincola, scegliete le dimensioni dell’immagine da mantenere durante il ridimensionamento. Per Qualità JPEG, specificate un’opzione nel menu a comparsa, immettete un valore compreso tra 0 e 12 oppure trascinate il cursore. A un valore elevato corrisponde una qualità dell’immagine migliore, ma una maggiore dimensione del file.

Nota:

Photoshop usa il metodo di interpolazione immagine predefinito impostato nelle preferenze. Per ottenere risultati migliori quando riducete un’immagine, scegliete Bicubica più nitida come impostazione predefinita.

Dimensione bordo

Consente di specificare la larghezza, in pixel, del bordo attorno all’immagine.

Titoli basati

(Disponibile solo per alcuni stili di sito) Consente di specificare le opzioni per la visualizzazione delle didascalie sotto ogni immagine. Selezionate Nome file per visualizzare il nome del file o Descrizione, Autori, Titolo e Copyright per trarre il testo della descrizione dalla finestra Info file.

Font e Dimensione font

(Disponibile solo per alcuni stili di sito) Consente di specificare il font e la dimensione da applicare al testo della didascalia.

Miniature

Opzioni per la home page della galleria di foto per il Web, compresa la dimensione delle immagini in miniatura.

Dimensioni

Consente di specificare la dimensione delle miniature. Scegliete dal menu a comparsa o immettete un valore in pixel per la larghezza di ciascuna miniatura.

Colonne e Righe

Consente di specificare il numero di colonne e righe in cui visualizzare le miniature sulla home page. Questa opzione non è valida per le gallerie con lo stile Riquadro orizzontale o Riquadro verticale.

Dimensione bordo

Consente di specificare la larghezza, in pixel, del bordo attorno a ciascuna miniatura.

Titoli basati

(Disponibile solo per alcuni stili di sito) Consente di specificare le opzioni per la visualizzazione delle didascalie sotto ogni miniatura. Selezionate Nome file per visualizzare il nome del file o Descrizione, Autori, Titolo e Copyright per trarre il testo della descrizione dalla finestra Info file.

Font e Dimensione font

(Disponibile solo per alcuni stili di sito) Consente di specificare il font e la dimensione da applicare al testo della didascalia.

Colori personali

Opzioni relative ai colori degli elementi della galleria. Per modificare il colore di un elemento, fate clic sul relativo campione di colore e selezionate un nuovo colore da Adobe Color Picker. Potete modificare il colore di sfondo di ciascuna pagina (opzione Sfondo) e del banner (opzione Banner).

Protezione

Visualizza del testo su ogni immagine al fine di scoraggiare i furti.

Contenuto

Consente di specificare il testo da visualizzare. Selezionate Testo personalizzato per immettere un testo personale. Selezionate Nome file, Descrizione, Autori, Titolo o Copyright per visualizzare il testo corrispondente tratto dalla finestra Info file.

Font, Colore e Posizione

Specificate il font, il colore e l’allineamento della didascalia.

Rotazione

Posizionate il testo sull’immagine selezionando un’angolazione.

Photoshop offre una serie di stili per le gallerie di foto per il Web. Se avete una buona conoscenza del codice HTML, potete creare un nuovo stile o personalizzare uno stile esistente modificando un gruppo di file di template HTML.

Gli stili per la galleria di foto per Web disponibili in Photoshop sono memorizzati in singole cartelle nelle seguenti posizioni:

Windows

Programmi/Adobe/Adobe Photoshop CS5/Predefiniti/Galleria foto per Web.

Mac OS

Adobe Photoshop CS5/Predefiniti/Galleria foto per Web.

Il nome di ciascuna cartella appare come un’opzione del menu a comparsa Stili nella finestra Galleria di foto per Web. Ogni cartella contiene i seguenti file template HTML, usati da Photoshop per creare la galleria:

Caption.htm

Determina il layout della didascalia visualizzata sotto ciascuna miniatura della home page.

FrameSet.htm

Determina il layout dei frame per la visualizzazione delle pagine.

IndexPage.htm

Determina il layout della home page.

SubPage.htm

Determina il layout delle pagine della galleria con immagini in dimensioni reali.

Thumbnail.htm determina il layout delle miniature visualizzate sulla home page.

Tutti i file template contengono token e codice HTML. Un token è una stringa di testo che viene sostituita da Photoshop quando impostate l’opzione corrispondente nella finestra Galleria di foto per Web. Ad esempio, un file template può contenere il seguente elemento TITLE che usa un token come testo incorporato:

<TITLE>%TITLE%</TITLE>

Quando create una galleria usando questo file template, il token %TITLE% viene sostituito con il testo immesso in Nome del sito nella finestra Galleria di foto per Web.

Per ottenere maggiori informazioni su uno stile esistente, aprite e analizzate i relativi file template HTML con un editor HTML. Poiché per creare documenti HTML sono necessari solo i caratteri ASCII standard, aprite, modificate e create tali documenti con un semplice editor di testo come Blocco note (Windows) o TextEdit (Mac OS).

Per personalizzare uno stile esistente per la galleria di foto per il Web, modificate uno o più dei relativi file template HTML. Per consentire a Photoshop di generare la galleria correttamente, attenetevi alle seguenti istruzioni:

  • La cartella degli stili deve contenere i seguenti file: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm e FrameSet.htm.

  • Potete rinominare la cartella degli stili ma non i file template HTML in essa contenuti.

  • Ad esempio, potete lasciare il file Caption.htm vuoto e inserire nel file Thumbnail.htm i token e il codice HTML necessari per definire il layout della didascalia.

  • Potete sostituire un token in un file template con un testo o codice HTML appropriato, in modo che l’opzione venga impostata dal file template e non dalla finestra Galleria di foto per Web. Ad esempio, un file template potrebbe contenere un elemento TESTO con il seguente attributo bgcolor e che usa come valore un token:

    bgcolor=%BGCOLOR%

    Per impostare il colore di sfondo della pagina su rosso, potete sostituire il token %BGCOLOR% con “FF0000”.

  • Potete aggiungere token e codice HTML ai file template. Tutti i token devono essere in lettere maiuscole e iniziare e finire con il simbolo di percentuale (%).

  1. Individuate la cartella in cui sono memorizzati gli stili esistenti.
  2. Effettuate una delle seguenti operazioni:
    • Per personalizzare uno stile, create una copia della cartella dello stile e salvatela nella stessa posizione delle cartelle degli stili esistenti.

    • Per creare un nuovo stile, create una nuova cartella e salvatela nella stessa posizione delle cartelle degli stili esistenti.

    Lo stile nuovo o personalizzato (che prende il nome della sua cartella) compare quindi nel menu Stili della finestra di dialogo Galleria di foto per Web.

  3. Usando un editor HTML, effettuate una delle seguenti operazioni:
    • Personalizzate il file template HTML.

    • Create i file template HTML necessari e memorizzateli nella cartella degli stili.

    Quando create i file template, seguite le linee guida descritte in Personalizzare gli stili delle gallerie di foto per il Web.

    Nota:

    Quando personalizzate o create un template per lo stile di una galleria, posizionate ognuno dei seguenti token su una riga a parte del file HTML: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% e %PREVINDEX%. Quando create pagine specifiche per una galleria, Photoshop ignora le righe del template contenenti token non sono validi per tali pagine. Ad esempio, quando Photoshop crea la prima pagina di una galleria ignora qualsiasi riga del template contenente il token %PREVIMAGE%, che determina il collegamento alla pagina precedente della galleria. Mantenendo il token %PREVIMAGE% su una riga separata, Photoshop non ignora eventuali altri token presenti nel template.

Per definire uno stile predefinito per la galleria di foto per il Web, Photoshop usa dei token incorporati nei file template HTML. I token consentono inoltre di creare una galleria in base agli input dell’utente nella finestra Galleria di foto per Web.

Quando personalizzate o create uno stile, potete aggiungere qualsiasi token a un qualsiasi file template HTML, tranne %THUMBNAILS% e %THUMBNAILSROWS%, che possono apparire solo nel file IndexPage.htm. Se aggiungete un token, ricordate di aggiungere anche al file il codice HTML necessario per usarlo correttamente.

Nei file template HTML potete usare i seguenti token:

%ALINK%

Determina il colore dei collegamenti attivi.

%ALT%

Determina il nome di un file immagine.

%ANCHOR%

Consente di tornare alla miniatura dell’immagine visualizzata invece che all’inizio dell’indice. Ciò avviene quando l’utente fa clic sul pulsante della pagina iniziale.

%BANNERCOLOR%

Determina il colore del banner.

%BANNERFONT%

Determina il font del testo del banner.

%BANNERFONTSIZE%

Determina la dimensione del font per il testo del banner.

%BGCOLOR%

Determina il colore di sfondo.

%CAPTIONFONT%

Determina il font della didascalia sotto le miniature presenti nella home page.

%CAPTIONFONTSIZE%

Determina la dimensione del font per la didascalia.

%CAPTIONTITLE%

Inserisce come didascalia il titolo del documento (dalle informazioni sul file).

%CHARSET%

Determina il set di caratteri usato in ciascuna pagina.

%CONTACTINFO%

Determina le informazioni di contatto per la galleria, come ad esempio numero telefonico e località.

%CONTENT_GENRATOR%

Diventa “Adobe Photoshop CS5 - Galleria di foto per Web”.

%COPYRIGHT%

Inserisce come didascalia le informazioni sul copyright del documento (dalle informazioni sul file).

%CREDITS%

Inserisce come didascalia le informazioni sugli autori del documento (dalle informazioni sul file).

%CURRENTINDEX%

Determina il collegamento per la home page corrente.

%CURRENTINDEXANCHOR%

Risiede in SubPage.htm e punta alla prima pagina di indice.

%DATE%

Determina la data visualizzata sul banner.

%EMAIL%

Determina l’indirizzo e-mail di contatto per la galleria.

%FILEINFO%

Determina le informazioni del file immagine da inserire nella didascalia.

%FILENAME%

Determina il nome del file immagine. Usate questo token per i metadati che appaiono come testo HTML.

%FILENAME_URL%

Determina il nome del file dell’URL dell’immagine. Usate questo token solo per i nomi dei file degli URL.

%FIRSTPAGE%

Determina il collegamento per la prima pagina della galleria, che appare nel frame destro di un gruppo di frame.

%FRAMEINDEX%

Determina il collegamento per la home page che appare nel frame sinistro del gruppo di frame.

%HEADER%

Determina il titolo della galleria.

%IMAGEBORDER%

Determina la dimensione del bordo di un’immagine in dimensioni reali su una pagina della galleria.

%IMAGE_HEIGHT%

Attiva la casella di controllo Aggiungi attributi di larghezza e altezza per le immagini. In questo modo, l’utente può scaricare più rapidamente gli attributi.

%IMAGE_HEIGHT_NUMBER%

Questo token è sostituito da un valore numerico (solo) che rappresenta la larghezza dell’immagine.

%IMAGEPAGE%

Determina il collegamento a una pagina della galleria.

%IMAGE_SIZE%

Se la casella Ridimensiona immagini è selezionata, questo token contiene il valore in pixel dell’immagine usato nel riquadro Immagini grandi. Se la casella non è selezionata, il token contiene una stringa vuota. Ciò è utile per JavaScript nei template, perché visualizza i valori massimi di altezza e larghezza per tutte le immagini del sito generato.

%IMAGESRC%

Determina l’URL di un’immagine in dimensioni reali su una pagina della galleria.

%IMAGE_WIDTH%

Attiva la casella di controllo Aggiungi attributi di larghezza e altezza per le immagini. In questo modo, l’utente può scaricare più rapidamente gli attributi.

%IMAGE_WIDTH_NUMBER%

Questo token è sostituito da un valore numerico (solo) che rappresenta la larghezza dell’immagine.

%LINK%

Determina il colore dei collegamenti.

%NEXTIMAGE%

Determina il collegamento per la pagina successiva della galleria.

%NEXTIMAGE _CIRCULAR%

Imposta il collegamento da un’immagine di anteprima grande alla successiva.

%NEXTINDEX%

Determina il collegamento per la home page successiva.

%NUMERICLINKS%

Inserisce collegamenti numerati a tutte le immagini di anteprima grandi nelle pagine secondarie.

%PAGE%

Determina la posizione della pagina corrente (ad esempio, pagina 1 di 3).

%PHOTOGRAPHER%

Determina il nome della persona o dell’organizzazione che ha realizzato le foto della galleria.

%PREVIMAGE%

Determina il collegamento per la pagina precedente della galleria.

%PREVINDEX%

Determina il collegamento per la home page precedente.

%SUBPAGEHEADER%

Determina il titolo della galleria.

%SUBPAGETITLE%

Determina il titolo della galleria.

%TEXT%

Determina il colore del testo.

%THUMBBORDER%

Determina la dimensione dei bordi delle miniature.

%THUMBNAIL_HEIGHT%

Attiva la casella di controllo Aggiungi attributi di larghezza e altezza per le immagini. In questo modo, l’utente può scaricare più rapidamente gli attributi.

%THUMBNAIL_HEIGHT_NUMBER%

Questo token è sostituito da un valore numerico (solo) che rappresenta l’altezza della miniatura.

%THUMBNAILS%

Questo token viene sostituito con le miniature, usando il file Thumbnail.htm per gli stili di frame. Inserite questo token da solo in una riga singola intera nel file HTML.

%THUMBNAIL_SIZE%

Visualizza il valore in pixel della miniatura nel riquadro Miniature. Ciò è utile per JavaScript nei template, perché visualizza i valori massimi di altezza e larghezza per tutte le miniature del sito generato.

%THUMBNAILSRC%

Determina il collegamento a una miniatura.

%THUMBNAILSROWS%

Questo token viene sostituito con righe di miniature, usando il file Thumbnail.htm per gli stili non di frame. Inserite questo token da solo in una riga singola intera nel file HTML.

%THUMBNAIL_WIDTH%

Attiva la casella di controllo Aggiungi attributi di larghezza e altezza per le immagini. In questo modo, l’utente può scaricare più rapidamente gli attributi.

%THUMBNAIL_WIDTH_NUMBER%

Questo token è sostituito da un valore numerico (solo) che rappresenta la larghezza della miniatura.

%TITLE%

Determina il titolo della galleria.

%VLINK%

Determina il colore dei collegamenti usati.

Ottieni supporto in modo più facile e veloce

Nuovo utente?