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

Clean Business Template


Open a new document

Size 760 x 770 pixels
Color background #d3edff

Select Pen tool and create the following drawing ( be sure you hold the Shift key down to create perfect lines )

image 1

Then with the same tool modify the shape ( for this step you should know how to use the pen tool. it is a little bit tricky for beginners , but i assure you that is a great tool )

image 2

Then press Enter. And now you will have a nice shape.

Rasterize the layer ( to rasterize go to Layer > rasterize > Shape )

Select Elliptical Marquee Tool, and create a simple selection, and place it on the left top corner of the shape

image 3

Press on Ctrl+Shift+I ( this will inverse your selection )

Then Select Erse Tool ( choose a square brush ) and delete the corner

image 4

Press on Ctrl+D to deselect

image 5

Then duplicate this layer one time and place it like in my next image

To duplicate the layer, be sure you have the shape layer selected, then press on Ctrl+J

Then go to Edit > Transform > Flip Horizontal

With your arrow tool place the duplicated shape as above

image 6

Then Duplicate one more time the last layer

Rotate the layer 180 degrees , and with the arrow keys from your keyboard place the shape like me

image 7

In the image from above you have seen a new green shape. This one i will delete in my further steps. is only there so you can see better what i am doing

Duplicate the shape marked with the green sign. ( Ctrl+J )

Flip the shape horizontally ( Edit > Transform > flip Horizontally )

Then with the move tool, or arrow keys place the shape like in the following image )

image 8

Now duplicate the layers marked with the green sign

image 9

And place it like in the following image ( i will use another color, so you can see better what's changing on the layout )

image 10

Select the Rectangle tool and make a simple shape on top of the header

I will use a green color - one more time on your layout use the same color )

image 11

Now i will change alone the colors on my header, and this result you should have too.

image 12

Grab the rounded Rectangle Tool and make a simple shape ( set the radius to 30 pixels )

One more time i will use another color - on your layout please use black

image 13

In the following image you will see the how the header of your layout should look. Now you can see that i have placed 2 green signs.

Select all the layers with the exception of the background and the 2 layers marked with the green signs

When you have the right layers selected press Ctrl+E ( this will merge all the layers into a single one

image 14

Select Rectangle Tool , and make 2 shape

image 15

Now duplicate the layers marked with the green signs ,

Flip the layers vertically and place both layers on top of the layout

image 16

Now add the following layer styles for the header shape

image 17

image 18

image 19

image 20

image 21

This is the result

image 22

Then for the rest of the shape please add the following layer styles

image 23

image 24

image 25

image 26

This is my result

Click to enlarge
Click to enlarge

Now it is time to add some text on your layout

Click to enlarge
Click to enlarge

Now Create another document: ( we will create a pattern )

image 29

Zoom this document to 1600% and with the Pencil Tool Draw 3 points:

image 30

After that go to Edit > Define Pattern...

Choose a name for your pattern and press OK

To learn more about patterns , please visit the following link. www.talk-mania.com

Then Create a new layer ( press Ctrl+Alt+Shift+N )

Now select the header layer. and go to Select > Load selection

Click to enlarge
Click to enlarge

Then go to Select > Modify > Contract

Then Choose Contract by 7 pixel

image 32

Grab the Paint Bucket Tool , and fill the selection with the pattern we have created

Then press Ctrl+D to deselect

image 33

Now press on Add Layer Mask ( you can find this button on the bottom of the layer palette )

Select Gradient Tool, and make a vertical line from Bottom to top ( follow the arrow from the next image

Click to enlarge
Click to enlarge

Now you can add more details alone. for example you can add some arrows

In the following image you can see that i have added also some simple lines which are done with the type tool

Click to enlarge
Click to enlarge

Then you can add some images or some nice brushes on your header

and we are finished

Clean Business Template Tutorial: Final Result (Click to enlarge)
Click to enlarge

Thank you for watching



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 "Clean Business Template"

Only registered users can write comment

Reader's comments