Guida utente Annulla

Dividere in sezioni una pagina Web

Lo strumento sezioni consente di suddividere un’immagine singola in immagini più piccole che vengono composte per formare la pagina Web mediante una tabella HTML o livelli CSS. Dividendo l’immagine, potrete assegnare alle diverse sezioni diversi collegamenti URL per inserire nella pagina funzioni di navigazione, oppure ottimizzare ciascuna parte dell’immagine con impostazioni di ottimizzazione proprie.

L’esportazione e l’ottimizzazione di un’immagine suddivisa in sezioni vengono eseguite mediante il comando Salva per Web. Photoshop consente di salvare ciascuna sezione come file individuale e genera il codice HTML o CSS necessario per la visualizzazione dell’immagine divisa in sezioni.

Pagina Web divisa in sezioni in Photoshop
Pagina Web divisa in sezioni.

Quando lavorate con le sezioni, tenete presente quanto segue:

  • Potete creare una sezione usando lo strumento sezione o creando sezioni basate su livelli.

  • Dopo aver creato una sezione, potete selezionarla mediante lo strumento selezione sezioni  e spostarla, ridimensionarla o allinearla con altre sezioni.

  • Per ciascuna sezione, nella finestra di dialogo Opzioni sezione potete impostare varie opzioni, come tipo, nome e URL.

  • Ciascuna sezione può essere ottimizzata mediante diverse impostazioni di ottimizzazione nella finestra di dialogo Salva per Web.

Tipi di sezioni

Le sezioni sono classificate in base al tipo di contenuto (Tabella, Immagine o Nessuna immagine) e al modo in cui sono create (utente, basate su livelli, automatiche).

Le sezioni create mediante lo strumento sezione sono definite sezioni utente; le sezione create da un livello sono definite sezioni basate su livelli. Quando create una nuova sezione utente o basata su livelli, vengono generate delle sezioni automatiche aggiuntive per le restanti aree dell’immagine. In altri termini, le sezioni automatiche riempiono lo spazio dell’immagine non definito da sezioni utente o basate su livelli e vengono rigenerate ogni volta che aggiungete o modificate gli altri due tipi di sezioni. Potete convertire le sezioni automatiche in sezioni utente.

Le sezioni utente, basate su livelli e automatiche si differenziano visivamente: le prime due sono delimitate da una linea intera, mentre le sezioni automatiche da una linea tratteggiata. Inoltre, le sezioni utente e le sezioni basate su livelli hanno un’icona diversa. Potete scegliere se mostrare o nascondere le sezioni automatiche, per agevolare il lavoro con le sezioni utente e basate su livelli.

Una sottosezione è un tipo di sezione automatica generata quando create sezioni sovrapposte. Le sottosezioni indicano in che modo viene suddivisa l’immagine quando salvate il file ottimizzato. Anche se le sottosezioni sono numerate e identificate da un simbolo di sezione, non potete selezionarle o modificarle separatamente dalla sezione sottostante. Le sottosezioni vengono rigenerate ogni volta che si riordina la sovrapposizione delle sezioni.

È possibile creare le sezioni in diversi modi:

  • Le sezioni automatiche sono generate automaticamente.

  • Le sezioni utente sono create con lo strumento sezione.

  • Le sezioni basate su livelli sono create con il pannello Livelli.

Dividere in sezioni una pagina Web

Lo strumento sezione consente di tracciare linee di sezione direttamente su un’immagine oppure di creare immagini mediante i livelli, quindi sezioni basate sui livelli.

Creare una sezione con lo strumento sezione

  1. Selezionate lo strumento sezione  . Premete il tasto C per scorrere gli strumenti appartenenti al gruppo dello strumento ritaglio.

    Le sezioni esistenti compaiono automaticamente nella finestra del documento.

  2. Scegliete un’impostazione di stile nella barra delle opzioni:

    Normale

    Determina le proporzioni della sezione mentre trascinate.

    Proporzioni fisse

    Specifica una proporzione altezza-larghezza. Per specificare le proporzioni, potete immettere numeri interi e decimali. Ad esempio, per creare una sezione la cui larghezza sia il doppio dell’altezza, immettete 2 per la larghezza e 1 per l’altezza.

    Dimensione fissa

    Specifica l’altezza e la larghezza della sezione. Immettete i valori in pixel usando numeri interi.

  3. Trascinate sull’area in cui desiderate creare la sezione. Tenete premuto Maiusc mentre trascinate per vincolare la sezione a un quadrato. Tenete premuto Alt (Windows) oppure Opzione (Mac OS) mentre trascinate per disegnare a partire dal centro. Usate Visualizza > Effetto calamita con per allineare una nuova sezione a una guida o a un’altra sezione dell’immagine. Consultate Spostare, ridimensionare e allineare le sezioni utente.

