in deze Photoshop webdesign tutorial, gaan we een smashing ontwerpen, schoon, en professionele website lay-out in Photoshop. De lay-out die we doen in deze tutorial kan worden gebruikt als persoonlijke of corporate website ontwerp. Dit ontwerp is vrij gebruiksvriendelijk, dus het zou geweldig moeten zijn voor de reputatie van uw site.
bijwerken: Dit is het eerste deel van een tweedelige serie die u zal leren hoe u de lay-out in Photoshop te maken, en vervolgens hoe om te zetten naar een standards-compliant (X)HTML webdesign.
the “Clean and Professional Web Design” Series
- Part 1: Create a Clean and Professional Web Design in Photoshop
- Part 2: Coding a Clean and Professional Web Design
Final Preview
bekijk de lay-out die we in deze tutorial zullen maken. U kunt de laatste preview van de afbeelding hieronder bekijken of klik hier voor een volledige versie. 
maak uw Photoshop-document
1 Maak een nieuw document aan in Photoshop (Ctrl / Cmd + N) met de instellingen van de volgende afbeelding.
de instellingen voor eenheden en linialen instellen
2 Zorg ervoor dat u in pixeleenheden werkt, de standaard vaste eenheid voor webdesign.
stel de volgende instellingen in voor uw linialen in het dialoogvenster Voorkeuren (Ctrl / Cmd + K); klik op Units & linialen en zorg ervoor dat u alles hebt ingesteld zoals weergegeven in onderstaande afbeelding. 
hulplijnen toevoegen om het inhoudsgebied
aan te wijzen 3 Activeer Photoshop-linialen vanuit weergave > linialen.
schakel de zichtbaarheid van de linialen om door op “Ctrl/Cmd + R”te drukken.
open ook het infopaneel vanuit venster > Info (sneltoets: F8).
het infopaneel geeft nuttige informatie Afhankelijk van het geselecteerde gereedschap.
door op “M” te drukken, kiest u het rechthoekige Marquee-gereedschap en maakt u een kader aan dat 120 px breed is vanaf de linkerhoek van het canvas. U kunt de grootte aanpassen door in het infopaneel te kijken terwijl u de selectie maakt.
klik nu op de linker liniaal en sleep een hulplijn naar rechts van de selectie van de selectie in de selectie zoals weergegeven in de afbeelding hieronder. 
4 schuif deze selectie aan de rechterkant van het canvas. Wijs een andere hulplijn toe aan de linkerkant van de selectie.
uw canvas ziet er nu zo uit: 
logo aanmaken
5 nu gaan we het logo aanmaken voor onze website.
het logo zal zeer eenvoudig zijn en het zal een kleurverloop effect hebben. Maak een nieuwe groep aan (laag > nieuwe > groep) en noem het “logo”.
6 Selecteer het horizontale Type gereedschap (T) en typ “SMASHING” (of de naam van uw website) in hoofdletters.
7 stel vervolgens in het tekenvenster het lettertype in op Arial, de stijl op vet en de grootte op 42pt. Stel ook de anti-aliasing methode optie scherp en gebruik de kleur # 101112.
u kunt deze opties ook instellen in de optiebalk wanneer het Type gereedschap het actieve gereedschap is. 
toe te wijzen Dubbelklik om het dialoogvenster Laagstijl te openen. Selecteer kleurverloop Overlay, klik op de kleurverloop-Editor en gebruik de onderstaande instellingen.
9 toe te wijzen Plaats de laag van het “SMASHING” – type op een afstand van 35px van boven en 0px van links. Je kunt dit nauwkeurig doen met het verplaatsgereedschap (V) en je pijltjestoetsen. Dupliceer dit type laag (laag > Dupliceer laag).
plaats de dubbele laag naast het “SMASHING” woord en bewerk de tekst naar “Dzine”. Herhaal Stap 6, 7, 8 maar gebruik verschillende kleurverlopen (linker kleurstop: # b27625, rechter kleurstop: # e5ad27) voor het woord “Dzine”.
10 Selecteer het horizontale type gereedschap (T) en voeg een slogan toe onder het logo met de volgende instellingen. 
toe te wijzen 11 het uiteindelijke logo moet eruit zien als de afbeelding hieronder.
om de hulplijnen te activeren/deactiveren, ga naar Beeld > Toon > raster of gebruik de sneltoets Ctrl / Cmd + ; 
navigatiebalk
12 een nieuwe groep aanmaken en de naam ” navigatie “geven, deze zou boven de” logo ” – Groep moeten staan. Sleep een hulplijn van de bovenste liniaal, 150px onder de bovenrand van het canvas. Selecteer het Rechthoekgereedschap (U) en teken een horizontale lijn van 4PX hoogte met een kleur van #e3ab27, over het canvas.
13 voeg navigatie links toe op 12px-hoog vanaf deze horizontale lijn en 20px rechts van de linker gids.
Selecteer het afgeronde Rechthoekgereedschap (u) en teken een kader met de grootte van 72px bij 35px. Verplaats deze laag onder de tekstlinks en noem de laag “hover”.
maak de afgeronde hoeken recht met het Convert Point Gereedschap. Verplaats de zijkanten van oneffen randen naar beneden met een 8px marge om de randen gelijk te maken aan de andere binnenranden aan de onderkant.
Dubbelklik op de” hover ” laag om het dialoogvenster Laagstijl te openen en kleurverloop toe te voegen (linker kleurstop: #e5ad27, rechter kleurstop: #b27625). Selecteer het horizontale type gereedschap (T), selecteer de tekst, “Home” en verander de kleur naar #ffffff (Wit). 
aan te maken de sectie “bel ons”
14 vervolgens maken we de sectie “bel ons” rechtsboven in ons ontwerp (precies tegenover het logo).
Download dit telefoonpictogram en plaats dit in de buurt van de juiste gids. Noem deze laag “telefoonpictogram”. Selecteer het horizontale type gereedschap (T).
voeg een telefoonnummer toe aan de linkerkant van het telefoonpictogram met het lettertype Arial, met de grootte ingesteld op 20pt en de kleur #292929.
voeg wat gerelateerde tekst toe onder het telefoonnummer met font Arial, vetgedrukt, met een grootte van 11pt en een kleur van #595959. 
header
15 aan te maken nu gaan we naar een header maken sectie. Maak een nieuwe groep aan en noem het “header”.
16 Selecteer het Rechthoekgereedschap (U) en maak een rechthoekvorm met de grootte van 1200px bij 440px.
plaats deze rechthoek op een afstand van 1px onder de navigatiebalk en noem deze laag “header bg”. Dubbelklik op de” header bg ” laag, selecteer het verloop Overlay layer stijl en heb deze twee kleuren in de Gradient Editor (links color stop: # 2e2226, rechts color stop: # 7a7556).
zie de afbeelding hieronder voor de rechthoek positie en kleuren detail. 
toe te wijzen 17 Maak een andere rechthoek van het Rechthoekgereedschap (u) met de grootte van 960px bij 360px.
plaats deze rechthoek op een afstand van 40px van de bovenkant van de” header bg ” laag en 0px van de linker hulplijn. Noem deze laag “header container”. Voorbeeld hieronder wat we tot nu toe hebben gedaan met het ontwerp.
de sectie “Aanbevolen project” aan te maken
18 vervolgens maken we de sectie Aanbevolen project. Maak een nieuwe groep binnen de header groep en noem het “fp”. Selecteer de rechthoek Tool (U) en maak een rechthoek met de grootte van 630px bij 340px op de afstand van 10px van de bovenkant en de linkerkant van header container.
geef deze laag een kleur van # 000000 en noem deze “FP container”. 
19 toe te wijzen Open een afbeelding in Photoshop om hier te plaatsen als uw aanbevolen project. Ga naar Selecteer > alles (Ctrl / Cmd + A), dan Bewerken > kopiëren (Ctrl/Cmd + C).
kom terug naar het onze webdesign.
Maak een nieuwe laag boven de “FP container” laag en ga naar Bewerken > plakken (Ctrl / Cmd + V) om te plakken in je aanbevolen projectafbeelding. Hernoem deze laag naar “fp image”. Klik met de rechtermuisknop op de laag” FP image ” en selecteer Clipping Mask maken.
nu is de afbeelding alleen zichtbaar in de rechthoek (“FP container”).
maak aanpassingen zodat uw projectafbeelding gelijk is aan de afbeelding hieronder. 
20 toe te wijzen Ga naar Bewerken > transformeren > Schaal (Ctrl/Cmd + T). Klik in de optiebalk op rotatie en typ -4 en druk tweemaal op enter om de hoek aan te passen.
blijf op dezelfde laag (“fp image”) en selecteer helderheid als de Mengmodus van deze laag. 
21 toe te wijzen volgende gaan we de titel en beschrijving Balk maken voor de aanbevolen Project afbeelding. Selecteer het Rechthoek Gereedschap (U) en maak een rechthoek vorm met de grootte van 630px bij 90px met behulp van kleur #161718.
zet de laagdekking op 90% en noem deze “title bg”. Plaats deze rechthoek zoals in de afbeelding hieronder. 
22 toe te wijzen Maak een andere rechthoek met de grootte van 630px bij 1px met behulp van kleur #9c9c9c en noem het “titel horizontale lijn”.
plaats deze rechthoek op de bovenste rand van de laag “title bg”.
23 voeg een titel en beschrijving toe in de rechthoek die we hebben gemaakt in Stap 21, Gebruik de volgende instellingen voor titel en beschrijving.
voor de titel:
- lettertype: Arial, kleur: # ffffff, grootte: 25pt en anti-aliasing methode optie: Sharp
voor de beschrijving:
- lettertype: Arial, kleur: # a4a4a4, grootte: 12pt en optie anti-aliasingmethode: Geen
toe te wijzen het gedeelte “snel citaat”
24 Maak een andere groep binnen de headergroep en noem het “snel citaat”. Selecteer het Rechthoek Gereedschap (U) en maak een rechthoek met de grootte van 300px bij 340px. Plaats deze rechthoek op de afstand van 10px aan de rechterkant van de aanbevolen project sectie en noem het “qq container”.
25 We zullen een laagstijl kopiëren van een andere laag die we in een vorige stap hebben gemaakt.
ga in de” navigatie “Groep, klik met de rechtermuisknop op de” hover “laag, Selecteer laag kopiëren, ga terug naar de” qq container ” laag, klik met de rechtermuisknop en selecteer laag plakken. We hebben nu dezelfde Laagstijl van de “hover” – laag voor onze “qq container”. 
26 Selecteer het horizontale type gereedschap (T).
schrijf ” Quick Quote “in” qq container ” op een afstand van 20px van de boven-en linkerkant van de behuizing. Stel het lettertype familie Trebuchet MS (of een web-safe lettertype van uw voorkeur) met de kleur van wit (#ffffff) en anti-aliasing methode optie ingesteld op Sharp. We gaan gebruik maken van de afgeronde rechthoek Tool (U) om drie formuliervelden te maken.
Selecteer het gereedschap Afgeronde rechthoek (u) en stel de straal in op 3px. Maak vervolgens twee afgeronde rechthoeken met de grootte 260px bij 35px met behulp van de kleur wit (#ffffff). Noem de vormlagen dan respectievelijk” field1 “en” field2″.
maak de derde afgeronde rechthoek met de grootte van 260px bij 75px met behulp van een witte kleur (#ffffff) en noem het “field3”. Selecteer het horizontale Type gereedschap (T) en maak labels voor elk formulierveld. 
27 Selecteer het afgeronde Rechthoekgereedschap (u) en maak een doos van 80px bij 35px en noem het “submit btn”.
28 Dubbelklik op de laag om het dialoogvenster laagstijlen te openen en vink het selectievakje kleurverloop Overlay aan van links.
klik op de verloop-Editor en verander de kleuren van het verloop zoals hieronder getoond. 
29 Selecteer het horizontale Type gereedschap (T) en typ “Submit” met behulp van het lettertype Arial, stijl vet en grootte op 13pt. Selecteer beide lagen in het paneel lagen (“submit btn” en “Submit text”).
30 Kies het verplaatsgereedschap (V) in het deelvenster hulpmiddelen en klik op verticale centra uitlijnen en horizontale centra uitlijnen in de optiebalk.
(u kunt ook hetzelfde resultaat krijgen door naar laag > uitlijnen > verticale centra en laag > uitlijnen > horizontale centra te gaan). 
main content area aanmaken
31 Maak een nieuwe groep aan en noem het”content”. Selecteer het Rechthoekgereedschap (U).
Maak een rechthoek van 300px bij 175px en noem het “c01”. Plaats deze laag 30px onder de kop en 0px van de linker huls. Dubbelklik op de laag en gebruik de instellingen van de volgende afbeelding.
32 we gaan nu inhoud toevoegen aan dit vak. Selecteer het horizontale type gereedschap (T) en voeg de tekst toe, “About SmashingDzine”. Maak een selectie van het “over” woord met behulp van het horizontale type gereedschap (T), en verander de kleur naar #b47825.
maak dan een selectie van het “Smashing” woord, en verander dan de kleur naar #2f2f2f.voeg een kleine beschrijving en een link tekst onder de titel. De volgende opties werden gebruikt voor de titel, beschrijving en link tekst.
(u kunt deze opties indien nodig aanpassen). 
voor de titel:
- Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp
voor de beschrijving:
- lettertype: Arial, stijl: normaal, grootte: 12pt, anti-aliasingmethode: geen, kleur: #767676
voor de Link tekst:
- lettertype: Arial, stijl: vet, grootte: 13pt, anti-aliasing methode: geen, kleur: #252525, onderstrepen
33 we zullen nu een vierkant vak naast de beschrijving toevoegen. Selecteer het Rechthoekgereedschap (U) en kleur #ffffff, houd de Shift-toets ingedrukt om de verhoudingen te behouden en maak een vierkant met de grootte 88px bij 88px. Verplaats dit vierkant op een afstand van 10px van de linkerkant van de rechthoek (“c01”).
noem deze laag “rand”. Dubbelklik op de laag om het dialoogvenster Laagstijl te openen en voeg een Lijnlagenstijl toe met de volgende instellingen: 
34 maak nog een doos met de grootte van 82px bij 82px en plaats deze in het midden van de “rand” laag. Noem deze laag “box” en verander de kleur van dit vierkant naar #d5d5d5.
Selecteer alle lagen in deze groep (“content” groep), ga naar laag > nieuwe > groep uit lagen (Ctrl/Cmd + G) en hernoem deze nieuwe groep “about”. 
opmerking: De binnenkant grijze vierkante doos is een plaatshouder voor een afbeelding en kan worden vervangen door een afbeelding van uw keuze.
35 dupliceer de “about” groep (Klik met de rechtermuisknop op de groep en selecteer Duplicate Group) en noem het “services”. Klik met de rechtermuisknop op de” services “groep en selecteer Duplicate Group opnieuw en noem het”portfolio”.
we hebben nu drie groepen (“about”,” services “en”portfolio”). Verplaats de laatste groep (“portfolio”) naar de rechter gids zoals hieronder getoond. 
36 Selecteer alle drie de groepen in het paneel lagen en ga dan naar laag > verdeel > horizontale centra om ze gelijk te verdelen.
Klik hier om de volledige afbeelding van de volgende afbeelding te zien. 
37 wijzig de titels voor de groep ” diensten “(Midden) en de groep” portfolio ” (rechts) zoals hieronder weergegeven. (U kunt deze titels volgens uw vereiste wijzigen.) 
voettekst aanmaken
38 Maak een nieuwe groep aan en noem deze”voettekst”.
Selecteer het Rechthoekgereedschap (U) en maak een rechthoek met de grootte van 1200px bij 100px onderaan onze ontwerpopmaak. Noem deze laag “voettekst bg”. Gebruik dezelfde kleurverloop Overlay stijl als de” header bg ” laag door met de rechtermuisknop op de “header bg” laag te klikken en te kiezen voor kopieer laag stijl.
Ga terug naar de voettekstgroep, klik met de rechtermuisknop op de “voettekst bg” laag en selecteer plak Laagstijl. 
39selecteer het horizontale type gereedschap (T) en voeg copyright tekst en voettekst links toe met behulp van het lettertype Arial, grootte van 12pt en een grijze kleur (#dddddd). 
40 We gaan het e-mailabonnement aan de rechterkant toevoegen.
Maak een nieuwe groep aan binnen de” footer “groep en noem het “subscribe”. Selecteer de afgeronde rechthoek Tool (U) en maak een rechthoek van 85px bij 35px. Noem deze laag “abonneren btn”.
41 Herhaal stap 26 voor het toevoegen van de formuliervelden en labels.
42 Selecteer het horizontale Type gereedschap (T) en typ “Subscribe” met het lettertype Arial, stijl ingesteld op vet en grootte op 13pt.
Selecteer beide lagen (“abonneren btn” en “Subscribe text”).
43 Herhaal stap 28 voor het maken van de subscribe-knop.
44 Selecteer het gereedschap Afgeronde rechthoek (U) en stel de straal in op 3px. Maak een afgeronde rechthoek met de grootte 210px bij 35px met behulp van een witte kleur (#ffffff) en noem deze vormlaag als “e-mail veld”. Voeg een tekstregel toe boven “e-mailveld”.
eindresultaat
OK, dat is het en we zijn klaar. Hier is het eindresultaat.
klik op de afbeelding hieronder om de volledige lay-out te zien. Bedankt voor het volgen samen met mijn tutorial. Ik hoop dat jullie allemaal genoten en iets nieuws geleerd uit deze tutorial.
laat uw opmerkingen hieronder achter en deel uw gedachten en meningen, ik zou ze graag horen. U kunt deze ontwerp tutorial ook delen met je vrienden als je denkt dat het nuttig kan zijn voor hen!
Download het bronbestand
u kunt het Photoshop-bestand (PSD) van deze tutorial downloaden via de onderstaande link als een ZIP-archief.
- clean-professional-weblayout (ZIP, 2,4 MB)
samenvatting
als u besluit dit ontwerp te gebruiken, moet u de afbeeldingen optimaliseren om de laadtijd te verkorten. Deze beslissing moet geweldig zijn voor kleine sites zoals een voor een golfbaan, want het is eenvoudig, makkelijk te gebruiken, en gebruiksvriendelijk.
gerelateerde inhoud
- Hoe maak ik een schoon blogontwerp met Photoshop
- een schoon Web coderen 2.0 Style Web Design from Photoshop
- Maak een strakke en minimalistische Web lay-out in Photoshop
over de auteur
Waheed Akhtar is een freelance webdesigner uit Dubai, Verenigde Arabische Emiraten. Hij is oprichter en redacteur van Boost Inspiration, waar hij verschillende creatieve bronnen van digitale kunst, grafisch ontwerp, illustratie, fotografie en typografie tentoonstelt ter inspiratie. Je kunt hem bereiken via Twitter of Facebook.