i denne Photoshop hjemmeside design tutorial, vi kommer til at designe en smadrende, ren og professionel hjemmeside layout i Photoshop. Det layout, Vi laver i denne tutorial, kan bruges som personlig eller virksomheds hjemmeside design. Dette design er ret brugervenligt, så det skal være godt for din sides omdømme.
opdatering: Dette er den første del af en todelt serie, der lærer dig, hvordan du opretter layoutet i Photoshop, og derefter hvordan du konverterer det til et STANDARDKOMPATIBELT HTML-design.
serien “rent og professionelt Internetdesign”
- Del 1: Opret et rent og professionelt Internetdesign i Photoshop
- Del 2: kodning af et rent og professionelt Internetdesign
endelig forhåndsvisning
se på det layout, vi opretter i denne tutorial. Du kan se den endelige forhåndsvisning af billedet nedenfor eller klik her for en fuld størrelse version. 
Forbered dit Photoshop-dokument
1 Opret et nyt dokument i Photoshop (Ctrl/Cmd + N) ved hjælp af indstillingerne fra følgende billede.
Indstil indstillingerne for enheder og linealer
2 Sørg for, at du arbejder i billedenheder, som er den faste standardenhed til internetdesign.
indstil følgende indstillinger for dine linealer fra Indstillingsdialogvinduet (Ctrl/Cmd + K); klik på enheder & linealer og sørg for, at du har alt indstillet som vist i nedenstående figur. 
Tilføj hjælpelinjer for at angive indholdsområdet
3 Aktiver Photoshop linealer fra visning > linealer.
Skift synligheden af linealerne ved at trykke på “Ctrl/Cmd + R”.
åbn også Infopanelet fra vinduet > Info (genvejstast: F8).
Infopanelet giver nyttige oplysninger afhængigt af det valgte værktøj.
ved at trykke på “M” skal du vælge det rektangulære markeringsværktøj og oprette en boks, der er 120 stk bred fra lærredets venstre hjørne. Du kan justere størrelsen ved at se på Infopanelet, mens du foretager markeringen.
Klik nu på venstre lineal og træk en guide til højre for markeringsvalget som vist på billedet nedenfor. 
4 Flyt dette valg på højre kant af lærredet. Tildel en anden guide til venstre side af markeringen.
dit lærred skal nu se sådan ud:
oprettelse af logoet
5 Nu skal vi oprette logoet til vores hjemmeside.
logoet bliver meget enkelt, og det vil have en farvegradienteffekt. Opret en ny gruppe (lag > ny > gruppe) og navngiv den “logo”.
6 Vælg værktøjet Horisontal Type (T) og skriv “SMASHING” (eller navnet på din hjemmeside) med store bogstaver.
7 indstil derefter skrifttypen til Arial i Tegnpanelet, stilen til fed og størrelsen til 42pt. Indstil også indstillingen anti-aliasing metode til skarp og brug farven #101112.
du kan også indstille disse indstillinger i indstillingslinjen, når værktøjet Type er det aktive værktøj. 
8 dobbeltklik for at åbne dialogboksen Lagstil. Vælg Gradientoverlay, klik på Gradienteditoren og brug indstillingerne som vist nedenfor.
9 Sæt “SMASHING” – typelaget i afstanden 35ph fra toppen og 0PH fra venstre guide. Du kan gøre dette nøjagtigt ved hjælp af flytteværktøjet (V) og dine piletaster. Dupliker denne type lag (lag > Duplicate Layer).
flyt det duplikerede lag lige ved siden af ordet “SMASHING” og rediger teksten til “Dsine”. Gentag trin 6, 7, 8, men brug forskellige gradientfarver (venstre farvestop: #b27625, højre farvestop: #e5ad27) for ordet “Dsine”.
10 Vælg værktøjet vandret Type (T), og tilføj en taglinie under logoet med følgende indstillinger. 
11 det endelige logo skal se ud som billedet nedenfor.
for at aktivere / deaktivere guiderne skal du gå til Vis > Vis > gitter eller brug genvejen Ctrl / Cmd + ; 
oprettelse af navigationslinjen
12 Opret en ny gruppe og navngiv den “navigation”, den skal være over “logo” – gruppen. Træk en guide fra den øverste lineal, 150 gange under lærredets øverste kant. Vælg rektangelværktøjet (U), og tegn en vandret linje på 4 gange højde med en farve på #e3ab27 på tværs af lærredet.
13 Tilføj navigationslinks på 12ph-høj fra denne vandrette linje og 20ph til højre for venstre guide.
Vælg værktøjet afrundet rektangel (U) og tegn en boks med størrelsen 72ph med 35ph. Flyt dette lag under tekstlinkene, og navngiv laget “hover”.
Ret de nederste afrundede hjørner ud med værktøjet Konverter punkt. Flyt siderne af ujævne kanter nedenunder med en margin på 8 stk.for at gøre kanterne lig med andre indvendige kanter i bunden.
Dobbeltklik på “hover”-laget for at åbne dialogboksen Lagstil og tilføje gradientfarver (venstre farvestop: #e5ad27, højre farvestop: #b27625). Vælg værktøjet vandret Type (T), vælg teksten, “hjem” og skift farve til #ffffff (hvid). 
oprettelse af afsnittet “ring til os”
14 næste skal vi oprette afsnittet “ring til os” øverst til højre i vores design (nøjagtigt modsat side af logoet).
Hent dette telefonikon, og placer dette i nærheden af den højre guide. Navngiv dette lag”telefonikon”. Vælg værktøjet vandret Type (T).
Tilføj et telefonnummer til venstre for telefonikonet ved hjælp af skrifttypen Arial, med størrelsen indstillet til 20pt og farven #292929.
Tilføj noget relateret tekst under telefonnummeret ved hjælp af skrifttype Arial, indstillet til Fed, med en størrelse på 11pt og en farve på #595959. 
oprettelse af header
15 Nu skal vi en skabe header sektion. Opret en ny gruppe og navngiv den”header”.
16 Vælg rektangelværktøjet (U), og opret en rektangelform med størrelsen 1200ph med 440ph.
sæt dette rektangel i en afstand af 1 stk under navigationslinjen og navngiv dette lag “header bg”. Dobbeltklik på” header bg ” – laget, vælg Gradient Overlay layer-stilen og få disse to farver i Gradienteditoren (venstre farvestop: #2e2226, højre farvestop: #7a7556).
se billedet nedenfor for rektangel position og farver detaljer. 
17 Opret et andet rektangel fra rektangelværktøjet (U) med størrelsen 960ph med 360ph.
sæt dette rektangel i en afstand af 40ph fra toppen af “header bg” – laget og 0PH fra venstre guide. Navngiv dette lag”header container”. Se nedenfor, hvad vi har gjort indtil nu med designet.
oprettelse af afsnittet “featured project”
18 næste opretter vi sektionen featured project. Opret en ny gruppe inde i headergruppen og navngiv den “fp”. Vælg rektangelværktøjet (U) og opret et rektangel med størrelsen 630ph med 340ph i afstanden 10ph fra toppen og venstre for headerbeholderen.
giv dette lag farve på #000000 og navngiv det “fp container”. 
19 Åbn et billede i Photoshop for at placere her som dit fremhævede projekt. Gå til Vælg > alle (Ctrl / Cmd + a), Rediger derefter > Kopier (Ctrl/Cmd + C).
kom tilbage til vores hjemmeside design.
Opret et nyt lag over “FP container” – laget, og gå til Rediger > Indsæt (Ctrl/Cmd + V) for at indsætte i dit fremhævede projektbillede. Omdøb dette lag til”FP image”. Højreklik på” FP image ” – laget, og vælg Opret klipmaske.
nu er billedet kun synligt inde i rektanglet (“FP container”).
foretag justeringer, så dit fremhævede projektbillede ligner det, der vises nedenfor. 
20 Gå til Rediger > Transform > skala (Ctrl/Cmd + T). Fra indstillingslinjen skal du klikke i rotationsboksen og skrive -4 og trykke på enter to gange for at justere vinklen.
Bliv på det samme lag (“FP-billede”), og vælg lysstyrke som blandingstilstand for dette lag. 
21 næste skal vi oprette titel-og beskrivelseslinjen for det fremhævede projektbillede. Vælg rektangelværktøjet (U) og opret en rektangelform med størrelsen 630ph med 90ph ved hjælp af farve #161718.
Skift opacitet af dette lag til 90% og navngiv det “title bg”. Placer dette rektangel som vist på billedet nedenfor. 
22 Opret et andet rektangel med størrelsen 630ph med 1PH ved hjælp af farve #9c9c9c og navngiv det “Titel vandret linje”.
Placer dette rektangel på den øverste kant af indholdet af “title bg” – laget.
23 Tilføj en titel og beskrivelse inde i det rektangel, vi oprettede i trin 21, ved hjælp af følgende indstillinger for titel og beskrivelse.
til titlen:
- skrifttype: Arial, farve: #ffffff, størrelse: 25pt og anti-aliasing metode mulighed: Sharp
til beskrivelsen:
- skrifttype: Arial, farve: # a4a4a4, størrelse: 12pt og anti-aliasing metode mulighed: Ingen
oprettelse af afsnittet “hurtigt tilbud”
24 Opret en anden gruppe inde i overskriftsgruppen og navngiv den “hurtigt tilbud”. Vælg rektangelværktøjet (U), og opret et rektangel med størrelsen 300ph med 340ph. Placer dette rektangel i en afstand af 10 stk.til højre for det fremhævede projektafsnit, og navngiv det “KK-container”.
25 vi kopierer en Lagstil fra et andet lag, vi oprettede i et tidligere trin.
gå ind i gruppen “navigation”, Højreklik på “hover”-laget, vælg Kopier Lagstil, gå tilbage til “KK container”-laget, højreklik og vælg Indsæt Lagstil. Vi har den samme Lagstil som “hover” – laget til vores “KK-container” nu. 
26 Vælg værktøjet vandret Type (T).
skriv “hurtig citat” inde i “KK container” i en afstand af 20 stk fra den øverste og venstre kant af den indeholdende boks. Indstil skrifttypefamilien til Trebuchet MS (eller en netsikker skrifttype efter din præference) med denfarve af hvid (#ffffff) og anti-aliasing metode indstilling indstillet til skarp. Vi skal bruge værktøjet afrundet rektangel (U) til at oprette tre formularfelter.
Vælg værktøjet afrundet rektangel (U), og indstil radius til 3 stk. Opret derefter to afrundede rektangler med størrelsen 260ph ved 35ph ved hjælp af farven på hvid (#ffffff). Navngiv derefter formlagene som henholdsvis” field1 “og” field2″.
Opret det tredje afrundede rektangel med størrelsen 260ph med 75ph ved hjælp af en hvid farve (#ffffff) og navngiv det “field3”. Vælg værktøjet vandret Type (T), og opret etiketter for hvert formularfelt. 
27 Vælg rundet rektangel værktøj (U) og oprette en boks på 80ph ved 35ph og navngive det “send btn”.
28 Dobbeltklik på laget for at åbne dialogboksen Lagformater, og marker afkrydsningsfeltet Gradient Overlay fra venstre.
Klik på Gradienteditoren, og skift farver på gradienten som vist nedenfor. 
29 Vælg værktøjet vandret Type (T), og skriv “Send” ved hjælp af skrifttypen Arial, stil fed og størrelse ved 13pt. Vælg begge lag i panelet Lag (“send btn “og”Send tekst”).
30 vælg Flyt værktøj (V) fra panelet Værktøjer, og klik på Juster lodrette Centre og juster vandrette centre fra indstillingslinjen.
(Alternativt kan du få det samme resultat ved at gå til lag > Juster > lodrette Centre og lag > Juster > vandrette Centre). 
oprettelse af hovedindholdsområdet
31 Opret en ny gruppe og navngiv den “indhold”. Vælg rektangelværktøjet (U).
Opret et rektangel på 300ph ved 175ph og navngiv det “c01”. Placer dette lag 30ph under overskriften og 0PH fra venstre guide. Dobbeltklik på laget, og brug indstillingerne fra følgende billede.
32 vi vil tilføje indhold til denne boks nu. Vælg værktøjet vandret Type (T), og tilføj teksten “om Smashing”. Lav et valg af ordet” om ” ved hjælp af værktøjet vandret Type (T), og skift derefter farven til #b47825.
foretag derefter et valg af “Smashing” – ordet, og skift derefter farven til #2f2f2f. Tilføj en lille beskrivelse og en linktekst under titlen. Følgende indstillinger blev brugt til titel, beskrivelse og linktekst.
(du kan justere disse indstillinger efter behov). 
til titlen:
- skrifttype: Trebuchet MS, stil: Normal, størrelse: 24pt, anti-aliasing metode: Sharp
til beskrivelsen:
- skrifttype: Arial, stil: Normal, størrelse: 12pt, anti-aliasing metode: ingen, farve: #767676
til linkteksten:
- skrifttype: Arial, stil: fed, størrelse: 13pt, anti-aliasing metode: ingen, farve: #252525, understregning
33 Vi tilføjer en firkantet boks ved siden af beskrivelsen nu. Vælg rektangelværktøjet (U) og farve #ffffff, hold Shift-tasten nede for at opretholde proportionerne og opret en firkant med størrelsen 88ph med 88ph. Flyt denne firkant i en afstand af 10ph fra venstre for rektangel (“c01”).
navngiv dette lag “kant”. Dobbeltklik på laget for at åbne dialogboksen Lagstil, og tilføj en Streglagstil med følgende indstillinger: 
34 Opret en anden boks med størrelsen 82ph ved 82ph og læg den i midten af “border” – laget. Navngiv dette lag “boks” og skift farven på denne firkant til #d5d5d5.
Vælg alle lag i denne gruppe (“indhold” gruppe), gå til lag > ny > gruppe fra lag (Ctrl/Cmd + G) og Omdøb denne nye gruppe “om”. 
Bemærk: Den indvendige grå firkantede boks er en pladsholder til et billede og kan erstattes med ethvert billede efter eget valg.
35 Dupliker gruppen “om” (Højreklik på gruppen og vælg Duplicate Group) og navngiv den “services”. Højreklik på gruppen” tjenester”, og vælg Duplicate Group igen og navngiv den”portefølje”.
vi har tre grupper nu (“om”, “tjenester” og “portefølje”). Flyt den sidste gruppe (“portefølje”) til højre guide som vist nedenfor. 
36 Vælg alle tre grupper i panelet Lag, og gå derefter til lag > fordel > vandrette Centre for at placere dem lige.
Klik her for at se billedet i fuld størrelse af følgende billede. 
37 Skift titlerne for gruppen “services” (center) og “portfolio” – gruppen (højre) som vist nedenfor. (Du kan ændre disse titler i henhold til dine krav.) 
oprettelse af sidefoden
38 Opret en ny gruppe og navngiv den “sidefod”.
Vælg rektangelværktøjet (U) og opret et rektangel med størrelsen på 1200ph med 100ph i bunden af vores designlayout. Navngiv dette lag”footer bg”. Brug den samme Gradientoverlay-stil som “header bg” – laget ved at højreklikke på “header bg” – laget og vælge Copy Layer-stil.
gå tilbage til footer-gruppen, Højreklik på “footer bg” – laget, og vælg Indsæt Lagstil. 
39vælg værktøjet Horisontal Type (T) og tilføj copyright-tekst og sidefod links tekst til venstre ved hjælp af skrifttypen Arial, størrelse på 12pt og en grå farve (#ddddddd). 
40 Vi vil tilføje afsnittet E-mail-abonnement til højre.
Opret en ny gruppe inde i gruppen “footer” og navngiv den “abonner”. Vælg værktøjet afrundet rektangel (U), og opret et rektangel på 85 stk.med 35 stk. Navngiv dette lag”abonner btn”.
41 Gentag trin 26 for at tilføje formularfelter og etiketter.
42 Vælg værktøjet vandret Type (T), og skriv “Abonner” ved hjælp af skrifttypen Arial, stil indstillet til fed og størrelse ved 13pt.
Vælg begge lag (“abonner btn” og “abonner tekst”).
43 Gentag trin 28 for at oprette knappen Abonner.
44 Vælg værktøjet afrundet rektangel (U), og indstil radius til 3 stk. Opret et afrundet rektangel med størrelsen 210ph ved 35ph ved hjælp af en hvid farve (#ffffff) og navngiv dette formlag som “e-mail-felt”. Tilføj en tekstlinje over”e-mail-felt”.
slutresultat
OK, det er det, og vi er færdige. Her er det endelige resultat.
Klik på billedet nedenfor for at se layoutet i fuld størrelse. Tak for at følge med i min tutorial. Jeg håber, at i alle nød og lærte noget nyt fra denne tutorial.
skriv venligst dine kommentarer nedenfor og Del dine tanker og meninger, jeg vil meget gerne høre dem. Du kan også dele denne Design tutorial til dine venner, hvis du tror, det kunne være nyttigt for dem!
Hent kildefilen
du kan hente Photoshop-filen (PSD) i denne tutorial fra nedenstående link som et LYNARKIV.
- clean-professional-opslag (lynlås, 2,4 MB)
Resume
hvis du beslutter dig for at bruge dette design, skal du sørge for at optimere billederne for at reducere belastningstiden. Denne beslutning skal være fantastisk til små steder som en til en golfbane, fordi den er enkel, nem at bruge og brugervenlig.
relateret indhold
- Sådan oprettes et rent blogdesign med Photoshop
- kodning af et rent Internet 2.0 Style design fra Photoshop
- Opret et smart og minimalistisk Layout i Photoshop
om forfatteren
Han er grundlægger og redaktør af Boost Inspiration, hvor han viser forskellige kreative ressourcer inden for Digital kunst, Grafisk Design, Illustration, fotografering og typografi til inspiration. Du kan nå ham via kvidre eller Facebook.