I Denne Photoshop webdesign opplæringen, skal vi designe en knusende, ren og profesjonell nettside layout I Photoshop. Oppsettet vi gjør i denne opplæringen kan brukes som personlig eller bedriftens webdesign. Denne designen er ganske brukervennlig, så det bør være bra for nettstedets omdømme.
Oppdatering: Dette er den første delen av en todelt serie som vil lære deg hvordan du lager oppsettet I Photoshop, og deretter hvordan du konverterer det til ET standardkompatibelt (X)HTML-webdesign.
Serien «Clean And Professional Web Design»
- Del 1: Lag Et Rent Og Profesjonelt Webdesign I Photoshop
- Del 2: Koding Av Et Rent Og Profesjonelt Webdesign
Endelig Forhåndsvisning
Ta en titt på oppsettet som vi skal lage i denne opplæringen. Du kan se den endelige forhåndsvisningen av bildet nedenfor eller klikk her for en full størrelse versjon. 
Klargjør Photoshop-dokumentet
1 Opprett et nytt dokument I Photoshop (Ctrl/Cmd + N) ved hjelp av innstillingene fra følgende bilde.
Angi innstillingene for enheter og linjaler
2 Kontroller at du arbeider i pikselenheter, som er standard fast enhet for webdesign.
Sett opp følgende innstillinger for Dine Linjaler fra Dialogboksen Innstillinger (Ctrl / Cmd + K); klikk På Enheter & Linjaler og sørg for at du har alt satt som vist i figuren nedenfor. 
Legg til hjelpelinjer for å angi innholdsområdet
3 Aktiver Photoshop-Linjaler Fra Visningen > Linjaler.
Bytt synligheten til linjalene ved å trykke På «Ctrl / Cmd + R».
åpne Også Info-panelet Fra Vinduet > Info (hurtigtast: F8).
Infopanelet gir nyttig informasjon avhengig av det valgte verktøyet.
ved å trykke På «M», velg Det Rektangulære Markeringsverktøyet og opprett en boks som er 120px bred fra venstre hjørne av lerretet. Du kan justere størrelsen ved å se På Infopanelet mens du gjør valget.
klikk nå på venstre linjal og dra en guide til høyre for markeringsvalget som vist på bildet nedenfor. 
4 Flytt dette valget på høyre kant av lerretet. Tilordne en annen veiledning til venstre for valget.
lerretet ditt skal nå se slik ut: 
Opprette logoen
5 nå skal vi lage logoen for nettstedet vårt.
logoen kommer til å bli veldig enkel, og det vil ha en fargegradient effekt. Opprett en ny gruppe (Lag > Ny > Gruppe) og gi den navnet «logo».
6 Velg Det Horisontale Typeverktøyet (T) og skriv «SMASHING» (eller navnet på nettstedet ditt) med store bokstaver.
7 sett deretter skriften Til Arial I Tegnpanelet, stilen Til Fet Og størrelsen til 42pt. Sett også alternativet anti-aliasing method Til Sharp og bruk fargen #101112.
du kan også angi disse alternativene på Alternativlinjen når Typeverktøyet er det aktive verktøyet. 
8 Dobbeltklikk For å åpne Dialogboksen Lagstil. Velg Forløpningsoverlegg, klikk På Forløpningsredigering og bruk innstillingene som vist nedenfor.
9 Sett typelaget «SMASHING» i en avstand på 35px fra toppen og 0px fra venstre guide. Du kan gjøre dette nøyaktig ved Hjelp Av Flytteverktøyet (V) og piltastene. Dupliser denne typen lag (Lag > Dupliser Lag).
Flytt det dupliserte laget rett ved siden av ordet «SMASHING» og rediger teksten til «Dzine». Gjenta Trinn 6, 7, 8, men bruk forskjellige gradientfarger (venstre fargestopp: # b27625, høyre fargestopp: # e5ad27) for ordet «Dzine».
10 Velg Det Horisontale Typeverktøyet (T) og legg til en kodelinje under logoen med følgende innstillinger. 
11 den endelige logoen skal se ut som bildet nedenfor.
for å aktivere / deaktivere hjelpelinjene, gå Til Vis > Vis > Rutenett eller Bruk snarveien Ctrl / Cmd + ; 
Opprette navigasjonsfeltet
12 Opprett en ny gruppe og gi den navnet «navigasjon», den skal være over» logo » – gruppen. Dra en hjelpelinje fra den øverste linjalen, 150 px under den øverste kanten av lerretet. Velg Rektangelverktøyet (U) og tegne en horisontal linje med 4px høyde med en farge på #e3ab27, over lerretet.
13 Legg til navigasjonskoblinger ved 12px-høy fra denne horisontale linjen og 20px til høyre for venstre guide.
Velg Det Avrundede Rektangelverktøyet (U) og tegn en boks med størrelsen 72px x 35px. Flytt dette laget under tekstlinkene og navnet på laget «hover».
Rett de nederste avrundede hjørnene med Verktøyet Konverter Punkt. Flytt sidene av ujevne kanter under med en 8px margin for å gjøre kantene lik andre indre kanter nederst.
Dobbeltklikk på» hover » – laget for å åpne Dialogboksen Lagstil og legge til gradientfarger (venstre fargestopp: #e5ad27, høyre fargestopp: #b27625). Velg Det Horisontale Typeverktøyet (T), velg teksten, «Hjem» og endre farge til # ffffff (hvit). 
Opprette» ring oss » – delen
14 Neste skal vi lage «ring oss»-delen øverst til høyre i designet vårt (nøyaktig motsatt side av logoen).
Last ned dette telefonikonet og plasser dette nær riktig guide. Navn dette laget «telefonikon». Velg Vannrett Type-Verktøyet (T).
Legg til et telefonnummer til venstre på telefonikonet ved Hjelp Av skrifttypen Arial, med størrelsen satt til 20pt og fargen # 292929.
Legg til litt relatert tekst under telefonnummeret ved Hjelp Av font Arial, satt Til Fet, med en størrelse på 11pt og en farge på #595959. 
Opprette header
15 nå skal vi lage header-delen. Opprett en ny gruppe og gi den navnet «header».
16 Velg Rektangelverktøyet (U) og opprett en rektangelform med størrelsen 1200 x 440 x.
Sett dette rektangelet i en avstand på 1px under navigasjonslinjen og navn dette laget «header bg». Dobbeltklikk på» header bg » – laget, velg Gradient Overlay layer-stilen og ha disse to fargene i Gradient Editor (venstre fargestopp: #2e2226, høyre fargestopp: #7a7556).
Se bildet nedenfor for rektangelposisjon og fargedetaljer. 
17 Opprett et nytt rektangel fra Rektangelverktøyet (U)med størrelsen 960 x 360 x.
Sett dette rektangelet i avstanden til 40px fra toppen av» header bg » – laget og 0px fra venstre guide. Navngi dette laget «header container». Forhåndsvisning under hva vi har gjort til nå med designet.
Opprette delen «utvalgt prosjekt»
18 neste vil vi opprette delen utvalgt prosjekt. Opprett en ny gruppe i topptekstgruppen og gi den navnet «fp». Velg Rektangelverktøyet (U) og opprett et rektangel med størrelsen på 630px ved 340px i avstanden til 10px fra toppen og til venstre for topptekstbeholderen.
Gi denne lagfargen til #000000 og gi den navnet «fp container». 
19 Åpne et bilde i Photoshop for å plassere det her som ditt utvalgte prosjekt. Gå Til Velg > Alle (Ctrl / Cmd + A), Og Rediger > Kopier (Ctrl/Cmd + C).
Kom tilbake til vår webdesign.
Opprett et nytt lag over» fp container » – laget og Gå Til Rediger > Lim Inn (Ctrl / Cmd + V) for å lime inn i ditt utvalgte prosjektbilde. Gi nytt navn til dette laget til «fp image». Høyreklikk på» fp image » – laget og velg Create Clipping Mask.
nå er bildet bare synlig inne i rektangelet («fp container»).
Foreta justeringer slik at det fremhevede prosjektbildet ditt ligner det som vises nedenfor. 
20 Gå Til Rediger > Transform > Skala (Ctrl/Cmd + T). På Alternativlinjen klikker du i rotasjonsboksen og skriver inn -4 og trykker enter to ganger for å justere vinkelen.
Hold deg på samme lag («fp image»), og velg Lysstyrke som blandemodus for dette laget. 
21 Neste skal vi lage tittel-og beskrivelseslinjen for det utvalgte prosjektbildet. Velg Rektangelverktøyet (U) og opprett en rektangelform med størrelsen 630px ved 90px ved hjelp av farge #161718.
Endre tettheten til dette laget til 90% og gi det navnet «tittel bg». Plasser dette rektangelet som vist på bildet nedenfor. 
22 Opprett et annet rektangel med størrelsen 630px ved 1px ved hjelp av farge #9c9c9c og gi det navnet «tittel horisontal linje».
Plasser dette rektangelet på toppkanten av innholdet i» title bg » – laget.
23 Legg til en tittel og beskrivelse i rektangelet vi opprettet I Trinn 21, ved hjelp av følgende innstillinger for tittel og beskrivelse.
for tittelen:
- font: Arial, farge: # ffffff, størrelse: 25pt og anti-aliasing metode alternativ: Sharp
for beskrivelsen:
- font: Arial, farge: #a4a4a4, størrelse: 12pt og anti-aliasing metode alternativ: Ingen
Opprette delen «quick quote»
24 Opprett en annen gruppe i topptekstgruppen og gi den navnet «quick quote». Velg Rektangelverktøyet (U) og opprett et rektangel med størrelsen 300px ved 340px. Plasser dette rektangelet i avstanden til 10px til høyre for den utvalgte prosjektdelen og gi den navnet «qq container».
25 vi kopierer En Lagstil fra et annet lag vi opprettet i et tidligere trinn.
gå inn i «navigasjon» – gruppen, høyreklikk på» hover «- laget, velg Kopier Lagstil, gå tilbake til» qq container » – laget, høyreklikk og velg Lim Inn Lagstil. Vi har samme Lagstil Av» hover «- laget for vår» qq container » nå. 
26 Velg Vannrett Type-Verktøyet (T).
Skriv «Quick Quote» inne i «qq container» på avstanden på 20px fra øvre og venstre kant av den inneholdende boksen. Angi skriftfamilien Til Trebuchet MS (ELLER en web-safe font av dine preferanser) med thecolor of white (#ffffff) og anti-aliasing metode alternativ satt Til Sharp. Vi skal bruke Det Avrundede Rektangelverktøyet (U) for å lage tre skjemafelt.
Velg Verktøyet Avrundet Rektangel (U) og sett radiusen til 3px. Deretter oppretter du to avrundede rektangler med størrelsen 260px med 35px ved hjelp av fargen hvit (#ffffff). Deretter navngi formlagene som henholdsvis» field1 «og» field2″.
Lag det tredje avrundede rektangelet med størrelsen 260px x 75px med en hvit farge (#ffffff) og gi den navnet «field3». Velg Verktøyet Vannrett Type (T) og opprett etiketter for hvert skjemafelt. 
27 Velg Rounded Rectangle Tool (U) og opprett en boks med 80px ved 35px og gi den navnet «send btn».
28 Dobbeltklikk på laget for å åpne Dialogvinduet Lagstiler og merk Av For Graderingsoverlegg fra venstre.
Klikk På Forløpningsredigering og endre farger på forløpningen som vist nedenfor. 
29 Velg Horisontal Type Tool (T) og skriv «Send» ved hjelp Av skriften Arial, stil Fet Og størrelse på 13pt. Velg begge lagene i Lagpanelet («send inn btn «og» Send inn tekst»).
30 Velg Flytteverktøyet (V) fra Verktøy-panelet, og klikk På Juster vertikale sentre og Juster horisontale sentre på Alternativlinjen.
(Alternativt kan du få det samme resultatet ved Å gå Til Layer > Align > Vertikale Sentre og Layer > Align > Horisontale Sentre). 
Opprette hovedinnholdsområdet
31 Opprett en ny gruppe og gi den navnet «innhold». Velg Rektangelverktøyet (U).
Lag et rektangel på 300px ved 175px og gi det navnet «c01». Plasser dette laget 30px under overskriften og 0px fra venstre guide. Dobbeltklikk på laget og bruk innstillingene fra følgende bilde.
32 vi skal legge til innhold i denne boksen nå. Velg Det Horisontale Typeverktøyet (T) og legg til teksten, «Om SmashingDzine». Lag et utvalg av» Om » – ordet ved hjelp Av Horisontal Type Tool (T), og endre deretter fargen til #b47825.
velg deretter» Smashing » – ordet, og endre deretter fargen til #2f2f2f. Legg til en liten beskrivelse og en lenketekst under tittelen. Følgende alternativer ble brukt for tittel, beskrivelse og link tekst.
(du kan justere disse alternativene etter behov). 
For Tittelen:
- Font: Trebuchet MS, stil: Normal, størrelse: 24pt, anti-aliasing metode: Sharp
For Beskrivelsen:
- Font: Arial, stil: Normal, størrelse: 12pt, anti-aliasing metode: Ingen, farge: #767676
For Lenketeksten:
- Font: Arial, stil: Fet, størrelse: 13pt, anti-aliasing metode: Ingen, farge: #252525, Understreke
33 Vi vil legge til en firkantet boks ved siden av beskrivelsen nå. Velg Rektangelverktøyet (U) og farge # ffffff, hold Nede Skift-tasten for å opprettholde proporsjonene og opprett en firkant med størrelsen 88 x 88 x. Flytt denne firkanten i en avstand på 10px fra venstre for rektangel («c01»).
Navngi dette laget «border». Dobbeltklikk på laget for å åpne Dialogvinduet lagstil, og legg til En Strøklagstil med følgende innstillinger: 
34 Lag en annen boks med størrelsen 82px ved 82px og plasser den i midten av» border » – laget. Navngi dette laget «boks» og endre fargen på denne firkanten til # d5d5d5.
Velg alle lag i denne gruppen («innhold» – gruppen), gå Til Lag > Ny > Gruppe Fra Lag (Ctrl / Cmd + G) og gi nytt navn til denne nye gruppen «om». 
Notat: Den indre grå firkantede boksen er en plassholder for et bilde og kan erstattes med et hvilket som helst bilde du velger.
35 Dupliser «om» – gruppen (Høyreklikk på gruppen og velg Dupliser Gruppe) og gi den navnet «tjenester». Høyreklikk på» tjenester «- gruppen og velg Dupliser Gruppe igjen og gi den navnet «portefølje».
vi har nå tre grupper («om», » tjenester «og»portefølje»). Flytt den siste gruppen («portfolio») til høyre guide som vist nedenfor. 
36 Velg alle tre gruppene I Lagpanelet, og gå deretter Til Lag > Fordel > Horisontale Sentre for å plassere dem likt ut.
Klikk her For å se bildet i full størrelse av følgende bilde. 
37 Endre titlene for «tjenester» – gruppen (i midten) og «portefølje» – gruppen (til høyre)som vist nedenfor. (Du kan endre disse titlene i henhold til kravet ditt.) 
Opprette bunnteksten
38 Opprett en ny gruppe og gi den navnet «bunntekst».
Velg Rektangelverktøyet (U) og opprett et rektangel med størrelsen på 1200px ved 100px nederst på designoppsettet. Navn dette laget «footer bg». Bruk Samme Gradientoverleggsstil som» header bg «- laget ved å høyreklikke på» header bg » – laget og velge Kopier Lagstil.
Gå tilbake til bunntekstgruppen, høyreklikk på» bunntekst bg » – laget og velg Lim Inn Lagstil. 
39velg Det Horisontale Typeverktøyet (T) og legg til opphavsrettstekst og bunntekstkoblinger tekst til venstre ved Hjelp Av skrifttypen Arial, størrelse På 12pt og en grå farge (#dddddd). 
40 Vi kommer til å legge til e-abonnement delen til høyre.
Opprett en ny gruppe i «bunntekst» – gruppen og gi den navnet «abonner». Velg Det Avrundede Rektangelverktøyet (U) og opprett et rektangel på 85 x 35 x. Navn dette laget «abonner btn».
41 Gjenta Trinn 26 For å legge til skjemafeltene og etikettene.
42 Velg Det Horisontale Typeverktøyet (T) og skriv «Abonner» ved Hjelp Av skrifttypen Arial, stil satt Til Fet og størrelse på 13pt.
Velg begge lagene («abonner btn «og» Abonner tekst»).
43 Gjenta Trinn 28 for å opprette abonner-knappen.
44 Velg Verktøyet Avrundet Rektangel (U) og sett radiusen til 3px. Lag et avrundet rektangel med størrelsen 210px ved 35px ved hjelp av en hvit farge (#ffffff) og navngi dette formlaget som «e-postfelt». Legg til en tekstlinje over «e-postfelt».
Endelig Resultat
OK, det er det, og vi er ferdige. Her er det endelige resultatet.
Klikk på bildet under for å se full størrelse layout. Takk for at du følger med min tutorial. Jeg håper dere alle likte og lærte noe nytt fra denne opplæringen.
vennligst legg igjen dine kommentarer nedenfor og del dine tanker og meninger, jeg vil gjerne høre dem. Du kan også dele denne designopplæringen til vennene dine hvis du tror det kan være nyttig for dem!
Last ned kildefilen
Du kan laste Ned Photoshop-filen (PSD) i denne opplæringen fra linken nedenfor som ET ZIP-arkiv.
- ren-profesjonell-weblayout (ZIP, 2.4 MB)
Sammendrag
hvis du bestemmer deg for å bruke dette designet, må du sørge for å optimalisere bildene for å redusere lastetiden. Dette bestemmer bør være stor for små områder som en for en golfbane fordi det er enkelt, lett å bruke og brukervennlig.
Relatert Innhold
- Hvordan Lage En Ren Bloggdesign Med Photoshop
- Koding Av En Ren Web 2.0 Stil Webdesign Fra Photoshop
- Lag En Glatt Og Minimalistisk Web Layout I Photoshop
Om Forfatteren
Waheed Akhtar er freelance webdesigner fra Dubai, UAE. Han er grunnlegger Og redaktør Av Boost Inspiration, hvor han viser ulike kreative ressurser Innen Digital Kunst, Grafisk Design, Illustrasjon, Fotografi og Typografi for inspirasjon. Du kan nå ham Via Twitter eller Facebook.