Web Content $0.006/word Register Domain
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

Reply
 
Submit Tools LinkBack (39) Thread Tools Display Modes
  39 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 06-17-2007, 12:10 AM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,223
Blog Entries: 2
admin has disabled reputation
123 Chopper layout

Hello

Today i am going to make Tutorial Number 123 from 500 Tutorial Marathon
I will show you how to create a Chopper layout.
This is the final layout



Now let's start with a new document.
Size : 760 X 770 pixels
background: white

Select Gradient Tool. And use the following settings:



Then draw a line from top to bottom



Select Rounded rectangle tool. Set the radius to 5 pixels
And create a shape in the middle of your layout



The color is not important.
Now add the following layer style for this shape







This is my result



Then with rectangular tool create a rectangle and place it in the middle of the other one



For this red shape please add the following layer style







This is my result



Now with the same tool, ( rectangular tool ) create another shape



For this white shape please add the following layer styles







This is my result



Now duplicate this Shape ( to duplicate be sure you have the layer selected in layer palette then press CTRL+J )

Select Move Tool ( or press V ) and with your arrow keys move the duplicated layer a little above.
then add the following layer styles ( after i will add this layer styles you will see where you have to move your duplicated shape )







This is my result



Now Select Elipse Tool , and create a simple circle



For this circle add the following layer styles







This is my result



Create another circle shape and place it in the middle of the last one
I will use a blue color. So you can see better what i am doing



Now for this blue circle add the following layer styles







This is my result



Next step is to find a nice render with a chopper, then add it on your layout



Now select Rectangle Tool and make some white rectangles.



Then select all the layers in layer palette



