Create a Clean and Classy Web Design in Photoshop

Preview

Click on the image below to see the web design mock-up in full scale. This web design is professional and user-friendly, so it should be great for your businesses web reputation.

Preview

Working Demo

Click on the image below to see the working demonstration (which you can download at the bottom of this tutorial).

Working Demo

Resources

Step 1: Set up the Photoshop document

The first thing we need to do is create a new Photoshop document to work with. For this web design layout, make a new document with the dimensions of 1020x1180px.

Set up the Photoshop document

Step 2: Make the navigation bar background

We want to start at the header and then work our way down to our footer. Using your Rectangular Marquee Tool (M), create a rectangle marquee selection that spans the entire width of the canvas; then fill it (Cmd/Ctrl + F5) with a dark gray color (#393939).

Make the navigation bar background

Step 3: Stylize the navigation bar background

Replicate the navigation bar background layer that you just created by hitting Cmd + J; this duplicates the layer.

Apply a noise filter (Filter > Noise > Add Noise) on the duplicated layer; note that we should use a uniform noise distribution so that the background can be tiled for later use.

Stylize the navigation bar background

Then change this layer’s blend mode to Overlay and lower the opacity to around 23%.

Step 4: Create the site’s logo/name

For our logo, I used the font Georgia set to Bold Italic. I used white as the text’s color (#FFFFFF) for ‘Six’ and a beige-tan color (#F7E5C4) for ‘Studios’. For the logo/site name’s icon, I used the boxupload32 icon from the free Mono Icons listed in the resources at the top of this page.

Create the site's logo/name

Step 5: Add the menu links

It’s time for our horizontal navigation links. Our active link will use the color #DBD1BE, and our non-active links will be #ABAAAA.

Add the menu links

To make our active link stand out a bit more, make a rounded rectangle behind it. Using your Rounded Rectangle Tool (U) from the Tools Panel with the Radius option set to 5px and your foreground set to #464646, make a rounded rectangle shape as shown below.

Add the menu links

On your rounded rectangle shape layer, add an Inner Shadow and a Stroke layer style by right-clicking on the layer and choosing Blending Options from the contextual menu.

Inner Shadow settings:

Inner Shadow settings

Stroke settings:

Inner Shadow settings

Inner Shadow settings

Step 6: Add the background of the featured area

On the top portion of our web layout, there will be a featured area that has an image slideshow so that users can navigate and view through your featured works. This area will also house a little description about your site. To start things off, we want to use our Rectangular Marquee Tool (M) to make a rectangle that denotes the background of this featured area, filling it in with the color: #D3CAB8.

Add the background of the featured area

Next, download and open the Grungy Natural Beige Photoshop Pattern (or a pattern of your choice) in Photoshop. Drag the texture onto your main canvas, over the featured area’s background.

Step 7: Mask out unwanted portions of the background texture

You are going to end up having a lot of texture that we do not want to be showing, so we want to mask out what we don’t need. To do this, Cmd/Ctrl + click on the thumbnail of your featured background layer in the Layers Panel to make an automatic selection.

Select your texture layer from your Layers Panel, and then click on the Add layer mask button at the bottom of the panel to mask out everything but the selected area.

Then change your texture layer’s opacity to about 35% to let the layer below show through.

Mask out unwanted portions of the background texture

Using the Horizontal Type Tool (T), add some text in this featured area using Helvetica or Arial. Make sure to put the heading text and the body text on their own distinct layers.

For our heading text, I used white as the color (#FFFFFF), and for the body text, a light-gray color (#2A2A2A).

Mask out unwanted portions of the background texture

To spice up the heading text, give it a drop shadow and a color gradient, which produces an inset type effect.

Drop Shadow settings:

Mask out unwanted portions of the background texture

Gradient Overlay settings:

Mask out unwanted portions of the background texture

Mask out unwanted portions of the background texture

Step 8: Create the “About us” rounded corner button

For the “About us” interface button, use the Rounded Rectangle Tool (U) again with a radius of 5px. The text on top of your button can use the color of #404040.

You can find the arrow icon I used (it’s called circleright32) in Mono Icons. Resize the icon to fit the button you created using the Free Transform command (Cmd/Ctrl + T).

rounded corner button

On this rounded rectangle shape layer, add an outer glow and a color gradient to make the shape more interesting.

Outer Glow settings:

rounded corner button

Gradient Overlay settings:

rounded corner button

rounded corner button

Step 9: Add a florish design element

The last step for this side of our featured area is adding a florish; a subtle design element that enhances the elegant and classy look-and-feel of our web design. First, download and install the Floral Brushes brush pack (listed in the Resources section above).

Set your foreground color to #343434 before you apply your brush.

Choose the Brush Tool (B), find a floral brush tip that you like in the brush pack we installed, and apply your brush stroke with one click.

Afterwards, change the layer’s blend mode to Hard Light.

Add a florish design element

Step 10: Create the slideshow area

Let us work on our slideshow content area. Use your Rounded Rectangle Tool (U) with a foreground set to white (#FFFFFF) and a radius of 5px to generate a rounded rectangle shape on the right side of the web layout.

Create the slideshow area

Change the fill on this layer to 15% to let some of the background pattern show through, and then add a drop shadow on the shape.

Create the slideshow area

Step 11: Add an image for the slideshow area

We need to add a thumbnail to our box at this point. Take an image that you can use in this area (such as a screenshot of a website), and place it over the area.

We want the corners to be rounded. In the Layers Panel, Cmd/Ctrl + click the thumbnail preview of the rounded rectangle shape to make a selection.

Still in the Layers Panel, choose the layer with your image on it.

Go to Select > Modify > Contract and contract the marquee selection by 10px.

Then choose Select > Inverse (Cmd/Ctrl + Shift + I) to invert your selection.

To give the image rounded corners, choose Edit > Clear.

Be sure to optimize the images you use!

Add an image for the slideshow area

Step 12: Add a description of the image being shown

Let’s add a description of the image being currently shown in the slideshow area. Create a marquee selection around the image by Cmd/Ctrl + clicking on its layer’s thumbnail preview in the Layers Panel.

After it is selected, create a new layer and fill your selection with black (#000000).

Then use your Rectangular Marquee Tool (M) to select the top portion of your newly created rounded black rectangle and delete it.

Add a description of the image being shown

Lower the opacity of this layer to about 75% to let your image layer show through.

To finish it off, add some text to describe the image using the Horizontal Type Tool (T).

Add a description of the image being shown

Step 13: Add a divider at the bottom of the featured area

The last step for our featured area is to add a gray, horizontal divider at the bottom of it. We want to follow the same method as Step 2 and Step 3 for creating this divider; the only thing that changes is adding an inner shadow into it.

Add a divider at the bottom of the featured area

Here’s our featured area fully completed:

Add a divider at the bottom of the featured area

Time to move on to our main content area.

Step 14: Add color to the background of the main content area

Just as you may have guessed, our content area will house the three columns shown in the preview of our web design. We don’t want to be boring and leave the background white, though; so create a marquee selection with the Rectangular Marquee Tool (M) that spans the entire width of the canvas, filling it with an off-white color (#FBF5EA).

Add color to the background of the main content area

Our content area is going to be fairly simple, but simple goes a long way if done correctly. We will start with the left sideβ€”the side where we will place the list of services.

Step 15: Add column headings

For our column headings, pick symbolic representations of the content that the column will have from the Mono Icons and position them to the left.

I used the font Georgia and a dark gray color (#323232) for the column heading text.

Next, add a bottom border below the column headings using the Pen Tool (P). Create a path as shown below.

Add column headings

Apply a stroke to the path by first setting your foreground color to the same color as the text (#323232). Then find a nice brush tip with the Master Diameter option at 3px.

On a new layer, go to your Paths Panel (Window > Paths) and click on the Stroke path with brush button at the bottom of the panel.

Add column headings

Next, we want to give a little bit of a gradient to our curvy line. Do this by adding a gradient overlay layer style.

Add column headings

Add column headings

Duplicate your curvy lines layer (Ctrl/Cmd + J), and then nudge it 4 or 5px below the original line.

Lower the opacity of it to around 24%.

Add column headings

Step 16: Add content to the left column

All that is left for the left column is to add its content. Our header text color is set at dark gray (#323232). For the body text, use a readable shade of gray (such as #2A2A2A).

Use the same process in Step 8 for making the “Read More” interface buttons. However, for the middle row, I wanted to switch up the color, so I made it a solid-colored gray (#484848) rounded rectangle to present my proposed hover state of these buttons in the web design mock-up.

Add content to the left column

Step 17: Add content to the middle column

With the left column complete, it only makes sense to move on to the center. Create the same heading as we did for the left column, but change up the icon with one that you find suitable.

Using your Rounded Rectangle Tool (U) with a radius of 3px and a white foreground color (#FFFFFF), make a small rounded corner content box and lay out some text and description.

Add content to the middle column

Then apply an outer glow and a stroke layer style to your rounded corner content box.

Outer Glow settings:

Add content to the middle column

Stroke settings:

Add content to the middle column

To finalize the rounded corner context box, add an image to match your description.

Add content to the middle column

Step 18: Add content to the right column

The right column is very similar to how the left and the center columns are arranged. We want to create the same heading for the other two, using a different icon that is symbolic of the content in this column.

For the non-active links, I used a dark gray font color (#353535). For our active links, I used plain, old white (#FFFFFF). Behind our active link, I created a background using the Rounded Rectangle Tool (U) with a 3px radius and the same dark gray color as our non-active links (#353535) to make it stand out.

Add content to the right column

Step 19: Design the Newsletter widget

Next, we need to create our Newsletter widget. Use your Rounded Rectangle Tool (U) with a radius of 3px to create the box. In this rounded corner box, apply the same process as in Step 2 for creating the noisy, gray background so that we can reuse the design element from the navigation bar in our web layout.

Design the Newsletter widget

All you need to do now is add some content to your Newsletter widget. The font for the heading is Georgia Italic, and the icon is, again, from Mono Icons. I placed a Color Overlay layer style using a beige color (#F7E5C4) on the icon to make it blend in a little better on our web layout’s color scheme.

Then just use your Rectangular Marquee Tool (U) to make a rounded rectangle to serve as the input field for the email address of the user; use a fill color of white (#FFFFFF).

Design the Newsletter widget

That is it for our main content area! Time to move on to the final section of our web layout: the footer.

Step 20: Adding the background of the footer

The footer is going to be made exactly like the header navigation background from Step 2 and Step 3. You will want to make it a little taller than your navigation, though, so that it can accommodate more content.

Adding the background of the footer

Step 21: Add the content of the footer

Next, add some links to our footer. Using your Rectangular Marquee Tool (M), create a rectangle and fill it with a dark gray color (#323232). Then place some white-colored text (#FFFFFF) in the box for your link.

Adding the background of the footer

Now change the blend mode of your rectangle’s layer to Soft Light and lower the opacity to 63% to let the footer’s background show through. Repeat this process for as many links as you need.

Adding the background of the footer

The last thing we need to do is to add our social media icons above our footer’s navigation menu and then add our logo and copyright text to the right side of our footer. The social media icons used comes from the Vector Social Media Icons.

Adding the background of the footer

That’s it!

Conclusion

I hope you found this tutorial helpful and easy to follow. This design is professional and unique so it should be good to use for sites from a variety of industries; from a golf course to an HVAC business. Β If you have any questions, please do not hesitate to ask in the comments. If this tutorial inspires you, show off your work in the Design Instruct Flickr group.

Preview

Download Source Files

  • Thanks you for your geat tutorial!

  • Good for beginners, but I’d like to see more advanced techniques. And also, for a change, maybe an inner page design? The tutorials always focus on the home page.

    I know it might be the most fun page to design, but it’s not always the most visited.

  • David

    Hello Matt, I am a beginning Designer from Georgia. Here, there are not many designers. You are great Designer. How old are you? I am 11 Years old. Good luck.

  • Peter

    Nicely done! Is there anyway that there be a WordPress version of this?

  • We currently have no set plans of converting this into a WordPress theme. If someone would like to take that on, they’re free to use the XHTML/CSS template that’s included in this tutorial. I saw one of our Twitter followers, Paul Ehrenreich, contemplating on doing this, and we support him and any other individual who would like to take the XHTML/CSS template and convert it to a WordPress, Drupal, Joomla!, or any other CMS theme. As a small incentive for their effort, we’ll update this tutorial with a link to the download page of their work.

  • Paul, that is a great idea. When a designer is tasked with creating a web design mock-up for a client, they typically have to produce several page views of the design: (Home page, content page, product pages, etc.). We’ll take your comment under advisement, thanks!

  • thank you David, and I am actually 19 years old.

  • Paul Ehrenreich

    Now that I got mentioned it looks like I should grab the HTML/CSS files and start working on it πŸ™‚

  • excited to see what you come up with! Our last names are vaguely similar as well I noticed, ha

  • Ryan Turki

    Good design, Clean and simple!!!!

  • Paul Ehrenreich

    when I start it, I am going to try and document how I did it so that people can learn from it.

  • its look beautiful πŸ™‚

  • Great tutorial. Thanks.

  • Thanks Paul! Don’t forget to drop by back here and share the link so we can all see it.

  • I’ve flirted with designing websites in photoshop and I still don’t understand why designers do. It’s a personal workflow decision, but I find it much more fluid to work in Illustrator. The same effects can be rendered, only it’s much easier to select, draw and modify items on the page. Each element need not be on a separate layer too. Designing websites in Photoshop seems to be a throwback to the early 90’s when.

  • “To each his[/her] own.”

    Personally, I like using Photoshop or Fireworks for web work, and Illustrator for print work (logos and such). My experience with Illustrator (harking back to my days as a graphic designer), is that what you’ve said is accurate when comparing to Photoshop: Selecting, drawing, scaling, modifying things is much easier in Illustrator. However, it’s easier in Photoshop to apply popular web effects such as textures, color gradients, and filters.

    Fireworks, to me, is sort of the in-between of both these graphic editors, being that it’s both vector and raster.

    It’s so much easier (at least for me) to create low-fed wireframes in Illustrator though.

  • As Jacob has said, I usually will use Illustrator for print-ready materials, and tend to stay away from it when doing web work. I am actually the opposite where I find it easier to work in Photoshop, but this all depends on what you’re used to using. I’m sure you’re just used to working in Illustrator, so you’re more comfortable with it, where I tend to work more in Photoshop.

  • In the footer of your sliced version i would think it best to create the links anchors that have display block, that way the whole area is clickable….

  • You’re completely right. It would be better for the element inside the <li> element to have a display:block; property and then to give them a width and height attribute of 100%. Pure oversight on my behalf (I wrote the HTML/CSS template); I’ll blame it on the lack of caffeine in my system when I coded it! πŸ™‚ I’ll update the download soon, but for anyone who wants to do this, this CSS code block added in styles.css should do the trick:

    ul#foot-nav li a {
     display:block;
     width:100%;
     height:100%;
    }
    
  • Although, too long for my liking, this tut reminds of the old days on Tutorialized. Thanks.

  • Great Tutorial and good explained.
    I would like to see the “promised” HTML -> WP tutorial from Paul πŸ™‚ That would be a great thing too.

    Keep goind.

    Thanks

  • Oh man, you are an awesome designer, thumbs up for you.

  • thanks for all the comments guys, really appreciate it!

  • How to slicing & coding

  • AGupta

    Thank u so much for such a nice tutorial. This color theme is awesome. Good to understand. Could u please post some slicing ideas to ease the page loading time?

  • Is there a reason why you designed the website in CMYK?

  • Yeah, looking at the included HTML template now, it could use some optimization. I will admittedly say that I did it very quickly (including the slider that is quite buggy).

    Also, I avoided some best practices that I typically do in production sites, such as CSS sprites and minifying the code because the template is meant to be studied, and thus, must be readable. I didn’t create it for production, but more as a “proof of concept” that the readers of this tutorial can look at and learn from. If you study the source of Design Instruct, you’ll see that I also prefer to write CSS style declarations in one line – for readability, speed of writing, as well as for file size, but for the template, I made them into multiple lines because this is what beginning web designers are most used to.

    Some ideas for improving page load time:
    (1) Use another slider JavaScript library (I wrote that MooTools script very quickly and it can be causing some slow down).

    (2) Combine the images into a CSS sprite (you can use a web tool such as this one to make it easier, but I personally make my own CSS sprites manually).

    (3) Resave the CSS images for smaller file sizes.

    (4) Use Yahoo! Smush.it to squeeze out any more excess size.

  • hmm…that’s weird. It was actually designed in RGB, it might have gotten changed on accident at the end of the process possibly.

  • Thanks for the tutorial, been very useful. Keep up the good work.
    Lee

  • Fantastic tutorial.Anyway thanks for the tutorial.

  • I could not resist leaving comments.

  • Great tutorial and design.

    I’ll do the conversion to WordPress, but I’ll need some time, about two weeks.

  • Vojkan

    Marko, do you need some help?

  • Any help is welcome. I hope you are from Serbia.

    It ain’t gonna be hard to make template, but some details could be making trouble. Anyway, it can be done within 15 days.

    I hope author will accept this.

  • Sasha

    This looks really clean and polished. I like how it looks very modern. I’ve tried numerous times doing a web design somewhat like this on my own but it always turn out odd in a way. In the end, I decided to use the professional services of an online design site offering web design packages instead(http://www.logodesignstation.com) and got the design I wanted at an affordable price and fast too. I did provide this link for reference and inspiration to my designer as I liked how yours look. Thanks for posting this, by the way. It looks really modern and cool.

  • Hi

    Although i am an intermediate designer (6 years experience) I like looking at a tutorial like that, just to learn some mini tricks i didnt knew existed. In this one, I didnt knew about -Stroke path with brush- featured.

    Thanx!

    Isabelle

  • Agreed, classy indeed!

  • My only comment in regards to the web design is the fact that the fundamental structure in every internet presence but certain elements remain neglected from lots of people even until today. An excellent overall design includes the characteristics that can make your website stand above the remaining or otherwise be remembered easily. I believe one of these elements may be the logo on the company or even the website. The idea of the logotype isn’t to copy the layout of an similar logo but to make something that will first characterize your company or site and second to help people don’t forget this unique design after they view it randomly some other place.

  • Years ago, we called everything ‘Web 2.0’ . Nowadays we have something that look in almost the same manner in his own way.

    Great tutorial and Layout.

  • dawid

    hi, why did you choose cmyk color mode at first step ? it should be rgb because cmyk color mode is for printing, peace

  • You’re right, it should be RGB for web. Here’s the author’s comment on the matter.

  • Dawn

    I know there are other designs coded and this one provides the template. I downloaded it and read the CSS, but I’m still really interested in learning how to work the newsletter/mailing list and those fancy search buttons. Great work.

  • Dine

    Jacob,

    If I create a wordpress theme using this xhtml.
    Am I allowed to put the theme downloadable from my website instead.(For free ofcourse.)

    Let me know.

  • Ceep up the good work, nice tutorial. This will come handy πŸ™‚

  • it was great, thanks to it I can create so many unique things. I enjoyed it

  • Nice tutorial, thanks for sharing.

  • Weerayut Teja

    Great tutorial with best result

    Thank Heidenreich for sharing

  • Great tutorial.

  • Karpov

    Nice Works Matthews……..It is very useful to beginners….You have done great job…My suggestions to followers,do not copy this layout, understand the layout design and techniques, try this layout with your own color combination,logo etc……,then only you can improve your knowledge………For Web Designs.. use RGB mode in photoshop…….CMYK is for Printing.

    Thank you Matthews

  • Jenx

    Love this design. Is there full template available with more than just home page? It would fit perfectly with my architectural web page consept. I would pay for it…

  • Taylor

    Hi, great tutorials I am wondering about the coding side of this how to make the elements of the page workable for example the widget and the input fields that you designed in photoshop.

  • Heather

    Love this tutorial, as with most on this site. I have seen though where others have used the 960 grid system and this did not. Any reason? Just wondering. Thanks for the tips & tricks!

  • This tutorial is really good. Begin web designers can also learn PSD easily by through this tutorial. Good Job. And thanks for the information πŸ™‚

  • Thanks for a great article/tut. Wonderful for inspiration!!

  • heyuping

    thanks~??????

  • Nice tutorial.. It’s really helpful…
    I’m not new to webdesign but still got some great ideas.

    Thanks buddy!!

  • I’m just learning how to develop in Thesis so I was looking for great files to practice on. This is gorgeous, and will be perfect to rework with my own ideas to port to Thesis for a beauty salon design I have coming up. Thanks so much for providing this tutorial, much appreciated!

  • ALTELMA

    Thanks you for good tutorials. I can learn many thing from your tutorials.

  • Lovener

    Great! Thanks Matt.

  • I like this tutorial.Good job Matt. Really thanks 1 second for sharing this creative work & tutorial.

  • Md. Ehsanul Haque

    Very nice tutorial!

  • oh, that’s great tutorial, beautiful and simple. thanks for sharing.

  • Varyhelp

    Great job and tutorial…it’s would be a great way to mastering pn photoshop…