Gli ingegneri di software di Adobe, lo sviluppatore di Photoshop, hanno semplificato il processo per gli utenti per produrre output HTML e CSS da loro file master di progettazione grafica secondo il principio di ciò che si vedere Is What You Get (WYSIWYG, pronunciato "wizzywig"). Sfruttando risorse native di Photoshop, designer può colmare il divario tra la resa in formato di file nativo di Photoshop, PSD e il layout che viene riprodotto dal browser Web come senza soluzione di continuità e in modo più efficiente possibile.

Preparazione

Perché siti Web comprendono aree funzionali distinte e quindi distinte pezzi di codice che a loro volta contengono immagini e testo, è necessario preparare per delimitare le aree nella composizione che servirà diverse funzioni per il visitatore. Identificare i limiti insiti nel vostro disegno facilita il passaggio tra la composizione visiva e la realizzazione della grafica in linguaggio di markup. Ad esempio, come il banner occupa un'area specifica del vostro disegno, visualizzare una casella che esso, badando che non conterrebbe nessun caselle adiacenti, ad esempio quelle che contengono contenuto nel sito, possono sovrapporsi la casella che si designa per lo striscione. In ultima analisi, Photoshop produce linguaggio di markup fedele per le designazioni e le scelte si rifletteranno nel codice.

Affettare

Lo strumento sezione serve a dividere aree del design modulare immagini che sono pronti per il codice HTML e CSS a chiamarli. Una sezione creata con lo strumento sezione determina i parametri che vengono passati a immagini e il codice risultante. Le sezioni di denominazione consente Photoshop non solo di investire le immagini risultanti con nomi di file di vostra scelta, ma anche per assegnare le immagini attributi ID HTML corrispondenti appropriati. Oltre i nomi delle fette, Photoshop si assiste anche a loro posizione e le dimensioni nella produzione di parametri CSS.

Risparmio per Web e dispositivi

Salva per Web e dispositivi è un accessorio di interfaccia nella finestra principale di Photoshop in cui preparare le aree affettate del vostro disegno e li salva come immagini discreti. Strumenti che si applicano indipendentemente per ogni fetta, ottimizzazione delle immagini di output per l'uso online e consente di trovare l'equilibrio più favorevole tra file dimensioni su un lato e qualità da altro. È possibile designare fette per l'output in uno qualsiasi dei tre formati visualizzabili sul web: JPG, GIF (con o senza trasparenza) e PNG (con o senza trasparenza). Con le impostazioni corrette in luogo, quando si salva il vostro disegno di Photoshop dal riquadro Salva per Web e dispositivi e specifica il "Salva come tipo di File" come "HTML e immagini" è ottenere il documento HTML e le immagini associate.

Impostazioni di output

Accessibile attraverso la finestra Salva per Web e dispositivi, la finestra di dialogo Impostazioni di Output consente di specificare esattamente il formato dell'output in preparazione per HTML e CSS editing di fuori di Photoshop. Fondamentalmente, nel codice HTML riquadro è necessario selezionare la casella con l'etichetta "Output XHMTL" per Photoshop per produrre un documento HTML per modificare. Il riquadro di fette contiene l'opzione "Genera CSS"; è necessario abilitarlo per CSS da includere nel documento HTML. Può essere utile per sperimentare con le altre impostazioni nella finestra di dialogo, ma con Photoshop impostata per l'output HTML e CSS corrispondenti ai parametri che hai costruito il tuo fette, hai soddisfatto la maggior parte del vostro obiettivo.

Modificare il codice HTML e CSS Output

Dopo aver salvato tutte le sezioni e il documento HTML con gli stili CSS utilizzando Salva per Web e dispositivi con le impostazioni di output corretto, è possibile aprire il documento HTML con il software di editing di vostra scelta. Se non si dispone di nessun altro software a portata di mano, è possibile utilizzare editor di testo blocco note di Windows'. Aprendo il documento HTML che Photoshop produce, troverete markup completamente e correttamente formattato nel corpo così come gli stili CSS in testa, tutto secondo i parametri che precedentemente specificate. Mentre si potrebbe desiderare di apportare modifiche al codice, il documento che Photoshop crea può servire come punto di riferimento affidabile che è sicuro di visualizzare con precisione in qualsiasi browser moderno.