Photoshop Tutorial – Create a Template in Photoshop | Beginners Guide Part 3

Requirements

  • Adobe Photoshop
  • 2-3 hours time

In the last 2 tutorials we started on how to create a template in photoshop. We have completed the header and the content area. In this tutorial we will complete creating sidebar, footer and in future tutorials we will see how to convert this to html and then to dynamic WordPress.

Let’s Get started now.

Completing the Sidebar and Footer

1. Now create a markup before we get started. Create the markup with the mentioned pixels as in the screenshot.

Create a Template in Photoshop

2. To create a background color for sidebar widgets we will need to create some markups. So do it with the mentioned figures.

Create a template in photoshop

3. Now create a new layer. With rectangular marquee tool selected create a rectangular shape and fill the background color with #41636d as shown.

How to create a photoshop template

4. We shall create a background for header. Create a new layer and with rectangular marquee tool selected make a small rectangular area.

Set the foreground color and background color to #35a6bd and #218baa respectively. Select the Gradient tool, click and drag to create a gradient effect.

Create a template in photoshop

5. We will create a ribbon for the heading. To do that first create a new layer. Select Polygonal lasso tool and make a selection. Fill the background with #176076.

How to Create a photoshop template

6. We will now create email field and subscribe button. To do that create new layer and make a rectangular selection with rectangular marquee tool and fill the background with #FFFFFF. Create a text on the layer like “Enter your email”.

Similarly create a new layer for the Subscribe button. Make a selection with rectangular marquee tool and set the foreground and background color to #35a6bd and #218baa respectively. Now select the gradient tool click and drag to give it a gradient effect. Select the text tool and give it a text like subscribe or submit.

Create a template in photoshop

7. Now grab some social media icons and place it under the email box.

Create a Template in Photoshop

8. We will now create ribbon for sidebar widget background. Create a new layer and make a selection using polygonal lasso tool. Fill the background with #1c2d32.

How to create a template in photoshop

9. We have now completed 80% of the template. Now we will duplicate the above layers to create popular post and recent post.

We have learn’t how to select the layers and duplicate them in the previous tutorial. If you have not read then do read it in part 2.

You need to duplicate only 4 layers. The main sidebar widget background, the heading background and the 2 ribbon layers. Now click on the main widget background layer and press Ctrl+T and extent the background to required length.

Create a template in photoshop

10. Now with text tool selected create a heading like “popular Posts” or “popular articles” with the color #FFFFFF and 18pt. Similarly create some posts heading with meta data and duplicate them to create 5 posts. use #7eae4f for the post heading and #5294b6 for meta data.

Create a template in photoshop

11. Similarly Duplicate all the layers which you used for creating popular posts and rename the heading from popular posts to Recent posts.

How to create a template in photoshop

12. We are done with creating sidebar. Now we will be creating a footer. Create a new layer for the footer. With rectangular marquee tool selected make a selection for footer area.

Now set the foreground color and background color to #35a6bd and #218baa respectively. Select the Gradient tool, click and drag to create a gradient effect.

Create a Template in photoshop

Now with text tool selected give it some information like copyrights and other information.

Create a template in photoshop

You have now successfully learn’t how to create a template in photoshop. In the next tutorial we will take it one step further by converting this into HTML template.

Have any suggestions, then leave it in the comments.

One Response to “Photoshop Tutorial – Create a Template in Photoshop | Beginners Guide Part 3”
  1. Nicky September 20, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *