|
|
|||||||
| Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials. |
![]() |
|
|
Submit Tools | LinkBack | Thread Tools | Display Modes |
|
||||
|
Hello friends
Today i will continue with our marathon. Today i will write tutorial number 167. 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 ![]() 3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
|
|||
|
Very good layout ,although the lower part is a little simpler than the layout , great-job though
i had a question about slicing, when i use the slice tool it only slice rectangles, if i wanted just the circular part of the button what should i do?? |
![]() |
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|