Contenuto
- Come funziona
- Nozioni di base sul taglio
- Modifica delle informazioni sulle sezioni
- Salva per il web
- Conclusione
Quando lavori con immagini sul Web, a volte desideri caricare un'immagine di grandi dimensioni, come immagine principale su una pagina o come sfondo. Lo svantaggio è che ti imbatterai immediatamente in diversi problemi. Prima di tutto è la dimensione effettiva del file. La seconda è la risoluzione. Il terzo è la compressione.
Se il file è di grandi dimensioni, il caricamento richiederà molto tempo, soprattutto per gli utenti con una connessione più lenta. Puoi ridurre la dimensione del file con la compressione, ma puoi solo andare lontano prima che la qualità dell'immagine inizi a risentirne.
La soluzione al tuo problema è usare il taglio dell'immagine, che ti permetterà di caricare l'immagine, un pezzo alla volta, fino a quando l'intera immagine non appare sullo schermo.
Come funziona
Ecco una panoramica di come funziona: quando hai un'immagine che impiegherà troppo tempo a caricarsi da sola, sfrutti lo strumento Slicing in Photoshop per tagliare l'immagine in sezioni più piccole. Queste immagini verranno salvate come file separato e ottimizzate utilizzando il comando Salva per Web.
Inoltre, Photoshop crea il codice HTML o CSS necessario per visualizzare l'immagine tagliata. Quando viene utilizzata in una pagina Web, ogni immagine verrà riassemblata nel browser utilizzando l'HTML o il CSS menzionati in precedenza per creare un risultato uniforme. Ecco un esempio di un'immagine tagliata.
Nozioni di base sul taglio
Per semplificare le cose, lavoreremo solo con lo strumento Slice su un livello. In questo esempio sto lavorando con un'immagine di 960x722px. Alcune cose che devi sapere prima di iniziare:
- Quando crei le sezioni, puoi farlo usando lo strumento Slice oppure puoi costruirle usando i livelli.
- Le sezioni possono essere selezionate utilizzando lo strumento Selezione sezioni.
- Puoi spostare, ridimensionare o allineare la sezione con altre sezioni. Inoltre è possibile designare un nome per la sezione, il tipo e l'URL.
- Ogni sezione può essere ottimizzata utilizzando le impostazioni nella finestra di dialogo Salva per Web.
Per iniziare, premere C sulla tastiera e fare clic sullo strumento Slice.
Quando crei le sezioni puoi scegliere tra tre impostazioni: Normale, Proporzioni fisse e Dimensioni fisse.
- Normale: Diventerà una sezione a seconda di dove inizi e finisci il riquadro che disegni sull'immagine.
- Proporzioni fisse: Qui è dove imposti un'altezza e una larghezza utilizzando numeri interi. Per elaborare, se vuoi creare una fetta con un rapporto di tre a uno, devi inserire 3 per l'altezza e 1 per la larghezza.
- Taglia unica: Qui è dove imposti l'altezza e la larghezza della sezione in pixel.
Sono disponibili diverse opzioni quando si taglia un'immagine. Se la precisione non è importante, è possibile tagliare manualmente l'immagine e, se necessario, spostare le sezioni completate utilizzando lo strumento di selezione delle sezioni.
Se la precisione è importante, utilizzare le linee guida per mappare le sezioni importanti nell'immagine.
Nella parte superiore della barra dei menu Slice, fare clic su C o sullo strumento Slice per attivarlo e nella barra dei menu Slice sopra l'immagine, fare clic sul pulsante Slices from Guides.
Le sezioni vengono automaticamente disegnate per te. È quindi possibile riposizionare le sezioni con lo strumento di selezione delle sezioni.
Modifica delle informazioni sulle sezioni
Dopo che ogni sezione è stata creata, è possibile modificare le informazioni sulla sezione in uno dei due modi.
La prima cosa da fare è fare clic sullo strumento di selezione delle sezioni, fare clic sulla sezione che si desidera modificare, quindi fare clic sull'icona accanto al pulsante Mostra sezioni automatiche nella barra dei menu.
Un'altra opzione è fare clic con il pulsante destro del mouse sulla sezione e nel menu popup, fare clic su Modifica opzioni sezione.
Entrambe le scelte faranno apparire la finestra di dialogo Opzioni Slice.
Come puoi vedere, ci sono molte impostazioni. Puoi cambiare il nome della slice, puoi assegnare un URL ad essa così quando viene cliccato nel browser ti porterà in una posizione diversa, puoi impostare il Target (_blank, _self, _parent, _top), Message Testo, tag alternativo, dimensioni della sezione e altro ancora.
Salva per il web
Una volta che sei soddisfatto del tuo layout, vai su File> Salva per Web.
Qui è possibile impostare il tipo di file e la compressione per ogni slice o utilizzare il valore predefinito elencato nella finestra di dialogo Salva per Web. Una volta che sei soddisfatto delle tue impostazioni, fai clic sul pulsante Salva.
Ciò fa apparire la finestra di dialogo Salvato ottimizzato come. Nella parte inferiore della finestra ci sono diverse impostazioni importanti.
- Formato: Sono disponibili tre opzioni: HTML e immagini, Solo immagini e Solo HTML.
- impostazioni: Le opzioni disponibili sono Personalizzato, Immagine di sfondo, Impostazioni predefinite, XHTML e Altro.
- Fette: Le opzioni disponibili sono Tutte le sezioni, Tutte le sezioni utente e Le sezioni selezionate.
Per questo tutorial sto usando HTML e immagini, Impostazioni predefinite e Tutte le sezioni. Quando sei soddisfatto delle tue impostazioni, scegli la cartella in cui desideri salvare i file e fai clic sul pulsante Salva. Questo crea un file HTML e salva tutte e sei le immagini in una cartella.
Ecco una visualizzazione a schermo diviso del file HTML in Adobe Dreamweaver. Come puoi vedere, il codice è semplice e facile da usare.
Conclusione
Come puoi vedere, il taglio dell'immagine è utile se hai un'immagine di grandi dimensioni. Suddividendolo in sezioni, parti dell'immagine inizieranno a caricarsi per prime, consentendo all'utente di sapere che di più sta per arrivare. Ciò è utile per gli utenti con una connessione lenta.
Per ulteriori informazioni, dai un'occhiata ai seguenti articoli:
- Affettare pagine Web
- Opzioni HTML per le sezioni
Parole: Nathan Segal
