Come convertire un prototipo di Photoshop per Web HTML
Photoshop è un buon strumento per la progettazione di elementi di immagine del tuo sito web , compresi pulsanti rollover , menu a discesa e la grafica con collegamenti ad altre pagine web. Tuttavia, Photoshop sé non è uno strumento di creazione pagina web . Per fortuna, è relativamente facile per esportare il prototipo in un formato grafico web-friendly , e di costruire una pagina web HTML che utilizza questi elementi . Tieni presente che le componenti interattive come collegamenti ipertestuali, pulsanti rollover e menu a discesa richiedono un lavoro supplementare . Andando oltre le nozioni di base è fortemente dipendente dalla vostra applicazione , e può richiedere la conoscenza di programmazione specializzato . Cose che ti serviranno Photoshop HTML Editor Browser Web Show More Istruzioni di base Pagina web 1
Aprire il prototipo in Photoshop e esportare in un formato di immagine web supportato . Scegliere " Salva per Web e dispositivi " dal menu File . Nella finestra di dialogo selezionare JPEG, GIF o PNG . Selezionare una qualità di immagine , tenendo presente che gli aumenti più alta qualità dimensione del file. 2
" Salva " il file su disco, dandogli un nome , ad esempio " myPrototype.jpg . "
3
Aprite il vostro editor HTML e di creare una nuova pagina web. La maggior parte dei redattori HTML creerà una pagina web scheletro per voi . 4
Aggiungi un elemento immagine direttamente sotto il tag
. L'elemento di immagine avrà la forma : . . 5
Salva la tua pagina web e caricare in qualsiasi browser
al di là di base 6
Migliorare il layout utilizzando tabelle o Cascading Style Sheets (CSS ) per posizionare il vostro layout. Il metodo preferito è quello di prendere i singoli strati , o fette , creati in Photoshop e posizionarle utilizzando i CSS . Fatto correttamente , questo crea un layout "liquido" che riposiziona il layout del browser viene ridimensionata. 7
migliorare la velocità utilizzando ripetuti elementi di sfondo . In Photoshop , creare un 5 pixel a livello fetta del tuo background e salvarlo in un file . In HTML , è possibile ripetere l'elemento utilizzando l'attributo della vostra
,
o di stile CSS sfondo . Sintassi per ogni caso varia , in modo da controllare la tua guida HTML . Assicurarsi di impostare l'attributo background per " ripetere ". 8
Utilizzare mappe immagine per creare semplici collegamenti da un'immagine a un'altra pagina web. Secondo sviluppatore web Gregorio Hodges , creare un elemento
