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-17-2006, 04:57 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
55 Car Dealer Layout

Hello

This is the Tutorial number 55 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

Today i will show you how to create a template / layout for a car dealer website



Open a new document ( 760 x 770 pixels ) with a black Background #333333

Then add a simple image with a car



Select Single Column Marquee Tool and make a selection like in the following image



Then go to Layer > New > Layer via Copy
Select Move Tool and change the Horizontal Scale until you will have all the header filled





Now Select on more time Single Column Marquee Tool and make a selection on the right side of the car. ( be sure you have the layer car selected )



Again go to Layer > New > Layer via Copy and change the horizontal scale until you will fill the right side of the header



We have created a nice header from your stock image. You can use any image you have/ I will wait to see some of your results

Now let's add a logo. Grab Ellipse Tool and make a shape



Then add the following layer styles ( please save this layer style because we will need it later - when you save it please chose a name for this layer style - I have used Border Layer Style )







This is my result



Duplicate this shape and make is smaller. Then add the following layer styles (The same you can save this layer style and name it Middle layer style )







This is my result



I will add some text and some stars ( you can find the stars in Custom Shapes )

Here are the layer styles used for text and stars





Gradient color for Gradient Overlay settings:





Gradient color for Stroke settings:



This is my result:



Select Rounded Rectangle Tool ( set the Radius to 3 pixels ) and create 6 buttons



The add the same layer style you have used for CAR DEALER TEXT

This is the outcome



Select Line Tool ( change the foreground color to #04baef ) and start drawing some lines , and add some text for our buttons



Select one more time Line Tool. Change the weight to 7 pixels and make a line like in the next image



Grab the Rectangle Tool and make some Rectangles on your layout



I have used this simple layer style for this rectangles



Now add some text and some images



Now you can add more details, for example you can add some lines with Line Tool ( set the weight to 1 pixel )
Or you can add some dot lines with type tool.

This is my final layout



If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
I hope you like it.

Attached Files
File Type: zip layout55.zip (770.0 KB, 965 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-18-2006, 10:07 PM
Junior Member
 
Join Date: Nov 2006
Posts: 24
jokeru is on a distinguished road
wow, nice looking template.10x.
Reply With Quote
  #3 (permalink)  
Old 12-19-2006, 01:12 AM
Member
 
Join Date: Oct 2006
Posts: 38
ibeeback is on a distinguished road
i love this page
Reply With Quote
  #4 (permalink)  
Old 12-19-2006, 03:38 AM
Gee Gee is offline
VIP Member
 
Join Date: Dec 2006
Posts: 10
Gee is on a distinguished road
Im convinced that i have really found the right forum! Its amazing how fast im learning from you guys! Great job!
Reply With Quote
  #5 (permalink)  
Old 12-19-2006, 05:38 AM
Munch's Avatar
Junior Member
 
Join Date: Dec 2006
Location: St. Louis
Posts: 10
Munch is on a distinguished road
Hot

Tha's so hot, is there any way that you can help me design a t-shirt page for my site. www.munchdawg.com
__________________
Munch Dawg Productions
Reply With Quote
  #6 (permalink)  
Old 12-20-2006, 03:12 AM
Lukeintosh's Avatar
VIP Member
 
Join Date: Oct 2006
Location: I live in New Zealand
Posts: 249
Blog Entries: 13
Lukeintosh is on a distinguished road
Send a message via MSN to Lukeintosh Send a message via Yahoo to Lukeintosh
√√√√1/2 out of √√√√√ welldone for the grate effort you have put in to making these tutorals WELLDONE!!!
Reply With Quote
  #7 (permalink)  
Old 12-20-2006, 08:02 PM
Junior Member
 
Join Date: Nov 2006
Posts: 1
sparshdesigner is on a distinguished road
i love this type design
thanks
Reply With Quote
  #8 (permalink)  
Old 12-20-2006, 10:51 PM
Junior Member
 
Join Date: Dec 2006
Posts: 2
javo3p is on a distinguished road
Hey

Nice Tutorial
Reply With Quote
  #9 (permalink)  
Old 12-21-2006, 03:20 AM
Junior Member
 
Join Date: Dec 2006
Posts: 22
Rad1h is on a distinguished road
I like this tutorial, very PRO!
Reply With Quote
  #10 (permalink)  
Old 12-21-2006, 11:31 AM
Junior Member
 
Join Date: Dec 2006
Posts: 5
kattos is on a distinguished road
ver nice layout, thanks !!

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 03:07 PM.


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