Advertise here with BSA

This web page design tutorial on Design Instruct (our other website) will show you how to create a beautiful, modern and subtly textured web page layout in Photoshop.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Related Content

• Create a Clean and Professional Web Design in Photoshop
• How to Make a Light and Sleek Web Layout in Photoshop
• How to Create a Grunge Web Design Using Photoshop
• Related categories: Tutorials and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

This step-by-step design tutorial on Design Instruct (our other website) will show you how to create a slick web button in Photoshop, and also how to make it functional using HTML and CSS.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Related Content

• How to Create a Slick and Clean Button in Photoshop
• A Look into Registration Buttons in Web Design
• Creating a User Interface That Speaks Your Users’ Language
• Related categories: Tutorials and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

This web design tutorial on Design Instruct (our other website) walks the learner through the creation of a beautiful and trendy web layout using Photoshop. The web design is best used on a personal portfolio site.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

• Subscribe to the Design Instruct RSS feed
• Follow @designinstruct on Twitter

Related Content

• Make an Elegant and Simple Blog Web Layout Using Photoshop
• PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout
• How to Make a Light and Sleek Web Layout in Photoshop
• Related categories: Web Design and Tutorials

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

This web design Photoshop tutorial on Design Instruct, our other site, outlines techniques for making a layout comp that will work well for the sites of web apps, startup companies, SaaSs, and other modern, "Web 2.0"-themed, product-centric sites.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

• Subscribe to the Design Instruct RSS feed
• Follow @designinstruct on Twitter

Related Content

• How to Create a Clean Web 2.0 Style Web Design in Photoshop
• Coding a Clean Web 2.0 Style Web Design from Photoshop
• How to Design a Clean Business Website with Photoshop
• Related categories: Web Design and Tutorials

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

This web design tutorial will show you the process of developing a PSD mockup of a clean and simple blog layout. We will be creating the design of the front page of the blog. The next part of this tutorial will walk you through coding the PSD to HTML/CSS.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the first part of a two-part tutorial series. This part (Part 1) deals with how to build the mockup in Photoshop, while in the next tutorial (Part 2) you will be shown how to create an HTML/CSS web template for the PSD design.

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout (*coming soon)

Final Result

Click on the image below to see the work in full scale.

Create a New Photoshop Document

1 Let’s get straight to work. First, open Adobe Photoshop (quite obviously). I’m using CS4, but other CS versions will work just fine. Begin by creating a new document (Ctrl/Cmd + N); make the document 1046px by 1630px with a white background.

Create the Background

2 The default Background layer of your new Photoshop document will be locked and un-editable; we need to do something about that. Double-click on the Background layer’s thumbnail in the Layers Panel; this will open the New Layer dialog window, just press the OK button to make the layer editable.

3 Now Ctrl/Cmd + click on the Background layer’s thumbnail (by default, Photoshop renames it to Layer 0) in the Layers Panel to place a selection around the canvas.

