Creating a clan or gaming layout with Photoshop CS [html]

Step 1: Banner

Create a new document. Make it 780x600. I made it this resolution, as it will fit in almost all common resolutions. 1024x768 is the most common resolution, and then 800x600 after that. So, you design the layout, which will be functional in both. Select a horizontal area across your banner. You can make this as small or as large as you want, it will be your banner.

Insert a screenshot of the game for which the layout is based around, make sure its on a new layer. I inserted a screenshot of counter-strike: source.

Next on a new layer, on the top edge of the banner, I drew a double pixel line, with a single space in the middle, across the length of the banner.

Now, we're temporarily going to minimise this document.

Create a new document. Make its dimension 3x3 pixels. Zoom in to the maximum level, and fill in the following squares with similar colours:

Now, on the layer with your double pixel border, use the magic wand tool, to select the one pixel gap in between. Next, select your paint bucket tool. Up the top, select ‘pattern', and choose your pattern from the drop down menu.

Duplicate this layer, and drag it down to the bottom of the banner, so that the banner image is enclosed by the two borders.

Click Layer > merge layers, and merge the two borders into one layer. Name this layer “banner_border”.

Now, making sure you have selected this new banner_border layer, use your magic wand tool to select the space in between them.

Presuming you did everything correctly, it should select the screenshot that you pasted in the beginning.

Create a new layer.

Now, at this point, I'm going to create another pattern for use inside the banner. I created another new document, 3x3 pixels, and put in the following colours:

Click edit > define pattern

Paste this pattern, on your new layer, inside the marquee covering the banner.

It should look like this; your screenshot will be obscured:

With the elliptical marquee tool (the circle), select an area similar to this:

Now click select > feather.

I made my feather 50 pixels. Click OK.

This will contort your selection slightly. Now click edit > clear. It should appear something like this:

You can adjust your opacity slightly if you wish.

Now we're going to insert a character model from the game into the banner. I'm using this guy here:

Using the pen tool, cut your character out.

1. Use this (pen tool)
2. Select this.

This tool is perfect for creating curves around objects. This is how it's done: Click two points, around the part that you want to curve.

Now create a point somewhere near the centre.

Control + click this point, and drag it to create a curve.

Do this to cut out your model completely.

Once you're done, right click, and select make selection. I feathered mine slightly (5px).

Copy and paste this into your banner. I put mine below the pixel gradient layer. I also adjusted the opacity of my screenshot slightly.

Select the text tool, and type your clan name.

I ended up deciding on a font called “bones bummer” downloadable from dafont.com

.

And that's the end of part one. You have successfully created a banner, and text.

Step 2: navigation

Create a new layer, and on it, make a selection similar to this:

Select your gradient tool. You might have to hold down the paint-bucket first, and select it from the drop down menu. Select colours in your palette, similar to this:

Drag the gradient tool (holding down shift), and try to get a subtle gradient. I also added a 1px black line to the bottom of mine, on a new layer.

I used a pixel font to put on my navigation.

Part 3: Body and background

To begin with, I'm going to add a background. Currently, I've kept it white, but I think it would look better as a pixel pattern.

Select your background layer, and select the black and dark grey pattern you made before.

Paste it on the background layer.

Now its time to create the body area.

Select, on a new layer, a selection similar to this:

With similar colours to the ones you used for your navigation, Create a vertical divider. Mine ended up like this:

I added some Lorem Ipsum, and a fake news title.

I also added a latest results section.

And that's currently all. Later on, I will add a section on how to export your website, and how to make a validating html file.