Create a light business psd template in Photoshop
Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a light business template in Photoshop.
When I’m writing this tutorial I’m really happy because this is the tutorial nr. 30 published on trendyTUTS. If it’s the first time when you came on trendyTUTS, I advise you to read the rest of our tutorials published on Website Layout Tutorials. Here you will find different kinds of psd templates (for various niche) and I’m sure that it will help you a lot!
Like I do on every tutorial, I remember you that in this tutorial you will learn how to create this psd template in Photoshop, but I will not cover the PSD to CSS/HTML conversion.
If you would like to download the CSS/HTML version for this tutorial you will need to sign-up for a premium membership on trendyTUTS.com.
To create this tutorial I have used:
Let’s start the tutorial. Open Photoshop and create a new document 1020 by 1250:
Next, set the Foreground Color to #f0f0f0, than with Paint Bucket Tool press one time on the document
Select Rectangle Tool and draw a similar shape on the footer
Step1 – Creating the logo and the top links:
To create the logo, I will select Type Tool and I will write “Business Template” and as a tagline I will write: “a design by trendyTUTS”
Next I will select Rectangle Tool and I will create an orange shape on the top right corner, than using type tool I will add some links.
Here is my final result for this area:
Step2 – Creating the navigation
To create the navigation, first I will select Ellipse Tool and I will create this shape:
Next I will go to Filter>Blur>Gaussian Blur. Here I will apply a radius of about 15px
In this manner I have created the shadow for the navigation. Now I will select Rounded Rectangle Tool, with a radius of about 10 px and I will create the navigation bar over the shadow. I will apply this layer styles also:
On my Layer Palette I will right click on the hover layer and I will choose Rasterize Layer,
Then I will select Rectangular Marquee Tool, I will make this selection on the hover
I will hit Delete on my keyboard than I will press Ctrl + D to unload the selection. With type Tool I will add the links for the navigation
Then I will select Rounded Rectangle Tool, this time with a radius of 30px and I will create a search form.
Here is my result for this area:
Step3 – Creating Featured Area
First I will create a shadow in the same way that we have created it for the navigation bar. With Ellipse Tool we will create a shape then we will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of about 15px.
Then with Rectangle Tool I will add a white shape over this shadow
On the left side I will add some text
Then from my stock photos I will add an image
With Rounded Rectangle Tool (radius 30 px) I will create 2 buttons:
For the darker one I have applied this layer styles:
For the orange one, this layer styles:
Here is my final result for Featured Area:
Step4 – Creating the content area
First using Line Tool I will add this lines:
Than using Type Tool and some images from stock websites, such as istockphoto.com, I will add some images:
Then on the right side, using Rounded Rectangle Tool I will create some forms. To create the submit button I have used the same layer styles used to create the buttons from Featured Area
Here is my final result for the content area:
Step 5 – Creating the footer
If you will look again at the final preview for this layout, you will see that the footer is the same with the top part (logo and top links). All you have to do is to look again at the indications provided when I have created the top part and you will be able to create the footer as well.
Final preview for this layout:
Want to Download the Source File? (including CSS/HTML version)
In order to download the source file you will need to become a Premium Member.
Already a premium member? When you click on the download link please make sure that you are logged in.
If you’d like to read more tutorials, I invite you to visit our Website Layout Tutorials section.
Also, you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTs.com.blog comments powered by Disqus