So finally, The New SzabokaDesigns Blog is rolling again, and I am super-proud to present this very simple website design tutorial. If you’ve been a visitor of the Old Blog, you have already seen two of these, and now here is the third one. In this tutorial, we are going to learn how to use Photoshop’s basic tools to create a simple one-page website design. You’ll also hear about the most frequently used keyboard shortcuts as well. I’m going to discuss each of the steps in great detail, so that everyone can understand, even those with very little Photoshop knowledge. So, without further ado, let’s create our one-page website design!
This tutorial was revised on 17th July 2012.
Reading Time: 30 minutes
Completion Time: 60 minutes
Required Software: Adobe Photoshop CS+
Difficulty: Beginner
What we’ll be creating…

Step 1 – Creating a new document

Let’s open Adobe Photoshop, and create a new document by pressing Ctrl+N on the PC, Cmd+N on the Mac. Input 1200 pixels for the Width, 3000 pixels for the Height, and change Background Contents to Transparent. Also, make sure that the Color Mode is set to RGB, and the Resolution is 72 ppi. Click OK to create a new document with the given settings.

Step 2 – Adding the Background Texture

OK, now we have a blank document. Let’s create the background for it. Bring up the Color Picker by clicking the Foreground Color icon in the Toolbar, and input #FAE1AF. Click OK to confirm. All we need now is to fill the background with the selected color. Press Alt+Backspace on the PC (that is Option+Delete on the Mac) to fill the entire layer with the Foreground Color. When it’s done, let’s instantly add some style, in this case we’ll give the layer a subtle grunge. To do this, let’s go up to the Filter menu, select Noise, then click Add Noise. Input 5% for the Amount, and select Uniform for Distribution. Click OK to commit changes. Now we have a grungy brownish background for our website. Let’s name this layer Background, by double clicking on our layer’s name „Layer 0” (not the layer itself).

Step 3 – Placing guides

Before touching anything, let’s quickly add some guides to help us align our content better. We can easily add guides by going up to the View menu, and selecting New Guide. Create 5 vertical guides, to the following positions: 120px, 160px, 600px, 1040px and 1080px. The first and last guides will constrain our website to be 960 pixels wide.
This is a general convention about websites being 960 pixels wide to match the good old 1024×768 resolution monitors’ width. For more info, visit
The guides at 160 and 1040 pixels will create 40 pixels padding on each side. The 600 pixels guide will mark the vertical center of the document.

Step 4 – Creating the logo

For the logo, we are going to use a special typeface that is not present on default systems. It is called Bebas Neue, and can be downloaded from here. (After installing the font, you may need to restart Photoshop for it to be visible.) Grab the Horizontal Type Tool (T), and click on the center guide somewhere at the top of the canvas. Set the Size to 80 pixels, the Letter Spacing (also called Tracking) to -20, the Horizontal Scale to 110% and set the foreground color to #1A1A1A. With all these settings done, I’m going to type „John Doe” for the header text, you may type your own name or something. Numeric Enter or the Check mark icon in the Options Bar commits the changes. Align the title to the center of the document. Leave about 45 pixels padding from the top, use a horizontal guide if necessary. If you’ve done everything properly, your header should look like this.

Step 5 – Creating the tagline

Reduce the Text Size to 30 pixels, and set the Foreground Color to #404040, then click somewhere below the logo to add the tagline. I’ll type „Webdesigner & Photographer”. When done, align it to the center of the document, and nudge it just below the logo. We can add some style to the tagline, for example by making the „&” sign red. My red is #BF3030, let’s favorize this color, we’ll use this one quite often.
Alternatively you can add this color to the Swatches Panel by opening up the Swatches Panel from the Window menu, and clicking the little Add New Swatch button, then hitting OK.
When you are ready, select both the Header and the Tagline layers (Shift+select in the Layers panel), and press Ctrl+G (Cmd+G) to group them into one. Give it a descriptive name, preferably Header.

Step 6 – Creating the navigation

Okay, navigation is next. First, we’ll create two horizontal guides. One to 170 px, and another one to 210 px. Create a new layer by pressing Ctrl+Shift+N (that is Cmd+Shift+N on the Mac). Now, grab the Rectangular Marquee Tool (M), and make a selection that is 960px wide, and 40px tall. Use the existing guides to help you! When done, fill the selection with our red color, #BF3030 (make this color the Foreground Color, then hit Alt+Backspace or Option+Delete). Again, go up to the Filter menu, choose Noise, then select Add Noise, and give the layer a 3% Uniform noise. Name this layer something like Navigation BG.

