website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Web 2.0 Software Development Layout
rss

Web 2.0 Software Development Layout

Author: amitk More by this author


I will start with a new document with the following size. 760x770 pixels.

Set the foreground color to #e8e8e8. Then With Paint Bucket Tool press inside your document.

The next step is to create a new layer ( Press Ctrl+Shift+Alt+N ).

Select Gradient tool, and select the following gradient : Foreground to Transparent.

Web 2.0 Software Development Layout image 1

Then create a vertical line from bottom to the top of the screen.

You will have a very smooth effect.

Web 2.0 Software Development Layout image 2

Grab Rounded rectangle Tool, change the radius value to 7.

Web 2.0 Software Development Layout image 3

Then with this tool, create a few shapes.

Web 2.0 Software Development Layout image 4

Select ellipse tool, and create 4 shapes, like in the following image.

Web 2.0 Software Development Layout image 5

For all 4 round shapes, add the following layer styles.

Web 2.0 Software Development Layout image 6

Web 2.0 Software Development Layout image 7

Web 2.0 Software Development Layout image 8

Web 2.0 Software Development Layout image 9

Web 2.0 Software Development Layout image 10

This is my result.

Web 2.0 Software Development Layout image 11

With the layer style from above we will give a metallic style for this buttons.

Now I will create another round shapes, and I will place them on top of each button.

Web 2.0 Software Development Layout image 12

For all these black shapes I will add the following layer styles.

Web 2.0 Software Development Layout image 13

Web 2.0 Software Development Layout image 14

Web 2.0 Software Development Layout image 15

Web 2.0 Software Development Layout image 16

Web 2.0 Software Development Layout image 17

And voila. Here is my button:

Web 2.0 Software Development Layout image 18

I will select all the round shapes, and I will duplicate them. The easy way to duplicate all the layers is to drag them to the " create a new layer " button from the bottom of your layer palette.

Web 2.0 Software Development Layout image 19

When you have duplicated the layers you will have the following result in your layer palette.

Web 2.0 Software Development Layout image 20

You can see that all my duplicate layers are already selected. With all layers selected press Ctrl+E ( merge layers ).

Web 2.0 Software Development Layout image 21

Now go to Edit > Transform > Flip Vertical, then with move tool place the duplicate buttons like in the following image.

Web 2.0 Software Development Layout image 22

What I am trying to create is a nice and smooth reflection.there are a lot of techniques to create reflections. I will use the easiest one. I will grab brush tool, then I will choose a round / smooth brush:

Web 2.0 Software Development Layout image 23

and I will start deleting the bottom part of the reflection.

Web 2.0 Software Development Layout image 24

You can lower the opacity for this layer , or you can erase more with eraser tool, until you like the intensity of the reflection.

Web 2.0 Software Development Layout image 25

I will add some icons over the buttons.

Web 2.0 Software Development Layout image 26

I will work right now on the top menu. I will create another shapes, with another color, and I will place them like in the following image.

Web 2.0 Software Development Layout image 27

I will add some text, maybe a small text logo.

Web 2.0 Software Development Layout image 28

If you look carefully on the last image, you will see the word " Solutions " with white. Right under the solution layer I will create a new black shape.

Web 2.0 Software Development Layout image 29

Right click on the layer and choose rasterize layer.

Web 2.0 Software Development Layout image 30

Then select rectangular marquee tool, and create the following selection.

Web 2.0 Software Development Layout image 31

Be sure you have the black shape selected, then hit the Delete key from your keyboard.

This is my result:

Web 2.0 Software Development Layout image 32

Now we need to place some text. this task is very simple and I will not tell you exactly all the steps. To add text on this layout you need to use the Type tool.

Web 2.0 Software Development Layout image 33

What is very important. You can see that I have placed 2 images with Talk-Mania Software.

These software boxes have a different color, then the whole layout. when you will receive some traffic on your new website, your potential client will notice the software boxes very fast, and maybe you will get some sales.

Over the software boxes I will add a star. select Polygon Tool, then use the following settings:

Web 2.0 Software Development Layout image 34

Create a star over the our 3D software boxes.

Web 2.0 Software Development Layout image 35

You can change the color for this star if you want with your own color.

If you have Talk-mania Big-pack, you can navigate to brushes > Web icons.

Web 2.0 Software Development Layout image 36

Then load the brushes from Web-icons 1.

Add some details, on our layout with the following brush:

Web 2.0 Software Development Layout image 37

Here you can see where I have placed the pixel icon:

Web 2.0 Software Development Layout image 38

This is my final result. You can download this layout from attachment area to understand better how it's made.

Web 2.0 Software Development Layout Tutorial: Final Result



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 Software Development Layout"