Create a professional corporate/business template in Photoshop
Hello and welcome back to TrendyTuts.com. For today I will create a professional psd layout and I think it’s suitable for business/corporate template.
Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML. The tutorial on how to code this layout in XHTML it will be available on our PSD to HTML Section available only to our premium members
Open Photoshop and create a new document with this size: 1020 by 1200px and as a background color choose: #a8a994
Step 1: creating the top navigation
On the left side I will add my logo (Trendy Tuts) and on the right side I will add some links which will be used for navigation.
Now I will select Rectangle Tool (U) and I will create this rectangle 80px by 54px (I have used red for you, to see where I have placed it)
and I will apply this layer styles:
Next on the top of this rectangle I will add another one 71px by 50px, and as a color I will use: #cfbe27.
and I will apply this layer styles for the second rectangle added:
Then I will add a drop shadow for the links used in navigation.Final result for navigation:
Step2 – Creating the Featured Area
First select rectangle tool and create a similar shape. Mine has the following dimensions: 106px by 24px, as a color I have used white (#FFFFFF) and I have reduced the opacity to 21%
Next I will select Ellipse Tool and I will create an ellipse at the bottom of the shape:
I will make sure that the layer corresponding to the ellipse is selected and then I will apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 7.8px
Now I will select Rectangular Marque Tool and I will make this selection (basically I want to select that white space which is below the rectangular shape):
Once you have a similar selection, hit Delete on your keyboard
Next I will add some text and with line tool I will create this line just above our button. The line has the following dimensions: 866px by 1px:
Now with Pen Tool create this (those black lines have been created with pen tool):
Once you have create it, make sure that you still have selected Pen Tool and right click on that area and choose Make Selection:
You should have a similar selection now:
Next I will press Ctrl+Shift+N on my keyboard (to create a new layer on my layer palette) and then I will select Paint Bucket Tool, using this color # bebfab and I will fill up my selection
Now I will go to Filter>Blur>Gaussian Blur to apply a gaussian blur with a radious of 40.2px
Then with Rectangular Marque Tool make a similar selection:
And hit Delete button on your keyboard:
Next on the right side, I will select few screenshots with some of my tutorials and I will add them
Next I will select Type Tool and I will add “Our Business Model” text using Euphemia font with a 32px in size.
I will duplicate ” Our Business Model ” and then I will go to Filter>Blur>Motion Blur , here I will set angle to 0 and distance to 38
I will lower the opacity to 36%
Now I will select ellipse tool and I will create this shape (yes, using black), then I will apply a Gaussian Blur with a radius of 10px.
With rectangular Marque Tool I will cut a portion of the shape and I will lower the opacity to 50%
Having Type Tool selected I will add some dummy text, also.
Featured Area is almost finished. All I have to do is to create a “Call To Action Button”
To do that, I will select Rectangle Tool and I will create this shape, as a color I have used # b1a112
Then I will apply this layer styles for this button
I will right click on it, I will choose Make Selection (make sure that Pen Tool is still selected)
Then I click on Ctrl+Shift+N (to create a new layer) and I will select Paint Bucket Tool with this color # 84831e to fill up the selection
I will apply few layer styles
Now to enhance a little bit this button I will create first a shape using ellipse tool (a white shape)
Then go to Filter>Blur>Gaussian Blur and choose a gaussian of 5.9px
Here is my result
With Rectangular Marque Tool, make a similar selection
And hit Delete button on your keyboard. Here is my final result for featured area
Step 3 – Creating the content area
To create content area I will select Rectangle Tool and I will create a similar shape with this dimensions: 496px by 399px
Having Rectangle Tool selected I will add few tabs on the top of the shape. For each tab I have applied this layer styles:
Then I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 4.5px
Here’s my result:
As you can see with this method I have added a nice shadow on the left and on the right side of the shape.
Next with Rectangle Tool I will add another shape on the right side (415 by 338px)
The content area is almost finished. To complete this area I will need to add some text (with Type Tool) and some icons (I have used the Web Vector Icons from our Freebies section)
My final result for content area:
I think it’s looking pretty nice, don’t you think?
Step 3 – Creating the Newsletter
In this step we will create a newsletter area. First I will select Rectangle Tool and I will create this shape (1020px by 74px). I have used this color: #b2a215
Then I will apply this layer styles:
I will apply a Gaussian Blur (with a radius of 7.6px)
Then I will select Rectangular Marquee Tool and I will make this selection
Once you have this selection Hit Delete Button on your keyboard. I will create another separator using the same steps. Here is my result:
Next with type tool I will add some text
Then with Rectangle Tool I will create this rectangles:
For each of them I have applied this layer styles:
Next on the right side I will add the same button used for Featured Projects. I have changed only the text.
Featured area is almost finished, all I have to do is to create the Footer
Step 5 – Creating the footer
Want to Download the Source File? (CSS/XHTML included)
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.