Today we learn how to make a personal blog / website template. Its layout and color scheme will suit personal and small business sites. This is a simple Photoshop tutorial and even beginners should be able to follow it easily.
It’s hardly a surprise that we will be making this template in Adobe Photoshop
and after a few days we’ll publish the PSD file for everyone to download it. Stay tuned to our postings by Subscribing to our RSS or Following us on Twitter.
Let’s start with the obvious step of opening a blank file. Today I’m giving it a size of 1200 x 1200 pixels. This is only because this template will contain a background image in surrounding margins of the web design. The design will be in the center part which will be about 900 pixels and the rest is marginal space.
Now we fill the background with color # d9c3a2. The result should be like the image below.
I was going to remove the logo design, but let’s put in the tutorial, you might derive some design inspiration out of it. I have created a bulb looking path shape and filled it with red color. In the image below, I’m adding a drop shadow to that shape. You can find the values in the reference image.
It’s time for some Bevel effect to make it look a little more 3D.
Let’s do some finishing touches, and for that we add a gradient. Here are the values.
These are the color values of the gradient.
And last but not the least, a small 1px stroke to make it look above the template.
Time to add company name, this will accompany the logo.
After adding the company slogan, we should be getting this result. If you got the same, let’s move forward.
Navigation Bar is next. We make a space for it in the usual manner, we create a path with Rectangle Tool and then we convert into a marquee selection by pressing Ctrl + Enter and the selection with plain white color.
Add a little stroke to border the bar.
Filling a little gradient in the background wouldn’t be a bad idea.
Just the way we created space for the navigation bar, now we are creating its buttons. Color number is written in the image below.
Some stroke around the button.
Time for the search bar. I drew two shapes, one for the “search” button and one for the search text box. Method of drawing and filling it with white color is the same as the previous steps.
After filling the navigation bar with options, below is the final look of the navigation bar, with a mouse hover effect.
Now we are taking on the Featured Area. I believe a featured area is necessary for almost all websites. It enhances visitor’s experience and allows them to view the important things easily. I’ll create the space for this area using the same old technique of making a path with Rounded Rectangle Tool and converting it to a selection and filling in the color depicted below.
Let’s add a little drop shadow, these are the little graphics that make a template look catchy.
Now some stroke, it is essential that you give every object a border so that it looks more visible.
This is the shape we are looking to make.
This is almost done, now we are making a background for the headings in the content area.
And the usual Drop Shadow effect we have been using should be applied here as well.
And now we have added all the usual content. Below is the result image.
The footer is simple as 1 2 3.
This is what you have made. Be proud 🙂