Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Business - Corporate Template

Business - Corporate Template


Create a new document with a white background.the size should
be 760 x 700 px.
Create a new layer by pressing Ctrl+Shift+Alt+N in the same time.

Then select Rounded Rectangle Tool ( be sure you have the radius = 5 px )
And draw a rectangle like mine.
I have used this color to fill it: #535353

You can see a small image of my first step:

image 1

Then you have to rasterize this layer: Go to Layer > Rasterize > Shape
After you have rasterized you have to duplicate this layer.

To duplicate the current layer using the Layer menu, choose Layer > Duplicate Layer

Select the first layer:

image 2

Now go to Edit > Transform > Perspective and set this value:

image 3

You will notice that the top of the rectangle will go to left.
Do not forget to press on Enter.

This will be the shadow for the second rectangle.

Now with the same layer selected go to Filter > Blur > Gaussian Blur and set the radius to 7 px.

After you press ok change the opacity for this layer to 25%.

image 4

Now select the top Layer ( Shape 1 Copy ) and let's change the layer style.
Please use this settings:

image 5

For Inner Glow settings use the color #003399

image 6

image 7

image 8

Set the Gradient color for the left #66CCFF and for the right #0066CC

image 9

image 10

Now we have to add another Rectangle. Select the Round Rectangle Tool ( radius 5 px ) and Draw a rectangle like mine:

image 11

On this Rectangle we will create the buttons and we will have also place for logo.

But first of all we have to create one more time a shadow. i will not explain one more time. please follow the steps from above.

After you have created the shadow we will add a layer style for this rectangle.

image 12

And for the gradient use this colors:

Left = #fcfcfc Middle = #d1d2d5 Right = #9c9ea5

image 13

Now select the Rectangular Marquee Tool ( be sure you have selected the rectangle you have already applied this layer style )

With Rectangular Marquee Tool make a selection like this:

image 14

Now press on Delete.
You can do this as many times you want. After you press delete you can move this selection with your arrow keys and when you are happy with the distance press one more time delete.

Repeat this steps as many times you need. I will create 4 buttons.
After you have created this buttons press Ctrl+D to deselect
You will notice that the selection is gone

This is my result:

image 15

Now we will add another details for this buttons. With rounded rectangle tool create small rectangles and place them like me:

For this small rectangles use the same layer style as the big blue rectangle.

image 16

Now you can add your logo on the remaining place.

Now let's come back to our layout. here is the image with the logo.

image 17

We have finished the buttons and the logo. Now let's start to work on the other part of the website.

Now create a new layer ( Press Ctrl+Shift+Alt+N ) and with the
Rectangular Marquee Tool make a selection like this:

Click to enlarge
Click to enlarge

Create a new transparent document (3x 3 pixels) Zoom
it by 1600 %.With the Pencil tool create something like this:

image 19

Then go to Edit > Define Pattern . Choose a name and press Ok.

Now let's come back to our template. Select Paint Bucket Tool.
On your top side of the window select the pattern you just made.
Use this settings:

image 20

Now press on time with the Paint Bucket tool inside the selection on our layout.

this is the result.

image 21

You can change the color if you want. Go to Layer > Layer style > Color overlay

I will choose a white color. now please add as many details as you want.
I have duplicated this line and with my arrows keys i have placed under the first one.

Now it is your choice. You can add as many as you want. first think about the content you will have on this website.

Select the Rounded Rectangle Tool and create something like me:

Click to enlarge
Click to enlarge

You can notice that the rectangle is bigger on the bottom part. you will see in my next steps why i have created this.
Rasterize this Layer: Layer > Rasterize > Shape

Select the Rectangular Marquee Tool and make a selection like mine. ( be sure you have this rectangle selected )

image 23

Then go to Layer > New > Layer via Cut
Photoshop will select automatically this layer. Now please select this layer and drag it on Layer palette above the Background layer:

image 24

After that the image will look like mine:

image 25

Now press D on your keyboard. ( this will reset your colors )
Select one more time the Rounded rectangle Tool and create a small rectangle.

please see the next image:

image 26

Place this rectangle like in my next image. be sure you drag the layer on second place :

image 27

Then with the arrow keys place it like me:

image 28

Let's add a layer style for this small black rounded rectangle

image 29

. now we will add another details.
The most important think is to add one more time shadow on the grey rounded rectangle. Please follow the first steps from this tutorial.

Now create another document 30 x 30 pixels with a green
background (it is not important the color but it should be
something different from white so you can see better what i am doing)
Zoom this document at 1600 %
Then with the Pencil Tool and with an white color create
something like this:

image 30

The image from above is resized at 50 %

Now with the Rectangular Marquee Tool select the white
line and with the Gradient Tool make something like this:

image 31

Then Make another selection:

image 32

With this selection press Ctrl+C and then Ctrl+V .Then
press on Move Tool,
then go to Edit > Transform > Rotate 90 CW.
Then place the new layer like me:

image 33

You can notice that i have used the blue color instead of the black one.
When you drag this document to our layout it will look very good, and this document will blend very good on our layout.

With the Magic Eraser Tool delete the green color. Select the Move Tool and drag this on the template.Now place the new layer like on the
following photo (I have duplicated a few times the layer (the one we have just made before) and i have rotate to fit with my template)

If you have question please register and ask me . i will answer to all your question.

If you want to download the PSD file view Attachments

this is my final image:

Business - Corporate Template Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Business - Corporate Template"

Only registered users can write comment

Reader's comments