Design a simple, modern web template

by DedrickPayne - Templates, Tutorials

Today, we present a tutorial by Dedrick Payne on how to create a simple, but modern web site template from scratch in Photoshop.

In this tutorial we will create a modern web page design in photoshop.

The Final Product

Click the image for a full-size preview.
Final Product

Step One: The Canvas

Create a new Photoshop document with the demensions of 1200 x 1244 px.

Next, add the following guides by going to View » New Guide.

  • orientation Vertical and position 120px
  • orientation Vertical and position 1080px
  • orientation Horizontal and position 100px
  • orientation Horizontal and position 512px
  • orientation Horizontal and position 994px

If you can’t see the guides you made turn them on by going to View » Show and make sure that Guides has a check next to it.

This should be the result:

Final Canvas

Step Two: The Background

Select the Rectangle Marquee Tool or press M.

Make a selection from the top of the canvas to the middle line as shown in the picture below:

Selection

Next, click the Adjustment Layer icon at the bottom of the Layers panel and choose Gradient.

Next, edit the gradient with a nice blue color like shown below:

Note: Always make sure that you have the Dither box checked for a smoother more aesthetically pleasing gradient.

Gradient Editor

Choose #266e8d for the left side and #6bafce for the right side.

Grab the Rectangle Marquee Tool once again and make a selection as shown below:

Selection

Click the Adjustment Layer icon at the bottom of the Layers panel and choose Gradient.

Edit the gradient with the color #ffffff on the left and #d7d7d7 on the right as shown below:

Gradient Editor

We should have a nice gradient fade from a light gray to white like shown below:

Gradient Example

Now for the last section. grab the Rectangle Marquee Tool again and make selection like the one shown below:

Finally, create a gradient and edit it with the same blue colors as before. #266e8d on the left side and #6bafce on the right side for this result:

Once you’ve got the above result then we’re ready to move to the next step.

Step Three: Header / Navigation

Next, select the Type Tool and type the title of your website and a nifty slogan positioned directly below it:

In this tutorial I’m using the font Rockwell and Rockwell Light. If you don’t have that font you can find a similar one here at dafont called Slab Tall X.

Right-click the title layer then click Blending Options.

Use the below settings to get a nice indented look for the title of the site:

This is the result you should get:

Next, add the page navigation like shown below:

Grab the Rounded Rectangle Tool and make the page indicator as shown above. Apply the same indent effect as used with the page title.

Select the Pencil Tool and set it’s diameter to 1px

While pressing shift create a 1px line from the left guide line to the right guide line using #3d81a0. Position this line directly under the top horizontal guide line.

Make a second line directly below the previous line we just made using the color #83c7e6. Here is an example below:

This is the nice divider we get with the guides hidden:

Step Four: Site Intro Section

Select the Brush Tool and set the diameter to 500px and hardness to 0%. Set #7dc4e4 as the foreground color.

Create a new layer and make one single dab as shown below to create a nice highlight:

Select the Rectangle Marquee Tool and a selection like shown below and press the Delete key.

Time to add the intro text. Position text as shown below:

Grab this image of a laptop from my Photobucket. Add any picture you’d like to the screen of the laptop and position the laptop next to the intro text (Resize as needed):

Next, add some introduction text as shown in the picture below:

Grab the Rounded Rectangle Tool and create a button shape. Position the button as shown in the below picture:

Apply the following Blending Options to the shape to get a great looking button:

Now, add the words “Our Work” above the button. These are the final results:

Now we’re finished with the top half of the web site!

Step Five: Content Area

We will use the Single Row Marquee Tool to create a 1px line across the canvas. Select the tool and create a new layer. Click once anywhere on the canvas. You should see a single 1px row selected as shown below:

Fill the selection with the color #1b4f65.

Create another 1px line with the Single Row Marquee Tool on a new layer and fill it with the color #ffffff.

Position the lines directly below the second Horizontal guide line. Example below:

This is what we get:

Now let’s add some content to the mix. Use the Text Tool and type “Welcome” and insert desired content directly below it. Format the text as shown below:

Next, we’re going to create the client login and twitter update boxes.

Grab the Rounded Rectangle Tool go into the Rounded Rectangle Options and input the following settings:

Position the rounded rectangle as shown and set it’s color to #dddddd. Go into the Blending Options and add a 1px stoke with the color of #d2d2d2. This is the result:

Select the Brush Tool and set it to 300px hardness 0%. Create a new layer above the rounded rectangle and click once with #ffffff as the foreground color. This is what we get:

Right-click the round dab we just made in the layers panel and click Create Clipping Mask. This is what we get:

A nice highlight to make the box pop.

Next, we will add the icon and title. In this tutorial I used a great icon set that can be found at Function for free download.

Add the user icon and type “Client Login” right next to it:

Select the Rectangle Marquee Tool and set a fixed width and height of 250 x 30px. Create a new layer and make selection. Fill the selection with white. Select the rectangle in the layers panel and add the following Blending Options:

Gradient Overlay:

Stroke: 1px #bababa

Duplicate the rectangle and place it directly below the first one. These will be the username and password fields:

Inside each box type Username and Password:

Dupicate the “Our Work” button we made earlier and change the text to Login:

Select all of the layers that make up the login box and go to Layer » New » Group.

Rename the group Login. Next Right-click the group and click Duplicate Group and press Ok. Drag the duplicated group just below the Client Login. This will become our Latest Tweet box.

Delete the user icon and replace it with the twitter icon from the icon set. Change the title of the box from “Client Login” to “Latest Tweet”. Change “Login” on the button to “Follow Us”:

This is where we should be at. We’re almost complete!

Step Six: Footer

Create two horizontal lines across the canvas like we did earlier using the colors #568ca5 and #b2d5e5. Position them directly under the last horizontal guide like shown below:

This is the result:

Next, open the Mail, Wrench and Bubble icon from the icon set and position them in the footer area.

Select the Type Tool and type “Contact Us”, “Report A Problem” and “Latest Blog Posts” in Rockwell Regular 24px #ffff.

Format and position the text and icons like in the image below:

Conclusion

Click the image for a full preview of the final product!

All of the techniques used in this tutorial can be used in a variety of different ways to create a stunning web page layout. Don’t be afraid to mix different color combinations and layout styles to create something magnificent! Remember to download the Psd to have a closer look at the final product!

download-but

About the author

Dedrick Payne is a 19 year old beginning web designer from Houston, Texas. He is into many different types of design and enjoys creating things.


Visit DedrickPayne's Website | All Articles From This Author

64 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.