Photoshop  Home Photoshop Web Layout Clan Template
rss

Clan Template

Author: PhotoshopStar More by this author


1. New document

First create a new document about the size of a clan template(820×980).

Fill the background with #1F292C

2. Main stuff

Put the grid on (View > Show > Grid) then change the grid size to 10 pixels (Edit > Preferences > Guides, Grid & Slices…)

Make a selection taking up the whole height of the document but 10 pixels from each edge.

image 1

Create a new layer and fill it with the same color as the background.

Apply these Layer Styles:

Outer Glow:

image 2

Inner Glow:

image 3

Stroke:

image 4

image 5

3. Sidebar

Create another new layer and make a selection all the height of the document but only 10 pixels in width, move it 2 pixels from the left side

image 6

Fill this selection with the same color as the background color again (#1F292C)

Apply these Layer Styles:

Inner Shadow:

image 7

Gradient Overlay:

image 8

Pattern Overlay:

image 9

Result:

image 10

4. Merging the sidebar

Create a new layer & leave it blank, click the empty box to the left of the first sidebar layer

image 11

And hit Ctrl+E

This will merge the layers so the original no longer has layer styles in it

5. Right sidebar

Duplicate the first sidebar, flip it horizontally (Edit > Transform > Flip Horizontally) then move it to the opposite position.

image 12

5. Header

Create a new layer and make the selection, about 120-140px in height, and 2 pixels away from the edges of the sidebars (My banner was 772×140 in diameter)

image 13

With the selection of the banner still in place, make a new layer and apply Filter > Render > Clouds

Set the layer mode to Soft Light and change the opacity to about 40%

image 14

Create another new layer and brush a little, erase some of the brushing or lower the opacity, no need for excessive brushing either.

image 15

Add a Counter-Strike level into the background and erase some bits then change the opacity if needed.

image 16

Add text:

image 17

(Font is called BigNoodleTitling)

5. Navigation

1 pixel underneath the banner make a selection sized 772 by 30, fill the selection with #1F292C, apply these layer styles:

Inner Shadow:

image 18

Gradient Overlay:

image 19

Pattern Overlay:

image 20

Result:

image 21

Add some basic navigation text

image 22

(Again the font is BigNoodleTitling, I also used similar layer styles as the sidebars and nav bar.)

5. Content Area

Duplicate the navigation bar and make it a bit smaller (About 20px in height)

Write similar text on it like the navigation bar, write "Content".

Create a selection 1 pixel underneath the content bar and fill it with a lighter color (#273235)

image 23

The result

For the text and anything else I may not have explained properly, the .PSD can be found: here



Author's URL: www.photoshopstar.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Clan Template"