Hvordan lage en profesjonell nettsidehode i Photoshop

Photoshop CC 2014 er et ideelt verktøy for å designe profesjonelle bilder for nettstedet ditt, inkludert bannere. Når du designer ditt første banner, må du holde designet enkelt, så grafikken ikke blir overbelastet med for mye visuell informasjon. Hvis virksomheten din har firmafarger og en firmaskrift, kan du absolutt bruke dem i banneret ditt.

Trinn 1

Start Photoshop. Trykk på "Ctrl-N" eller velg "Ny" fra Fil-menyen. I dialogboksen angir du høyden og bredden for banneret, for eksempel 900 piksler bredt og 150 piksler høyt. Klikk "OK".

Steg 2

Velg en solid bakgrunnsfarge for banneret hvis ønskelig. For å gjøre dette, klikk på "Forgrunnsfarge" -ikonet på verktøylinjen og velg en farge, og klikk deretter på "Rektangelverktøyet" og dra den over hele banneret. I denne opplæringen vil vi imidlertid overlappe to graderinger i stedet for å bruke en solid bakgrunn.

Trinn 3

Klikk på "Gradient" -verktøyet i verktøykassen. Klikk på "Fyll" -menyen i Alternativer-linjen, og velg svart-hvitt gradient fra tilgjengelige forhåndsinnstillinger. Klikk hvor som helst over banneret på lerretet og dra markøren under banneret. Slipp museknappen for å bruke gradienten.

Trinn 4

Klikk på "Horisontalt tekstverktøy" i verktøykassen. Dra markøren over banneret for å lage en tekstboks. Bruk menyene i Alternativer-linjen til å spesifisere skrift, skriftstørrelse og farge. Dra tekstboksen slik at den er sentrert på venstre side av banneret.

Trinn 5

Velg "Åpne" fra Fil-menyen, og velg et hvilket som helst bilde på datamaskinen du vil bruke til banneret, for eksempel en firmalogo, et bilde av deg selv eller et produkt du selger. Når bildet åpnes, velger du "Dupliser" fra Lag-menyen. Endre destinasjonen til overskriftsfilen din, som vil hete "Untitled-1" med mindre du allerede har lagret den. Klikk "OK" for å legge til bildet som et nytt lag på banneret.

Trinn 6

Velg "Transform" fra Rediger-menyen, og klikk deretter "Scale". I de fleste tilfeller vil ikke hele bildet være synlig på det smale banneret, men omrisset er synlig etter at du har valgt "Skaler". Dra et hvilket som helst hjørne av omrisset for å endre størrelse på banneret. Hold nede "Skift" -tasten mens du drar for å låse sideforholdet. Trykk enter." Dra bildet slik at det er på høyre side av banneret.

Trinn 7

Klikk på "Forgrunnsfarge" -ikonet på verktøylinjen for å åpne fargevelgeren. Klikk hvor som helst på høyre side av banneret for å matche fargen i fargevelgeren, og klikk deretter "OK".

Trinn 8

Velg "Rektangelverktøyet" fra verktøykassen. Klikk på "Fyll" -menyen og velg deretter "Gradient" -ikonet øverst i menyalternativene. Dra markøren over banneret fra rett innenfor bildets venstre side helt til banneret til venstre kant. Det lager et rektangel med en gradient ved hjelp av fargen du matchet fra bildet.

Trinn 9

Finn laget "Rektangel 1" i Lag-panelet, som er laget som inneholder gradientrektangelet du nettopp har lagt til. Dra dette laget ned for å gjøre det til det tredje laget fra toppen - under "Lag 1" og laget som inneholder teksten din. Klikk på "Opacity" -menyen øverst i Lag-panelet og dra glidebryteren slik at den er omtrent 50 prosent. Når du gjør toppgradienten semi-transparent, kan den smelte sammen med gradienten under den, og skape en rik bakgrunn.

Trinn 10

Velg laget som inneholder teksten i Lag-panelet. Klikk på "Layer" -menyen, velg "Layer Style" og klikk deretter "Bevel & Emboss." Sørg for at Style-menyen er satt til "Emboss" og dra glidebryteren "Dybde" til venstre - rundt "225" prosent - for å legge til bare litt av denne effekten i teksten.

Trinn 11

Klikk på "Satin" -alternativet i vinduet Lagstil. For denne stilen, bruk en blandingsmodus på "Multiply" og reduser opasiteten til omtrent "15" prosent. Dette kombinerer satinstil med pregestil. Juster innstillingene om ønskelig, og klikk "OK".

Lagre bildet som et nettoptimalisert banner ved å velge "Save for Web" fra Fil-menyen. Velg "JPEG" fra Format-menyen og bruk en bildekvalitet på mellom 75 og 80 prosent. Dette skaper et bilde med en liten filstørrelse, som raskt lastes inn av hvilken som helst nettleser, uten å ofre bildekvaliteten. Klikk "Lagre" og velg et sted å lagre filen på datamaskinen din. Når du har lukket Photoshop, legger du til filen på websiden din.