After you have all this white shape layers selected please pres CTRL+E ( this command will merge all the layers into a single one. and in the same time the layer will be rasterized.



Now grab Elliptical Marquee Tool and make a selection on top of your layout



Be sure you have selected the layer with white shapes , the hit Delete Key from your keyboard.
Then press CTRL+D to deselect



Now for this white shape, please add the following layer style





This is my result



Now i will add alone some text and images



Soon on www.Free-Photoshop.com will be placed a nice set of stars brushes. Or if you have some nice brushes please use your own brushes.

Load this brushes, then on a new layer ( to create a new layer press CTRL+SHIFT+ALT+N ) use this star brushes to add some nice light effects

This is my final result



If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
Thank you

Attached Files
File Type: zip layout123.zip (915.8 KB, 1670 views)

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 06-17-2007, 12:29 AM
wfdgraeme's Avatar
Member
 
Join Date: Apr 2007
Location: east coast of Australia
Posts: 87
wfdgraeme is on a distinguished road
Thumbs up Club layout

Great idea, has a lot of uses, just love your use of gradient's, again I have learned...about simple style...
Reply With Quote
  #3 (permalink)  
Old 06-17-2007, 02:14 AM
Junior Member
 
Join Date: Jun 2007
Posts: 20
pozer is on a distinguished road
learnt a lot from this tutorial
Reply With Quote
  #4 (permalink)  
Old 06-17-2007, 02:23 AM
Junior Member
 
Join Date: Jun 2007
Posts: 20
shage is on a distinguished road
bad @$$!!!!!!!!
Reply With Quote
  #5 (permalink)  
Old 06-17-2007, 04:57 AM
Junior Member
 
Join Date: Jun 2007
Posts: 26
leonardo91681 is on a distinguished road
So simple and yet so educational
Reply With Quote
  #6 (permalink)  
Old 06-17-2007, 07:13 AM
Member
 
Join Date: Oct 2006
Posts: 36
Ember is on a distinguished road
very elegant layout and very simple. I will give this one a try when I got the time and post up my result.
Reply With Quote
  #7 (permalink)  
Old 06-17-2007, 11:26 AM
Junior Member
 
Join Date: Jun 2007
Posts: 25
j-a-m-z is on a distinguished road
I Guess Its Different
Reply With Quote
  #8 (permalink)  
Old 06-17-2007, 02:15 PM
Junior Member
 
Join Date: Jun 2007
Posts: 20
Morfi is on a distinguished road
n1 good thx

n1 good thx
Reply With Quote
  #9 (permalink)  
Old 06-17-2007, 03:05 PM
Junior Member
 
Join Date: Jun 2007
Posts: 20
Ozzi91 is on a distinguished road
very nice!!!
Reply With Quote
  #10 (permalink)  
Old 06-17-2007, 11:18 PM
Junior Member
 
Join Date: Nov 2006
Posts: 28
igormath is on a distinguished road
Lightbulb excelent

Nice, easy and fore most educational. this site is educational i have learned much only by wisiting this site several time weekly.
Greetings.

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

LinkBacks (?)
LinkBack to this Thread: http://www.talk-mania.com/web-layouts/30388-chopper-layout.html
Posted By For Type Date
PHOTOSHOP, photoshopla arayz tasarımları 40 PHOTOSHOP TUTORIAL(ARAYZ TASARIMI İİN) ELEKTROSEYİR=>Wordpress||Program This thread Refback 09-26-2008 04:25 AM
Photoshop Tutorials Chopper Layout TipClique Tutorials This thread Refback 09-25-2008 12:52 AM
Kaoz-tutorials.com - Adobe Photoshop Tutorials This thread Refback 09-15-2008 06:54 PM
Kaoz-tutorials.com - Adobe Photoshop Tutorials This thread Refback 09-13-2008 05:56 PM
DigitalPlace Forum • Toon onderwerp - Lay-outs This thread Refback 09-04-2008 04:27 PM
DigitalPlace Forum • Toon onderwerp - Lay-outs This thread Refback 09-04-2008 03:53 PM
41 туториел для создания сайта | Дизайн-журнал №1. This thread Pingback 08-26-2008 01:54 AM
40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial] | Technically Personal! This thread Refback 08-24-2008 02:25 PM
40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial] This thread Refback 08-23-2008 06:54 PM
40+ 最好的Web界面设计教程 [Photoshop Tutorial] - 抓虾 This thread Refback 08-17-2008 08:19 AM
AggroPixel This thread Refback 08-15-2008 09:50 AM
AggroPixel This thread Refback 08-13-2008 05:21 PM
Axxyc Community - View topic - 40+ Greatest Web Interface Design Tutorials [Photoshop Tuto This thread Refback 08-11-2008 06:35 AM
41+ En muhteşem web arayüz dizay dersleri | The_Wolf | Official Web Page This thread Refback 08-09-2008 09:11 PM
Kaoz-tutorials.com - Adobe Photoshop Tutorials This thread Refback 07-30-2008 06:32 AM
AggroPixel This thread Refback 07-29-2008 05:16 AM
Technically Personal! - Part 3 This thread Refback 07-26-2008 01:19 PM
Photoshop Tutorials - All Photoshop tutorials This thread Refback 07-23-2008 11:06 PM
Tips & Tricks | 41+ En muhteşem web arayüz dizay dersleri This thread Refback 07-23-2008 05:17 PM
40+ 最好的Web界面设计教程 [Photoshop Tutorial] - 软件 - JavaEye新闻 This thread Refback 07-22-2008 02:23 AM
Photoshop ile yapılan en iyi web arayüzleri Sadece Bir Blog This thread Pingback 07-21-2008 07:05 PM
40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial] Not as cute as a crow … Not as light as a featHeR … This thread Refback 07-21-2008 01:27 PM
40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial] This thread Pingback 07-20-2008 01:05 PM
Top Ten Tutorials for June 2007 NI-Limits Blog This thread Refback 07-09-2008 11:18 AM
Photoshop Tutorials - All Photoshop tutorials This thread Refback 07-06-2008 02:47 PM
Photoshop - Web_Layouts Tutorials This thread Refback 07-05-2008 05:48 PM
AggroPixel This thread Refback 07-03-2008 12:01 PM
Forum graficzne GrafArt.org - Polish Graphic Board :: Moja pracka This thread Refback 07-03-2008 12:37 AM
TutalPhotoshop - Photoshop Tutorials: 10/19/07 This thread Refback 07-02-2008 05:35 PM
Untitled Document This thread Refback 07-01-2008 01:01 PM
AggroPixel This thread Refback 06-30-2008 10:07 AM
Top Website Design Layout Tutorials This thread Refback 06-28-2008 07:25 PM
Kaoz-tutorials.com - Adobe Photoshop Tutorials This thread Refback 06-28-2008 02:26 PM
Web Design This thread Refback 06-28-2008 02:18 PM
Chopper Layout This thread Refback 06-28-2008 01:02 AM
Photoshop Web Layouts Chopper Layout Tutorial This thread Refback 06-27-2008 11:58 PM
Photoshop Tutorials - Chopper Layout This thread Refback 06-27-2008 05:11 PM
Photoshop Tutorials - Web Templates This thread Refback 06-27-2008 03:16 PM
CG Tutorials: Adobe Photoshop: Web Design: Chopper Layout This thread Refback 06-26-2008 03:31 PM


All times are GMT +2. The time now is 07:59 AM.



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