I denna guide ska vi gå igenom hur man gör en hyfsat grundläggande hemsida.
OBSERVERA att denna guide kräver en del tidigare kunskaper av Photoshop. Det går däremot att ta sig igenom guiden utan tidigare erfarenhet om man har lite tålamod.

Jag vill börja med att säga att detta är ett grundläggande upplägg på en hemside-layout. Inte för komplicerad, ren och snygg. Den går enkelt att göra med andra färger och texturer.

Börja med att skapa ett nytt dokument som är 1024×768 pixlar och vit bakgrund.

Skapa ett nytt lager (CTRL + Shift + N) och döp det till Bakgrund ruta
Använd nu Rectangular Marquee Tool och gör en markering som ser ut så här:

Markera ditt Gradient Tool, öppna upp färg inställningarna för gradient och ange följande färg inställningar.

Dra en Gradient lodrätt uppifrån och ner.
Håll markeringen igång.

Gå nu in på Layer > Layer Style > Stroke och använd följande inställningar:

Vi ska där efter använda Rounded Rectangle Tool. Se till att du har Shape Layers markerat bland inställningarna.

Innan vi gör själva rutan se till att du har vitt som förgrundsfärg.
Gör nu en ruta som ser ut som följande:

Detta blir nu en så kallad Shape. Den skapar och hamnar i ett helt eget lager. Vi kommer att göra en till liknande Shape senare, men så länge så struntar vi i att döpa om vårat nya lager. Den heter just nu Shape1.

Nu kommer anledningen till varför vi har våran markering kvar.
Gå in under Layer > Align Layers to Selection > Horizontal Centers
Detta gör att våran nya ruta blir centrerad horizontalt inom markeringen.
Vi kan nu släppa markeringen.

Skapa nu ett nytt lager och döp det till text rutor.
Sätt färg #999999 (grå) som Förgrundsfärg och markera Rectangular Marquee Tool.

Gör två rutor som ser ut så här:

Ladda ner Zebra.jpg HÄR

Öppna upp bilden i Photoshop, antingen markera hela dokumentet (CTRL + A), kopiera (CTRL + C) klistra in i vårat dokument (CTRL + V), eller så tar du tag i hela zebra bilden och drar den in i hemsidedokumentet.

Lägg Zebra bilden så att den täcker alla våra nyligen skapade rutor (Shape1 och Text rutor)

Nu ska vi plocka upp markeringarna från våra tidigare skapade rutor. Detta görs enkelt genom att hålla in CTRL + Vänster klicka på den lilla lager bilden bland våra lager.

Börja med att göra detta på Shape1 och sen för att få med markeringen från ett annat lager också tryck CTRL + Shift + Vänster Klicka på lagret Text Rutor.

Det borde nu se ut så här:

Vänd ut och in på markeringen Select > Inverse eller (CTRL + Shift + I)
Se till att lagret med Zebra texturen är markerad och tryck på Delete.

Nu har vi tre olika rutor, men alla ligger i samma lager. För att få dom att hamna i olika lager tar vi helt enkelt Rectangular Marquee Tool och drar en markering över dom två nedre rutorna (Text rutorna).
Gå in på Edit > Cut eller CTRL + X för att klippa ut dom två rutorna. Gå sen in på Edit > Paste eller CTRL + V för att klistra in rutorna i dokumentet igen. Dom hamnar då automatiskt i ett helt nytt lager. Justera så dom två rutorna ligger på samma ställe som dom gjorde från början.

Vi ska nu vända blicken mot våra lager. Just nu ser det ut så här:

Vi behöver inte alla lager som vi för tillfället har. Några har vi använt enbart för att få fram formen på zebra texturen. Lagret Shape 1 kan vi nu högerklicka på och ta delete. Den behövs inte längre.

Lagret som just nu heter Layer 1 kan vi döpa om till Header och lagret som nu heter Layer 2 döper vi till Text rutor 2.

Markera lagret Text rutor 2 och ändra opacity till 20% och lager inställning till Har Light.

Markera lagret Text rutor och ändra opacity där till 50%

Markera lagret Header och gå in på Layer > Layer Style > Inner Shadow. Ange inställningarna som nedan:

Nu bör din sida börja ta form och se ut så här:

Vi ska nu börja på själva menyraden. Förbered dessa färger:

Markera Rounded Rectangle Tool och gör en menybar som ser ut så här:

Det nya lagrets om automatiskt skapades heter just nu Shape 1, döp om den till Menybar.
SHIFT + Vänsterklicka på lagerbilden till lagret Bakgrund ruta och med lagret Menybar markerat gå in på Lager > Align Layers to Selection > Horizontal Centers. Detta gör vi för att vara säkra på att vi verkligen har våran menybar i mitten.

Se ännu en gång till att du har lagret Menybar markerat och gå in på Layer > Layer Style > Gradient Overlay.
Använd dessa inställningar:

Det är här färgerna kommer till användning vi ställde in tidigare. Som gradient option ställer du bara in foreground to background color.

Nu ska du lägga till två layer styles till, så väl inne i rutan väljer du Stroke och Drop Shadow på vänster sidan.

Här är inställningarna för Stroke:

Här är inställningarna för Drop Shadow:

Sist men inte minst ska vi göra en väldigt enkel sk. Footer. Skapa ett nytt lager och döp det till Footer.
Längst ner i vårat dokument, mellan dom två orangea linjerna ska vi göra en grå horizontell box.
Använd Rectangular Marquee Tool, gör en markering och fyll den med en grå färg. (Jag använder #999999) Lämna en pixel på varje sida precis innan dom orangea linjerna kommer. Här ser du hur jag menar:

Här är det färdiga resultatet:

Klicka på bilden för att göra den större.

Det är nu upp till dig att lägga till text, rubriker, logga och din personliga touch. Så här ser mitt resultat ut: