Come creare un'intestazione di sito Web professionale in Photoshop

Photoshop CC 2014 è uno strumento ideale per la progettazione di immagini professionali per il tuo sito Web, inclusi i banner. Quando progetti il ​​tuo primo banner, mantieni il design semplice in modo che la grafica non sia sovraccarica di troppe informazioni visive. Se la tua attività ha i colori aziendali e un carattere aziendale, puoi sicuramente utilizzare quelli nel tuo banner.

Passo 1

Avvia Photoshop. Premi "Ctrl-N" o seleziona "Nuovo" dal menu File. Nella finestra di dialogo, specifica l'altezza e la larghezza del tuo banner, ad esempio 900 pixel di larghezza e 150 pixel di altezza. Fare clic su "OK".

Passo 2

Se lo desideri, seleziona un colore di sfondo a tinta unita per il banner. Per fare ciò, fai clic sull'icona "Colore di primo piano" nella barra degli strumenti e seleziona un colore, quindi fai clic sullo "Strumento rettangolo" e trascinalo sull'intero banner. In questo tutorial, tuttavia, sovrapporremo due gradienti invece di utilizzare uno sfondo a tinta unita.

Passaggio 3

Fare clic sullo strumento "Gradiente" nella casella degli strumenti. Fare clic sul menu "Riempi" nella barra delle opzioni e selezionare il gradiente in bianco e nero dai predefiniti disponibili. Fare clic in un punto qualsiasi sopra il banner nell'area di disegno e trascinare il cursore sotto il banner. Rilascia il pulsante del mouse per applicare il gradiente.

Passaggio 4

Fare clic su "Strumento testo orizzontale" nella casella degli strumenti. Trascina il cursore sul banner per creare una casella di testo. Utilizzare i menu nella barra delle opzioni per specificare un carattere, una dimensione del carattere e un colore. Trascina la casella di testo in modo che sia centrata sul lato sinistro del banner.

Passaggio 5

Seleziona "Apri" dal menu File e seleziona qualsiasi immagine sul tuo computer che desideri utilizzare per il tuo banner, come un logo aziendale, una tua foto o un prodotto che stai vendendo. Quando l'immagine si apre, seleziona "Duplica" dal menu Livello. Cambia la destinazione nel tuo file di intestazione, che si chiamerà "Senza titolo-1" a meno che tu non lo abbia già salvato. Fai clic su "OK" per aggiungere l'immagine come nuovo livello al tuo banner.

Passaggio 6

Seleziona "Trasforma" dal menu Modifica, quindi fai clic su "Scala". Nella maggior parte dei casi, l'intera immagine non sarà visibile sul banner stretto, ma il suo contorno è visibile dopo aver selezionato "Scala". Trascina qualsiasi angolo del contorno dell'immagine per ridimensionarlo per il tuo banner. Tieni premuto il tasto "Shift" mentre trascini per bloccarne le proporzioni. Premere Invio." Trascina l'immagine in modo che si trovi sul lato destro del banner.

Passaggio 7

Fare clic sull'icona "Colore di primo piano" nella barra degli strumenti per aprire il Selettore colore. Fare clic in un punto qualsiasi sul lato destro del banner in modo che corrisponda al suo colore nel Selettore colore, quindi fare clic su "OK".

Passaggio 8

Seleziona lo "Strumento Rettangolo" dalla casella degli strumenti. Fare clic sul menu "Riempi" e quindi selezionare l'icona "Gradiente" nella parte superiore delle opzioni del menu. Trascina il cursore sul banner dall'interno del lato sinistro dell'immagine fino al bordo sinistro del banner. Crea un rettangolo con una sfumatura usando il colore che hai abbinato dall'immagine.

Passaggio 9

Individua il livello "Rettangolo 1" nel pannello Livelli, che è il livello contenente il rettangolo sfumato appena aggiunto. Trascina questo livello verso il basso per renderlo il terzo livello dall'alto, sotto "Livello 1" e il livello contenente il tuo testo. Fai clic sul menu "Opacità" nella parte superiore del pannello Livelli e trascina il dispositivo di scorrimento in modo che sia circa il 50 percento. Rendere semitrasparente il gradiente superiore consente di fonderlo con il gradiente sottostante, creando uno sfondo ricco.

Passaggio 10

Seleziona il livello contenente il testo nel pannello Livelli. Fare clic sul menu "Livello", selezionare "Stile livello" e quindi fare clic su "Smusso e rilievo". Assicurati che il menu Stile sia impostato su "Rilievo" e trascina il cursore "Profondità" a sinistra - intorno al "225" percento - per aggiungere solo un po' di questo effetto al testo.

Passaggio 11

Fare clic sull'opzione "Raso" nella finestra Stile livello. Per questo stile, usa una modalità di fusione di "Moltiplica" e riduci l'opacità a circa il "15" percento. Questo combina lo stile satinato con lo stile rilievo. Se lo desideri, modifica le impostazioni e fai clic su "OK".

Salva l'immagine come banner ottimizzato per il Web selezionando "Salva per Web" dal menu File. Seleziona "JPEG" dal menu Formato e utilizza una qualità dell'immagine compresa tra il 75 e l'80 percento. Questo crea un'immagine con un file di piccole dimensioni, che viene rapidamente caricata da qualsiasi browser Web, senza sacrificare la qualità dell'immagine. Fai clic su "Salva" e seleziona una posizione in cui archiviare il file sul tuo computer. Dopo aver chiuso Photoshop, aggiungi il file alla tua pagina Web.