Creare le sezioni dalle guide

  1. Aggiungete le guide necessarie a un’immagine.
  2. Selezionate lo strumento sezione, quindi fate clic su Sezioni da guide nella barra delle opzioni.

    Quando create sezioni dalle guide, tutte le sezioni esistenti vengono eliminate.

Creare una sezione da un livello

Una sezione basata sul livello comprende tutti i dati dei pixel contenuti nel livello. Se spostate il livello o ne modificate il contenuto, l’area della sezione si adatta automaticamente fino a comprendere i nuovi pixel.

Creare una sezione da un livello in Phoshop
Una sezione basata su livelli viene aggiornata quando modificate il livello sorgente.

Le sezioni basate sui livelli sono meno flessibili delle sezioni utenti; tuttavia è possibile convertire (“promuovere”) una sezione basata su livello in sezione utente. Consultate Convertire una sezione basata su livelli in una sezione utente.

  1. Selezionate il livello nel pannello Livelli.
  2. Scegliete Livello > Nuova sezione basata sul livello.
Nota:

Non usate una sezione basata su livelli quando intendete spostare il livello su un’area estesa dell’immagine durante un’animazione, poiché le dimensioni della sezione potrebbero superare i valori utili.

Convertire una sezione basata su livelli in una sezione utente

Una sezione basata su livelli è legata al contenuto di pixel di un livello; pertanto, per spostarla, combinarla, dividerla, ridimensionarla e allinearla occorre modificare il livello.

Tutte le sezioni automatiche di un’immagine sono collegate e condividono le stesse impostazioni di ottimizzazione. Per impostare una diversa impostazione di ottimizzazione per una sezione automatica, è necessario convertirla in una sezione utente.

  1. Con lo strumento selezione sezioni , selezionate una o più sezioni da convertire.
  2. Fate clic su Promuovi nella barra delle opzioni.

Visualizzare sezioni e opzioni di sezione

È possibile visualizzare le sezioni in Photoshop e nella finestra di dialogo Salva per Web. Le seguenti caratteristiche possono aiutarvi a identificare e differenziare le varie sezioni:

Linee delle sezioni

Definiscono il confine di ciascuna sezione. Le linee intere delimitano le sezioni utente o basate su livelli; le linee tratteggiate, le sezioni automatiche.

Colori delle sezioni

Differenziano le sezioni utente e basate su livelli dalle sezioni automatiche. Per impostazione predefinita, le sezioni utente e basate su livelli presentano dei simboli blu, mentre le sezioni automatiche dei simboli grigi.

Inoltre, nella finestra di dialogo Salva per Web, le sezioni deselezionate sono attenuate tramite regolazioni di colore. Tali regolazioni servono solo per la visualizzazione e non alterano il colore dell’immagine effettiva. Per impostazione predefinita, la regolazione del colore delle sezioni automatiche è doppia rispetto a quella delle sezioni utente.

Numeri delle sezioni

Le sezioni sono numerate  da sinistra a destra e dall’alto in basso, a partire dall’angolo superiore sinistro dell’immagine. Se modificate l’ordine o il numero totale di sezioni, i numeri delle sezioni vengono aggiornati di conseguenza.

Simboli delle sezioni

I seguenti simboli, o icone, indicano alcune condizioni.

Sezione utente Immagine

Sezione utente Nessuna immagine

Sezione basata sul livello

Mostrare o nascondere i contorni delle sezioni

  1. Scegliete Visualizza > Mostra > Sezioni. Per nascondere o mostrare le sezioni insieme ad altri elementi, usate il comando Extra. Consultate Visualizzare o nascondere gli elementi extra.

Mostrare o nascondere le sezioni

  1. Effettuate una delle seguenti operazioni:
    • Con lo strumento selezione sezioni  fate clic su Mostra sezioni automatiche o Nascondi sezioni automatiche nella barra delle opzioni.

    • Scegliete Visualizza > Mostra > Sezioni. Le sezioni automatiche vengono visualizzate con le altre sezioni.

Mostrare o nascondere i numeri di sezione

  1. Effettuate una delle seguenti operazioni:
    • In Windows, scegliete Modifica > Preferenze > Guide, griglia e sezioni.

    • In Mac OS, scegliete Photoshop > Preferenze > Guide, griglia e sezioni.

  2. In Sezioni, fate clic su Mostra numeri di sezione.

Modificare il colore delle linee di sezione

  1. In Windows, scegliete Modifica > Preferenze > Guide, griglia e sezioni; in Mac OS, scegliete Photoshop > Preferenze > Guide, griglia e sezioni.
  2. In Linee di sezione, scegliete un colore dal menu a comparsa Colore linea.

    Dopo la modifica del colore, le linee delle sezioni selezionate vengono automaticamente visualizzate con un colore contrastante.

Ottieni supporto in modo più facile e veloce

Nuovo utente?