4 Set your Background color in the Tools panel to a blue color (#45a0ac) and press Ctrl/Cmd + Backspace, which is the keyboard shortcut for filling a selection with the Background color.

5 Your background layer should now be a dark shade of blue. Choose Filter > Noise > Add Noise while the Background layer is still selected. Change the Amount to 2% and then apply the filter.

Set Some Initial Photoshop Guides

6 To help keep our work aligned, set three vertical guides (View > New Guide) at the following locations: 60.5px, 505px and 955px.

Tip: Toggle the visibility of your Photoshop guides on and off by pressing Ctrl/Cmd + ;.

7 Also set a horizontal guide at 40px.

Add the Blog Name

8 Select the Horizontal Type Tool (T) in the Tools Panel, then type your blog’s name on the top left side. In this case, I used the Museo Slab 500 sized big at 65pt. The text color should be a dark gray (#252525) to create a good but subtle contrast with our dark blue background. By the way, you can set all these type options in the Options Bar when you have selected the Horizontal Type Tool.

9 Double-click on the type layer of your blog’s name in the Layers Panel to access the Layer Styles dialog window. Apply a Drop Shadow layer style and Inner Shadow layer style to give the text a letterpress/inset typography look.

Change the drop shadow’s color to light blue (#3f9cb0), the Blend Mode to Screen, and the Distance and Size to 1px.

Change the Inner Shadow’s Distance and Size to 2px.

10 Align the text to the guides as I have done using the Move Tool (V) to position your text.

Add Main Navigation Menu Links

11 Using the Horizontal Type Tool again, create four (separate) navigation bar links using the same font as before, but this time, reduce the font size to 20pt. Type them out in separate layers. In this tutorial, the menu items are "Home", "About", "Archives", and "Contact".

12 Align the 4th navigation bar link ("Contact") with the guide to the far right, and the first navigation bar link ("Home") with the guide right of the blog name. The other two links should be somewhere in between them.

13 To align them perfectly, select all 4 layers in the Layers Panel. Then choose Layer > Align > Vertical.

14 To make the navigation bar links have equal spacing in between them, select all 4 layers in the Layers Panel and then choose Layer > Distribute > Horizontal Centers.

15 Add a Horizontal guide (View > New Guide) at 88px and move the links with the Move Tool (V) so that the text rests on the guide.

Create the Active Navigation Menu Link Background

16 We will highlight the page the user is on with a different background, text color, and shape. The background will be shaped sort of like a "bookmark" (which gives our layout some form of visual semantics). I’ll show you how to create this "bookmark" shape. First, create a new layer (name the layer as "linkbg"). Select the Rectangular Marquee Tool (M) from the Tools Panel. In the Options Bar of the Rectangular Marquee Tool, change the Style option to Fixed Size and then set the Width option to 100px and Height option 148px. Place your marquee selection on the canvas somewhere around our navigation menu bar.

17 Change your Background color to our dark gray (#252525) and press Ctrl/Cmd + Backspace to fill the rectangular shape.

18 Now select the Custom Shape Tool (U) and set the Shape option in the Options Bar to Arrow 2 (which is a prepackaged custom shape that comes with Photoshop).

19 Draw the arrow on your canvas with the Custom Shape Tool and then select its layer in the Layers Panel so that you can rotate it to point up (Edit > Transform > 90^o CCW).

20 Right-click on the arrow layer and choose Rasterize Layer to convert it to a normal layer.

21 In the Layers Panel, modify the layer stacking order and make sure that the arrow layer is above the gray "linkbg" layer.

22 Select both the arrow layer and "linkbg" layer in the Layers Panel, then choose Layer > Align > Horizontal Centers.

23 Ctrl/Cmd + click on the thumbnail of the arrow layer in the Layers Panel to place a selection around the arrow, switch to the "linkbg" layer, and then press Backspace or Delete to delete the area below the arrow selection.

After this, you don’t need the arrow layer anymore, so you can delete the layer.

24 Now what you should have is the background for the active navigation menu link, which looks sort of like a bookmark. Let us style this layer to match the look and feel of our logo by applying an Inner Glow, Color Overlay, and Stroke layer style.

The inner glow color should be a dark gray (#2e2e2e2).

The color overlay should be our dark gray again (#252525). You don’t necessarily need this layer style since we already filled it with this color earlier on.

The stroke color should be black (#000000).

This is how our "bookmark" active link indicator should look like now:

Stylize and Position the Navigation Menu Links

25 It’s time to give our menu bar links some styles. First, add a Drop Shadow layer style to the other three non-active links ("About", "Archives", and "Contact").

26 Next, change the text color of the first link ("Home") to white (#ffffff) using the Horizontal Type Tool (T).

27 Align the first link horizontally with the bookmark shape using Layer > Align > Horizontal Centers. I’ve added a little swoosh vector shape that I created in Adobe Illustrator just below the "Home" text, but feel free to skip that.

Create a Horizontal Inset Divider

28 Add another horizontal guide at 160px.

29 Select the Rectangular Marquee Tool (M) and create a 890x1px thin, rectangular selection.

30 Add a new layer (name it "dividertop"), and in the new layer, press Ctrl/Cmd + Backspace to fill the rectangle with any color.

31 Apply a Color Overlay layer style to the "dividertop" layer so that the rectangle is slightly lighter than our dark blue background’s color (#2c7c88).

32 Align the rectangle to the left and the top guide using the Move Tool (V).

33 Duplicate the layer and move it right below the original rectangle. Rename the layer to "dividerbottom".

34 Give it a light blue Color Overlay layer style (#4fbaca).

Link the "dividertop" and "dividerbottom" layers by selecting them simultaneously in the Layers Panel, right-clicking on one of them, and then choosing Link Layers from the contextual menu that shows up. This will keep them together so that if we need to move them, both layers will move together.

Designing the Post Date Background

35 We’re now finished with the header area of our layout. Let’s move on to the main content area, starting with the first blog post entry’s date. First thing’s first: we need to add another horizontal guide at 210px.

36 Select the Rounded Rectangle Tool (U) in the Tools Panel, and in its Option Bar, change the Radius to 10cm.

37 Create a 75x150px rounded rectangle with the Rounded Rectangle Tool.

38 Apply an Inner Shadow layer style to the rounded rectangle shape layer, with the inner shadow’s color set at blue color (#3793a0).

39 Apply a Color Overlay layer style as well that is set at a darker blue than the inner shadow (#2c788).

40 Give the shape a stroke by applying a Stroke layer style with a stroke color a darker blue (#1a5a64) than the inner shadow’s color.

41 Rename the shape layer to "datebg" (which stands for "date background") to keep your work organized, and then Rasterize the layer (right-click on it, then choose Rasterize Layer).

42 Using the Rectangular Marquee Tool, select about 1/3 of the right side of the shape, and then delete that selected area.

43 Still on the "datebg" layer, add a noise filter via Filter > Noise > Add Noise; use 2% for the Amount option.

Create the Vertical Shadow of the Post Date

44 Now create a new layer for the shadow of the date’s background. Using the Elliptical Marquee Tool (M), make an oval about 17px wide and 100px tall; the most accurate way of doing this is to use Fixed Size as the Elliptical Marquee Tool’s Style option and entering the dimensions for the Width and Height.

45 Place the selection on the right side of the date background. Fill the selection (Shift + F5) with black (#000000) and rename the layer to "shadow".

46 Apply a Gaussian blur (Filter > Blur > Gaussian Blur) onto the "shadow" layer, setting the Radius option to 3px.

47 Using the Rectangular Marquee Tool, select the right half of the blurred oval shadow, and then delete that half by pressing Backspace or Delete.

48 Finish off the shadow by lowering the layer’s Opacity to 55%.

Add the Date Text, Blog Post Title, and Metadata

49 With our date background finished, it’s time to add the date of when the blog entry was posted. Get the Horizontal Type Tool (T) from the Tools Panel and write your date using Museo Slab 500. The numerical day should be around 42pt font size, and the month–which is on a new line below the numerical day–should be at 20pt. I chose to write "13 APR" with APR on a new line.

50 Align the half-oval shadow ("shadow" layer), the date background ("datebg" layer) and the date type layer text correctly using the Move Tool and Layer Alignment commands we’ve used earlier on.

51 For the title of the post, I chose the Georgia typeface set at 35pt font size. For the meta data (author, number of comments), I used Trajan Pro at 20pt; you can find the middle dot/Georgian comma that I used to separate the author name and number of comments here–just copy and paste it into Photoshop. Also, adjust the leading/line-height of the text to 28px. You can do this in the Window > Character Panel.

Here’s our date, blog post title, and blog post metadata now.

52 Add a vertical guide at 165px. Align the text with the guide you just created and the date.

Add the Blog Post Lead-In Image

53 Using the Rectangular Marquee Tool (M), create a 480x150px rectangle (the height depends on the image size you will use, but our max width is 480px for this template).

54 Fill your selection with any color on a new layer and then apply a Stroke layer style that will represent our image’s border. The color of the border is a dark gray (#1b1b1b).

Add and Position the Content of the Blog Post Entry

55 Find an image of yours and paste it into your Photoshop document. I used a photo of a snowboarder, but it doesn’t really matter which image you choose; it’s just for eye candy in our PSD mockup. Adjust the size of your image with Free Transform (Ctrl/Cmd + T) so that it fits within our rectangle.

56 Switch to the Horizontal Type Tool (T) and paste in some text below the image. You can use a Lorem Ipsum generator tool like this one to generate some text in a jiffy, but it’s never a bad idea to use real web copy to make the mock-up look as accurate as possible. My font of choice for the text content is Trebuchet MS at 17pt font size and with the leading/line-height at 28pt.

57 Select all the blog post design elements in the Layers Panel and align it with the shadow using the guides we created as reference.

58 Add a new horizontal guide at 450px. Align the text with the left guide and the new guide.

59 Select all the blog post layers in the Layers Panel ("datebg", "shadow", "date",  the blog post title text, metadata text, the background of the image, the image, and the blog post text) and group them together by going to Layer > Group Layers (Ctrl/Cmd + G), which will place all of the layers in a folder. Name the layer group "Post 1".

Add an Inset Horizontal Divider at the Bottom of the Blog Post Entry

60 Add another horizontal guide at 700px. Duplicate the divider we created before and rename the layer to "dividerpost".

61 Resize the width of the divider with Free Transform so that it’s the same as the lead-in image’s width. Then move the divider using the Move Tool (V) so that it is placed on the horizontal guide we just created.

Add Anther Blog Post Entry

62 Duplicate the "Post 1" layer group and rename the duplicate as "Post 2".

63 Add a new horizontal guide at 720px and align the shadow of the date box (of Post 2) with the new guide.

64 Change the elements in the "Post 2" layer group so that it looks different from the first blog post; for example, the comment number, the date, and the blog post title can be changed.

Build the Sidebar’s Background

65 Create a 250x350px rectangle using the Rectangular Marquee Tool (fill the rectangular marquee selection with any color on a new layer called "sidebar"). This rectangle is our sidebar’s background.

66 Align the sidebar to the horizontal guide at 210px and the vertical guide at the far right that we created before.

67 Give the sidebar’s background a Color Overlay layer style; the color of the color overlay should be a dark blue (#2c7c88).

68 Also, give the sidebar background a Stroke layer style with the stroke color being a darker blue (#116678).

69 Set up a vertical guide at 730px and one at 930px; we will use these guides to make sure there is some padding inside our sidebar.

Create the Search Feature

70 Use the Rounded Rectangle Tool (U) to draw a rounded rectangle from the left vertical guide (at 730px) to the right vertical guide; the rounded rectangle should be around 25px high. Name this shape layer as "searchbar". Give the rounded rectangle a white (#ffffff) Color Overlay layer style.

71 Find a magnifying glass icon to represent the search button (you can use a web tool like IconFinder to find free icons).

72 Position the icon within the white rounded rectangle (towards its left).

73 Make a horizontal divider just like we’ve done before, spanning from the 730px vertical guide to the 930px vertical guide style. Add a little spacing between it and the search bar.

Add the Sidebar Text

74 Now to the text. I added a sidebar heading ("Recent Posts") using the Horizontal Type Tool (T) set at Georgia font and font-size of 23pt. I’ve listed three of the most recent blog posts using Trebuchet MS font at 17pt and leading/line-height, again, at 28pt. Call this text layer "recent posts".

75 Duplicate the horizontal divider from above and move it so it’s at the bottom of the "recent posts".

76 Create another text layer the same as before, but this time for the recent comments.

77 Align both text blocks to the left guide.

Design the Sidebar Ad Units

78 Draw a couple of 118x118px squares using the Rectangular Marquee Tool. Hold down Shift to keep your box proportionally equal in height and width.

79 Align one square on the right (to the right guide) and the other one on the left (to the left guide).

80 Fill both squares with a gray color (#f6f6f6) using a Color Overlay layer style. This gives us a place to add banner advertisements on our blog.

81 Duplicate the two gray boxes a couple of times or more depending on how much ad space you’d like.

Sidebar Housekeeping

82 Group all the sidebar element layers and name the layer group as "sidebar" to keep our mockup organized (if you work with a front-end developer who has to convert your PSD to HTML/CSS for you, he/she will love you for it).

Lay Out the Main Blog Footer

83 Make two new horizontal guides: one at 1220px and the other at 1550px.

84 Using the Rectangular Marquee Tool (M), draw a rectangle across the whole width of the web layout between the two new guides at the bottom of layout where our footer will be. Fill this rectangle with a dark gray (#2c7c88). This is our footer’s background.

85 Apply a noise filter on our footer’s background (Filter > Noise > Add Noise) using 1% for the Amount value.

86 Apply a black (#000000) Inner Shadow layer style to the footer’s background.

87 Now create three text columns of equal size, all with the same width. In this case, I copied some interesting text off Wikipedia to give me some real web copy for the footer text. The title ("Widget title") is set at 23pt Georgia and the normal text is Trebuchet MS at 17pt. Don’t forget to change the leading/line-height to 28pt!

Create the Main Blog Footer Column Dividers

88 For the white vertical dividers in between the footer text columns, we’ll use patterns. First step is to create a new Photoshop document (Ctrl/Cmd + N) with Width of 1px and Height of 3px.

89 Zoom in really close so you can see you work (using the Zoom Tool).

90 Color the first pixel (top) black (#000000) using the Rectangular Marquee Tool and Edit > Fill.

91 Select around the canvas (Ctrl/Cmd + A) and then choose Edit > Define Pattern. Name your pattern something logical like "Vertical Dots".

92 Switch back to our main Photoshop document.

93 Make vertical rectangular marquee selection (1x280px).

94 Add a new layer and press Shift + F5 to see the Fill dialog window. In the Use option drop-down menu, find the pattern we made ("Vertical Dots") from the list and press OK to fill our rectangular marquee selection with it.

95 Duplicate the layer with the dashed vertical divider and place them between the three footer columns.

96 Group the text columns in their own layer groups. Align the text column layer groups vertically.

97 Add a white Color Overlay layer style to both dashed vertical dividers so that they appear white.

Create the Secondary/Auxiliary Footer

98 Create a short rectangular marquee selection at the very bottom of the layout and fill it with a dark gray (#1f2024).

99 Apply a Noise filter with the Amount set at 1%.

100 Type some text such as your copyright information using the Trebuchet MS font at 17pt font size. Align the text horizontally with the background place it on the far left guide.

Finished!

We’re done! Wasn’t that easy?

Elegant and Simple Blog Web Layout Tutorial Series

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout (*coming soon)

Download Source Files

• simple_elegant_bloglayout-psd (ZIP, 1.61 MB)

Related Content

• How to Design a Clean Business Website with Photoshop
• PSD/HTML Conversion: Code a Clean Business Website Design
• Create a Clean and Professional Web Design in Photoshop
• Related categories: Tutorials and Web Design

About the Author

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand, Hatcher Graphics. He enjoys reading, playing basketball, and getting plenty of sleep. If you’d like to connect with him, you should follow him on as @hatchergraphics.

Advertise here with BSA

The focus of this template is on a design agency that offers a range of web-based services. The primary aim of the page we’re designing, therefore, is to promote what the business does and what services they provide.

This is the first part of a tutorial on building a clean business website. This first part will focus on creating the design in Photoshop, and in the second part, will focus on converting the PSD outcome to a working XHTML template.

"Clean Business Website" Series

• Part 1: How to Design a Clean Business Website with Photoshop
• Part 2: PSD/HTML Conversion: Code a Clean Business Website Design

Final Result

Here’s a screenshot of the design we’ll be creating.

Overview

In this tutorial, I’m going to assume that you have a basic understanding of Photoshop and know how to do basic tasks such as adding text, drawing shapes, and resizing/rotating objects.

My goal in this walkthrough is to show that you don’t always need lots of fancy effects in a design to make a nice-looking template. With a couple of fonts and some subtle effects, it’s still possible to create a professional-looking design that will impress your visitors.

The design we’re going to build has a header that contains the name of the company and the navigation area. Below that is an area that highlights what the business does along with some additional details.

Following this, there is a section that describes the specific services in more detail. The section underneath this has some client testimonials and a featured project overview.

We also want to try and build credibility and trust through the use of some client testimonials and an example of a "featured project."

Finally, we have a simple footer at the bottom that contains some fairly standard copyright text.

Create the Document

1 Create a new document with a size of 1100x1100px. Then add some vertical guides at 70px and 1030px — this gives us a width of 960px, which should easily fit on most screens.

Make the Header

2 To create the header, we first need to add the background. Select the Rectangle Tool (U), set your Foreground color to a very dark gray color (#333333), and then draw a box from the left of the document to the right that is around 130px in height.

Add the Site Name/Logo

3 To add the company name, set the font to Myriad Pro. Set the font size to 60px, the color to a light gray (#EEEEEE), and the letter spacing to -40px. You can set all of these options in the Character Panel (Window > Character). With the Horizontal Type Tool (T), type the name and position it against the left guide.

Make the Navigation

4 To add the navigation area, set the font to Arial. The font size to 16px and the color is #EEE. Type some page names (e.g. Home, About, etc.)  separated by two hypens (–):

Create the Featured Content Section

5 To create the featured content section, we need to start by adding the headline of the featured content. Set the font to Myriad Pro, the font weight to bold, the font size 60px, the letter spacing to -40px, and the color to #333333. Type the title in with the Horizontal Type Tool (T).

6 To make the headline stand out a little more, we’ll change the color of the ampersand (&) to a nice blue (#00BFF3).

7 Underneath that, we need to add the subtitle. Set the font to Myriad Pro, the font weight to Regular, the size to 50px, and the color to #BBB. Type a subtitle and position it just underneath the title.

8 We now want to add a short overview of what the company does. Pick up the Horizontal Type Tool, set the font size to 30px, the color to #CCCCCC, and type a series of periods (.) from the left guide to the right.

9 Create a copy (choose the text layer in the Layers Panel and then press Ctrl/Cmd + J) of this dotted horizontal line, and then place it about 40px underneath the first line.

10 We now need to add the text between these lines. Set the font to Myriad Pro, the font-size to 34px, the color to #555555, the line spacing to 42px, the letter spacing to -40px, and then type a few lines of text. You can use a lorem ipsum generator just to get some dummy text content in quickly.

11 You may also want to pick out some key words and make their font weight bold to give them more emphasis; I’ve selected the words "first class" and "big impact."

Add the Services Details

12 We now want to add some more specific details about our services. Select the Rectangle Tool from the Tools Panel, set your Foreground color to #00AEEF, and draw a rectangle shape that is around 280x350px in size, positioned against your left guide.

13 To make this box stand out a little more, we’ll add a drop shadow layer style (double-click on the layer’s thumbnail in the Layers Panel to access the Layer Styles dialog window); set the color of the dropshadow where the color is set to a gray color (#AAAAAA).

Your box should now have a little more emphasis.

14 We now need to add a title for our service. Select the Horizontal Type Tool and set the font to Myriad Pro, the font weight to Regular, the font size to 40px, and the text color to white (#FFFFFF). Draw a text box from the left border of the box to the right and set the alignment to Center text. Then, type in a title.

15 Now set the font size to 18px and type a series of periods that will become a dotted line.

16 Following this, set the font size to 15px and draw a text box from the left side of the box, to the right of it. Enter some text describing the services.

17 Finally, we need to add a button at the bottom of this box. Select the Rectangle Tool, set the color to a blue color (#0076A3), and draw a box that is around 230x40px in size.

18 Add an Inner Glow effect to the button where the color is set to a darker shade of blue — I’ve used #235162.

19 Now add a label to the button. Set your font size to 18px and type in uppercase, "GET MORE DETAILS>>".

That’s the first box created.

20 Create two copies of this box by duplicating the first box and everything contained within it. Use the Move Tool (V) to space them out evenly. Also, change the details in each of the boxes.

21 To finish this section of the layout, take a copy of the large dotted line that we created in a previous step and add it at the bottom of the section.

Add the Client Testimonials

22 For the client testimonials section, we initially need to create a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Client Testimonials" with the Horizontal Type Tool (T).

23 Now for the first testimonial author photo, choose the Rectangle Tool, set the the color to a lighter gray color (#CCCCCC), and draw a box that’s around 84x84px.

24 Now add a photo of yours that has slightly smaller dimensions. Add the photo in a layer above the Background layer.

25 Next, we need to add some text next to the photo. Set the font to Arial, the font size to 14px, the color to the dark gray we used for the title of the client testimonials section (#555555), and then type some dummy text (again, you can use lorem ipsum for this).

26 Now, set the font weight to Bold and type the author’s name. On the next line, type the author’s affiliation (i.e. the name of their organisation/company) and set the color to bright blue (#00AEEF).

27 Take all of the elements used to create the first testimonial and create two copies. Place them underneath each other with consistent spacing and change the content and images.

28 We now need to add a vertical divider to the right of the testimonial section. Create a copy of the dotted line we created earlier and delete around half of the periods. Rotate the line about 90^o degrees (Edit > Transform > Rotate 90^o CCW) and place it to the right of client testimonials section.

Create the Featured Project Section

29 To create our featured project area, first we need to add a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Featured Project".

30 Now add a title for the featured project. Set the font size to 20px, the color to a gray color (#888888), and type a title.

Below this title, we need a screenshot of the project that is around 430x200px.

31 Then add some text that provides a brief overview of the project. Set the font to Arial, the font size to 14px, the text color to a dark gray (#555555), and type a few lines of content.

32 Also include some text at the bottom that says something like "Click Here For More Details." Change the color of this text to a light blue (#00AEEF).

33 Finally, add another copy of the dotted horizontal line at the bottom of this section.

Make the Footer

34 The footer is very straightforward to complete. Set the font to Arial, the font size to 16px, the color to #888888, and type some footer content.

All Finished

That’s everything done!

Wrapping Up

In this tutorial, I was hoping to illustrate that you don’t always need lots of fancy effects to create a nice design. Sometimes a couple of fonts and colors coupled with some subtle effects can do the job nicely. 

Let me know if you have any questions or if anything was unclear and I’ll my best to answer them in the comments. In the next part of this tutorial, I’ll show you how to create an XHTML template from this design.

"Clean Business Website" Series

• Part 1: How to Design a Clean Business Website with Photoshop
• Part 2: PSD/HTML Conversion: Code a Clean Business Website Design

Download Source Files

• clean-business-website-psd (ZIP, 0.53 MB)

Related Content

• Create a Clean and Professional Web Design in Photoshop
• Coding a Clean and Professional Web Design
• Create a Slick and Minimalist Web Layout in Photoshop
• Related categories: Tutorials and Web Design

About the Author

Chris Creed is the founder of Voosh Themes, which provides a wide range of Premium and Free WordPress themes. He’s been designing and developing websites for over 10 years and is interested in most things related to design. You can follow him on Twitter at @cpcreed.

Advertise here with BSA

In this tutorial we will be creating a simple, easy to use and colorful web design layout in Photoshop that is primarily aimed at children. The simple navigation, bright colors and limited content is something that would really appeal to the youngsters.

We will be making use of loads of tools in this tutorial, such as the rounded rectangle tool, the Warp Transform tool, the Brush Tool, the built in Stroke Tool and plenty of gradients. We’d love to see your results, so be sure to share them with us!

Final Result

Click on the image preview to see the full size version.

Sketching

1 Before starting work on a web design, I also sketch at least one idea. For this tutorial, I had a pretty good image of the theme I wanted to create, so I only roughed out one sketch. Heading into Photoshop with a prepared sketch and a rough image of the design you want to create makes things much easier down the line, mainly because you have something to refer to when things get tricky.

Setting up the Photoshop document

2 Head over to Photoshop and create a new document. Make sure your document uses the RGB color mode at 8 bit, and that the resolution is 72 pixels/inch. Enter 1280 into both the Width and Height fields. Although the width of the canvas doesn’t really need to be this large, it’s a good size to work with because it allows us to see what the design would look like on a bigger monitor. Click OK to create your document.

3 It’s time to set up some guides, which are always very important when designing for the web. Go to View > New Guide and with Vertical selected, type in 160px and hit OK. Repeat the step again, but this time insert 1120px into the field.

That’s all there is to setting up the canvas for the web. We’ll be adding more guides throughout the tutorial, but for the time being, there’s no need!

Creating the initial stucture

4 With our document and guides set up, it’s time to work on the main structure of our design. Using the Paint Bucket Tool (G), fill the background with a color other than white. You won’t be sticking with this color but it just makes things a little easier whilst we’re designing the rest of our theme! I’m using a dark brown.

5 Select the Rounded Rectangle Tool (U). Use a Radius of 10px and drag out a new shape. Make sure you drag to and from the edges of your guides that we set up in the previous step! Change the color of your new shape to white if you haven’t already. Change the name of your new shape layer to ‘Main Body‘.

6 Rasterize your shape layer by going to Layer > Rasterize > Shape. This turns your shape into pixels from a vector image and makes it much easier to work with in the following step.

7 Zoom right in to one of the corners at the bottom of your main body shape. With the Rectangluar Marquee Tool, make a selection over the corner of the shape.

8 Fill the selection with white using the Brush Tool (B). Repeat the process with your other corner.

9 Unselect the selection and with the Single Row Marquee Tool, make a selection directly beneath your main bodies shape. Choose a light gray color (I used #e8e8e8) and fill your selection, making sure you are still on the main body shape layer.

10 You now may notice that you have a 1px line going completely through our canvas. To fix this, we just need to delete the excess of the line by using the Rectangular Marquee Tool (M). Make a selection over the area you want to delete and then press the Delete or Backspace key. Repeat the step again to remove the excess line on the other side of our document.

11 Duplicate the main body layer by going to Layer > Duplicate Layer or by dragging the layer down to the New Layer symbol at the bottom of the Layers Panel. You can rename the new layer to Main Body Background. With the new layer selected, go to Edit > Free Transform, and drag the bottom point down.

12 Move the layer (Main Body Background) beneath our Main Body background and change the color: I’m going to use #262d35.

That’s pretty much the main structure of our body. We’ll obviously be adding more elements throughout the remainder of the tutorial!

Adding some of the appealing elements!

13 With the main body layer selected, select the Rectangular Marquee Tool (M) and make a selection of the bottom right corner whilst holding Shift to keep it in proportion. When you have a suitable sized selection, go to Edit > Transform > Warp. Drag the right bottom corner towards the center of your selection to make it look like a curved corner.

14 Select the Pen Tool (P) and zoom right into your corner. Make a selection to represent the other side of the ‘paper’ – it might take a few attempts to get right! Once you have a suitable selection, fill the path with a medium gray color on a new layer.

15 You may have noticed that it’s very difficult to get the shape the exact same size that what we need it. I managed to get it pretty close, but in some places you can still see unwanted white pixels. To fix this, zoom right into your canvas and replace them with our gray color using the Pencil Tool (B).

16 Call this new layer ‘Page Curl‘. With the page curl layer selected, go to Layer > Layer Style > Blending Options. Add a Gradient Overlay using the settings that can be found in the screenshot below.

17 Make a new layer beneath our page curl and call it ‘Page Curl Shadow‘. Select the Brush Tool (B) and select a soft, medium-sized brush. Make sure you have black selected and paint an area of black on your canvas. Go to Filter > Blur > Gaussian Blur and blur the selection by about 3px. Set the layers Opacity to about 3%.

18 Our page curl is now a little bit too hard to see. To fix this, we’re going to add a 1px stroke. Re-open the Layer Styles on our page curl layer and click on Stroke. Use the options in the screenshot below.

Concentrating on Navigation!

19 Select the Polygonal Lasso Tool (L) and zoom into our design at 100%. Make a new layer below all other layers but the background, and call it ‘Navigation Background‘. Make a random selection and fill it with blue.

Repeat the step again several times, each time filling the shape with a different color.

20 Open up the Layer Styles window for our navigation background layer. Add the following Drop Shadow, Inner Shadow and Gradient Overlay.

21 Hold Cmd (or Ctrl) and click on the thumbnail image of the navigation background layer in the Layers Panel. This should make a selection of all your buttons. Make a new layer above your navigation background layer and go to Edit > Stroke and add a white 2px stroke. Do the same again, but this time make it a black 1px stroke. Set the stroke layers Blending Mode to Overlay and the Opacity to 50%.

22 Select the Type Tool, and with the typeface ‘Helvetica Neue‘ selected, create some dummy text on your navigation buttons. Make sure you keep your text straight, this way when it comes to coding the design we can use actual text instead of images, much more browser and search engine friendly! When your dummy text is finished, open the Layer Styles for your type layer and use the following Drop Shadow settings.

Concentrating on the Main Content!

23 It’s time now to start concentrating on the main content area of the theme. Locate your first layer (Main Body) and duplicate it once again. Go to Edit > Free Transform and in the top settings bar change the width and height to 95%. This should shrink the layer, making it fit nicely in our main content body. Apply the changes.

24 You may notice the 1px line and curved corner on the duplicate layer – we don’t want this, so we need to delete it. Select the Rectangular Marquee Tool (M) and chop the bottom of the layer of by making a selection and pressing the Delete or Backspace key.

25 Open the Layer Styles for our new duplicated layer and select Gradient Overlay. Select the White to Transparent gradient, and change the white color to #262d36 which is the same color we used in our footer. Drop the Opacity of the Gradient Overlay to 10%. You can see the settings in the screenshot below.

26 Go to View > New Guide. With vertical selected, enter 640px; this will find the center of the canvas. Select the Horizontal Type Tool (T) and enter a couple of lines of text, such as ‘Most Played Games‘ and ‘Most Viewed Programs‘. Leave the text white.

27 Open the Layer Styles for your new type layer and apply a Drop Shadow using the following settings.

28 Select the Rectangular Marquee Tool (M). Then, in the Options bar, change the style to Fixed, and set the width and height to 125px.

29 Make a new layer above all others and call it ‘Placeholder Thumbs‘. On this layer we’re basically going to make several place holders for the most played games and most viewed programs. The idea of this is so when the design is coded, the placeholders can be replaced with thumbnails of the games and TV programs.

Click on the screen to produce a selection of 125px x 125px. Use the mouse or cursor keys to move the selection in to the correct place. Fill the selection, and then using the Shift + Cursor keys, move the selection to the right, fill the selection, and then repeat again. When you’ve done one row, duplicate the layer and move it down with the Move Tool (V). When it is in position you can press Cmd + E (or Ctrl + E on Windows) to merge the two layers together.

30 Create some more dummy text beneath your placeholders. Try to jazz things up a little bit here to add some interest; I hit the Tab key a couple of times on the first two lines and entered a fancy letter.

31 Repeat the step again, this time adding two paragraphs of dummy text in the footer of your design.

Concentrating on the background!

32 As I mentioned earlier, our background isn’t staying dark brown, it was simply a temporary fix! Change the color of our background layer to #ebebeb. Make a new layer above the background and call it ‘Background Gradient‘. Select the Rectangular Marquee Tool (M) and select the top half of our design. Fill the selection with black – make sure your new layer is selected!

33 Open the layer’s Layer Style window and click on Gradient Overlay. Have the bottom of the gradient merge into the same color as the rest of our background, and a color of your choice at the top of the gradient. I used #c6f4ff.

34 Make another new layer and call it ‘Background Noise‘, fill the layer with white. Go to Filter > Noise > Add Noise. With Gaussian and Monochromatic selected, enter the 10% in the amount and click OK. Change the layer’s Blending Mode to Multiply and the Opacity to 35%.

35 Put all your main body layers and dummy layers into folders. Locate the main body and footer layers, using the Cmd + click (or Ctrl + Click) trick, make a selection of the layer’s content. You can do this by Cmd + clicking on the first layer, and then Cmd + Shift + clicking on the second. With the selection made, hide the main body content folder by unclicking the eye next to the folders thumbnail in the Layers Panel.

With your selection still active, make a new layer and call it ‘Background Shadow‘. Fill your selection with black and then go to Filter > Blur Gaussian Blur. Enter 25 into the field and click OK. Reduce your new layer’s opacity to about 30%, and then make all your other folders visible again.

36 To finish things off, I added 2% of Noise to the footer by going to Filter > Noise > Add Noise.

All done!

Related Content

• Create the Call of Duty: Modern Warfare Type in Photoshop
• Coding a Band Website Created in Photoshop
• Create a Slick and Minimalist Web Layout in Photoshop
• Related categories: Tutorials and Web Design

About the Author

Callum Chapman is a freelance Graphic Designer and Illustrator Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog. He’s written for publications such as Smashing Magazine and other well-known design blogs. You can reach him via Twitter or Facebook.

Advertise here with BSA

In this beginner-level web design tutorial, I’ll show you how to construct a portfolio web layout that has a fixed wooden background with Photoshop. We’ll also use some brushes to accent the design.

Preview

You can see the final result below. Click on the image to see it in full scale.

Resources

• Wood Grain Textures by Texture Lovers
• Myriad Pro by Robert Slimbach and Carol Twombly
• FlightOfGrey Stroke Brush Set by FlightOfGrey
• Old Bottle Crowns Icon Set by Jan Cavan

Set Up the Photoshop Canvas

1 The first thing we want to do is create a new document with the dimensions of 1024px x 912px.

Add the Background

2 For our background, we want to add a wooden texture.  I used this wooden grain texture from Texture Lovers for the purpose of this tutorial.  Resize the texture using Free Transform (Ctrl/Cmd + T) to fit the texture on our canvas.

Create the Header

3 Starting with our header on a new layer, we want to use our Rectangle Marquee Tool (M) to make a rectangle selection, filling it with black (#000000).

4 Using the Polygonal Lasso Tool (L), make a jagged and organic selection at the bottom of the header background to create a ridged edge.  Once you have made your selection, go to Edit > Clear.

5 Go ahead and lower the Opacity of that layer to 85% to let the wooden background show through a bit.

Create the Site Name/Logo

6 For our site name/logo, we can just go with a simple text logo.  I used the font Myriad Pro with the color #FFFFFF for the first half of the site name and the tagline, and a washed out green color for the second half of the site name (#93B19D). Position the site name at the top left corner of your canvas with the Move Tool (V).

Add Links to the Header

7 We are then going to add some links to the right side of our header using the Horizontal Type Tool (T). The "Home" link has a color of #D9D5BB, and the rest of the navigation links are a slightly different color (#DDCFAB).  Lay them out in a similar fashion to the following:

Create the Active Navigation Link

8 Our "Home" link will serve as our mockup for the active link that indicates the current page the website user is on. We want to add an active effect to it, and for this tutorial, we are going to add a little brush stroke behind it.  To do that, we need to download the FlightOfGrey Stroke Brush Set brush set from deviantART and install it. Of course, feel free to use your own brushes or make your own brush. If you use the FlightOfGrey Stroke Brush Set, locate the brush tip that looks similar to the one below (only a few to chose from) and resize it to your liking.  I created a layer beneath the navigation links text layer and then used the Brush Tool (B) with a bluish color of #355D63 to create the active link (shown below).

Make the Intro Box Section

9 The intro box is the next step.  We want to use our Brush Tool (B) with the second brush in the FlightOfGrey Brush Set with the Master Diameter option set to something manageable for the background of our intro heading (about 300px). Make sure your foreground color is set to black (#000000).  You can trim off excess splatter that you don’t want by using the Lasso Tool (L) and going to Edit > Clear. It should look something like this:

10 Now add a Color Overlay as a layer style on the intro box layer:

11 Use a font like Helvetica to add your "Introduction" text using the Horizontal Type Tool (T) using an off-white color like #F1E6D8. You should come out with this:

12 Time to use our Brush Tool (B) again.  Use the third brush in the FlightOfGrey Brush Set, making sure that your foreground color is set to #000000 and the brush’s Master Diameter option set to about 400px. On its own layer, create a brush stroke in the following manner for the introduction copy text:

13 It’s a little lighter than we would like it to be, so duplicate your layer a couple times (Ctrl/Cmd + J) to darken it. Put in some mock-up text (I used some Lorem Ipsum for the purpose of this tutorial).

Create the Featured Design Section

14 To the right side of our intro box will be a nice little spot for a featured design. I created a thumbnail image with a size around 420px x 165px and then added an Outer Glow and Stroke layer style to the thumbnail; you can use the following settings for the layer styles:

Add Social Media Icons

15 Next, it’s time to add our social media icons.  Using the same brush we used for the back of our introduction title. We want to add a black brush stroke similar to the following, using a bit larger brush than previously.

16 The next step is to add the Old Bottle Crowns Icon Set icons created by Jan Cavan from the Freebies section here on Six Revisions. You’ll end up with something like the following:

Make the Latest Projects Section

17 Next, make an area for your latest projects below the intro box section. Using your Rectangle Marquee Tool (M), make a rectangle similar to the following, and fill it with #000000. Lower its layer Opacity value to 85%.

18 Add an Outer Glow layer style to the layer:

19 Go ahead and arrange the contents of the box in a manner similar to the following image. Use a 220px by 160px thumbnail of your latest project. For the heading, the color is #C3E2E0, and the description text is white (#FFFFFF).

20 The thumbnail is a little dull and boring, so lets add an Inner Glow layer style and a Stroke layer style (use the settings shown below) to our latest project thumbnail’s layer to give it a nice border and a bit of an inner shadow.

21 Go ahead and make two more boxes by duplicating the layers of the first latest project box and then moving the duplicated layers to its right using the Move Tool (M). Here’s how mine ended up:

Finish Up with a Simple Footer

22 The last step is to add a copyright notice that serves as our simple text-based footer.  To make your text a little more visible on that wooden background, you can use your Dodge Tool (O) to lighten up the area. Here’s the final layout with the simple footer:

Related Content

• How to Code a Grunge Web Design from Scratch
• Create a Winter Theme Web Design in Photoshop
• Coding a Band Website Created in Photoshop
• Related categories: Tutorials and Web Design

About the Author

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

Advertise here with BSA

In this Photoshop web design tutorial we are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.

Update: This is the first part of a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.

The "Clean and Professional Web Design" Series

• Part 1: Create a Clean and Professional Web Design in Photoshop
• Part 2: Coding a Clean and Professional Web Design

Final Preview

Have a look at the layout that we’ll be creating in this tutorial. You can see the final preview of the image below or click here for a full size version.

Prepare your Photoshop document

1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.

Set the units and rulers settings

2 Make sure that you are working in pixel units, which is the standard fixed unit for web design. Set up the following settings for your Rulers from the Preferences dialog window (Ctrl/Cmd + K); click on Units & Rulers and ensure that you have everything set as shown in the figure below.

Add guides to designate the content area

3 Activate Photoshop Rulers from View > Rulers. Toggle the visibility of the rulers by pressing "Ctrl/Cmd + R". Also open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. By pressing "M", choose the Rectangular Marquee Tool and create a box that is 120px wide from the left corner of the canvas. You can adjust the size by looking into the Info panel while making the selection. Now click on the left ruler and drag a guide to the right of the marquee selection as shown in the image below.

4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the selection.

Your canvas now should look like this:

Creating the logo

5 Now we are going to create the logo for our website. The logo is going to be very simple and it will have a color gradient effect. Create a new group (Layer > New > Group) and name it "logo".

6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital letters.

7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the Options bar when the Type Tool is the active tool.

8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor and use the settings as shown below.

9 Put the "SMASHING" type layer at the distance of 35px from top and 0px from left guide. You can do this accurately using the Move Tool (V) and your arrow keys. Duplicate this type layer (Layer > Duplicate Layer). Move the duplicated layer right next to the "SMASHING" word and edit the text to "Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color stop: #e5ad27) for the word "Dzine".

10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings.

11 The final logo should look like the image below. To activate/deactivate the guides, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ;

Creating the navigation bar

12 Create a new group and name it "navigation", it should be above "logo" group. Drag a guide from the top ruler, 150px below the top edge of the canvas. Select the Rectangle Tool (U) and draw a horizontal line of 4px height with a color of #e3ab27, across the canvas.

13 Add navigation links at 12px-high from this horizontal line and 20px to the right of the left guide. Select the Rounded Rectangle Tool (U) and draw a box with the size of 72px by 35px. Move this layer below the text links and name the layer "hover". Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px margin to make the edges equal to other inner edges at bottom. Double-click the "hover" layer to open the Layer Style dialog box and add gradient colors (Left color stop: #e5ad27, Right color stop: #b27625). Select the Horizontal Type Tool (T), select the text, "Home" and change color to #ffffff (white).

Creating the "call us" section

14 Next we are going to create the "call us" section at the top-right of our design (exactly opposite side of the logo). Download this phone icon and place this near the right guide. Name this layer "phone icon". Select the Horizontal Type Tool (T). Add a phone number on the left of the phone icon using the font Arial, with the size set at 20pt and the color #292929. Add some related text below the phone number using font Arial, set at Bold, with a size of 11pt and a color of #595959.

Creating the header

15 Now we are going to a create the header section. Create a new group and name it "header".

16 Select the Rectangle Tool (U) and create a rectangle shape with the size of 1200px by 440px. Put this rectangle at a distance of 1px below the navigation bar and name this layer "header bg". Double-click the "header bg" layer, select the Gradient Overlay layer style and have these two colors in the Gradient Editor (Left color stop: #2e2226, Right color stop: #7a7556). See the image below for the rectangle position and colors detail.

17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design.

Creating the "featured project" section

18 Next we will create the featured project section. Create a new group inside the header group and name it "fp". Select the Rectangle Tool (U) and create a rectangle with the size of 630px by 340px at the distance of 10px from the top and the left of header container. Give this layer color of #000000 and name it "fp container".

19 Open an image in Photoshop to place here as your featured project. Go to Select > All (Ctrl/Cmd + A), then Edit > Copy (Ctrl/Cmd + C). Come back to the our web design. Create a new layer above the "fp container" layer and go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project image. Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask. Now the image is visible only inside the rectangle ("fp container"). Make adjustments so that your featured project image is similar to the one shown below.

20 Go to Edit > Transform > Scale (Ctrl/Cmd + T). From the Options bar, click in the rotation box and type -4 and press enter twice to adjust the angle. Stay on the same layer ("fp image"), and select Luminosity as the blending mode of this layer.

21 Next we are going to create the title and description bar for the featured project image. Select the Rectangle Tool (U) and create a rectangle shape with the size of 630px by 90px using color #161718. Change opacity of this layer to 90% and name it "title bg". Place this rectangle as shown in the image below.

22 Create another rectangle with the size of 630px by 1px using color #9c9c9c and name it "title horizontal line". Place this rectangle on the top edge of the contents of the "title bg" layer.

23 Add a title and description inside the rectangle we created in Step 21, using the following settings for title and description.

For the title:

• font: Arial, color: #ffffff, size: 25pt and anti-aliasing method option: Sharp

For the description:

• font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None

Creating the "quick quote" section

24 Create another group inside the header group and name it "quick quote". Select the Rectangle Tool (U) and create a rectangle with the size of 300px by 340px. Place this rectangle at the distance of 10px to the right of the featured project section and name it "qq container".

25 We will copy a Layer Style from another layer we created in a previous step. Go inside the "navigation" group, right-click the "hover" layer, select Copy Layer Style, go back to the "qq container" layer, right-click and select Paste Layer Style. We have the same Layer Style of the "hover" layer for our "qq container" now.

26 Select the Horizontal Type Tool (T). Write "Quick Quote" inside "qq container" at the distance of 20px from the top and left edges of the containing box. Set the font family to Trebuchet MS (or a web-safe font of your preference) with the color of white (#ffffff) and anti-aliasing method option set to Sharp. We are going use the Rounded Rectangle Tool (U) to create three form fields. Select the Rounded Rectangle Tool (U) and set the radius to 3px. Then create two rounded rectangles with the size 260px by 35px using the color of white (#ffffff). Then name the shape layers as "field1" and "field2" respectively. Create the third rounded rectangle with the size of 260px by 75px using a white color (#ffffff) and name it "field3". Select the Horizontal Type Tool (T) and create labels for each form field.

27 Select the Rounded Rectangle Tool (U) and create a box of 80px by 35px and name it "submit btn".

28 Double-click the layer to open the Layer Styles dialog window and tick the Gradient Overlay checkbox from left. Click the Gradient Editor and change colors of the gradient as shown below.

29 Select the Horizontal Type Tool (T) and type "Submit" using the font Arial, style Bold and size at 13pt. Select both layers in the Layers panel ("submit btn" and "Submit text").

30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers).

Creating the main content area

31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of 300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide. Double-click the layer and use the settings from the following image.

32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text, "About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T), and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change the color to #2f2f2f. Add a little description and a link text beneath the title. The following options were used for the title, description and link text. (You can adjust these options as needed).

For the Title:

• Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp

For the Description:

• Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676

For the Link text:

• Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline

33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings:

34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer. Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group ("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new group "about".

Note: The inside grey square box is a place holder for an image and can be replaced with any image of your choosing.

35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it "services". Right-click on the "services" group and select Duplicate Group again and name it "portfolio". We have three groups now ("about", "services", and "portfolio"). Move the last group ("portfolio") to the right guide as shown below.

36 Select all three groups in the Layers panel, and then go to Layer > Distribute > Horizontal Centers to space them out equally. Click here to see the full size image of the following image.

37 Change the titles for the "services" group (center) and "portfolio" group (right) as shown below. (You can change these titles according to your requirement.)

Creating the footer

38 Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the size of of 1200px by 100px at the bottom of our design layout. Name this layer "footer bg". Use the same Gradient Overlay style as the "header bg" layer by right-clicking the "header bg" layer and choosing Copy Layer Style. Go back to the footer group, right-click the "footer bg" layer and select Paste Layer Style.

39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd).

40 We are going to add the email subscription section on the right. Create a new group inside the "footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle of 85px by 35px. Name this layer "subscribe btn".

41 Repeat Step 26 for adding the form fields and labels.

42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and size at 13pt. Select both layers ("subscribe btn" and "Subscribe text").

43 Repeat Step 28 for creating the subscribe button.

44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a text line above "email field".

Final Result

OK, that’s it and we are done. Here is the final result. Click on the image below to see the full size layout.

Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from this tutorial. Kindly leave your comments below and share your thoughts and opinions, I would love to hear them. You can also share this design tutorial to your friends if you think it could be helpful to them!

Download the source file

You can download the Photoshop file (PSD) of this tutorial from the link below as a ZIP archive.

• clean-professional-weblayout (ZIP, 2.4 MB)

Related Content

• How to Create a Clean Blog Design with Photoshop
• Coding a Clean Web 2.0 Style Web Design from Photoshop
• Create a Slick and Minimalist Web Layout in Photoshop

About the Author

Waheed Akhtar is a freelance web designer from Dubai, UAE. He is the founder and editor of Boost Inspiration, where he showcases different creative resources of Digital Art, Graphic Design, Illustration, Photography and Typography for inspiration. You can reach him via Twitter or Facebook.

Advertise here with BSA

In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout.

Preview

Here’s a preview of what we’ll be creating together, click the image to enlarge.

Create a new Photoshop document

1 We’ll be using the 960 Grid System (download it at http://960s/) as a starting template. Once downloaded, ppen up the file called 960_grid_12_col.psd and then hide the group called 12_col_grid.

Creating the background

2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. This will unlock the Background layer so that it’s editable. I named the Background layer as bg.

3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Select Radial Gradient as the type of gradient in the Options bar. Drag the gradient onto the canvas so that you have something similar to this:

Designing the header section

4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. This will mark the location of the layout’s header section.

5 We’ll start adding our title and slogan; select the Horizontal Type Tool (T) and type your site’s name and your slogan. Here are the font settings I used in the layout:

"YourName"

• Font family: Nilland font (get it from dafont.com)
• Font size: 33pt
• Font weight: Bold
• Anti-aliasing setting: Strong
• Color: #525252

"some awesome slogan"

• Font family: Arial
• Font size: 14pt
• Font weight: Regular
• Anti-aliasing setting: Strong
• Color: #207687

6 Align the fonts on the left top, using your guides for accurate placement.

Creating our navigation

7 Select the Horizontal Type Tool (T) and type the navigation text (home, about us, services, portfolio, and contact) using the following font settings:

• Font family: Arial
• Font size: 17pt
• Font weight: Regular
• Anti-aliasing setting: Strong
• Color: #525252

8 Use the document’s guides to align the navigation link text like the following image:

Creating the search bar

9 Now it’s time to create the search bar that’s situated on the right of the navigation links. Select Rounded Rectangle Tool (U), set the Radius option value to 5px, and then draw the rounded layer shape onto the canvas such that it has 155px width and 20px height, and located at the right of the navigation links.

10 Add an Inner Shadow layer style by double-clicking on the rounded rectangle shape layer in the Layers Panel to open up the Layer Styles dialog box. Use the following settings below for the layer style settings:

11 Let’s create the GO button now. Create a new rounded rectangle shape with the same height (20px) and Radius option value (5px), but with a width of 30px.

12 Apply a vertical (90 degrees) Linear Gradient layer style onto the Go button, with the left color stop being #2fa9c1 and the right color stop being #207687.

13 And then write any text like "search…" using the Horizontal Type Tool (T) on top of the search bar; use a white color (#ffffff).

14 Using the Custom Shape Tool (U), create a white arrow and align it to the center. I used the custom shape called Arrow 2, which comes standard in Photoshop CS versions. Look for it in the Shape option dropdown menu in the Options bar.

Our search bar should be looking like this:

15 Before we move to the next step, just make sure that everything is well-organized in our document. Here’s a screen grab of my Layers Panel as I was developing the layout:

Creating the separating lines

16 Using the Line Tool (U), Create two 1px lines on top of each other, with the following color values:

Note: There are many ways to set the colors of the line shapes. The first is by setting the Color option in the Options bar before drawing the lines. The other way, if you already drew the lines, is to use a Color Overlay layer style. I’ll let you decide how to do this.

Adding the sub-navigation

17 Type your sub-navigation text using the Horizontal Type Tool (T) using the following settings:

• Font family: Arial
• Font size: 17pt
• Font weight: Regular
• Anti-aliasing setting: Strong
• Color: #787878

18 Make sure that the separating line is centrally aligned between the main and sub-navigation. Here’s how it should look:

Creating the featured designs area

19 We’ll start creating the place where the image of a featured design would be, so we’ll select Rounded Rectangle Tool (U), and we’ll create a rectangle of 335px width and 128px height, and a Radius option set to 5px.

20 Apply a gradient Stroke layer style to it by setting the Fill Type option to Gradient. Modify the gradient colors so that it starts at #31aeca and ends at #2b9ab2.

21 Call this newly created layer photo_holder.

22 Well, let’s add an image of a featured design by going to File > Place. This will open up the Place dialog box where you can select an image to place on our canvas. Pick an image, and then press the Place button when you’re done.

23 Make sure that the layer of the image is above the photo_holder layer; if it isn’t, move it. Right-click on the image layer and choose Create Clipping Mask.

24 Modify the size of the image to fit; you can use Free Transform (Ctrl/Cmd + T). When you’re happy with the size, Make sure that your image is aligned according to the image above, flushed to the right of the layout design.

Add some content to the design

25 Let’s add some content to our design, but before we do that, we have to set our boundaries for our content. To do that, drag two horizontal guides like in the following image.

Add a title and a category

26 Use the following settings for the title and category.

Title (in my case it was "Handstand!")

• Font family: Arial
• Font size: 20pt
• Font weight: Regular
• Anti-aliasing setting: Strong
• Color: #2197b1

Category (in my case it was "Photoshop design"):

• Font family: Arial
• Font size: 17pt
• Font weight: Regular
• Anti-aliasing option: Strong
• Color: #313131

Paragraph content

27 Add your paragraph text, using the following image for reference.

28 Choose the Move Tool (V) in the Tools Panel and select our three text layers in the Layer Panel (hold down Ctrl/Cmd while clicking on them to select all of them).

29 Give them equal spacing using the Distribute top edges option.

Create the slider control

30 It’s time to create the slider control. Start by duplicating the two lines we’ve created for the navigation, and then resizing them (you can use Free Transform to do this). We’ll make the dark line darker, giving it a color value of #777575.

31 Then create a small box rectangle shape using the Rectangle Tool (15px wide and 15px high) and apply a Gradient Overlay layer style to it.

32 Before we move to the next step, we have to organize our layers. Use the following reference image to make sure the layers are in proper order.

Creating the content boxes

33 First off, we need to set our boundaries. Drag a horizontal guide and put it on the slider line. Leave a 50px gap, and then add another horizontal guide.

34 Now select the Round Rectangle Tool (U). Create a rectangle of 260px width and 170px height and a color of #d0d0d0. Call this layer bg_1.

35 Align the rectangle like the following reference image, using the Move Tool (V) to position them accurately.

36 Right-click on the bg_1 layer in the Layers Panel and choose Create Layer Mask from the contextual menu.

37 Select the Gradient Tool (G), set your foreground and background color to Black and White (press D to automatically reset the colors). With a linear gradient, drag from top to bottom until you’re satisfied with the look.

38 Now let’s create the shadow. Duplicate the bg_1 layer. Name the duplicated layer shadow. Place the layer beneath the bg_1 layer. Then apply a Color Overlay layer style with a dark gray color (#3e3e3e).

39 While having the shadow layer selected, go Filter > Blur > Gaussian Blur. Set the Blur Radius to 5.0px.

40 Using Gradient Tool (G), adjust the layer mask until you have something like this:

41 Add some content to the box. Below, you’ll see what I ended up with.

42 Group the content layers that you created into a group called content.

43 Now we want to align it. Select the content group, hold down the Ctrl/Cmd key, and select the bg_1 layer in the Layers Panel. Choose the Move Tool (V), and click on the Align horizontal centers option and the Align vertical centers option to position them.

44 Now make two copies of this box by duplicating the layers of the original content box we just created. Align them, change the content, and don’t forget to add a horizontal guide at the bottom.

45 Let’s check back and make sure that all of our layers are organized; use the screenshot of my layers as reference.

Creating the main content area

46 Leave a 50px gap and drag a new horizontal guide. Start adding your content and align it according to the following image.

47 Let’s make it look a bit better. We’ll select Rectangular Marquee Tool (M). In the Style option, choose Fixed Size with a fixed width of 15px and a fixed height of 30px. Set your foreground color to #12197b and fill the rectangular marquee selection with the color (Press Ctrl/Cmd + Backspace to fill).

48 Using the same settings, you can add some content in the right side.

49 Drag a new horizontal guide at the bottom. Add a separating line; use the following image for reference.

50 Check back to see all your layers are organized, using the following image as reference.

Creating footer area

51 We’ll start with the footer area creation by (again) creating a new horizontal Guide. Leave a 50px gap between the guide above, and drag a new horizontal guide!

52 Select the Single Row Marquee Tool (M). Set your foreground color to white (#ffffff). Click on the canvas to create the marquee selection. Then press Ctrl/Cmd + Backspace to fill it. Call this layer 1px_upper_line.

53 Select Rectangular Marquee Tool (M) and create a rectangle of 1020px width (it spans the entire width of the canvas, and 160px height. This will be the background of the footer area. Fill it with any color. Apply a Gradient Overlay layer style to it using the following settings.

54 Duplicate the 1px_upper_line layer and move it to the bottom of the footer, call it whatever name you want, but I’ve called mine 1px_down_line. Here’s how it looks.

55 Start adding some content; use the following images for reference:

56 You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

57 Align them like in the following image:

Creating the small footer

58 Drag a new horizontal guide at the bottom of the big (brown footer), leave a 50px gap, then add a new horizontal guide.

59 Then write your footer navigation text like so:

60 Write the copyright text and align it to the right, add a final horizontal guide.

Adjusting the canvas size

61 Finally, we need to leave another 50px gap between the footer navigation, copyright text and the borders in order to do that, we’ll adjust our canvas size.

Conclusion

And there we have it! We’ve created a clean and minimal layout design!

Download source file

You want a PSD copy don’t you? Here’s a ZIP archive that contains a PSD, and a JPG preview, get it now!

• slick-minimal-layout.zip (4.97MB, ZIP)

Related Content

• Create a Winter Theme Web Design in Photoshop
• Create an Animated “Call to Action” Button
• Design a Minimal and Modern Portfolio Layout with Photoshop
• Related categories: Tutorials and Web Design

About the Author

Mahmoud Khaled a web and graphics designer from Egypt. He’s also a blogger and tutorial writer. At a young age of 15, he already shows skills equivalent to his much older counterparts. Send him a tweet @MahmoudKhaled, connect with him on Facebook, and visit his site and blog called mkhaled.com.