Panoramica sullo strumento Sezione

Quando progetti grafiche per il web, spesso le diverse parti di un’immagine devono comportarsi in modo indipendente. Un'area potrebbe collegarsi a un URL, un'altra caricarsi più velocemente e un'altra ancora richiedere impostazioni di miglioramento diverse.Le sezioni dividono una singola immagine in una griglia di parti più piccole che collaborano come una pagina web, mantenendo al tempo stesso il controllo su ogni sezione.

Photoshop ricompone le immagini suddivise in sezioni nelle pagine web usando tabelle HTML o livelli CSS.Quando esporti un’immagine suddivisa in sezioni con il comando File > Esporta > Salva per Web, Photoshop salva ogni sezione come file separato. Inoltre genera il codice HTML o CSS necessario per visualizzare l’immagine come un’unica composizione in un browser.

Come funzionano le sezioni

Le sezioni dividono un’immagine lungo linee di griglia invisibili, creando aree rettangolari che funzionano come file indipendenti. Ogni sezione mantiene la propria posizione nel layout complessivo, ma funziona come elemento separato con proprietà, impostazioni di miglioramento e comportamenti propri.

Questo approccio offre alcuni vantaggi pratici:

• Assegna collegamenti URL diversi per creare elementi di navigazione cliccabili
• Applica impostazioni di compressione diverse per bilanciare qualità e dimensioni del file nelle varie aree
• Aggiorna singole sezioni senza esportare di nuovo l’intera composizione

Tipo di sezione in base alla creazione

Photoshop classifica le sezioni in base al modo in cui le crei e ogni tipo si comporta in modo diverso mentre modifichi l’immagine.

• Sezioni utente: aree che definisci manualmente con lo Strumento Sezione . Hai il pieno controllo su dimensioni, posizione e proprietà e rimangono nella posizione corrente finché non le sposti o le modifichi.
• Sezioni basate sul livello: Le sezioni includono tutti i pixel di un livello.I loro bordi si aggiornano automaticamente quando sposti o modifichi il livello.Sono ideali per il contenuto che cambia spesso, ma offrono meno controllo sul posizionamento preciso rispetto alle sezioni utente.
• Sezioni automatiche: sezioni che riempiono lo spazio rimanente in un’immagine non coperto da sezioni utente o sezioni basate sul Livello. Photoshop le genera automaticamente e le rigenera ogni volta che aggiungi, rimuovi o modifichi altre sezioni.Tutte le sezioni automatiche di un’immagine condividono le stesse impostazioni di ottimizzazione.
• Sezioni secondarie: Un tipo speciale di sezione automatica che appare quando le sezioni si sovrappongono.Le sezioni secondarie mostrano come Photoshop divide le aree di sovrapposizione quando salvi il file ottimizzato.Non puoi selezionare o modificare le sezioni secondarie in modo indipendente dalle sezioni sottostanti.

Tipo di sezione in base al contenuto

Le sezioni vengono classificate anche in base al tipo di contenuto che contengono.

• Sezioni immagine: Il tipo di sezione predefinito per il contenuto visivo, che contiene i dati dell'immagine del documento Photoshop.
• Sezioni senza immagine: celle di tabella vuote per testo HTML o colori omogenei.Photoshop non le esporta come file di immagine, il che le rende utili per il testo dinamico e selezionabile.
• Sezioni tabella: Sezioni che definiscono la struttura della tabella HTML usata da Photoshop per ricomporre un'immagine sezionata in un browser.

Indicatori visivi delle sezioni

Photoshop utilizza indicatori visivi per aiutarti a distinguere i tipi di sezione durante il lavoro.

• Linee delle sezioni: le linee continue indicano le sezioni utente o le sezioni basate su livello, mentre le linee punteggiate indicano le sezioni automatiche.
• Colori delle sezioni: i simboli blu identificano le sezioni utente e le sezioni basate su livello, mentre i simboli grigi indicano le sezioni automatiche.
• Numeri delle sezioni: i numeri nell’angolo superiore sinistro di ciascuna sezione procedono da sinistra a destra e dall’alto verso il basso, e si aggiornano automaticamente quando riordini o modifichi le sezioni.
• Badge delle sezioni: piccole icone identificano il contenuto e il tipo di sezione.Ad esempio, un’icona a forma di immagine indica una sezione utente con contenuto immagine, un’icona di immagine sbarrata indica una sezione utente senza contenuto immagine e un’icona di livello indica una sezione basata su livello.

Riconoscere queste differenze visive ti aiuta a identificare rapidamente i tipi di sezione e a lavorare in modo più efficiente con layout di sezioni complessi quando sezioni le pagine web.