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 12-09-2007, 09:35 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
141 VPS hosting layout

Hello friends

Today i will create Tutorial Number 141 from 500 Tutorial Marathon
I will create another web hosting tutorial. in this tutorial i will use the last 3D server i have created in tutorial number 140

This is my final result. You can download the following PSD layout to see better how you it's done. Please note that you can create this layout in less then 20 minutes if you have the Big-Pack



Now i will show you how simple you can create this layout
Let's start with a new document

Size 760x770 pixels
Background color : white

Select Rounded rectangle tool ( set the radius to 5 pixels ) and create a few shapes. i will use different colors, so you can see better what i am doing



Now for the red shapes ( our buttons ) please add the following layer styles











After i have applied the same layer style for all buttons here is my result



Now select the big black shape, and add the following layer styles











This is my result



Now for the other black shape add the following layer styles











This is my result



Now let's add a layer style for the blue shape











Now for the orange shape add the following layer styles











Now for the green shape add the following layer styles











This is my result



Now select the Blue shape layer.Hold down CTRL key from your keyboard, and with your mouse click on the layer thumbnail.



You can see that your blue layer is selected.



Now create a new layer right above the blue layer. You can create the layer if you press CTRL+SHIFT+ALT+N .
After you have created the layer, select Brush tool, and with a round brush ( Airbrush Soft round ) create some random lines on the new layer.



Now for this new layer change the blending mode to " overlay " and then reduce the opacity to 40%



Press CTRL+D to deselect, and then you should have something like me



Be sure you have this layer selected , then press CTRL+J ( this action will duplicate the layer )
With Move tool place the layer over the orange layer,
You can duplicate this layer 2 times, so you can place also one over the green layer

This is my result



Now it is time to add some images on this layout. i will add the 3D servers i have created in our previous tutorial.



Now i will add some text with Text tool



Between servers i will create another shape



Now if you have Talk-Mania Big-Pack
please load some brush arrows and add the following arrows on our layout



For this arrows please add the following layer styles









This is my result



I will add a logo from VIP area.
If you want to know how to apply for a VIP membership please read the following tutorial: LINK



I hope you like it.

Attached Files
File Type: zip layout141.zip (987.5 KB, 1269 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 12-09-2007, 10:15 PM
VIP Member
 
Join Date: Aug 2007
Posts: 26
hasyashah is on a distinguished road
very nice tutorial admin. thanks.
Reply With Quote
  #3 (permalink)  
Old 12-10-2007, 07:33 AM
Turbocharged_06's Avatar
VIP Member
 
Join Date: Mar 2007
Posts: 151
Turbocharged_06 is on a distinguished road
Fabulous layout the only thing hard would be coding the css to make the border (stroke) chrome. 4 out of 5 good job
__________________
OUTLAW-WEB.NET
Reply With Quote
  #4 (permalink)  
Old 12-10-2007, 03:45 PM
frankws's Avatar
Junior Member
 
Join Date: Apr 2007
Posts: 22
frankws is on a distinguished road
very nice admin
Reply With Quote
  #5 (permalink)  
Old 12-11-2007, 06:01 PM
maxg's Avatar
Member
 
Join Date: Jun 2007
Location: .: Cosmos :.
Posts: 31
maxg is on a distinguished road
Super!.... thanks, Max
__________________
Learning PhotoShop | PhotoImpact | Fireworks
Reply With Quote
  #6 (permalink)  
Old 12-12-2007, 10:20 AM
Junior Member
 
Join Date: Dec 2006
Posts: 4
samref is on a distinguished road
Thanks

That's was cool. You are making complicated things very simple.

Thanks.
Reply With Quote
  #7 (permalink)  
Old 12-14-2007, 02:43 PM
Junior Member
 
Join Date: Mar 2007
Posts: 10
tuan is on a distinguished road
that great and really nice
__________________
Hack your Windows XP/Vista
Reply With Quote
  #8 (permalink)  
Old 12-21-2007, 06:23 AM
Junior Member
 
Join Date: Dec 2007
Posts: 1
al3aqeel is on a distinguished road
very nice thansssssss
Reply With Quote
  #9 (permalink)  
Old 03-12-2008, 09:48 PM
Junior Member
 
Join Date: Dec 2006
Posts: 12
hassona3d is on a distinguished road
Do you mind if translated the tut into another language ?
Reply With Quote
  #10 (permalink)  
Old 05-26-2008, 04:36 AM
Junior Member
 
Join Date: Mar 2008
Posts: 1
GaryCallaghan is on a distinguished road
Thanks, for this suerb tutorial

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 08:06 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