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 04-02-2007, 08:00 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,340
Blog Entries: 2
admin has disabled reputation
112 Advanced game layout

Hello

Today i will create Tutorial number 112 from 500 Tutorials Marathon.
I will create another game layout, with more details.



For this you need to download the following image because we will create a pattern



Open in this image in photoshop, then go to Edit > define pattern

Then create another document
Size : 760 X 770 pixels
Background color: white

Select paint Bucket tool, select the pattern you have created above
Then press one time on your canvas



Select Rectangle tool, and create some rectangles



Now it is time to download one layer style for attachment area.
For this you need 10 posts. in case you create duplicated posts your account will be banned ( also your IP and e-mail ) for life
please do not spam !!!

Load the layer style into photoshop and apply the same layer style for all shapes



Now comes the funny part. Almost all layouts have details. I recommend you to add as many details you can, In this way your game templates will look 100 times better
So please create a new document with a gray color, or black if you want.
The size of this document can be 300 X 300 pixels

Now create a new shape with rounded rectangle tool ( set the radius size to 30 pixels )



Rasterize this layer ( layer > Rasterize > Shape )
Zoom this document to 400 %
Select Rectangular Marquee Tool and make a selection on your shape



Then be sure you have this layer selected and press " Delete on your keyboard "
Then Press CTRL+D to deselect



With the same technique delete another parts of the shape

My result



Select Polygonal Lasso Tool and make the following selection



Then hit Delete on your keyboard



Select Rounded Rectangle tool, and create some shapes ( place this layer shapes above the background layer> You can notice that i have used different colors for each layer so you can see better how many layers i have created



Now for all this layers add the following layer style





I will zoom out to 100 % and you can see my result



Select Line Tool ( set the weight to 1 pixel ) and create one line with White color



Press on " Add layer mask Button "



Select Gradient Tool
Use the following settings:



Then make a small line from right to left ( follow the red arrow )



Duplicate this line a few times and place it like me



Select ellipse tool , and make a small circle



For this circle please add the following layer styles







This is my result



Select line tool ( set the weight to 1 pixel ) and create another lines with a black or dark color



Select Pen Tool , use the following settings :



Create a new layer ( press CTRL+SHIFT+ALT+N )
And start creating a path with Pen Tool ( a great tool )



Set the foreground color to White, Select a 1 pixel brush , then go to Path palette.
Note : Brush tool must be selected
And press on the " Stroke path with Brush "



This is my result



If you want you can add more wires



Now select all the layers, ( without background layer ) and press CTRL+E
This will merge all the layers into a single one

Drag this layer on your layout and place it like me



Duplicate this layer a few times , rotate the layer or you can flip and place it where do you think it looks nicer



Now create another rectangles on your layout. You can add also some images if you want



For all this rectangles add the same layer style





This is my result



Now you can add alone some text and some images. Or you can download some free logos from www.free-photoshop.com
this is my final result



I hope you like it.
If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
This Layout is available for download only for VIP members.

Attached Files
File Type: zip goodies.zip (20.8 KB, 560 views)
__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 04-02-2007, 08:05 PM
MemePop's Avatar
Junior Member
 
Join Date: Mar 2007
Posts: 7
MemePop is on a distinguished road
Thumbs up ^o^ So cute

I like this ...

Thanks
Reply With Quote
  #3 (permalink)  
Old 04-02-2007, 08:48 PM
Junior Member
 
Join Date: Apr 2007
Posts: 20
Bruce is on a distinguished road
OOOO PSI OPS nice
Reply With Quote
  #4 (permalink)  
Old 04-03-2007, 12:26 AM
Junior Member
 
Join Date: Apr 2007
Posts: 20
matty13 is on a distinguished road
Gaming layout is brilliant i love this!
Reply With Quote
  #5 (permalink)  
Old 04-03-2007, 11:51 PM
Junior Member
 
Join Date: Mar 2007
Posts: 22
CaptainMorgan is on a distinguished road
very cool.
Reply With Quote
  #6 (permalink)  
Old 04-04-2007, 05:50 AM
Junior Member
 
Join Date: Mar 2007
Posts: 2
micro3d is on a distinguished road
I love this. Looks like more work was put into it then there actually was. Which is a good thing!
Reply With Quote
  #7 (permalink)  
Old 04-04-2007, 06:11 AM
Junior Member
 
Join Date: Mar 2007
Posts: 17
ender is on a distinguished road
that's cool,sir!!!!!
Reply With Quote
  #8 (permalink)  
Old 04-04-2007, 10:13 AM
Junior Member
 
Join Date: Apr 2007
Posts: 10
arctic is on a distinguished road
very nice =) i like it
Reply With Quote
  #9 (permalink)  
Old 04-04-2007, 12:44 PM
Junior Member
 
Join Date: Apr 2007
Posts: 28
djven_om is on a distinguished road
Thanx for this amazing tutorial
Reply With Quote
  #10 (permalink)  
Old 04-04-2007, 04:36 PM
Junior Member
 
Join Date: Apr 2007
Posts: 13
frozenravage is on a distinguished road
Very interesting, Looking forward for other tutorials

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:31 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