[TUT][Photoshop]How to Create a Forum Skin

[Mind Freak]

At the end of this tutorial you should be able to create an internet forum skin, you will not learn how to code it, but simply design one.

Step 1

Open photoshop and create a new document, make the size 800px by 700px, I've filled the background colour with #c63d00, then got the gradient tool, created a new layout, selected the colour of #9e3100 and then dragged from the top of the layout downwards for about a quarter of the layout, it's a good idea to merge these two layers down(CTRL + E) and name this image 'Background' or something similar.

Here's a smaller version to get the idea across



Step 2

Now using the Rectangular Marquee on a new layer(top left of the tool bar, if it's not showing then right click the icon which is there) draw a decent size shape, this will act as the background for the forum skin.




Before filling it go to 'Select > Modify > Smooth' and use 4, this will create corners to the shape, fill it with a light background(white, grey or silver etc).

http://lulzimg.com/i/20ff346c.png[/slide]

Step 3

Let's add some pretty things to do the forum background, following the same path as smooth(Select > Modify) we're going to use contract instead, this will shrink the size of the previous shape used by how many pixels you type in, we're going to use 3pixels, you can only do this by selecting the preview shape, so using the magic wand select the forum bg we created and create a new layer to work on the next part, once contracted fill it with a similar colour to the other shape, but make it so we can notice a difference.





Step 4

Now select the shape with the white border, we're going to spice to whole border up with some blending options(Right click the layer and select blending options). Here are the exact settings i used, remember these are on the layer we're using as a border(The white one).

Drop Shadow



Inner Shadow




Gradient Overlay




One more thing we'll do on the whole border graphics is add a white 1px line around the other layout(this is the one we contracted earlier) we do shift by using the blending options again, so right click the layout and select blending options then enter the below settings in the 'Stroke' tab.



Here's a bigger preview of the whole skin we're created so far, I've also changed the inner layout to a white colour now, so we can the border clearly, you might want to do the same thing.



Step 5

Now we'll on the banner and common forum links based around the banner. Create a new layer at the top like the follow, to curve the edges you just do the following as we've done before 'Select > Modify > Smooth', fill this with #ff4e00, if you need use the pencil tool to fill missing pixels in this shape, it should look something like this now;




Now use the following blending options on this layer.

Inner Shadow



Gradient Overlay



Pattern Overlay



Now, to spice this up a little more create another layer and draw a 2pixel line(Pencil tool) underneath this layer and use the following blending options.



You should now have a nice and stylish bar at the top, something along the lines of this:



Step 6

Next we'll just create an area for the banner, with a very basic design to fill the space, draw a rectangle from left to right and fill it with a greyish colour, I added a shine too by create a new layer, selecting the rectangle we just drew(then clicked on the new layer) and dragged down the gradient overlay then turned the opacity down, I also added a little custom stamp to fill a little space.

Next i added a little bar below it to separate the banner with the forum content background, this is similar to the top bar, I create a small rectangle of around 6-8px high then just used the same blending options as before, here they are again.

Inner Shadow



Gradient Overlay



Pattern Overlay



After i done this, I simple create a 2px line and turned the opacity down, then adding a drop shadow on this layer to create a little fading black shadow.




Step 7

Now we'll start the forum index posts and topics part, we're going to create a similar border to the forum container we did in the very firsts, so get the rectangle marquee and once again draw a big enough rectangle for the forum content, now go to 'Select > Modify > Smooth', type 4 and then fill it with a grey colour, now create a new layer and do the same as above except don't use smooth, use contract and do it for about 3px and fill it with another colour, white maybe?

Now, use the same blending options for these two layers as you used before in the earliers, this way the forum content border will look the same as the forums border, here's an example of mine.



Step 8

Now we'll use the same shape as we used for the top header part(above the banner), create the same shape and to smooth it do the same as before (Select > Modify > Smooth > 4px), now use the same blending options as the top, earlier we also create a 2px line underneath this area and used a gradient overlay, use the same settings as we did there, here's a preview now.



Step 9

Now we'll create the final body for the content in this, draw a rectangle from the left to the right using the height of about 90px, fill this with white and then use the following blending options:

Inner Shadow



Bevel & Emboss



Gradient Overlay



It should look something along the lines of this:




Step 10

This should be very easy by now, simply add text to the forum area and separate it with lines, it also looks better if you turn the opacity of the lines down, you can do this by selecting the layer on the layer palette and turning the opacity down for that layer which is located in the top right.

Here's what i came up with!



Step 11

Now we'll add the final part to the forum skin which is it's statistics and once again we'll be using the same borders as before, you can do this however you want, by either starting from scratch or right clicking on the layers and duplicating them then editing what you need, here's what i come up with, you can see what i've removed and added, pretty simple stuff.



Step...there is no mores?

Congratulations you've finished! It's been long but hopefully you've learnt more than a few tricks for any web related designs you'll be doing in the near future, you can see my outcome from the below link.




Hope You Liked It

Credit Goes To PicoDeath

Mind Freak Reviewed by Mind Freak on 15th Aug 2010. [TUT][Photoshop]How to Create a Forum Skin At the end of this tutorial you should be able to create an internet forum skin, you will not learn how to code it, but simply design one. Step 1 Open photoshop and create a new document, make the size 800px by 700px, I've filled the background colour with #c63d00, then got the gradient tool, created a new layout, selected the colour of #9e3100 and then dragged from the top of the layout downwards for about a quarter of the layout, it's a good idea to merge these two layers down(CTRL + E) Rating: 5

[chems]

Thx for the tut

[nYXem]

Looks like an awesome tut bro, will read thoroughly later
Thanks

[CJ]

You are sexy freak

[Raptile]

Awesome.

I Should try this sometime.

Thanks.

[Prazsky]

Excellent tut mate. Thanks for taking the time out to write it. Bookmarked

[Mind Freak]

Thanks Guys For the replies

You can fool around with it as much as u want

I Will post how to code the skin also

But me too lazy to type and post it

will post it soon

[WebKobra]

Nice one. Keep those tutorials coming.

[Gh0st]

Nice tut and post the code Lazy Freak

[hatem20]

Nice tutorial. Thanks for sharing and keep it up!