HV-Designs.co.uk

October 2nd, 2007 in Photoshop Tutorials by Richard Carpenter

Clan Website Design Tutorial

• Share

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 ive made 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. (click images for a bigger version)

• Share