i denna Photoshop-webbdesignhandledning kommer vi att designa en smashing, ren och professionell webbplatslayout i Photoshop. Layouten vi gör i denna handledning kan användas som personlig eller företags webbdesign. Denna design är ganska användarvänlig, så det borde vara bra för din webbplats rykte.
Uppdatering: Detta är den första delen av en tvådelad serie som lär dig hur du skapar layouten i Photoshop och sedan hur du konverterar den till en standardkompatibel (X)HTML-webbdesign.
serien ”ren och professionell webbdesign”
- Del 1: Skapa en ren och professionell webbdesign i Photoshop
- del 2: Koda en ren och professionell webbdesign
slutlig förhandsvisning
ta en titt på den layout som vi kommer att skapa i denna handledning. Du kan se den slutliga förhandsgranskningen av bilden nedan eller klicka här för en fullstor version. 
Förbered ditt Photoshop-dokument
1 Skapa ett nytt dokument i Photoshop (Ctrl/Cmd + N) med inställningarna från följande bild.
Ställ in inställningar för enheter och linjaler
2 Se till att du arbetar i pixelenheter, som är standard fast enhet för webbdesign.
Ställ in följande inställningar för dina linjaler från Inställningsdialogfönstret (Ctrl/Cmd + K); klicka på enheter & linjaler och se till att du har allt som visas i figuren nedan. 
Lägg till guider för att ange innehållsområdet
3 Aktivera Photoshop-linjaler från vyn > linjaler.
växla linjalernas synlighet genom att trycka på ”Ctrl/Cmd + R”.
öppna också Info-panelen från fönstret > Info (kortkommando: F8).
Info-panelen ger användbar information Beroende på det valda verktyget.
genom att trycka på ”M” väljer du det rektangulära markeringsverktyget och skapar en ruta som är 120px bred från dukens vänstra hörn. Du kan justera storleken genom att titta på Info-panelen medan du gör valet.
Klicka nu på den vänstra linjalen och dra en guide till höger om markeringsmarkeringen som visas i bilden nedan. 
4 Flytta det här valet till höger på duken. Tilldela en annan guide till vänster om valet.
din duk ska nu se ut så här: 
skapa logotypen
5 Nu ska vi skapa logotypen för vår webbplats.
logotypen kommer att bli mycket enkel och det kommer att ha en färggradienteffekt. Skapa en ny grupp (Layer > New > Group) och namnge den ”logo”.
6 Välj det horisontella typverktyget (T) och skriv ”SMASHING” (eller namnet på din webbplats) med stora bokstäver.
7 ställ sedan in teckensnittet i Arial, stilen till fetstil och storleken till 42pt. Ställ också in alternativet anti-aliasing method till Sharp och använd färgen #101112.
du kan också ställa in dessa alternativ i alternativfältet när Typverktyget är det aktiva verktyget. 
8 dubbelklicka för att öppna dialogrutan lagerformat. Välj Gradient Overlay, klicka på Gradient Editor och använd inställningarna som visas nedan.
9 sätt ”SMASHING” typskiktet på avståndet 35px från toppen och 0px från vänster guide. Du kan göra detta exakt med hjälp av Flytta verktyget (V) och piltangenterna. Duplicera detta typlager (lager > duplicera lager).
flytta det duplicerade lagret bredvid” SMASHING ”- ordet och redigera texten till”Dzine”. Upprepa steg 6, 7, 8 men använd olika lutningsfärger (vänster färgstopp: #b27625, höger färgstopp: #e5ad27) för ordet ”Dzine”.
10 Välj verktyget horisontell Typ (T) och Lägg till en tagglinje under logotypen med följande inställningar. 
11 Den slutliga logotypen ska se ut som bilden nedan.
för att aktivera / inaktivera guiderna, gå till Visa > Visa > rutnät eller använd genvägen Ctrl / Cmd + ; 
skapa navigeringsfältet
12 skapa en ny grupp och namnge den ”navigation”, den ska vara över ”logo” – gruppen. Dra en guide från den övre linjalen, 150px under kanvasens övre kant. Välj rektangelverktyget (U) och dra en horisontell linje med 4px höjd med en färg på #e3ab27, över duken.
13 Lägg till navigeringslänkar på 12px-hög från denna horisontella linje och 20px till höger om vänster guide.
Välj det rundade rektangelverktyget (U) och rita en låda med storleken 72px med 35px. Flytta detta lager under textlänkarna och namnge lagret ”sväva”.
räta ut de nedre rundade hörnen med verktyget konvertera punkt. Flytta sidorna på ojämna kanter nedan med en 8px marginal för att göra kanterna lika med andra inre kanter längst ner.
dubbelklicka på” hover ” – lagret för att öppna dialogrutan Layer Style och lägga till gradientfärger (vänster färgstopp: #e5ad27, höger färgstopp: #b27625). Välj det horisontella typverktyget (T), välj texten, ”hem” och ändra färg till #ffffff (vit). 
skapa avsnittet ”ring oss”
14 nästa kommer vi att skapa avsnittet ”ring oss” längst upp till höger om vår design (exakt motsatt sida av logotypen).
ladda ner den här telefonikonen och placera den här nära rätt guide. Namnge detta lager”telefonikon”. Välj verktyget horisontell Typ (T).
Lägg till ett telefonnummer till vänster om telefonikonen med teckensnittet Arial, med storleken inställd på 20pt och färgen #292929.
Lägg till lite relaterad text under telefonnumret med teckensnitt Arial, satt till fetstil, med en storlek på 11pt och en färg på #595959. 
skapa rubriken
15 Nu kommer vi till en skapa rubrikavsnittet. Skapa en ny grupp och namnge den ”header”.
16 Välj rektangelverktyget (U) och skapa en rektangelform med storleken 1200px med 440px.
sätt denna rektangel på ett avstånd av 1px under navigeringsfältet och namnge detta lager ”header bg”. Dubbelklicka på” header bg ” – lagret, välj Gradient Overlay layer-stilen och ha dessa två färger i Gradientredigeraren (vänster färgstopp: #2e2226, höger färgstopp: #7a7556).
se bilden nedan för rektangelns position och färgdetaljer. 
17 skapa en annan rektangel från rektangelverktyget (U) med storleken 960px med 360px.
sätt denna rektangel på avståndet 40px från toppen av” header bg ” – skiktet och 0px från vänster guide. Namnge detta lager”header container”. Förhandsgranska nedan vad vi har gjort hittills med designen.
skapa avsnittet ”featured project”
18 därefter skapar vi avsnittet featured project. Skapa en ny grupp i rubrikgruppen och namnge den ”fp”. Välj rektangelverktyget (U) och skapa en rektangel med storleken 630px med 340px på avståndet 10px från toppen och vänster om huvudbehållaren.
ge denna lagerfärg på #000000 och namnge den”FP container”. 
19 öppna en bild i Photoshop för att placera här som ditt utvalda projekt. Gå till Välj > alla (Ctrl / Cmd + A) och redigera sedan > kopiera (Ctrl/Cmd + C).
kom tillbaka till vår webbdesign.
skapa ett nytt lager ovanför” FP container ” – lagret och gå till redigera > klistra in (Ctrl/Cmd + V) för att klistra in i din utvalda projektbild. Byt namn på detta lager till”fp image”. Högerklicka på” FP image ” – lagret och välj Skapa klippmask.
nu är bilden bara synlig inuti rektangeln (”FP container”).
gör justeringar så att din utvalda projektbild liknar den som visas nedan. 
20 gå till redigera > transformera > skala (Ctrl/Cmd + T). Från alternativfältet klickar du i rotationsrutan och skriver -4 och trycker på enter två gånger för att justera vinkeln.
stanna på samma lager (”FP-bild”) och välj Ljusstyrka som blandningsläge för detta lager. 
21 nästa kommer vi att skapa titel-och beskrivningsfältet för den presenterade projektbilden. Välj rektangelverktyget (U) och skapa en rektangelform med storleken 630px med 90px med färg #161718.
ändra opacitet för detta lager till 90% och namnge det ”title bg”. Placera denna rektangel som visas i bilden nedan. 
22 skapa en annan rektangel med storleken 630px med 1px med färg #9c9c9c och namnge den ”titel horisontell linje”.
placera denna rektangel på den övre kanten av innehållet i ”title bg” – lagret.
23 Lägg till en titel och beskrivning inuti rektangeln som vi skapade i steg 21, med följande inställningar för titel och beskrivning.
för titeln:
- teckensnitt: Arial, färg: # ffffff, storlek: 25pt och anti-aliasing metod alternativ: Sharp
för beskrivningen:
- teckensnitt: Arial, färg: # a4a4a4, storlek: 12pt och anti-aliasing metod alternativ: Ingen
skapa avsnittet ”quick quote”
24 skapa en annan grupp i header-gruppen och namnge den ”quick quote”. Välj rektangelverktyget (U) och skapa en rektangel med storleken 300px med 340px. Placera denna rektangel på ett avstånd av 10px till höger om det utvalda projektavsnittet och namnge det ”qq container”.
25 vi kopierar en lagerstil från ett annat lager som vi skapade i ett tidigare steg.
gå in i” navigation ”-gruppen, högerklicka på” hover ”-lagret, välj Kopiera lagerstil, gå tillbaka till” qq container ” – lagret, högerklicka och välj Klistra in lagerstil. Vi har samma lagerstil i” hover ” – lagret för vår ”qq-Behållare” nu. 
26 Välj verktyget horisontell Typ (T).
skriv ”Quick Quote” inuti ”qq container” på avståndet 20px från de övre och vänstra kanterna på den innehållande rutan. Ställ in teckensnittsfamiljen på Trebuchet MS (eller ett webbsäkert teckensnitt som du föredrar) med alternativet vit färg (#ffffff) och kantutjämningsmetod inställd på Sharp. Vi kommer att använda det rundade rektangelverktyget (U) för att skapa tre formulärfält.
välj verktyget Rundad rektangel (U) och ställ in radien på 3px. Skapa sedan två rundade rektanglar med storleken 260px med 35px med vitfärgen (#ffffff). Namnge sedan formlagren som” fält1 ”respektive” fält2″.
skapa den tredje rundade rektangeln med storleken 260px med 75px med en vit färg (#ffffff) och namnge den ”field3”. Välj verktyget horisontell Typ (T) och skapa etiketter för varje formulärfält. 
27 Välj det rundade rektangelverktyget (U) och skapa en låda med 80px med 35px och namnge den ”skicka btn”.
28 dubbelklicka på lagret för att öppna dialogrutan lagerformat och kryssa i kryssrutan Gradient Overlay från vänster.
klicka på Gradientredigeraren och ändra färger på gradienten enligt nedan. 
29 Välj det horisontella typverktyget (T) och skriv ”skicka” med hjälp av teckensnittet Arial, style Bold och size vid 13pt. Välj båda lagren i lagerpanelen (”skicka btn ”och”skicka text”).
30 välj verktyget Flytta (V) från verktygspanelen och klicka på Justera vertikala centra och justera horisontella centra från alternativfältet.
(Alternativt kan du få samma resultat genom att gå till lager > justera > vertikala centra och lager > justera > horisontella centra). 
skapa huvudinnehållsområdet
31 skapa en ny grupp och namnge den ”innehåll”. Välj rektangelverktyget (U).
skapa en rektangel på 300px med 175px och namnge den ”c01”. Placera detta lager 30px under rubriken och 0px från vänster guide. Dubbelklicka på lagret och använd inställningarna från följande bild.
32 vi kommer att lägga till innehåll i den här rutan nu. Välj det horisontella typverktyget (T) och Lägg till texten ”om SmashingDzine”. Gör ett val av ordet ”om” med hjälp av verktyget horisontell Typ (T) och ändra sedan färgen till #b47825.
gör sedan ett urval av” Smashing ” – ordet och ändra sedan färgen till #2f2f2f. Lägg till en liten beskrivning och en länktext under titeln. Följande alternativ användes för titel, beskrivning och länktext.
(du kan justera dessa alternativ efter behov). 
för titeln:
- typsnitt: Trebuchet MS, stil: Normal, storlek: 24pt, anti-aliasing metod: Sharp
för beskrivningen:
- teckensnitt: Arial, stil: Normal, storlek: 12pt, kantutjämningsmetod: ingen, färg: #767676
för länktexten:
- teckensnitt: Arial, stil: fet, storlek: 13pt, anti-aliasing metod: ingen, färg: # 252525, understrykning
33 vi lägger till en fyrkantig ruta bredvid beskrivningen nu. Välj rektangelverktyget (U) och färg #ffffff, håll ned Shift-tangenten för att behålla proportionerna och skapa en kvadrat med storleken 88px med 88px. Flytta denna kvadrat på ett avstånd av 10px från vänster om rektangeln (”c01”).
namnge detta lager ”border”. Dubbelklicka på lagret för att öppna dialogrutan lagerformat och Lägg till ett Strecklagerformat med följande inställningar: 
34 skapa en annan låda med storleken 82px med 82px och placera den i mitten av ”border” – lagret. Namnge detta lager” box ” och ändra färgen på denna kvadrat till #d5d5d5.
Välj alla lager i den här gruppen (”content” – gruppen), gå till Layer > New > Group Från Layers (Ctrl/Cmd + G) och byt namn på den nya gruppen ”om”. 
Obs: Den inre grå fyrkantiga lådan är en platshållare för en bild och kan ersättas med vilken bild du väljer.
35 duplicera gruppen” om ”(högerklicka på gruppen och välj Duplicera grupp) och namnge den”Tjänster”. Högerklicka på gruppen” tjänster ”och välj Duplicera grupp igen och namnge den”portfölj”.
vi har tre grupper nu (”om”, ”tjänster”och ” portfölj”). Flytta den sista gruppen (”portfölj”) till höger guide som visas nedan. 
36 Välj alla tre grupperna i panelen Lager och gå sedan till lager > distribuera > horisontella centra för att rymma dem lika.
Klicka här för att se bilden i full storlek på följande bild. 
37 ändra titlarna för gruppen” tjänster ”(center) och” portfolio ” grupp (höger) som visas nedan. (Du kan ändra dessa titlar enligt dina krav.) 
skapa sidfoten
38 skapa en ny grupp och namnge den ”sidfot”.
Välj rektangelverktyget (U) och skapa en rektangel med storleken på 1200px med 100px längst ner i vår designlayout. Namnge detta lager”sidfot bg”. Använd samma Gradientöverlagringsstil som” header bg ”-lagret genom att högerklicka på” header bg ” – lagret och välja Kopiera lagerstil.
gå tillbaka till sidfotsgruppen, högerklicka på ”sidfot bg”-lagret och välj Klistra in lagerstil. 
39välj verktyget horisontell Typ (T) och Lägg till upphovsrättstext och sidfotlänkar text till vänster med hjälp av teckensnittet Arial, storlek 12pt och en grå färg (#dddddd). 
40 Vi kommer att lägga till avsnittet e-postprenumeration till höger.
skapa en ny grupp i ”footer” – gruppen och namnge den ”prenumerera”. Välj det rundade rektangelverktyget (U) och skapa en rektangel på 85px med 35px. Namnge detta lager”prenumerera btn”.
41 Upprepa steg 26 för att lägga till formulärfält och etiketter.
42 Välj det horisontella typverktyget (T) och skriv ”prenumerera” med teckensnittet Arial, stil inställd på fetstil och storlek vid 13pt.
välj båda lagren (”prenumerera btn ”och”prenumerera text”).
43 Upprepa steg 28 för att skapa knappen Prenumerera.
44 välj verktyget Rundad rektangel (U) och ställ in radien på 3px. Skapa en rundad rektangel med storleken 210px med 35px med en vit färg (#ffffff) och namnge detta formlager som ”e-postfält”. Lägg till en textrad ovanför ”e-postfält”.
slutresultat
OK, det är det och vi är klara. Här är slutresultatet.
klicka på bilden nedan för att se full storlek layout. Tack för att du följer med min tutorial. Jag hoppas att ni alla haft och lärt sig något nytt från denna handledning.
vänligen lämna dina kommentarer nedan och dela dina tankar och åsikter, jag skulle gärna höra dem. Du kan också dela denna designhandledning till dina vänner om du tror att det kan vara till hjälp för dem!
ladda ner källfilen
du kan ladda ner Photoshop-filen (PSD) i denna handledning från länken nedan som ett ZIP-arkiv.
- ren-professionell-weblayout (ZIP, 2,4 MB)
sammanfattning
om du väljer att använda den här designen, se till att optimera bilderna för att minska laddningstiden. Detta beslut bör vara bra för små platser som en för en golfbana eftersom det är enkelt, lätt att använda och användarvänligt.
relaterat innehåll
- hur man skapar en ren bloggdesign med Photoshop
- kodar en ren webb 2.0 stil webbdesign från Photoshop
- skapa en smidig och minimalistisk webblayout i Photoshop
om författaren
Waheed Akhtar är en frilansande webbdesigner från Dubai, Förenade Arabemiraten. Han är grundare och redaktör för Boost Inspiration, där han visar olika kreativa resurser för Digital konst, grafisk Design, Illustration, fotografi och typografi för inspiration. Du kan nå honom via Twitter eller Facebook.