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 10-07-2007, 04:34 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
133 Dedicated Hosting Layout

Hello

Today i am going to make Tutorial Number 133 from 500 Tutorial Marathon
I will show you how to create another Hosting layout. this time i will create the layout for a dedicated hosting company.
All gradients and styles are included in this package



So let's start with a new document.
Size : 760*770 pixels
Background color : white

Select rounded rectangle tool, set the radius to 10 pixels, then create a few shapes. i will use different colors, so you can see better where i am placing the rectangles



Then create another rectangle with the same tool. I will use a red color. feel free to use what color you want.



With this red shape layer selected press CTRL+T ( Free transform tool )
Then rotate the shape at 45 degrees.



This is my result



Now select the red shape layer and the blue shape layer



When you have both layers selected, press CTRL+E ( this will merge the two layers into a single one

Then for this shape add the following layer styles









This is my result



Now add the following layer styles for the vertical shape









This is my result



Now for the green shape add the following layer styles









This is my result



Now for the blue shape add the following layer styles









My result



Then you can add the first layer style we have used, also for our last shapes



Now please add some hosting servers, and a logo. the logo you can purchase from Talk-mania shop. I am not going to show you how the logo was done in this tutorials. you can find already a few tutorials about logos in TM forum



Now Please create some buttons. place these layers right above the background layer, then with type tool you can add also some text



Now hold the CTRL key down , and with the left mouse button click on the layer thumbnail for the grey shape
We will load the selection



With this selection active, select rectangular marquee Tool and hold down the ALT key. Then try to create the following selection:



After you will release the mouse button you will have the following result



Create a new layer on top of all layers. then with paint bucket toll fill this selection with white. After that add some icons

this is my result



Now load the selection also for the green shape. To load the selection you need to click on the layer thumbnail while you hold down the CTRL key



Select ellipse marquee tool, and be sure you press on the : " intersect with selection button "



Then create the following selection



After you will release the mouse button you will have the following result



Create a layer on top of all layers ( press CTRL+SHIFT+ALT+N ), then fill this layer with black. to fill the selection please use the paint bucket tool.
press CTRL+D to deselect

For this shape please add the following layer styles









This is my result



Duplicate this layer ( to duplicate the layer please be sure you have the layer selected in your layer palette , then press CTRL+J )

place the second layer on the right side, then add some text on your layout



My last step is to add a world map near the servers. you can place there some clouds. Go to www.free-photoshop.com and download some free clouds brushes, or you can add there some arrows. it is your choice.
this is my final result


The psd file is available only for VIP members : Download from this LINK
If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 10-07-2007, 05:28 PM
Junior Member
 
Join Date: Oct 2007
Posts: 5
JakkyD is on a distinguished road
Nice one admin. Everything you touch turns to gold

I think you should make one tutorial about how to code any of the templates you've made. Because people probably make these really nice templates but then dont know how to slice and code them.
Reply With Quote
  #3 (permalink)  
Old 10-07-2007, 05:43 PM
Suicide Sam's Avatar
Junior Member
 
Join Date: Aug 2007
Posts: 26
Blog Entries: 7
Suicide Sam is on a distinguished road
nice one mate !
i must say its a very nice and clean template, and i also think its good u did not use lorum ipsum ...
ppl can accualy read something now and see how the text looks

7.5 maybe 8 /10 nice1
Reply With Quote
  #4 (permalink)  
Old 10-07-2007, 09:05 PM
Junior Member
 
Join Date: Oct 2007
Posts: 4
TheBes7 is on a distinguished road
Nice one admin.
Reply With Quote
  #5 (permalink)  
Old 10-07-2007, 11:39 PM
Member
 
Join Date: Feb 2007
Posts: 57
matthewgrainger is on a distinguished road
Very Nice, Thanks i have a good result from this!
__________________
StudentMeh.co.uk - Next Generation Student Networking!
Reply With Quote
  #6 (permalink)  
Old 10-07-2007, 11:46 PM
mazafaka's Avatar
Member
 
Join Date: Jan 2007
Location: KOSOVO
Posts: 32
mazafaka is on a distinguished road
Send a message via AIM to mazafaka Send a message via MSN to mazafaka Send a message via Yahoo to mazafaka
woowww nice job i like it
Reply With Quote
  #7 (permalink)  
Old 10-08-2007, 11:44 AM
Member
 
Join Date: Feb 2007
Location: UK
Posts: 50
rsdene is on a distinguished road
great little layout Admin, keep up the good work !

regards,
Dene
Reply With Quote
  #8 (permalink)  
Old 10-08-2007, 01:56 PM
Junior Member
 
Join Date: Oct 2007
Posts: 2
BaCkSpY is on a distinguished road
thn.x alot my dear
Reply With Quote
  #9 (permalink)  
Old 10-08-2007, 04:14 PM
Junior Member
 
Join Date: Mar 2007
Posts: 22
infgfx is on a distinguished road
Wow this is a very nice Tutorial
Reply With Quote
  #10 (permalink)  
Old 10-08-2007, 06:34 PM
Junior Member
 
Join Date: Oct 2007
Posts: 1
TemporalBeef is on a distinguished road
Quote:
Originally Posted by Suicide Sam View Post
nice one mate !
i must say its a very nice and clean template, and i also think its good u did not use lorum ipsum ...
ppl can accualy read something now and see how the text looks

7.5 maybe 8 /10 nice1
Greeking or Jabberwocky or "lorum ipsum" as you called it, is invaluable for a designer. It allows you to fill the space where copy is supposed to be, without having to take all the time to actually come up with it yourself.

If you're working on a website for a client, you just want to establish the style for the website for them. Odds are, you won't be the copywriter either (and if you are, you'd better charge more for that as well).

Plus, let's say you come up with a concept for the website for the client. You include all of your own text, text that you came up with yourself that probably took an hour or more to write. You send the client your proposal, doesn't like your design, but then takes everything that you've written in your concept. He's basically stealing a service from you. And you're wasting time (and time is money in this business.)

My advice as a pro: use jabberwocky.


Last edited by TemporalBeef; 10-08-2007 at 06:37 PM.
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:37 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