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.
- 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
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.
Let 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.
Select 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.
Select 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.
Now 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.
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.
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.
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.
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.
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.
We have completed the header part. We will create navigation, footer, sidebar, content area etc., in the upcoming parts.
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.