Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Mucleus

Mucleus Avatar
My big M will destroy you all :D

**
Official Member

26


September 2005
How to design a GREAT (maybe) skin – by Mucleus.[/u]

How to use this guide:
This guide is a series of steps for anyone who is unsure about how to design a ProBoards skin. It is intended to help those who do not have experience in graphics or coding. The way this guide is meant to be used is to follow each point completely in order. No skipping steps!

1. The most important decision before even attempting to start your skin is to decide whether your forum will be dark-based or light-based. This affects all images in your skin.

2. Next choose the main colour of your board. Good options for light colours are green, yellow, red, etc. Dark skins work well with highlighted areas, so choosing e.g. purple will make your board too dark.

3. Think of a board logo, which hopefully relates to your URL, or perhaps is just a nice shape. This should be in the header and other appropriate places, and could form a major theme in your skin.

4. Now, get a pen and paper and draw out the rough layout of your skin. This should include any coding design features you plan to add, and should have the basic idea of ALL MAJOR IMAGES (by that I mean main image, header/footer images, navigation, on/off, and any others). At this point you still have not touched the forum or your designing programs.

(i) Main image
The main image is what defines your board. A good image will lead to a successful forum (generally) and a bad one will repulse possible members. Remember that people are looking for a design that is appropriate to the skin, so don’t use tech-style in a Valentines forum for example. Colouring should be the same as the skin. If you are choosing a background for your image which is different to the forum background, definitely use a border (substantial, not just a pixel) to define the area.

(ii) Header/Footer images
These go above and below the categories respectively (TIP: If you have enough boards per category, use category dividers). They should not be distractive, all they serve to do is to gently finish off the harsh table edges. Use curved corners and minimal decoration.

(iii) Navigation
These are the Home, Help, Search, etc. icons which enable members to get around the forum. They are important, and it is a good idea to make them
  • Tall enough to use a ‘rough click’ (some noobs can not position mice)
  • Not enormous, if they spread to stretch the board the result will be disastrous
  • Only use icons if they are small and not distractive.


(iv) On/Off images
The on icon tends to have a light focus in it, of the same colour as the main forum colour. The off icon is usually a greyscale version of this. Text in these images does not generally work, but some ideas for what to put in it:
  • Your board logo
  • A simple shape (but try to avoid orbs, everyone uses them)
  • Simple gradient with border
  • Relevant image


5. Create all of your forum images! This will take a long time if you are going to use Paint, but it is possible (to an extent). Remember that your images should follow the skin pattern, and don’t use more than 3 contrasting colours. Professional forums tend to use grey and shades of the main colour (discussed in #2).

HINT: If you are going to use Paint, try some addons such as
jupiter.walagata.com/w/design/ubbc.zip
jupiter.walagata.com/w/design/ZDGrads.zip
;)

6. Customize board images!

You're now well on the way to becoming a great forum!

Woo for Studio Zero. :)

Zac

Zac Avatar

****
Senior Member

430


January 2008
Wow, thanks, when I created my first skin, I did not know this existed, THANK YOU!!!

.XeroCint

.XeroCint Avatar
OmniXST

***
Dedicated Member

129


September 2006
Links are down :(.



12,308

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
.XeroCint Avatar
Links are down :(.


Unfortunately we can't do much about that. I haven't seen him around in years. =/

newBookmarkLockedFalling