4/21/2009

Web 2.0 Software Development Layout

If you want to sell your software it will be very good if you create a proper website. Let's think for a moment. if you want to sell a software you should place the main attraction in the middle. When you will receive some traffic, you need to turn the visitors into clients

I will show you how to create this type of website, so you can sell better and faster.



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



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

You will have a very smooth effect.



Grab Rounded rectangle Tool, change the radius value to 7



Then with this tool, create a few shapes



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



For all 4 round shapes, add the following layer styles











This is my result



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



For all these black shapes i will add the following layer styles











and voila. here is my button



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



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



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



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



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,



and i will start deleting the bottom part of the reflection



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



I will add some icons over the buttons



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



I will add some text, maybe a small text logo



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



Right click on the layer and choose rasterize layer



Then select rectangular marquee tool, and create the following selection



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

this is my result



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



What is very important. You can see that i have placed 2 images with Talk-Mania Software. ( you can find these PHOTOSHOP PACKAGES IN OUR STORE at Talk-Mania Shop - Webmaster's Dream, the BIGGEST webmasters package available! )

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



Create a star over the our 3D software boxes



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



then load the brushes from Web-icons 1

Add some details, on our layout with the following brush



here you can see where i have placed the pixel icon



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

No comments:

Post a Comment