Photoshop  Home Photoshop Web Layout Web 2.0 Business Layout
rss

Web 2.0 Business Layout

Author: amitk More by this author


So let's start with a new document
Size : 760x770 pixels
Background color : white

Select Rounded Rectangle tool and create a shape like mine

image 1

For this shape please add the following layer styles:

image 2

image 3

image 4

image 5

This is my result

image 6

Select Pen Tool, and create the following shape

image 7

Now duplicate this layer ( press Ctrl+J )
Then go to Edit > Transform Path > Flip Horizontal , and with Move tool place the duplicated shape like me ( i will use 2 different colors so you can see better what i am doing )

Click to enlarge
Click to enlarge

Now select both layers in Layer's palette

image 9

With both layers selected press Ctrl+E ( this action will merge the files into a single one )

Then for this layer add the following layer styles.

image 10

image 11

image 12

image 13

This is my result

image 14

Duplicate this orange shape, and move it a little to the top. For the second layer add the following layer styles

image 15

image 16

image 17

This is my result

image 18

Create a ellipse

image 19

Then add the following layer styles

image 20

image 21

image 22

This is my result

image 23

Create another ellipse

image 24

And add the following layer styles

image 25

image 26

image 27

image 28

This is my result

image 29

Select Rounded rectangle tool ( set the radius to 30 pixels ) and create 2 shapes

Click to enlarge
Click to enlarge

Then add the same layer styles as above

image 31

image 32

image 33

This is my result

Click to enlarge
Click to enlarge

Add some text for buttons, and for logo

Click to enlarge
Click to enlarge

Now let's add another details. With rounded rectangle tool create another shapes

Click to enlarge
Click to enlarge

Now for all this white shapes please add the same layer styles

image 37

image 38

image 39

This is my result

Click to enlarge
Click to enlarge

Now add alone some text and images

Click to enlarge
Click to enlarge

Then you can add alone some details like some pixel brushes or icons

image 42

Also this small brush icons you can find them in the following resource pack Here is my final result. I hope you like it

Web 2.0 Business Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge

Thank you



Author's URL: www.talk-mania.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Web 2.0 Business Layout"