- 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.
2. To create a background color for sidebar widgets we will need to create some markups. So do it with the mentioned figures.
3. Now create a new layer. With rectangular marquee tool selected create a rectangular shape and fill the background color with #41636d as shown.
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.
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.
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.
7. Now grab some social media icons and place it under the email box.
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.
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.
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.
11. Similarly Duplicate all the layers which you used for creating popular posts and rename the heading from popular posts to Recent posts.
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.
Now with text tool selected give it some information like copyrights and other information.
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.