How to Create a Sleek and Textured Web Layout in Photoshop

How to Create a Sleek and Textured Web Design in Photoshop

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

Final Result

Here’s what you’ll be working to create. You can view the large version here.

Final Result

Download

You can download the source files of this tutorial (PSD and stock photos).

Setting up the Photoshop document and background

1 The first thing we want to do is to create a new document with the dimensions of 1024×1050.

Setting up the Photoshop document.

2 The next step is to go ahead and change your background color.  Using your Paint Bucket Tool from your tools pallet, fill your background layer with #F0EEDB.

3 Next we want to add a image to our background.  I found a great photo on deviantart at  and you can download it here. You’ll need to resize it to fit your document, and copy it a couple times to fill your document.  To save that step you can go ahead and get a larger version of the image in our source files.

4 Once you have the image on your document, go ahead and lower its opacity to about 82% and it will look something like this:

Setting up the Photoshop document and background

Creating the layout’s header

5 Now lets go ahead and get started on our header.  Using your Rectangle Marquee Tool make a selection similar to the following, about a pixel from the top of your document and fill it with #000000

6 Next we want to go ahead and insert the following blending options onto that layer by right clicking our layer and choosing blending options from the drop down menu:

Creating the layout's header

Creating the layout's header

Creating the layout's header

7 Lower the opacity to your layer to about 95% so a bit of the background fades through, and your document should look something like this:

Creating the layout's header

8 The next step is adding a logo to our header.  I went with the font Geneva CY.  Go ahead and place your text in a similar way to the following and make a nice little 1px wide line next to it.

Creating the layout's header

9 Now go ahead and add these blending options to your text layer, and to the 1px wide line you created.

10 Then go ahead and use a simple font like Helvetica to add a tagline with the font color #25B2F8.  Your final result should look like this for your logo:

Creating the layout's header

Creating the navigation: background

11 Next it’s time to make a navigation for our site.  Using your Rounded Rectangle Tool, go ahead and make a rounded rectangle similar to the following on the right side of your header.

Creating the navigation

12 Now we want to insert the following blending options onto its layer.

Creating the navigation

Creating the navigation

13 It should look something like this after your complete

Creating the navigation

Creating the navigation: adding the text

14 Lets go ahead and add some text, shall we?  For our active link we want to use the color #ABAE80, and for our other links we will use the color #393939.  Lay it out similar to the following:

Creating the navigation

15 Next we want to go ahead and divide our links up.  Using your Rectangle Marquee Tool, make a 1px wide selection in between all of your links and go to Edit > Clear on your Rounded Rectangle Layer.

Creating the navigation: adding the text

Header complete!

16 Once you do that in between all of your links, your header is complete and it will look something like the following:

Header complete!

Working on the photo banner: setting up the texture

17 Next we want to go ahead and work on our banner.  In essence, we are making a sort of "slide show" of different posts that could be displayed.  I found a great stock photo over at SXC which can be found here.  Go ahead and resize it on your document and select a part of the image you find the most appealing about the size as the following:

Working on the photo banner: setting up the texture

18 Now we want to add a slight border to the bottom of our stock photo, so insert the following blending options onto your stock photos layer:

Working on the photo banner: setting up the texture

Working on the photo banner: putting in the image title

19 We are going to want our title to be displayed on the image showing what post it is representing on our slideshow.  Before we add the text we want to add a nice little background for it.  Using your Rectangle Marquee Tool, make a selection similar to the following and the bottom of the image and fill it with #000000.

Working on the photo banner: putting in the image title

20 Now go ahead and lower the opacity to about 59% and you should have something that looks similar to the following:

Working on the photo banner: putting in the image title

21  Now we can add our title.  For the Category title, I used #FFFFFF for my font color, but lowered the Opacity of its layer to 60%.  For the title I used the same method, but only lowered it to 85%.  You image will look something like this:

Working on the photo banner: putting in the image title

Working on the photo banner: designing the post preview numbers

22  On the left side I went ahead and added a spot for you to choose which post is being viewed.  All I did was use my Elliptical Marquee Tool to make circles and fill them with black and placed white text inside.

Working on the photo banner: designing the post preview numbers

23  For my active number 3 circle, I used the following blending options on its layer:

Working on the photo banner: designing the post preview numbers

Working on the photo banner: designing the post preview numbers

Website photo banner completed!

24 At this point your header will be complete and should look something like this:

Working on the photo banner: designing the post preview numbers

Designing the post teasers

25  Now it is time to move onto how our posts will be displayed.  Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FFFFFF.

Working on the photo banner: designing the post preview numbers

26  Next we want to go ahead and insert the following blending options onto its layer:

Designing the post teasers

Designing the post teasers

Post teaser design completed!

27  All we do now is just lay out how we want our post.  For my heading I used the color #211213 and standard #000000 for the description.  Go ahead and lay it out similar to the following using your Text Tool

Designing the post teasers

Creating the layout’s sidebar: the heading box

28  You can go ahead and use that layout for the rest of your posts.  Next we want to move onto our sidebar.  The first thing we want to do is to create a heading box.  So using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

Creating the layout's sidebar: the heading box

29  Now insert the following blending options onto its layer:

Creating the layout's sidebar: the heading box

Creating the layout's sidebar: the heading box

Creating the layout's sidebar: the heading box

30  Your results should look like the following:

Creating the layout's sidebar: the heading box

31  Now lets add some text.  Add your title with the font color #323232 and use the following blending options on its layer:

Creating the layout's sidebar: the heading box

32  You will get something that looks like this:

Creating the layout's sidebar: the heading box

Creating the layout’s sidebar: the sidebar content boxes

33  Next we need to make a box to place our content it.  Using your Rectangle Marquee Tool yet again, make a box similar the following and fill it with #000000.

Creating the layout's sidebar: the heading box

34  Next go ahead and insert the following blending options onto your layer:

Creating the layout's sidebar: the sidebar content boxes

Creating the layout's sidebar: the sidebar content boxes

35  Go ahead and add some content and repeat those steps and you will get something similar to the following:

Creating the layout's sidebar: the sidebar content boxes

The layout’s footer

36 We are almost done!  The last step is to add a footer.  Using your Rectangle Marquee Tool, make a selection similar to the following at the bottom of our document and fill it with #000000.

The layout's footer

37  Now go ahead and insert the following blending options onto its layer:

The layout's footer

The layout's footer

The layout's footer

Congratulations – you’re done!

38  Just add some text, and that is it!  Your template is complete.  When it is all said and done, your final results should look like the following:

The layout's footer

About the Author

Matthew Heidenreich is currently a freelance designer from St. Louis, Missouri.  He enjoys teaching others how to create interface and web design tutorials on his blog called PSDVIBE. You can get in contact with Matthew by following him on Twitter: @Spicypepper.