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

Reply
 
Submit Tools LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 12-29-2006, 06:00 PM
admin's Avatar
Administrator
 
Join Date: Sep 2006
Posts: 1,330
Blog Entries: 2
admin has disabled reputation
61 Soccer / Football Template

Hi Again. Today is another day, this mean we have a new tutorial

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

I will create a sport layout. There are only a few templates available on the net that's why i will create one



Create a new document in photoshop
Size 760 X 770 pixels
White background

We have to create a new grass pattern . maybe someday i will show you how to create patterns from scratch

Today we will use the following image



Open this image in photoshop
Click on CTRL+A ( this will select your image )
Go to Edit > Define Pattern...
Chose a name for your pattern and press ok

Now let's come back to our soccer template

Create a new layer ( press CTRL+SHIFT+ALT+N )
Grab Paint Bucket Tool
Select your grass pattern



Then click one time on your canvas. I will not show you my result because this is a very simple step

Then Go to Filter > Render > Lightning effects and use the following settings



This is my result



Create a new layer ( press CTRL+SHIFT+ALT+N )
Now grab your Rounded Rectangle Tool and create a shape on your grass
Set the radius to 15 pixels



Then apply the following layer styles for this rectangle layer







This is my result



Now Hold The CTRL key pressed and with the left mouse button click on the layer thumbnail



This will create a selection



Select Elliptical Marquee Tool, press on Subtract from selection



Then start subtracting from your initial selection like in the following image



When you will release the mouse button you will have this result



Now Create a new layer ( press CTRL+SHIFT+ALT+N )
Select paint bucket tool , and fill your selection with white



Then press on CTRL+D to deselect
And change the layer opacity



This is my result



Now you have to add some text buttons on your layout



Then select Rounded rectangle Tool ( set radius to 5 pixels ) and create a new rectangle
Be sure you will drag this layer under the big shape layer
You can add the same layer settings as above



Now select this 2 layers ( first layer is the text layer with buttons , and the second one is the shape you have already created )



Duplicate this layers, ( to duplicate this layers you have to drag them to the " Create new layer " button
Then be sure you have selected this 2 new layers ( copies ), and press on CTRL+E ( you will merge the layer into a single one )

Then drag the new merged layer to the top of your layer palette



With this layer selected go to Edit > Transform > Flip Vertical
Then move down your flipped layer with your arrow keys ( keyboard keys )



Now press on Add layer mask
Select Gradient tool and make a small line like in the following image ( from top to bottom )



This is my result



As you see we have created a nice reflection but our initial buttons are hidden . We will fix this problem right now



Select Eraser Tool , Chose a square brush , and start deleting ( you can hold down the SHIFT key when you will delete with Eraser tool )



This is my result




Now we will add some text. You can add your text alone. it is not so hard
You have seen that in the next images i have added another rectangle
You know already how to add a rectangle



Now i will add also some images , and also a text logo.



Of course we will add another details
For example i think it will look very good with a nice shadow under the big shape

Select Rounded Rectangle Tool . set your foreground color to a dark grey and make a simple shape like in the following image



With this layer selected go to Filter > Blur > Gaussian Blur ,
Photoshop will ask you if you want to rasterize the shape. Press OK
and use the following settings



This is the result



Now let's add also some shadow for the big ball

Select Ellipse Tool and create a shape ( place this layer under the ball layer in your layer palette )



Then go to Filter > Blur > Gaussian Blur and use the same settings as above
this is my result



Now you can add also some simple details. For example i will select my Type Tool and i will write on my canvas some simple minus signs " --------- "



Then i will add alone another details. This are only stock images.
This is my final sport template



I hope you like it. This layout is only for VIP members

__________________
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )
Reply With Quote
  #2 (permalink)  
Old 12-29-2006, 08:29 PM
zoro's Avatar
Junior Member
 
Join Date: Dec 2006
Posts: 20
zoro is on a distinguished road
Very cool.. I like that admin, because I like soccer.
__________________
Live is candy.
Reply With Quote
  #3 (permalink)  
Old 12-29-2006, 09:01 PM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
Admin, you are so skilled.. its disgusting...thanks for another great tut, I'll be posting my result later
Reply With Quote
  #4 (permalink)  
Old 12-30-2006, 12:49 AM
Junior Member
 
Join Date: Oct 2006
Posts: 10
SEIKOWARRIOR is on a distinguished road
aah , the header is bad
Reply With Quote
  #5 (permalink)  
Old 12-30-2006, 03:22 AM
oterror's Avatar
Senior Member
 
Join Date: Dec 2006
Posts: 103
oterror is on a distinguished road
Here is my version

Reply With Quote
  #6 (permalink)  
Old 12-30-2006, 11:52 AM
Junior Member
 
Join Date: Dec 2006
Posts: 10
arquebus is on a distinguished road
that is my style.Thanks.That is exactly what i am looking for
Reply With Quote
  #7 (permalink)  
Old 01-01-2007, 08:38 PM
Senior Member
 
Join Date: Dec 2006
Location: i live in norway
Posts: 312
haavard29 is on a distinguished road
Good tutorial I like it Admin..
Reply With Quote
  #8 (permalink)  
Old 01-02-2007, 10:36 PM
Junior Member
 
Join Date: Jan 2007
Posts: 10
Albi_Boy_Fitim is on a distinguished road
Good job...
Reply With Quote
  #9 (permalink)  
Old 01-03-2007, 12:02 PM
Junior Member
 
Join Date: Jan 2007
Posts: 10
haist is on a distinguished road
n1 tutorial
Reply With Quote
  #10 (permalink)  
Old 01-03-2007, 03:03 PM
Junior Member
 
Join Date: Dec 2006
Posts: 11
NeO4DeSiGn is on a distinguished road
very nice man i learn many things from this Tutorials thank you

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 12:24 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