Maak een nieuw bestand in Photoshop door te klikken op het menu "Bestand " en te kiezen voor " Nieuw . " De grootte van uw afbeelding zal de uiteindelijke grootte van uw website te bepalen , dus kies een breedte die geschikt is voor de meeste schermen is . Een breedte van 750 pixels zal ervoor zorgen dat uw website is zichtbaar door iedereen die een schermresolutie gelijk aan of groter dan 800 x 600 . Voer een waarde voor de hoogte van ongeveer 500 pixels . Dit kan later worden aangepast. Druk op " OK".

Ontwerp 2 kopbal van uw website , dat is het gebied dat aan de bovenkant van uw webpagina wordt weergegeven . Dit gebied moet worden beperkt tot niet meer dan 200 pixels hoog . Onder meer naam en het logo op dit gebied van uw website , evenals enkele afbeeldingen of foto's die het doel van uw website te markeren . Zo kan de website van een non-profit bedrijf de layout zijn foto's van personen die ze hebben geholpen .
3

Maak een navigatiebalk onder je header , dat is ongeveer 50 pixels hoog . Selecteer het gereedschap " Tekst Type" uit de werkbalk aan de linkerkant , en klik op de afbeelding om te typen . Geef de namen van de verschillende belangrijkste pagina's van uw site ( zoals "Home , " " Over ons , " " Contact , " " Producten , " enz. ) .
4

Maak een doos onder uw navigatiebalk om het gebied dat tekst op uw website zal gaan vertegenwoordigen . U kunt dit gebied leeg laat voor nu , maar je moet hebben het gebied zo gereserveerd , dat je niet ontwerpen om het te doen toevoegen. Het gebied kan zo breed als je header en navigatiebalk , of smaller zijn aan sidebars tegemoet aan de linker , rechter of beide .

Ontwerp sidebars 5 als je kamer vrij voor hen. Deze sidebars begint onder je header en zal de gehele lengte van de pagina naar beneden gaan totdat je voettekst . Uw zijbalk kunt bevatten afbeeldingen of foto's , of kan een ander gebied voor de tekst. Als u het reserveren van de ruimten voor tekst , kunt u deze leeg laten. Anders beginnen de graphics die zal verschijnen in uw sidebars ontwerpen.
6

Maak een voettekst aan de onderkant van de afbeelding . De voettekst moet zo breed als de kop , maar kan zo lang of kort als u wenst . U hoeft geen zorgen te maken over het verlaten van voldoende ruimte tussen je kop-en voettekst voor de tekst als uw ontwerp zal automatisch groeien en krimpen om meer of minder tekst tegemoet . Onder copyright informatie in uw voettekst alsmede eventuele juridische disclaimers die je wilt toevoegen .
7

verder te werken aan alle aspecten van de website lay-out totdat u tevreden bent met de look . Sla het bestand door te klikken op het menu "Bestand " en te kiezen voor " Opslaan . " Sla de afbeelding in Adobe Photoshop -indeling ( * . Psd ) , zodat u kunt later terugkeren om het te openen en aanvullende bewerkingen zonder enig verlies van kwaliteit .
8

Selecteer het gereedschap " Slice " uit de werkbalk op de linker , en sleep selecties rond de verschillende gebieden van uw afbeelding . Als u gebruik maakt alleen een header , tekstgebied en voettekst , maak drie selecties rond deze drie gebieden . Als u opgenomen sidebars , creëren extra plakjes rond deze gebieden . Het slepen van een selectievak rond een gebied met de slice gereedschap geselecteerd is alles wat nodig is om een ​​stukje te creëren .
9

Klik op " File " en kies " Opslaan voor web . " Photoshop zal vragen bestandsnamen voor elk van de plakken die u hebt gemaakt , en zal een apart beeld voor elk van de schijfjes te genereren . De schijfjes kunnen dan opnieuw worden aangesloten voor uw website lay-out met behulp van een website design programma zoals FrontPage of Dreamweaver , of met de hand met behulp van HTML -code .