Create a professional corporate/business template in Photoshop

Apr 26th, 2010View Comments

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

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Corporate - Business Web Layout Tutorial In Photoshop

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:



My result:

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


Next having pen tool selected I will create an arrow directly on the 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



With type tool I will add some text (I have used Arial font, size 14px)

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:




Next I will select Ellipse Tool and I will create this shapes (those black lines – on the right and on the left of the shape)

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:




Next I will try to create some separators . I will select Ellipse Tool and I will create this shape:

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:


My result

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

This one is really easy to create. With type tool and Rectangle Tool (used to create the forms from Quick Contact Form) I will create the footer. Here’s my final result:

Click Here To See The Live Preview (CSS/HTML)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Corporate - Business Web Layout Tutorial In Photoshop

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.

  • http://www.thewinedesign.com Ron

    Your tutorials are truly amazing! I really like all of the tutorials listed on this website, but this one is my favorite!

  • http://www.thewinedesign.com Ron

    Your tutorials are truly amazing! I really like all of the tutorials listed on this website, but this one is my favorite!

  • Marilyn

    You have used some really nice techniques on this tutorial!

  • Vickie

    This tutorial is awesome!

  • Marilyn

    You have used some really nice techniques on this tutorial!

  • Vickie

    This tutorial is awesome!

  • admin

    @all – Thank you so much for your nice words, this kind of comments are really motivating!

    @Ron – If you would know what we have prepared, I think you will change your favorite layout :P

  • admin

    @all – Thank you so much for your nice words, this kind of comments are really motivating!

    @Ron – If you would know what we have prepared, I think you will change your favorite layout :P

  • VP

    Awesome!
    I wish I knew how to take this to HTML though?
    This is an ongoing problem for me.
    any suggestions?
    thanks:)

  • VP

    Awesome!
    I wish I knew how to take this to HTML though?
    This is an ongoing problem for me.
    any suggestions?
    thanks:)

  • admin

    @VP

    As we have stated on each tutorial we will gonna code each layout created on this website. Currently we literally don’t have time because we work a lot to create new photoshop templates and to increase our inventory from our sister website: TrendyPacks.com. Once we will come to a reasonable number of photoshop templates and tutorials (few dozens) we will start to code them. A tutorial on how to code in HTML/CSS each psd template listed on this website will be posted, so stay tuned!

  • admin

    @VP

    As we have stated on each tutorial we will gonna code each layout created on this website. Currently we literally don’t have time because we work a lot to create new photoshop templates and to increase our inventory from our sister website: TrendyPacks.com. Once we will come to a reasonable number of photoshop templates and tutorials (few dozens) we will start to code them. A tutorial on how to code in HTML/CSS each psd template listed on this website will be posted, so stay tuned!

  • http://poliman.pl strony internetowe kraków

    You are really good. The project is modern and neat at the same time. it had me a lot of inspiration :) thanks

  • http://poliman.pl strony internetowe kraków

    You are really good. The project is modern and neat at the same time. it had me a lot of inspiration :) thanks

  • admin

    Thank you strony!

  • admin

    Thank you strony!

  • http://www.dobox.com/ Bruce

    Awesome!
    I wish I knew how to take this to HTML though?
    This is an ongoing problem for me.
    any suggestions?
    thanks:)

  • http://www.dobox.com/ Bruce

    Awesome!
    I wish I knew how to take this to HTML though?
    This is an ongoing problem for me.
    any suggestions?
    thanks:)

  • http://www.schoolgrantsnow.com/ school grants

    Keep posting tutorials like this one. I really like them!

  • http://www.schoolgrantsnow.com/ school grants

    Keep posting tutorials like this one. I really like them!

  • http://xitrumpsd.com Nhật Bụi

    Great! I like it. Thanks.

  • http://xitrumpsd.com Nhật Bụi

    Great! I like it. Thanks.

  • http://www.dmeadowsdesign.com Daniel

    Nicely done, great design :)

  • http://www.dmeadowsdesign.com Daniel

    Nicely done, great design :)

  • http://trendytuts.com/psd-to-html-tutorials/psd-to-html-how-to-code-the-professional-business-template.html [PSD to HTML] How to code the Professional Business Template « TrendyTuts – Premium Photoshop Tutorials

    [...] Hello. As usual for today I have prepared another tutorial from PSD to HTML series. In this tutorial I will show you how to code the Professional Business Template [...]

  • Timon

    Awesome tutorial! Thanks alot.

  • Timon

    Awesome tutorial! Thanks alot.

  • http://www.travel-planners.net Travel Planner

    Great stuff. I learnt lot more on designing from this tutorial. My plans of revamping my site design would soon come true. Learning stuffs as fast as possible.

  • http://www.travel-planners.net Travel Planner

    Great stuff. I learnt lot more on designing from this tutorial. My plans of revamping my site design would soon come true. Learning stuffs as fast as possible.

blog comments powered by Disqus