Come Slice immagini da usare su un sito web

May 13

Come Slice immagini da usare su un sito web


Affettare è un metodo per creare immagini da usare in pagine HTML sul Web. Un layout è concepito come immagine non interattivo. Poi diverse sezioni di quel disegno sono "tagliati", ottimizzati per il Web e quindi utilizzati in un documento HTML per creare un sito web in diretta. Questi sono i passi fondamentali per affettare le immagini per un sito web.

istruzione

1 Aprire il documento di progetto in un'applicazione di modifica delle immagini, come Adobe Photoshop. La presentazione deve essere progettato in modo tale che le "fette" si inserisce in un HTML tavolo --- righe e colonne. Non ha bisogno di includere testo, che verrà aggiunto in seguito con l'HTML.

2 Disegnare un riquadro attorno alla zona della vostra prima sezione con lo strumento "Slice". Ad esempio, il banner in alto potrebbe essere un buon punto di partenza.

3 Disegnare le fette di tutto il resto degli elementi di layout, come ad esempio un logo o ovunque ci sia un grafico che sembra essere la sua propria sezione. Non ci sono regole dure e veloci per rendere fette. Provate a immaginare i pezzi montaggio insieme in una tabella di rettangoli. Anche tenere a mente il tempo di caricamento, che è la ragione le persone non fanno tutto il layout di una fetta.

4 Nome le fette. Fare doppio clic su una fetta con la "fetta strumento di selezione" per aprire la finestra di dialogo "Opzioni sezione". Scegliere "Immagine" per il tipo fetta e dargli un nome. Ripetere l'operazione per tutte le restanti fette.

5 Selezionare "File", poi "Salva per Web" per aprire la finestra di dialogo "Salva per Web". Selezionare le impostazioni per la sezione selezionata. Ci sono molte opzioni, ma in generale, le foto possono essere salvate come file JPEG e vettori come GIF.

6 Fai clic su "Salva". A "Salva ottimizzato come" pronta apparirà. Scegliere il percorso in cui salvare la vostra fetta ottimizzato.

7 Ripetere i punti 5 e 6 per ogni sezione.

8 Creare una tabella HTML che pone le immagini nelle loro rispettive posizioni.

Consigli e avvertenze

  • Questi passaggi possono variare leggermente a seconda del software che si sta utilizzando, ma il processo di base sarà lo stesso.