May 17
Photoshop è un ottimo strumento per chi vuole adottare un approccio visivo alla progettazione Web o che sono intimiditi da l'idea di trattare con il codice HTML. Ha tutti gli strumenti necessari per integrare immagini, testo e grafica in un layout di pagina Web, e tutto il necessario per ottimizzare questi elementi per il Web e Adobe Dreamweaver in particolare.
1 Avviare Photoshop e selezionare File> Nuovo dal menu delle applicazioni. Fai clic sul menu a discesa Preset e selezionare Web. Regolare la dimensione discesa per una dimensione Web standard che vuoi la tua pagina per essere.
2 Selezionare File-> Apri dal menu delle applicazioni e aprire l'immagine che si desidera utilizzare come intestazione. Questo creerà una nuova scheda o finestra per l'immagine, a seconda delle impostazioni di Photoshop.
3 Selezionare il Marquee rettangolare strumento dal pannello Strumenti a sinistra della vostra tela. Impostare il menu a discesa Stile per dimensione fissa nel pannello Opzioni strumenti sopra la tela e impostare la larghezza pari alla larghezza della pagina creata nel passaggio 1. L'altezza può essere alto o basso come si vorrebbe l'immagine di intestazione ad apparire nella pagina Web.
4 Selezionate lo strumento sposta dal pannello Strumenti e spostare la selezione sull'area dell'immagine che si desidera come immagine di intestazione. Selezionare Immagine> Ritaglia dal menu delle applicazioni.
5 Selezionare Modifica> Copia per copiare l'immagine di intestazione ritagliata. Tornare alla scheda o una finestra che contiene la pagina Web tela. Selezionare Modifica> Incolla per incollare l'intestazione sulla pagina Web. Utilizzando lo strumento Sposta, spostare l'immagine di intestazione in modo che i suoi angoli superiori corrispondono agli angoli superiori della pagina Web.
6 Aprire e aggiungere tutti gli altri elementi che si desidera la vostra pagina Web. È possibile incollare in altre immagini utilizzando lo stesso processo utilizzato per incollare l'intestazione. Includere un menu con testo utilizzando gli strumenti testo dal pannello Strumenti. La maggior parte delle pagine Web includono un'intestazione, un corpo che include il contenuto principale e grafica o immagini associate con il contenuto o le voci di menu, e un piè di pagina, che spesso include informazioni di contatto o di copyright comunicazioni.
7 Tenete a mente l'idea fondamentale di tavoli in progettazione di siti web quando si posa la vostra pagina in Photoshop.
8 Selezionare Visualizza> Snap dal menu delle applicazioni e selezionare lo strumento Slice, annidato sotto lo strumento Ritaglia nel pannello Strumenti. Fare clic e trascinare una casella con lo strumento attorno alla totalità della pagina per iniziare.
9 Fare fette di tutto l'intestazione, il corpo e piè di pagina per dividere ulteriormente la pagina. Questo processo è l'inizio della posa della prima pagina in un formato tabella per l'uso in Dreamweaver.
10 Fare fette attorno ad ogni elemento grafico della testata, corpo e piè di pagina, come i pulsanti del menu, loghi o immagini. Cercate di mantenere le fette per i pulsanti e gli elementi di allineamento allineati. La funzione di SNAP contribuirà a rendere questo più facile.
11 Accesso al desktop del computer e creare una nuova cartella per la pagina Web. Gli utenti Mac potranno selezionare Finder> Nuova cartella. Gli utenti di Windows fare clic destro sul desktop e selezionare Nuovo> Cartella. Creare una cartella aggiuntiva all'interno di questo titolo "immagini".
12 Ritorno a Photoshop e selezionare File> Salva per Web (o Salva per Web e dispositivi per gli utenti CS4). Questo fa apparire una finestra di dialogo dove potrete ottimizzare le immagini per il Web a fette e Dreamweaver.
13 Effettuare le regolazioni del tipo di file, di qualità e colore per ciascuno dei vostri fette nella colonna di destra della finestra di dialogo. Selezionare una fetta facendo clic nella finestra di visualizzazione della finestra di dialogo. Le immagini fotografiche devono essere salvati come file JPEG nella discesa appena sotto Preset e immagini tinta unita, come loghi e pulsanti del menu possono essere salvate in formato GIF per ottenere prestazioni ottimali Web. regolazioni della qualità possono essere effettuate nei due elenchi a discesa al di sotto. La maggior parte delle immagini possono avere la loro qualità ridotta, mentre ancora cercando bene nella pagina Web, in modo da abbassare la qualità fino a vedere una differenza notevole. Questo rende il vostro caricamento della pagina più veloce.
14 Fare clic su Salva una volta ogni fetta è stato regolato. Scegliere HTML e immagini nel formato a tendina della finestra di dialogo che appare. Cambiare la cartella di destinazione nella cartella immagini all'interno della cartella pagina Web creata sul desktop. Il layout è ora ottimizzato e pronto per l'uso in Dreamweaver. Gli elementi della pagina si possono trovare nella tavolozza file in Dreamweaver, a destra della finestra del sito. È possibile ottenere uno sguardo al vostro intero layout a fette e ottimizzati per il Web e mantenuto come avete progettato in Photoshop aprendo il file HTML creato nella cartella immagini quando hai completato Salva per Web in Photoshop.