Counter-Strike Clan WebSite Design Tutorial

Start a new document size 800×600 with a
background color of #131313. Select the “rectangular marquee tool” and
draw a rectangle three quarters of the way down from the top fill with
the color #222222 and add a 1 pixel black stroke to it. You should have
something like this.



Now
draw a rectangle at the top about 20-25 pixels high and as wide as your
document, fill this rectangle with a gradient 2 types of grey also add
a 1 pixel black stoke. You should have something like this.



Select the type tool and add some important text like this.



Now
go to google images or a wallpaper gaming site and get some images of
the game your clan is about, ive chosen a counter strike image i found
on google. Copy/paste & resize your chosen image to fit into the
right side of our bigger rectangle we created in step1, also add a mask
and drag your gradient over the image so the right side of the image
blends in with the background. Here’s how mine looks.



Also on my travels i found some 3D models of some counter-strike characters which ive cut out and placed on my rectangle.



Now
lets add our clan title, logo and slogan, select the type tool and type
your slogan and name of clan and place it next to where the models are,
please experiment with the layer styles, ive just added a 1 pixel
stroke onto my main title and used the counter-strike logo for my logo.
Here’s mine.



Select
the rectangular marquee tool again and draw a rectangle under your clan
images fill with a gradient (2 types of grey). Also add a 1 pixel black
stroke. This will be our navigation, also add your site sections like
server details, links etc…



We
could also add maybe some little graphics by the side of our text to
make our navigation abit more interesting. The little graphics are just
the counter-stike logo resized down and inverted with the opacity
lowered.



The
main part has been done, the content il leave for you to do but here
are two examples ivee for you to look at. My content boxes are just
light grey rectangles with a 1 pixel stoke. Off course there are many
ways you can make good looking content boxes, just let your imagination
do the thinking.



blue: