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

Have you ever wondered how i can create a template a in photoshop? If yes then here is a basic tutorial. If you have a creative mind then you will love designing templates in photoshop. Not only creating photoshop template is fun but it enhances your opportunity of becoming a good webdesigner. It does not take too long to become a good webdesigner, but all it takes is hardwork and good understanding of basics.

Requirement

  • Adobe Photoshop
  • 2-3 hrs of free time

In this tutorial we are going to learn how to create a template in photoshop. I am using photoshop CS5 and you can use any version. This tutorial is broken into parts to make it simpler. This may take 2 or 3 parts to complete. After i complete creating the PSD template i will also take it further and convert it into a static HTML template and then to a dynamic WordPress theme where you can add plugins, page templates et., So let’s get started to the basic PSD tutorial.

What we are going to create

How to Create a template in photoshop

Create a Template in Photoshop

Open you photoshop quickly and press Ctrl+N or goto File -> New. Under preset field select “Web” and set the dimensions to 960 px(width) and 1200 px(height). Leave other fields as their default values. Make sure the dimension you have set is in pixels.

Create a template in photosopLet get started to create a template in photoshop. First fill the background color with white(#FFFFFF). Now, create a new layer by clicking on the little page type icon which you find at the bottom of the layers panel.

Now Drag this new layer(layer 2) to the bottom so that the old layer(layer 1) comes to top. See the screenshot and you will come to know how to drag each of them.

How to Create a template in photoshop

How to Create a PSD template in PhotoshopSelect layer 2 by clicking on it in layer’s panel. Press Cntl+Atl+C and expand the layer to 1200px(width) and 1500px(height) as it will be comfortable to work with that size and fill the background again with white. Here is the screenshot on how it looks before filling the background color.

Learn to Create a Template in PhotoshopSelect foreground color as #84bfc5 and background color as #9ed6db. If you don’t know what is foreground and background color, then have a look at the screenshot on left side. The upper color is the foreground color and the one below is the background layer.

How to Create a Photoshop TemplateNow we shall give a background to layer 2. We will use gradient effect. If you don’t know what is gradient effect then you will come to know soon. Press G or select the Gradient tool to fill the background color for the layout. The gradient tool icon is located at the left of the screen, see the screenshot on how it looks.

After you select the gradient tool click and drag only to about less than half of the layout. While you click and drag press shift to make the line straight. This will apply the gradient to layer 2. See the result in the screenshot below.

Creating a clean blog template in photoshop

We can see that white layer automatically turns out to be 960 px wide. Now we will create markup’s before proceeding any further. This helps us to create our template with ease. Press Ctrl+R to bring up rulers. Right click on the rulers and select pixel.

To start our markup drag the rulers to the start of the layer first. Also drag two other rulers to both the ends one to left and one to right. Now drag a new ruler 20px from top and then place the logo. You can create a text instead of logo or you can download the zip file which i have attached and it has all the images. The current status of our PSD should look like the one below.

Create a Template in Photoshop

We will now create search bar. Drag a ruler 10px from the end of logo and 20px from starting of the left. Let the height and width of search bar be 30px and 220px. Similarly let the submit button be 80px and 30px.

To keep the box attractive we will add background color and a ribbon shape. So first create a new layer and using the rectangular marque tool create a box of about 400px wide and 50px height and fill the background with this #252b32.

Create a Template in Photoshop

To create a search bar and submit button,  first create some markup’s similar to the one in the screenshot below. After all the markup’s create a new layer and using rectangular marquee tool, with the specified width which we chose above(220 and 30 px) make a selection and fill the background with #FFFFFF. This will complete the search bar box.

To create a submit button create another new layer and then make a selection using rectangular marquee tool. Now set the foreground color to #1a89a8 and background color to #39b0c7. Selecting gradient tool click and drag from top to bottom of the selection to give it a nice effect. After that click on the text tool and add some text. For search bar i gave “search the site” and for submit button i called it as “Search”. The final result should be similar to the one in the screenshot below.

How to Create a Template in Photoshop

If you need you can change the search text to #FFFFFF. This looks good, but we need to add a good ribbon like shape to the search bar background. This is how we do.

Select the polygonal lasso tool or you get it by just pressing L on your keyboard. You find the tool on the left side of the screen and maybe 3rd icon from top. If you haven’t found the icon, goto the 3rd icon from top and then right click to see the optional tools. Create a shape similar to the one in the screenshot using this polygonal lasso tool.

How to create a photoshop template for blog layout

Now make the foreground color as #95c8ce and press Alt+backspace to fill the color. We have now completed the header part and the completed PSD should look like this one.

Creating a Template in Photoshop

We have completed the header part. We will create navigation, footer, sidebar, content area etc., in the upcoming parts.

Update

Part 2

Part 3

Let me know if you face any difficulty while creating the template in photoshop. I am always happy to help you. Do leave you suggestions and problems via comments.

8 Responses to “Photoshop Tutorial – Create a Template in Photoshop | Beginners Guide Part 1”
  1. Inamul20 June 27, 2012
  2. Michael September 18, 2012
  3. florentius September 25, 2012
  4. Balaj Khan November 17, 2012
  5. gurjit kaur May 30, 2013
  6. Moazzam July 27, 2013
  7. EMMA September 9, 2013
  8. Titus Sid October 28, 2013

Leave a Reply

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