Step 7 – Navigation menus

So, the nav background is done. All we need now, is the navigation elements. Grab the Type Tool (T), set the Size to 24px, and the Color to white (#FFFFFF). For the sake of this tutorial, we’ll create 4 menu items: „About Me”, „My Work”, „Blog” and „Contact”. To create the nav menus, there is an easy way, and there is the hard way. The easy way is to create just one text layer by leaving equal number of spaces between the menus. If you feel pro, you can create the menu items on their own separate layers.
The easy way really is the easy way, but it doesn’t give you that much freedom over your design.
Grab the Type Tool (T), and type out the first menu item. From here, you need to follow a little sequence.
- Hit Ctrl+J (Cmd+J) to duplicate your text layer.
- Double-click the duplicated text layer’s thumbnail in the Layers Panel to edit its content and thus rename the layer. Type in the name of the next menu, then click the Check mark up in the Options Bar to commit changes (or hit the Numeric Enter).
- Use the Move Tool (V) to nudge the new layer to the right edge of the previous one, so they just touch each other. Hold Shift while dragging to keep the height.
- Now, nudge to the right by holding down the Shift key and pressing the right arrow a couple of times. Just remember how many times.
Repeat these steps again, if you’d like to create a new menu item. If you’ve finished creating all the menus, they should now be aligned nicely. All we need now is to nudge them into their correct position. For this, select all the layers, and position them with the Move Tool (V).

Step 8 – Creating the Page Headers

Before we do anything else, select the Navigation BG layer and the layer(s) that make up the nav menus, and press Ctrl+G on the PC, or Cmd+G on the Mac to group these layers into a folder. Name this one Navigation.
Create a new horizontal guide to 280 px. Now grab the Line Tool (U) by long-clicking the Rectangle Tool and choosing the Line Tool from the fly out menu. Adjust 3px for the Weight, and set #1A1A1A for the Color. Now, while holding down the Shift key, draw a straight line from the left edge to the right, on the recently created horizontal guide. When done, we have to rasterize this layer by right-clicking the layer and choosing Rasterize Layer. Also let’s name this one something like „Header Line”. Then grab the Horizontal Type Tool (T), set the Size to 40px and the color to #1A1A1A, click in the middle of the line, and type the first header’s name, in my case it will be „About Me”. Nudge this text into position, then select the Rectangular Marquee Tool (M), and draw a slightly bigger rectangle around the text. Height does not matter here, only the width of the selection counts. Click on the Header Line’s layer, and press Delete or hit Ctrl+X (Cmd+X on the Mac) to cut the selected piece out of the line.
Now we are done with one page header. For the last step, select both the text layer and the Header Line layer, and hit Ctrl+G (Cmd+G on the Mac) to group these layers into one. We can also give it a name of something like Page Header. It is very important to keep our layer structure clearly understandable, by naming our layers and groups according to their content.

Step 9 – The First Page

Finally, some real content! In this step, we will create a fixed size text box, and an image with some cool effects. First, grab the Type Tool (T), select a basic font like Arial or Helvetica if you have it, set the Color to #4C4C4C, the Size to 14px, and the Leading (or row distance) to 20px. Now we are going to add some more guides to help us perfectly align the text box. In the View menu, select New Guide, and create horizontal guides to 330px and 570px, and also create a vertical guide to 670px. Completed with our existing vertical guide at 160px, we have just formed a rectangle with our guides. Select the Type Tool (T), and draw out this rectangle.
Beautiful, now we have a fixed size text box. For the sake of this tutorial (and for the lack of creativity) I’ll place some lorem ipsum text here, you may be more creative and type something more reasonable.

Step 10 – Avatar

Okay, now comes the profile picture… or should I call it avatar? Anyways, we’ll need a picture. I’ll use a placeholder image (you guessed it), you may of course be creative and find a cool photo of yourself. Whatever image you choose here, make sure that its aspect ratio fits into the remaining empty space.
If you have chosen the image, paste it into the document by dragging the image file into Photoshop from Windows Explorer or from Finder on the Mac. Reduce its size so that its height matches up the text’s height, or its width taking up the remaining free space on the right side. Nudge it into position with your mouse, and if you have done everything correctly, you should have an image that looks something like this.

Okay, it’s all cool, but it looks a bit dull, so let’s quickly apply some layer styles. Double-click on the image layer to bring up the Layer Styles window. Set these values listed.

By now, the profile picture should look like this. A super-quick polaroid-like photo effect.

Looking much better now, but still missing a shadow if you ask me. Instead of using the Drop Shadow layer style, let’s create something more unique. It’s a weird procedure, but follow me, and you’ll get satisfying results! First, I need you to Ctrl+Click (Mac users Cmd+Click) the layer’s thumbnail, this way we’ll select everything on that layer. Then, create a new layer below our currently selected layer.
To do this, you have to hold down the Ctrl (Cmd) key while clicking the New Layer icon on the bottom of the Layers Panel.
Now, press D to reset back to the default colors, and then hit Alt+Backspace on the PC, Option+Delete on the Mac to fill the selection with the foreground black color. Great, we can’t see nothing yet! And it’s all cool. Hit Ctrl+T (Cmd+T for Mac users) to free transform the layer, and make it smaller to about 90% (See the Options bar at the top!), Numerical Enter commits changes. Then, grab the Move Tool (V), and nudge it down a little, so its bottom edge just pops out from behind the image. Now, go to the Filter menu, choose Blur, then Gaussian Blur. Input 5 pixels for the Radius, and click OK to accept. Reduce the shadow layer’s Opacity to about 80%. Looking like a shadow? Definitely. Just one more step to make it really stand out: Hit Ctrl+T (Cmd+T on the Mac) to Free Transform the object again, but this time, right-click the selection, and choose Warp. You’ll now see a grid. Grab the bottom left and bottom right control points one after another, and drag them down a bit, thus making the shadow look like it’s been bent. Check mark icon on the Options bar commits changes.

If you’ve come along with me, you have now learned a very cool technique of creating unique shadows. You can, of course, play with the shadow a little to make it look just how you like. We should group the text and the image layer together by pressing Ctrl+G / Cmd+G, and give it a descriptive name, like “About Me Section”.
Step 11 – My Work, Your Work

A new page is about to come, so let’s jump back to our group named „Page Header”. We need to right-click on this group, and select Duplicate Group. You can give the new group a more descriptive name like „My Work Header”. Now, grab the Move Tool (V), hold down the Shift key, and press the down arrow button quite a few times until it gets about 80 pixels below the bottom edge of the profile photo. If you like guides, you can create a horizontal one to 650px. Nudge the header of the My Work section onto this line if you do so. When in place, double-click the old „About Me” text, and type in „My Work” instead. You may need to reposition this layer after changing the text, if so, grab the Move Tool (V) and use the arrow keys.

Okay, now let’s put those work pieces onto the canvas. We’ll start by adding just one image, apply some layer styles, and then paste the rest of the images, and applying the same layer styles to them as well. But before we touch anything, let’s do a quick math.
The site’s width is 960px. Minus the padding on both sides equals 880px at our disposal. We will insert 4 thumbnails (workpieces) in a row, which means we can use 200×200 pixels square images for the sake of simplicity. This leaves us with 80px remaining. 80 divided by 3 is ~27; these 27 pixels will serve as padding between the images.
If you like to place guides (like I do), create them accordingly to vertical 360px, 387px, 587px, 613px, 813px and 840px. Might as well we can create some horizontal guides to 710px, 910px, 940px and 1140px. If you came with me and placed all these guides, your canvas should look similar to a maths exercise book. On the other hand, though, you can insert all your pictures with ease, without having to pixel-perfectly align them.
Okay, so let’s import a 200×200 pixels image to the canvas, and nudge it into position. We are going to copy our last image’s layer styles for the sake of ease, so right-click on the portrait layer, and choose Copy Layer Style. Now right-click on the newly inserted thumbnail, and select Paste Layer Style. Now it has the same effects as the portrait image, which is nice, but let’s also add a drop shadow, by double-clicking the layer on the Layers Panel. I’ve used these settings.

Since the layer styles for this image have changed, right-click the layer, and choose Copy Layer Style to refresh your settings on the clipboard.

Beautiful. One image done, a lot more to go. Insert another 200×200 thumbnail, nudge it into the correct position, then right click on its layer and choose Paste Layer Style. Repeat this step a number of times, until you’re out of thumbnails.
I have placed a total of 8 thumbs into the My Work section, barely enough for start, if you ask me. I recommend you group your layers into a folder here, which will make it easier to see through your layers in the future! Looking good, moving on!

Step 12 – Let’s Blog!

But before we do, let’s again duplicate one of our existing Page Header groups, rename it if you like, nudge it to a position about 80px below the thumbnails at My Work (1220px if you are pixel-perfectly following me), rename the header text to „Blog”, and we’re done with the header. Let’s see the structure of the blog posts. Again, just like we did previously with My Work, we’re going to create only one blog post, then duplicate it a couple of times.
So, what do we need? Guides, of course… if you’re still in the mood of creating guides, here are some numbers: We need one vertically to 515px, and the horizontal ones should be at 1280px, 1480px, 1530px, 1730px, 1780px, 1980px, 2030px and 2230px. If you carefully analyze these numbers, you can quickly recognize that we are going to use 200px tall images with 50px padding in between the posts.
First, we’ll need an image. I’ll use 355x200px images here. Paste one onto the canvas, nudge it into position, then right-click on its layer and choose Paste Layer Style. Yes, the same layer styles that we’ve used previously. Just one modification, double-click the layer to bring up the Layer Styles window, and decrease the Stroke size from 8px to 6px. Okay, the image is done, now come the texts beside it.

First, a post title, grab the Horizontal Type Tool (T) for this. We’ll use our beloved red color here, #BF3030 if you remember, also change the font to Georgia, and the Size to 24px. Let’s type in the first post’s title, for me it’s going to be „First Post Title” with all caps. Let’s nudge it into position, about 30 pixels right of the image. Moving on to create the post-info section.

For this, let’s adjust the text size to 12px, and set the foreground color to 50% black (#808080). Now click on the canvas, somewhere below the post title, and add the post-info text, like „Posted by Admin in Tutorials on 2011-09-25”. Great, let’s add some depth to it by selecting the words Admin, Tutorials, and the date (one-by-one), and changing their colors to a darker #4C4C4C. Okay, how can we separate the post-infos from the header and the oncoming big text box? Simply, we’re going to add two lines, one above, one below.
Select the Line Tool (U), change the foreground color to #808080, and draw a line above the post-info section. If you like to think in guides, draw it from 545px to the 1040px border. Nudge it into position, then hit Ctrl+J (Cmd+J for Mac users), and nudge the new line down by holding the Shift key and using the down arrow key. It should look something like this after finishing all the steps.

Let’s now create the text box that will hold the first few sentences of our blog posts. Grab the Horizontal Type Tool (T), and draw out a text box to the appropriate position. Paste in some text, I’ll go with lorem ipsum again. Make sure you go with Arial or Helvetica, 12px, #4C4C4C. In the end, it should look like this.

Okay, we’ve created one blog entry. Let’s group all these elements that make up the post, by selecting all of their layers with the Shift key, and pressing Ctrl+G (Cmd+G on the Mac). Name this group something like Blog Entry. Then, let’s duplicate it! Right-click the group, select Duplicate Group, give it a new name, and hit OK. Grab the Move Tool (V) and nudge it down, leave 50 pixels in between the two posts. Great, now we have two identical posts. Let’s make some changes to make them different.
One thing we must do is to swap the image. Simply, insert a different 355×200 image, then copy the layer styles from the old one, and paste it onto the new one. Also, double-click the title layer, and type in a new title, then make some changes in the post-info section as well. Now if you repeat these steps two more times, you will have created 4 different blog posts. My Blogroll looks like this at the moment.

Step 13 – Contact

Looking good! Let’s finally create a beautiful contact form. Let’s add some new guides (oh, not again?!) vertically to 260px and 700px, and horizontally to 2370px. We’ll create two columns here: the left side will contain the contact form, the right side will house the contact information. Let’s get to it!
First, let’s duplicate one of the Page Header groups again, and set the text inside it to “Contact”, move into position, and if you like of course, you can rename this group, and move it up in the Layers Panel.

First, grab the Type Tool (T), and choose Bebas Neue as the Font face, set the Size to 30px, and choose our favorite red (#BF3030) for the Color. Create a new text layer, type in „Contact Form”, and move it into position. This will be the header of the contact form.

Then, hit Ctrl+J (Cmd+J) to duplicate this layer, and nudge it to the 700px guide with the Move Tool (V). Double-click this new layer’s thumbnail and type in „Contact Information”. Now hit Ctrl+J (Cmd+J on the Mac) again, and move this new text layer way down, we’ll set its exact position later. What we can do now, though, is to set the text to „Social Media”.

Okay, let’s continue on by creating the form itself. We’ll need the Rounded Rectangle Tool (U) for the job, it can be found under the Rectangle Tool (U). Press D to reset colors to their defaults, then press X to swap the foreground and background colors. This way, our foreground color is now white. Look up at the Options Bar, and set the Radius to 5px. Then drag out a rectangle to create the first input field. It should look like this.

Now, let’s add some layer styles to it. Here are the options we need to set.

Okay, now press Ctrl+J (that is Cmd+J on the Mac) to duplicate this shape, and move it down a bit to create the next input. Repeat this step once again, so we’ll have 3 input fields right below each other.

We now need to create the message box called the text area. For this, let’s pick the Rounded Rectangle Tool (U) again, and draw out a much taller rectangle than we did last time, whilst keeping the width intact. When done, copy the layer styles of the input fields, and paste them onto this new text area. If you’ve done everything properly, your form fields should now be done.

Let’s now create the labels for the input fields. Grab the Horizontal Type Tool (T), set the color to #4C4C4C, and the size to 24px. Click before the topmost input field, and type in „Name”. Nudge it into the correct position, sticked to the guide at 160px. Now let’s duplicate this layer (Ctrl+J / Cmd+J, remember?) 3 times, and drag them down to their appropriate positions. Name these labels „E-mail”, „Website” and „Message”. Cool, the Form is (almost) done. Group all the layers that make up this form, and name it appropriately.

Okay, moving on to the right side. Let’s now do a little trick, and duplicate these 4 labels one-by-one, then move all of them together to the right side. Use the guide at 700 pixels for alignment. Rename these 4 texts to the following: „Address”, leave this one „E-Mail”, „Phone” and „Websites”. Now, let’s add some content here.
Change the Font to Georgia, set the Size to 14px, and leave the color at #4C4C4C. Before touching anything, quickly add a vertical guide to 830 pixels. This will help us align the upcoming texts. So, click right onto this newly created guide, and input some information for the Address. I’ll type something like „Web Site 10. 5555 Cityname, Countryville”. If you type anything that can be divided into 2 lines, it will look just great. Now, move it into position, use the 830px guide for perfect alignment. We are now going to duplicate this text layer a couple of times, nudge the copies down to fit, and rewrite the content. Again, group all the layers that make up this section, and give it a descriptive name. If you’ve followed me so far in the tutorial, it should be no problem. Here is my result.

Great so far, two things remain from here, a submit button to the bottom of the form, and the Social Media Icons. Let’s now do the latter. We should already have a red text layer titled “Social Media” somewhere nearby. Grab it and nudge it away from the contact information section. A little below it should be fine. Just like this.

Okay, over here we can insert some social media icons. If you have your favorites, place them here. In case you don’t have any at your disposal, check my other post here on The SzabokaDesigns Blog titled Leather Pieces Social Media Iconset. I think these icons really go together with our theme. Insert a few icons by your taste, make sure you align them nicely. My result is shown here.

One last step is to add the submit button to the form. Let’s do so, by grabbing the Rounded Rectangle Tool (U), and dragging out a rectangle big enough to be a button. We’ll apply some simple layer styles to make it look like a real pushable button. Here is an example of how we can format a button with Layer Styles.

To create a gradient like this, you have to click into the gradient preview bar on the Gradient Overlay panel of the Layer Styles window.

Finally, grab the Type Tool (T), and type something on the button that speaks for itself, like „Send Message” or the good old „Submit”. I’ve used white for the text color here, with Bebas Neue again for the font. And now, we are finally done with the Contact section.

Step 14 – The Footer

The footer’s background is planned to be the same as the navigation bar, so let’s get to the Navigation BG layer, duplicate it with Ctrl+J (on the Mac, it’s Cmd+J), move the new layer up in the Layers Panel, and nudge the layer to the bottom of the document. All we need now is to grab the Type Tool (T), and put some appropriate information in the footer, like Copyright information, and links to special pages like Terms of Use, Customer Support, Privacy Policy, etc. I’ll simply add a Copyright information to the left, and copy the navigation menus to the right side. I’m using #F2C2C2 for the color, with a little drop shadow to make it stand out a bit more.


And we’re finally done! We’ve just created a simple one-page website design. We’ve seen a bunch of Photoshop’s basic features, I’ve shown you many easy-to-use techniques, and we’ve also learnt a lot of keyboard shortcuts that can help us in our future workflow.
As a little gift, I’ll give away the project’s PSD file with everything that we’ve learnt inside it. The whole design is much more pixel perfectly aligned than as it can be seen in the images shown in this tutorial.
One last word…

I really want to hear your voice! Share your thoughts on the project, let me know if you could easily understand all the steps, or if you had trouble with anything. Also, if you’ve followed along with me, share your final result with us! If you liked the tutorial, the best way to say thanks is to share it!