Hur du skapar en professionell webbplatsrubrik i Photoshop

Photoshop CC 2014 är ett utmärkt verktyg för att skapa professionella bilder till din webbplats, inklusive banners. När du designar din första banner bör du hålla designen enkel så att grafiken inte blir överbelastad med för mycket visuellt innehåll. Har ditt företag färger och typsnitt kan du naturligtvis använda dem i din banner.

Steg 1 – Skapa ett nytt dokument

Öppna Photoshop. Tryck Ctrl‑N eller välj File > New. Ange bredden till 900 px och höjden till 150 px och klicka på OK.

Steg 2 – Välj bakgrund

Välj en solid bakgrundsfärg om du vill. Klicka på Foreground Color i verktygsfältet, välj färg, och rita sedan en rektangel över hela bannerområdet. I denna guide använder vi dock två överlappande gradienter istället för en solid färg.

Steg 3 – Lägg till en gradient

Välj Gradient Tool i verktygslådan. Klicka på Fill i alternativfältet och välj svart‑vit gradient från förinställningarna. Klicka någonstans ovanför bannerområdet och dra musen nedåt för att skapa gradienten.

Steg 4 – Lägg till text

Välj Horizontal Type Tool och dra en textruta över bannerområdet. I alternativfältet anger du typsnitt, storlek och färg. Positionera rutan så att den är centrerad i den vänstra halvan av banner.

Steg 5 – Importera en bild

Välj File > Open och välj en bild (t.ex. logotyp eller produktfoto). När bilden öppnas, duplicera den genom Layer > Duplicate Layer och placera den i din header‑fil. Klicka OK för att lägga till bilden som ett nytt lager.

Steg 6 – Justera bilden

Välj Edit > Transform > Scale. Ändra storleken genom att dra i ett hörn av bildens ram, håll nere Shift för att behålla proportionerna, och tryck Enter. Flytta bilden till höger sida av banner.

Steg 7 – Matcha färg

Välj Foreground Color för att öppna färgväljaren. Klicka på ett område i bilden som du vill matcha, och klicka sedan OK.

Steg 8 – Skapa en färgad rektangel

Välj Rectangle Tool och fyll med Gradient. Dra från vänster sida av bilden till bannerens vänstra kant för att skapa en rektangel med en gradient som matchar bilden.

Steg 9 – Justera lagernivåer

Hitta Rectangle 1 i lagerpanelen och flytta den nedåt så att den ligger under textlagret. Sänk opaciteten till cirka 50 % för att skapa en mjuk överlappning med den nedre gradienten.

Steg 10 – Lägg till textens effekt

Välj textlagret, gå till Layer > Layer Style > Bevel & Emboss. Ställ in till Emboss och justera Depth till cirka 225 %. Klicka OK.

Steg 11 – Lägg till satin‑effekt

Välj Satin i Layer Style‑fönstret, ställ in Blend Mode till Multiply och sänk Opacity till 15 %. Klicka OK för att kombinera effekterna.

Spara som Web-banner

Välj File > Save for Web. Välj JPEG och ställ in bildkvaliteten till 75‑80 %. Detta minskar filstorleken utan att förlora alltför mycket bildkvalitet. Klicka Save och välj en plats på din dator. Lägg till den sparade filen på din webbsida.