Tutorials of Design.

How to Design Web Layout

In this tutorial you will see how to design web layout using Photoshop. You will also learn some useful methods and practices for creating web layouts in Photoshop.

 

Minimalist Blog Layout Photoshop Tutorial


Resources


how to web design
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Download Layout Source

 

 

Step 1 : Preparing the Canvas

Create a new document. The layout is going to be 950 pixels wide.

img(1)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add guides to the right and left borders of the document.

img(2)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

The layout is 950 pixels wide. But we need some extra space for us to work comfortably. So increase the width of the document using the Canvas Size dialog box. Press Ctrl+Alt+C (Image > Canvas Size) to load the dialog box and enter the value.

img(3)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 2 : Create and Organize Layer Groups

Often times we end up with several hundred layers scattered across the palette and hard to locate a particular item, especially when designing layouts. So plan ahead and keep things organized. I classified the layout into several groups that will contain the respective elements. Click on the “Create a New Group” button to create a group. Double click on the group the rename.

img(4)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 3 : Designing the Header

Let’s begin from the header. We are going to use a paper texture to create the header. Open up the “Paper Texture 1″. We need to isolate the paper from the background. Click on the black background with Magic Wand Tool. This will select the background, invert the selection to select the paper. Press Ctrl+Shift+I (Select > Inverse).

img(5)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Fine tune the selection using the Refine Edge command to increase the contrast and sharpness of the selection. Press Ctrl+Alt+R (Select > Refine Edge). Adjust the parameters to refine the selection.

img(6)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Press Ctrl+J (Layer > New > Layer via Copy) to separate the selection.

img(7)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Drag and drop the texture in our document. Place it in the “Header” group. Select the layer and go to Edit > Transform > 90 degree CCW. Then on the same menu choose “Flip Horizontal”. Place it in the header position. I resized it a bit (about 75%). Perform all transformations in one go.

img(8)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Press Ctrl+U to load Hue/Saturation dialog box. Reduce the Lightness all the way to -100. Now we got a nice silhouette of the texture with all its edge details.

img(9)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add the logo. The font used is “VTKS Caveirada”. You can Download it for free.

img(10)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Some links on the right side. Create button for the active link using the Magnetic Lasso Tool. Make slightly irregular selection.

img(11)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 4 : Texturing the Background

Let’s create the background texture. Drag and drop the “Paper Texture 3″ into our file. Reposition it properly. Place it beneath all the other layers in the palette.

img(12)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Desaturate the texture by hitting Ctrl+Shift+U. Press Ctrl+M and adjust brightness and contrast by adjusting the curve.

img(13)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 5 : Defining the Main Content Area

This is a two column layout with sidebar. First we will define the main content area. Click on the “Content” group and select the area using the Marquee Tool. Make sure it is 660 pixels in width. You can use the Info Palette to view the measurements. Fill it with #ffffff.

img(14)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Apply subtle 1px stroke to the content area.

img(15)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Now apply another texture to the content area. Open up the Paper Texture 2 and select and copy the middle portion of it.

img(16)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Paste it above the content area. Resize the texture.

img(17)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Press Ctrl+Shift+U to desaturate the texture and adjust brightness using Curves.

img(18)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Now Ctrl+click on the content box to load selection. Then contract the selection by 3 pixels.

img(19)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Finally invert the selection and hit “Delete” key. This will create nice contrast on the border.

img(20)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add Layer Mask to the texture layer. Pick a black and white gradient and apply to the mask to blend the bottom edge of the texture into the background.

img(21)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook



Step 6 : Adding Main Navigation

Select the “Navigation” group. Now create the main navigation above the main content box. Use the Marquee Tool to create the buttons. Fill #000000 for the buttons.

img(22)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

img(23)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Let’s add a nice folded edge to the navigation. Go to the last button in the row. Make a selection on the edge and choose Select > Transform Selection. Rotate the selection by 45 degrees holding Shift key. Then Press enter to confirm the transformation.

img(24)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Press Ctrl+Shift+J (Layer > New > Layer Via Cut). This will separate the piece on the edge. Press Ctrl+T then right click and choose Rotate 180 Degrees.

img(25)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Lighten the piece using Hue/Saturation dialog box.

img(26)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Download the social Icons from the link given above. Use the 32 X 32 size icons .

img(27)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 7 : Adding Content

First add some padding to the content box that will give the content some breathing space. Ctrl+click on the content box thumbnail to load selection. Go to Select > Transform Selection. I want to give 20px padding on each side, a total of 40 pixels. Subtract it from the content box width and enter the value in the Options Panel (660 – 40 = 620px).

img(28)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add guides to each side of the selection.

img(29)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Select the Horizontal Type Tool. Type the article Heading. I used Adobe Garamond Pro. You may substitute another similar font for it. Make sure you are in the “Content” group.

img(30)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Type Date and author details.

img(31)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Make a selection like below and fill it with #000000.

img(32)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Apply Drop Shadow and Stroke to the place holder.

img(33)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

img(34)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Now we can clip any image to the place holder. Place your image above the placeholder then right click on the layer and choose “Create Clipping Mask”. Or Press Ctrl+Alt+G.

img(35)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add Continue button. Fill #8e0a13.

img(36)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Draw 1px divider using the Pencil Tool.

img(37)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Create a smaller place holder. Apply the same layer styles as above. To add paragraph select the Horizontal Type Tool, click and drag like we do with the Marquee Tool. This way you can create paragraph text.

img(38)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

img(39)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add some more posts.

img(40)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Create page numbers.

img(41)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 8 : Search Box

Draw the search field with Marquee Tool and fill #ffffff. Keep 20 pixels gap between the content box and the search field.

img(42)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Apply some Inner Shadow.

img(43)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Draw the button. Fill color #8e0a13. Give it a folded edge. Add text.

img(44)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 9 : Adding Sidebar Content

Select the Sidebar group. Let’s create a content box using the Marquee Tool.

img(45)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add title to the box. Select the Custom Shape Tool. Switch to Arrows category. Choose the arrow shape and draw.

img(46)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Create 20 pixel padding on each side like before and add guides. Type the text. Add divider lines to separate the contents. Use the Pencil Tool with 1px weight.

img(47)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Create more content boxes.

img(48)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 10 : Footer

Create a new layer in the “Footer” group. Make a horizontal selection at the bottom and fill it with #000000.

img(49)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

The footer is a bit regular looking. Let’s give it some appeal. Draw this shape with Magnetic Lasso Tool and fill the footer color.

img(50)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Add navigation links and copyright info to the footer.

img(51)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Step 10 : Create and Apply Pattern

One last and final step before we finish the design. We will a tileable pattern using the Pencil Tool. Open a new document and create the below pattern element using the Pencil Tool with 1px weight. Turn off the background and select the pattern and choose Edit > Define Pattern.

img(52)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Create a new layer above the background layer. Press Shift+F5. This loads the Fill dialog box. Choose the pattern you just created. And Press “Ok” to apply the pattern.

img(53)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

We need to mix the pattern nicely into the background. Double click on the pattern layer thumbnail. Adjust the Opacity setting. The Blend if section has “This Layer” slider with Black and White handles. Select the Black handle and move it along the ramp towards right. You can see the pattern blending into the background. You can further adjust the smoothness and range of the blending. Press down the “Alt” key then click on the handle and drag away. This will split the handle into two segments. Adjust it until it looks good.

img(54)[3]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook


Final Results

final-results[6]
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Author of this tutorial is – niranth

Leave a Reply

You must be logged in to post a comment.

Pin It on Pinterest