Come fare una pagina Web utilizzando Adobe Photoshop

July 12

Come fare una pagina Web utilizzando Adobe Photoshop


Adobe Photoshop rende facile creare un design unico per una pagina Web. potenti strumenti grafici e gli effetti di Photoshop forniscono agli utenti un ampio controllo sul layout, colori e immagini. Invece di confondersi con codifica complessa e altri script, è possibile pianificare e creare il tuo design completo Web in Photoshop e quindi facilmente esportare nel Web attraverso un programma HTML.

istruzione

1 Utilizzare Photoshop per aprire il logo o l'immagine che si desidera utilizzare come l'immagine principale nella pagina Web.

2 Decidere su una combinazione di colori per la pagina Web, utilizzando l'immagine come guida. Sul pannello degli strumenti, selezionare lo strumento contagocce. Portare il contagocce su un colore sull'immagine. Fare clic e lo strumento avrà un campione del colore appena selezionata. Sarete in grado di vedere le informazioni specifiche, come ad esempio il numero RGB, del colore nel pannello "Colore". Prendere nota del numero RGB specifico di ogni colore che campione. Continuare a utilizzare lo strumento contagocce per campionare i vari colori sulla vostra immagine. Dopo aver provato diversi colori, selezionare almeno tre colori che si desidera utilizzare come schema di colorazione per la vostra pagina web. I colori dovrebbero contrasto l'un l'altro ed essere leggero, medio e scuro.

3 Vai su "File" nel menu di navigazione principale di Photoshop. Selezionare "Nuovo ..." e creare un nuovo documento con una larghezza di 600 pixel e un'altezza di 300 pixel. Questo sarà il banner principale e colpo di testa di navigazione per la pagina Web.

4 Decidere il tipo di carattere per la tua pagina. Pensate l'idea che si vuole trasmettere. Vai al pannello degli strumenti e selezionare il pulsante "Testo". Trascinare il mouse per creare un rettangolo sul nuovo documento. Digitare il testo della vostra intestazione Web. Evidenziare il testo appena scritto e poi andare alle opzioni di testo nella parte superiore di Photoshop. Provare diversi tipi di font e dimensioni, e sperimentare con il colore del testo e l'allineamento finché non si è soddisfatti. Utilizzare lo strumento "Move" nel pannello di strumento per spostare il testo di intestazione a cui si desidera sul documento.

5 Creare uno sfondo per il vostro nuovo banner utilizzando uno dei colori dalla combinazione di colori predeterminato. Vai alla finestra Livelli, e selezionare il pulsante "Fill o livello di regolazione" sul fondo. Fai clic su "colore solido" e inserire le informazioni RGB si ha verso il basso per il colore che si desidera utilizzare. Il livello sarà ora coprire il testo che hai scritto nel passaggio precedente. Nel pannello Livelli, trascinare il livello "colore solido" che avete appena creato in modo che sia al di sotto dello strato di "Testo". Il colore dovrebbe essere in background.

6 Assicurarsi che il file "Testo" viene selezionato nel pannello Livelli. Quindi selezionare il vostro logo o file grafico in modo che si tratta di prima linea. Nel pannello Strumenti, fare clic sullo strumento mossa, che dovrebbe essere in cima. Trascinare il immagine del logo sul nuovo documento di pagina Web. Un nuovo livello dovrebbe immediatamente essere creato su un documento con il vostro logo. Con il vostro livello di logo selezionato, fare clic sul pulsante "fx" sul pannello Livelli. Fai clic su "Opzioni di fusione ..." e provare varietà di miscelazione strumenti per aiutare il vostro logo perfettamente corrisponde al colore di sfondo di Photoshop.

7 Vai a "Layer" nel menu in alto di navigazione e selezionare "Nuovo livello". Vai pannello degli strumenti e selezionare lo strumento testo. Trascina il mouse sopra la zona in cui si desidera creare link di navigazione per la vostra pagina web. Aggiungere il testo per la navigazione con una dimensione più piccola del carattere utilizzato in precedenza per creare l'intestazione.

8 Vai su "File" e fare clic su "Salva per Web." Nel menu a discesa superiore, selezionare il formato che si desidera salvare il file (.jpg, .png o .gif). Photoshop salverà e ottimizzare il vostro banner per il web.

9 Aprite il vostro editor HTML e creare un nuovo documento HTML che ha un tavolo con cinque righe e una colonna. Inserire il tuo banner in prima fila. Creare una mappa immagine per ciascuna delle tue parole di navigazione e aggiungere la destinazione del link. I rimanenti quattro righe possono essere riempite con il testo della pagina Web.

Consigli e avvertenze

  • Prendetevi il tempo per esplorare davvero tutte le caratteristiche grafiche di Photoshop. Utilizzare maschere, pennelli, filtri, livelli di colore e molti altri strumenti per creare un design unico e personale.