Nwlapcug.com


Come creare CSS HTML da Photoshop

Come creare CSS HTML da Photoshop


Photoshop è una progettazione grafica e fotoritocco applicazione sviluppata da Adobe. È il leader di mercato nel software di editing delle immagini digitali. Le funzionalità includono la possibilità di creare e modificare grafica per stampa e web l'utilizzo. Include anche molte funzioni per assistere gli utenti nel sito web progettazione e codifica. Non solo il software potete ottimizzare le immagini per l'utilizzo del web, può anche generare fogli di stile CSS e il codice HTML necessario per includere grafica nelle pagine web.

Istruzioni

1

Creare l'immagine. Al termine, utilizzare strumento "Fetta" di Photoshop per dividere l'immagine in sezioni. Utilizzare lo strumento "Selezione di sezioni" per rinominare ogni sezione con nomi che corrispondono all'organizzazione del tuo sito. Ad esempio, se l'immagine include i pulsanti di navigazione del sito, nome sezioni in quella zona "Nav". Queste sezioni corrisponderà al tag "div" nel codice CSS.

2

La barra di menu, fare clic su "File" quindi scegliere "Salva per Web e dispositivi." Scegliere le schede sopra l'area dell'immagine per una selezione di anteprime "2-Up" o "4-Up". Scegliere le opzioni desiderate per la vostra immagine nella sezione"Preset". Selezionare l'anteprima dell'immagine che meglio si adatta il tuo visual specifiche. Fare clic su "Salva".

3

Digitare il nome del file nel campo "Nome File". Nel campo "Salva come tipo", selezionare "HTML e immagini". Nel campo impostazioni, seleziona "Altro". Apparirà una finestra di dialogo "Impostazioni di Output". In Impostazioni elenco a discesa selezionare "Custom". Selezionare il pulsante "Avanti" fino a visualizzare la sezione "Fetta di Output". Selezionare il pulsante di opzione "Genera CSS".

4

Scegliere il formato di output del file CSS nel menu con riferimenti. Per un foglio di stile esterno, selezionare "ID" o "di"classe. Il tuo CSS saranno organizzati da qualsiasi elemento che si sceglie. Se si desidera che il vostro CSS sia in linea (incluso nella parte superiore della tua pagina HTML) selezionare "Inline".

5

Completare selezionando altre opzioni nelle impostazioni di Output. Dopo aver terminato, fare clic su "OK". Nel campo fette selezionare ciò che si desidera essere inclusi nell'output CSS di fette. Assicurarsi che avete navigato nel posto dove si desidera il file essere collocato nell'area manager "Salva ottimizzato come" file. Fare clic su "Salva".

6

Aprire il file HTML che appena creato nel vostro programma di editing HTML. Codice HTML, completo con i CSS, sarà ovunque è stato salvato sul tuo computer e pronto a o inserire in una pagina web che è possibile creare o come pagina web standalone. Modificare il codice, se necessario, a proprio piacimento.

7

Aprire il file nel browser web di scelta per visualizzare il file per verificare eventuali problemi e per assicurarsi che corrisponda l'immagine creata in Photoshop.