Web Hosting Deals Holiday Logo Design Webcam Chat Website Header Templates Register domain Search Engine Optimisation Web Hosting
Go Back   Talk Mania Forum > Tutorials > Photoshop Tutorials > Web Layouts

Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials.

 Image
Buy Sell Downloads

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 09-26-2008, 11:54 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
167 Web 2.0 Software Development Layout

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


Attached Files
File Type: zip layout167.zip (680.2 KB, 27 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 09-28-2008, 02:09 AM
Junior Member
 
Join Date: Sep 2008
Posts: 1
sunsoft is on a distinguished road
c'ect excellent merci admin
Reply With Quote
  #3 (permalink)  
Old 09-28-2008, 03:09 AM
Junior Member
 
Join Date: Sep 2008
Posts: 27
shefo is on a distinguished road
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??
Reply With Quote
  #4 (permalink)  
Old 09-29-2008, 08:55 PM
Member
 
Join Date: Sep 2008
Posts: 30
ssj4sunny is on a distinguished road
that is very very nice
thank you
Reply With Quote
  #5 (permalink)  
Old 09-30-2008, 05:56 AM
Junior Member
 
Join Date: Aug 2007
Posts: 25
juniorsk8 is on a distinguished road
very good layout! thanks!
Reply With Quote
  #6 (permalink)  
Old 10-01-2008, 05:52 PM
Junior Member
 
Join Date: Jun 2008
Posts: 26
Cesto Ode is on a distinguished road
Very Nice! Thanks! This will also come in handy
Reply With Quote
  #7 (permalink)  
Old 10-01-2008, 09:08 PM
Junior Member
 
Join Date: May 2007
Posts: 26
kukutyin is on a distinguished road
Cool tutorial! Thanks!
Reply With Quote
  #8 (permalink)  
Old 10-04-2008, 12:28 PM
Junior Member
 
Join Date: Apr 2007
Posts: 26
Haze2U is on a distinguished road
2.0 check.
Reply With Quote
  #9 (permalink)  
Old 10-04-2008, 04:07 PM
Junior Member
 
Join Date: Apr 2007
Posts: 25
FaHoOoOoDi is on a distinguished road
good for shoping sites

thank you
Reply With Quote
  #10 (permalink)  
Old 10-05-2008, 09:26 PM
Junior Member
 
Join Date: Sep 2008
Posts: 26
Prio is on a distinguished road
So nice design... Thank you!

Reply With Quote
Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump


All times are GMT +2. The time now is 06:04 AM.


Fake ID

Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.2.0 RC8
Forums Copyright © Talk-Mania.com