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


Quick Links:


newBookmarkLockedFalling

iiPod

iiPod Avatar

*****
ProNation

401


October 2009
Copy and Paste from somewhere else, sorry if this isn't in the right place... :P

No, although you may not think it, I get a lot of PM's asking how I make skins and.... To be honest I don't really see how my skins are any better than anyone else's because they're not. So I thought, to quell the amount of people who ask me this, I would write a basic article on it.

First of all, you need to have a picture in your mind of what you want to achieve with your skin. Do you want a grey and orange mix up or dark blue and blue? This for me is key, because then I know exactly what I want to have at the end.

Think of a style, you don't want to stay the same with subtle variations from other people's skins, you want to stand out from the crowd and wear a bright pink top-hat with frilly edges... If you get what I mean.

So I have told you to know you want to do and make sure you have a unique charisma about your forum so.... How do you actually make the skin?

Making the skin is actually the easier part for me. But I'm sure for others it will be the opposite. Thinking up of a good idea that could look great is brilliant, but producing it into something that is actually great is the rewarding part. So don't give up! No-one expects your skin to be perfect without faults.

To actually make it you need a colour picker. NO, not the dodgy thing on the left hand side of the "Create Skin" menu, because that will result in a total catastrophic break down of everyone who views your skin mental health. There are other ways and here they are:


Generally I follow a 'scheme' I have in my mind. I am going to run you through on it, but please don't uba-stress-out if you don't get it. So below is your blank list you get when you click "Create Skin" (You can use the blank at the bottom I will post if you ever post your skin.) So here is the 'scheme' I follow, I also explain what each of them corresponds to.

Font: Verdana, Arial (DEFAULT) Keep it like this, it works.

Background colour: 202020 This would be the main colour of the background of the skin, you could have an image as it, but if the picture doesn't take up the whole space then this will border it.

Background image URL: -

Background image fixed: Basically this means if you have an image that just takes up the screen but means the background colour will come into play when you scroll, you can click this button. It locks the image in place so the window scrolls, but not the background image.

Auto gradients: Do you want it to have gradients you don't have to hand make? If you can do graphics, don't check it and make your own 40px X 40px gradients.

Gradient height: How spaced out do you want the colours within your gradient to be? only applies if previous box is checked. The default is 27 and I would recommend sticking to that.

Text colour: C2C2C2 What colour do you want the text in the posts to be? We have a grey background so we may want a whiteish colour.

Link colour: A1A1A1 The link colours should be different from the main text colour so you can see them.

Active link colour: A1A1A1 What colour will the link be when your mouse is over it?

Visited link colour: A1A1A1 What colour will your link be when you have clicked the link?

Title background colour: FFC125 This is the area that will be affected if you check the autogradients box. This is the area that on the homepage of here it says: FORUM NAME. So we may want this to stand out so I'll make it a yellow.

Title text colour: 000000 This is the colour that the text will be on. The background of this will be the yellow I just put in so we need a colour that will be easy to read of the yellow, so I put black in.

Category background colour: AA5303 This is another area that will be affected if you check the autogradients box. This is the place on the homepage of here it says: THE BASICS, COMMUNITY, YOUR ART etc. For this we still want it to stand out but not to clash with the yellow so I went for a darkish orange.

Category text colour: 000000 The text that will be on the colour you just chose. SO that's orange so, again, I chose the colour black to be it.

News title background colour: 121212 This starts to get harder to explain so really, please don't get stressed out. This is the colour of where it says the news. You don't usually have a news fader on so, I will just make this blend in with the background. Don't make it all black because if you ever need a news fader... You will be in a sticky situation.

News title text colour: D6D6D6 The colour of the title of the last colour box you entered. So that was a dark grey so this will have to be a light grey or even white.

News background colour: 141414 This is the colour of the background of the news fader if you ever use it. Choose this wisely. Usually I choose a colour a shade lighter than the actual background.

News text colour: C2C2C2 The colour of the text in your news fader. The background was dark so this will have to be light. A whitey-grey will do. But usually, I give it the colour of your main text so it will have to be that.

Window background 1: 333333 THIS IS IMPORTANT. Such that I am going to say exactly what it is. Window Background 1 corresponds to this area: wimg.co.uk/71O.png (The bit in red) This really is your own choice but I will put the one in that goes with this skin.

Window background 2: 333333 THIS IS IMPORTANT. This is Window Background 2. wimg.co.uk/kOr.png (Still the bit in red) This really is your own choice but I will put the one in that goes with this skin. Make Window 1 and 2 the same.

Board Highlight Color: 333333 Please make this the same has your Window one and Window 2 background choices.... So it looks good. However that is personal taste so you can make it a different colour. This is the colour it goes when you put your mouse over a board.

Thread Highlight Color: 333333 The colour that it goes when you put your mouse over a thread within a board. Again I prefer it if it the same as the others.

Table border colour: 050505 The colour of the border of all the lines on your skin. This is actually surprisingly important, usually a dark border works better than a lighter one. So I have gone with a very dark grey.

Popup Window Colours

Background colour: 333333 Keep these all the same as your other basic colours.

Text colour: C2C2C2 Keep these all the same as your other basic colours.

Title background colour: 333333 Keep these all the same as your other basic colours.

Title text colour: C2C2C2 Keep these all the same as your other basic colours.

PLEASE NOTE: These colours will not work together and are just an example to show you the 'scheme' also things like the banner, I have left out. This is only for the colours.


I hope this helps, also here is a blank template for you to use if you post your skin:

Name: NAME OF SKIN GOES HERE
Creator: MAYBE YOUR NAME?
Preview: URL OF TEST BOARD YOU HAVE MADE FOR THE SKIN
Download: IS IT MANUAL OR DOWNLOAD?

Font:
Background colour:
Background image URL:
Background image fixed:
Auto gradients:
Gradient height:
Text colour:
Link colour:
Active link colour:
Visited link colour:
Title background colour:
Title text colour:
Category background colour:
Category text colour:
News title background colour:
News title text colour:
News background colour:
News text colour:
Window background 1:
Window background 2:
Board Highlight Color:
Thread Highlight Color:
Table border colour:

Popup Window Colours

Background colour:
Text colour:
Title background colour:
Title text colour:


Thanks,

iiPod.
Looking for a coder, PM me.

iiPod

iiPod Avatar

*****
ProNation

401


October 2009
I'm not sure if it's classified as a tut though... :P
Looking for a coder, PM me.

iiPod

iiPod Avatar

*****
ProNation

401


October 2009
Mebbe, I'll let Mr. Mods decide. :P
Looking for a coder, PM me.

newBookmarkLockedFalling