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 05-12-2007, 07:02 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
118 General website layout

Hello

Today i am going to create Tutorial 118 from 500 Tutorials marathon

We will create a business layout,

So open a new document in photoshop
Size : 760x770 pixels
background color : white

Select Rectangle Tool and 2 simple shapes



For the top shape please add the following layer style





Then Rasterize this shape ( Layer > Rasterize > shape )

Select line Tool. ( set the weight to 1 pixel )
Set the foreground color to #282828 and create a line on the middle of the top shape
Then add the following layer style for this line



This is my result



Now it is time to go to www.free-photoshop.com and download the Globe pack. You can see there a nice set of globes.
You can find this set of globes in PSD Logos
Download this set of Globes and add one which you like on the header of your layout



Then under this globe add a Simple rounded shape



For this shape behind the globe , add the following layer styles







This is my result > you can see that i have added also some text on the header



Now select the Line Shape , and rasterize the Line



Then choose Eraser tool, Select a big rounded brush, and delete some parts of the line near the globe



Select Rounded Rectangle Tool , Set the radius to 20 pixels , and create a simple shape on the right side of your layout



Then add the following layer styles







This is my result



Then duplicate this layer a few times and with the arrow keys place the duplicated shapes like me.
Note : to duplicate a layer , first you need to select it then press CTRL+J



Now add some text over this shapes



Now select rectangle Tool , and create a small rectangle



Go to Edit > Transform Path > Warp ( this option you have it only on CS2 or above )
Use the following settings



After you hit " Enter " your shape should be like mine



Create a small circle with Ellipse Tool and place it like me



Then place the last shape we have created like me



Then duplicate the small circle and place it on the other side



For the small circle from right side please add the following layer style



This is the result



Now select the small circle from the left side and add the following layer style



This is the result



Now for the arch , add the following layer styles









This is my result



Duplicate this 3 elements ( the circles and the arch a few times and place them like me )



Now let's add a image on the empty white place. I will add a 3D render. Please add your own images,



Now set your foreground color to White, Select Line tool, Set the line weight to 3 pixels, and make some line on your header



Then near this 3 pixel lines add another lines. this time be sure the lines will have only one pixel



Select Rounded Rectangle Tool , Set the radius to 30 pixels and make a big shape



Now add the following layer styles for this shape





Then select one more time Rounded rectangle tool , set the radius to 210 pixels, and create 2 shapes like me



For this 2 shapes add the following layer styles









This is my result



Now on your layout please add alone some text



Then duplicate the small circles and the arch a few times and place it on the left side of your layout



Then you can add between your text buttons some dots
You can create this with a pattern or you can simple use the type tool.
Alternatively you can download the Brush #1 fromwww.free-photoshop.com



Now please add another shape on the header with Rounded Rectangle tool ( radius = 20 pixels )



And after that please add some text



This is my final product



I hope you like it. If you want to download this PSD file please register,and you can download all the files from Talk-mania.com except the VIP files ( the VIP files will cost you 29,95 $ )
If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack

Attached Files
File Type: zip layout118.zip (2.83 MB, 1179 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 05-12-2007, 07:06 PM
FallenSage2007's Avatar
Member
 
Join Date: Mar 2007
Location: USA
Posts: 43
FallenSage2007 is on a distinguished road
I like it all expect the colors of the 3D render it just doesn't seem to match well with the rest of the site but that's easy to change.
Reply With Quote
  #3 (permalink)  
Old 05-12-2007, 07:19 PM
Turbocharged_06's Avatar
VIP Member
 
Join Date: Mar 2007
Posts: 151
Turbocharged_06 is on a distinguished road
Quote:
Originally Posted by FallenSage2007 View Post
I like it all expect the colors of the 3D render it just doesn't seem to match well with the rest of the site but that's easy to change.
i agree everything is nice but the 3d render
good job though admin keep up the excellent work
__________________
OUTLAW-WEB.NET
Reply With Quote
  #4 (permalink)  
Old 05-12-2007, 07:57 PM
Junior Member
 
Join Date: May 2007
Posts: 20
allenl is on a distinguished road
Cool layout. Thanks.
Reply With Quote
  #5 (permalink)  
Old 05-12-2007, 08:44 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
I agree with you guys. the render doesn't look to good, but i was in a hurry. i am working on some new features for talk-mania and i was to lazy to search in my collection for a good image
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #6 (permalink)  
Old 05-12-2007, 11:04 PM
-AjAMz BoY-'s Avatar
Member
 
Join Date: Feb 2007
Location: bahrain
Posts: 34
-AjAMz BoY- is on a distinguished road
Send a message via ICQ to -AjAMz BoY- Send a message via AIM to -AjAMz BoY- Send a message via MSN to -AjAMz BoY- Send a message via Yahoo to -AjAMz BoY-
Professional Layout But Same Here Didnt Like The Render, Thanks Hard Worker
__________________
England Pride.. United God.. Madrid King.. Brazil Fan..
Reply With Quote
  #7 (permalink)  
Old 05-13-2007, 06:21 AM
wfdgraeme's Avatar
Member
 
Join Date: Apr 2007
Location: east coast of Australia
Posts: 79
wfdgraeme is on a distinguished road
I like the layout the 3d render is a choice, but overall it's smooth and works for me...
Reply With Quote
  #8 (permalink)  
Old 05-13-2007, 01:30 PM
Junior Member
 
Join Date: Feb 2007
Posts: 11
Modnaja is on a distinguished road
Awsome layout.
Reply With Quote
  #9 (permalink)  
Old 05-14-2007, 01:00 AM
PageWizz's Avatar
Junior Member
 
Join Date: Feb 2007
Location: Haiti
Posts: 19
PageWizz is on a distinguished road
Send a message via MSN to PageWizz Send a message via Yahoo to PageWizz
Great layout, but i don't really like the choice of the 3D render although it renders great with the design.
Thanks,
PageWizz

Last edited by PageWizz; 05-14-2007 at 01:04 AM.
Reply With Quote
  #10 (permalink)  
Old 05-14-2007, 08:24 AM
Junior Member
 
Join Date: May 2007
Posts: 4
xtreme68 is on a distinguished road
Awsome layout

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 02:07 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