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 01-12-2007, 07:50 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
68 Game layout

Hello

This is the Tutorial number 68 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 Game Layout

Open a new document in photoshop
Size: 760x770 pixels
Background color: #333333

Select rectangular marquee Tool and create a big rectangle like in my following image



Go to Edit > Transform > Warp

And use the following settings:



After you will hit enter this will be the result



Now i will create a carbon fiber pattern
( To learn how to make a pattern please visit this link:
Professional Patterns for General Use )

To create a new pattern please open a new document in photoshop ( 4 x 4 pixels )
Zoom this document to 1600 % and with the pencil tool create small dots with the colors you will see i the next image



Then Go to Edit > Define Pattern...
Chose a name for your pattern and press Ok

Close this document and let's go back to our template

We will add now some layer styles for the white shape





Now you have to use the carbon fiber pattern




This is my result



Duplicate this shape, and change the size with the transform tools
Set the vertical scale to 90 % , then hit Enter



This is the result



We have to change the layer styles for this layer. So please add the following layer styles















This is my result



Now we will add more details.

I will add a stock image



Now create a new document
The size must be 350 X 1 Pixel with a transparent background


Select Gradient Tool, Set the following gradient



A few Thousand Gradients you can find in Talk-Mania Big-Pack

Create a new layer ( press CTRL+Shift+ALT+N )
Then with the gradient Tool Make a line from Left to right while you keep the SHIFT key pressed

this is the result



Now drag this layer on your game layout
Duplicate a few times , and place it like me



Now we will add the same lines on the right side of the layout but with a different technique

Create a new layer ( press CTRL+SHIFT+ALT+N )
Select rectangular marquee tool , and make a thin selection
You can use the fixed size



Then make the selection on the layout



Select Gradient Tool ( set to reflected gradient ) and draw a line from the middle of your selction to bottom
Then press CTRL+D to deselect and this will be your result



Add as many lines you want. I will add another one on the right side
Then i will add also some text buttons on the left side



Now you can add a text logo
On your text logo you can add the following layer styles





This is the result



You can add as many details as you want. This is my final result


Attached Files
File Type: zip layout68.zip (708.3 KB, 1046 views)
File Type: zip fonts.zip (37.0 KB, 713 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 01-12-2007, 10:09 PM
Junior Member
 
Join Date: Oct 2006
Posts: 3
WesleyX100 is on a distinguished road
wow cool tank you so mutch
Reply With Quote
  #3 (permalink)  
Old 01-13-2007, 06:02 AM
Junior Member
 
Join Date: Jan 2007
Posts: 26
Nizoo is on a distinguished road
Really nice... and plzz keep making Game Layout.. like Counter Strike Source and more ^^ Thx Alot .. keep up the good work
Reply With Quote
  #4 (permalink)  
Old 01-13-2007, 01:41 PM
Junior Member
 
Join Date: Jan 2007
Posts: 11
php4ever is on a distinguished road
Very nice, i was searching for a tut like this.
Only the font in the menu isn't a good choice.
Reply With Quote
  #5 (permalink)  
Old 01-13-2007, 05:10 PM
Junior Member
 
Join Date: Jan 2007
Posts: 6
Sophie16 is on a distinguished road
very nice indeed
Reply With Quote
  #6 (permalink)  
Old 01-13-2007, 11:23 PM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
I have to try this one, ill be posting my result later
Reply With Quote
  #7 (permalink)  
Old 01-14-2007, 09:23 AM
Junior Member
 
Join Date: Jan 2007
Posts: 10
aznvdz_ is on a distinguished road
that is BLOODy AWESOME its Simple yet effective
Reply With Quote
  #8 (permalink)  
Old 01-14-2007, 01:02 PM
Junior Member
 
Join Date: Dec 2006
Posts: 9
ahmad is on a distinguished road
it is really amazing


thank you mr.admin
Reply With Quote
  #9 (permalink)  
Old 01-14-2007, 08:33 PM
Junior Member
 
Join Date: Jan 2007
Posts: 7
Bjoerk is on a distinguished road
i am trying this layout but could you tell me wich font you used for the buttons because its a nice font
Reply With Quote
  #10 (permalink)  
Old 01-14-2007, 08:50 PM
Member
 
Join Date: Oct 2006
Posts: 38
ibeeback is on a distinguished road
thanks looolllllllll

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