1. Plan your design
It's important to make an initial mockup or sketch of how your template is going to look like, it's just a diagramming of the structure, so there's no need to make any complex illustrations or things like that.
2. Create your Photoshop file
When you make a web template, it's important to always respect the minimum width of 960 pixels, beyond that you can use any proportions you want, on this case our file is going to have a working space of 1547 x 1516 pixels, RGB color mode and 72 dpi.
3. Start making the background
For start our design, we will begin with the creation of the background, to do that you need to go to the Layers window and insert a gradient fill.
And follow the next parameters in order to fulfill the gradient:
This background will work as the main layer where we will be placing everything else from now on.
4. Design the header and footer
Select the rectangle tool and trace the following shape so we can mask our next fill.
Having this set, let's add a solid color fill from the Layers window.
The color is the following one:
So now we have the main object set, let's take a look at it.
But that's not it, now we need to add some effects to make our object more attractive, the effects that we're going to utilize are Color Overlay, Gradient Overlay and Pattern Overlay. Pay attention to the following screenshots to perfectly duplicate our result.
And the properties for each one of these effects are the following:
On the case of Pattern Overlay, we created a custom pattern (Create your design and then go to Edit>Define Pattern) like the one you will see on the next preview.
And our design now looks way nicer than before, let's take a look to a preview.
Grab your rectangle tool one more time and use it to make the following object:
Now choose a solid color to fill the element.
You're doing great, so far we have made an initial approximation to our design.
The next path cannot be created with the rectangle tool, we need something a little bit more precise, so select the pen tool.
This is the element that you need to draw with the pen tool:
And let's fill the path we just did using a solid color.
Next is another irregular shape made with the pen tool.
Fill the path using the following solid color:
The next thing we did was to insert a custom character design from our archives, remember that you can either copy paste it directly from the program or go to File>Place to put it on the working space.
Grab the rectangle tool and draw the next shape that's going to be the footer.
And similar to the first object we did, this one has alike parameters and color values, let's start by adding a solid color to it.
Good, now we have set the main layout for this object.
And now we need to add the same 3 effects that we used on the previous object, Color Overlay, Gradient Overlay and Pattern Overlay.
These are the parameters to follow on each one of the effects:
Same as before, we utilized a custom texture for the Pattern Overlay effect.
And there you have it, now our footer section is ready.
Now we are going to make a box on top of our footer, to do that select the rectangle tool and trace the starting object.
For start, let's fill our shape with a solid color.
Having this set we can proceed with the effects, on this case the effects will be Drop Shadow, Color Overlay, Pattern Overlay and Stroke.
And now follow carefully the next screenshots to exactly replicate the same parameters of our design.
We changed the pattern for this box, though it's also a custom design from our team.
And finally the Stroke effect.
Our box looks awesome after adding these 4 effects, let's take a look to it.
The next thing we did was to add another custom illustration, on this case a fancy Twitter badge.
This is a really nice detail that will prettify all the rest of our template.
5. Customize the content section
You will have to mix the rectangle and pen tools to create the next path.
Then we need to add a gradient fill to our object.
On this case we will utilize two different effects, Drop Shadow and Stroke, let's see how they work.
And the values for these effects are the following:
So far our web template is looking awesome, the general design is ready and now we must proceed with the details and additional objects.
One more combination of the pen and rectangle tools, on this case to create the top bar of the template.
After completing the object, continue with the addition of a solid color fill.
The effects for this object are Drop Shadow, Gradient Overlay and Stroke.
The next 3 screenshots will show you the parameters that you need to follow to complete these 3 effects.
That finishes the main top bar design, let's see how it looks:
The next object is the zoom icon, you need to appropriate the ellipse tool and use it along with the pen tool in order to generate the path.
Use a solid color fill to start working with our zoom icon.
After doing this, continue adding two effects, Inner Shadow and Stroke.
These next two screenshots display the values that you must set for each one of the effects.
Now our zoom icon is ready to rumble.
There must be another bar on top of the search bar to give it a better look, so grab your rectangle tool and draw the figure.
And now we filled utilizing a solid color fill.
We will be using Color Overlay, Gradient Overlay, Pattern Overlay and Stroke to work with this bar.
These are the parameters for each one of the effects:
And our top bar looks awesome after completing its customization.
The next object is very similar, start by making it with the rectangle tool.
Then we select the solid color to fill our object.
Then we begin adding effects, on this case they're going to be Drop Shadow, Bevel and Emboss, Color Overlay, Pattern Overlay and Stroke. Coming up next, the values that you need to input on each effect.
For the Pattern Overlay we did one more custom texture with the assistance of our design crew.
And this part is ready, let's take a look to it:
Next is a small ellipse on top of the content's flap.
Fill the ellipse with the following solid color:
As for the effects, we're about to use Drop Shadow and Bevel and Emboss.
And these are the parameters to follow on these two cases:
That's all you need to make this fancy button that holds the flap.
And now we use the pen tool to make the two arrows that are going on top of the button.
