Hur man skapar en professionell webbplatsrubrik i Photoshop

Photoshop CC 2014 är ett perfekt verktyg för att designa professionella bilder för din webbplats, inklusive banners. När du designar din första banner, håll designen enkel så att grafiken inte överbelastas med för mycket visuell information. Om ditt företag har företagsfärger och ett företags typsnitt kan du verkligen använda dem i din banner.

Steg 1

Starta Photoshop. Tryck på "Ctrl-N" eller välj "Ny" i Arkiv-menyn. I dialogrutan anger du höjd och bredd för din banner, till exempel 900 pixlar breda och 150 pixlar höga. Klicka på "OK".

Steg 2

Välj en solid bakgrundsfärg för bannern om så önskas. För att göra detta, klicka på ikonen "Förgrundsfärg" i verktygsfältet och välj en färg, klicka sedan på "Rektangelverktyget" och dra den över hela bannern. I den här självstudien överlappar vi dock två lutningar istället för att använda en solid bakgrund.

Steg 3

Klicka på "Gradient" -verktyget i verktygslådan. Klicka på "Fyll" -menyn i alternativfältet och välj den svarta och vita lutningen från tillgängliga förinställningar. Klicka var som helst ovanför bannern på duken och dra markören under bannern. Släpp musknappen för att använda lutningen.

Steg 4

Klicka på "Horisontellt textverktyg" i verktygslådan. Dra markören över bannern för att skapa en textruta. Använd menyerna i alternativfältet för att ange teckensnitt, teckenstorlek och färg. Dra textrutan så att den är centrerad på bannerens vänstra sida.

Steg 5

Välj "Öppna" i Arkiv-menyn och välj vilken bild på din dator som du vill använda för din banner, som en företagslogotyp, en bild av dig själv eller en produkt du säljer. När bilden öppnas väljer du "Duplicera" från Layer-menyn. Ändra destinationen till din rubrikfil, som skulle kallas "Untitled-1" om du inte redan har sparat den. Klicka på "OK" för att lägga till bilden som ett nytt lager i din banner.

Steg 6

Välj "Transformera" från menyn Redigera och klicka sedan på "Skala". I de flesta fall syns inte hela bilden på den smala bannern, men dess kontur är synlig när du har valt "Skala". Dra valfritt hörn av bildkonturen för att ändra storlek på den för din banner. Håll ner "Skift" -tangenten medan du drar för att låsa bildformatet. Tryck enter." Dra bilden så att den är på höger sida av bannern.

Steg 7

Klicka på ikonen "Förgrundsfärg" i verktygsfältet för att öppna färgväljaren. Klicka var som helst på höger sida av bannern för att matcha dess färg i färgväljaren och klicka sedan på "OK".

Steg 8

Välj "Rektangelverktyg" från verktygslådan. Klicka på "Fyll" -menyn och välj sedan "Gradient" -ikonen högst upp i menyalternativen. Dra markören över bannern från precis innanför bildens vänstra sida hela vägen till bannerens vänstra kant. Det gör en rektangel med en lutning med den färg du matchade från bilden.

Steg 9

Leta reda på "Rektangel 1" -skiktet i panelen Lager, vilket är det lager som innehåller den lutningsrektangel som du just lagt till. Dra detta lager nedåt för att göra det till det tredje lagret uppifrån - under "Layer 1" och det lager som innehåller din text. Klicka på menyn "Opacitet" högst upp på panelen Lager och dra skjutreglaget så att det är cirka 50 procent. Genom att göra den översta lutningen halvtransparent kan den smälta samman med lutningen under den och skapa en rik bakgrund.

Steg 10

Välj lagret som innehåller din text i panelen Lager. Klicka på "Layer" -menyn, välj "Layer Style" och klicka sedan på "Bevel & Emboss." Se till att Style-menyn är inställd på "Emboss" och dra reglaget "Djup" åt vänster - cirka "225" procent - för att bara lägga till lite av denna effekt i texten.

Steg 11

Klicka på alternativet "Satin" i fönstret Layer Style. För denna stil, använd ett blandningsläge på "Multiplicera" och minska opacitet till cirka "15" procent. Detta kombinerar satinstilen med präglingsstilen. Justera inställningarna om så önskas och klicka på "OK".

Spara bilden som en webboptimerad banner genom att välja "Spara för webben" i Arkiv-menyn. Välj "JPEG" från Format-menyn och använd en bildkvalitet på mellan 75 och 80 procent. Detta skapar en bild med en liten filstorlek, som snabbt laddas av vilken webbläsare som helst, utan att offra bildkvaliteten. Klicka på "Spara" och välj en plats för att lagra filen på din dator. När du har stängt Photoshop, lägg till filen på din webbsida.