September 5
Gli ingegneri del software di Adobe, lo sviluppatore di Photoshop, hanno snellito il processo per gli utenti di produrre HTML e uscita CSS dalle loro file master progettazione grafica secondo il principio di ciò che vedi è ciò che ottieni (WYSIWYG, pronunciato "wizzywig"). Sfruttando le risorse native di Photoshop, i progettisti possono 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à ed efficiente possibile.
Poiché i siti web comprendono aree funzionali distinte, e pezzi di conseguenza distinti di codice che a loro volta contengono immagini e testo, è necessario preparare per delimitare le aree di composizione che serviranno diverse funzioni per il visitatore. Identificare i confini insiti nella progettazione facilita la transizione tra la composizione visiva e la realizzazione della grafica in linguaggio di markup. Ad esempio, come il banner occupa una determinata area di vostro disegno, visualizzare una casella che potrebbe contenerla, badando che senza finestre adiacenti, come quelli che contengono contenuti nel sito, possono sovrapporsi la scatola si designa per il banner. In ultima analisi, Photoshop produce linguaggio di markup fedeli ai vostri designazioni e le scelte si rifletterà nel codice.
Lo strumento sezione serve a dividere le aree del disegno in immagini modulari che sono pronti per il codice HTML e CSS per chiamarli. Una fetta creata con lo strumento sezione determina i parametri che vengono passati al le immagini risultanti e il codice. Naming tuoi fette consente Photoshop non solo di investire le immagini risultanti con i nomi di file di tua scelta, ma anche per assegnare le immagini appropriate attributi ID HTML corrispondenti. Oltre i nomi delle fette, Photoshop partecipa anche alla loro posizione e le dimensioni nella produzione parametri CSS.
Salva per Web e dispositivi è un accessorio di interfaccia per la finestra principale di Photoshop in cui si preparano le zone affettate del vostro disegno e salvarli come immagini discrete. Strumenti si applicano ad ogni fetta in modo indipendente, l'ottimizzazione delle immagini in uscita per l'uso online e che consente di trovare l'equilibrio più favorevole tra dimensioni del file da una parte e la qualità, dall'altro. E 'possibile designare fette per l'uscita 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 atto, quando si salva il disegno di Photoshop dal riquadro Salva per Web e dispositivi e specificare il "Salva come tipo di file" come "HTML e immagini" si ottiene sia il documento HTML e le immagini associate.
Accessibile attraverso la finestra Salva per Web e dispositivi, la casella di dialogo Impostazioni di output consente di specificare esattamente il formato dell'output in preparazione per HTML e CSS editing al di fuori di Photoshop. Fondamentalmente, nel riquadro HTML è necessario selezionare la casella "XHMTL uscita" per Photoshop per produrre un documento HTML da modificare. Il riquadro fette contiene l'opzione "Genera CSS"; è necessario attivare questa per i CSS da includere nel documento HTML. Si possono trovare utile per sperimentare con le altre impostazioni nella finestra di dialogo, ma con Photoshop impostato su HTML e CSS in uscita corrispondenti ai parametri integrato nel fette, hai soddisfatto la maggior parte del vostro obiettivo.
Dopo aver salvato tutte le fette e il documento HTML con gli stili CSS utilizzando Salva per Web e dispositivi con le impostazioni di output corretti, è possibile aprire il documento HTML con il software di elaborazione grafica a scelta. Se si dispone di nessun altro software a portata di mano, è possibile utilizzare editor di testo Blocco note di Windows '. Dopo l'apertura del documento HTML Photoshop produce, troverete markup pienamente e correttamente formattato nel corpo così come gli stili CSS nella testa, tutto secondo i parametri specificati in precedenza. Mentre si potrebbe desiderare di apportare modifiche al codice, il documento di Photoshop crea può servire come un punto di riferimento affidabile che è sicuro di visualizzare con precisione in qualsiasi browser moderno.