[konya]

BASIC SKINNING - A GUIDE

I know there are several skinning guides already, like the wonderful one by Smangii. This is going to cover some of the same, but will focus mainly on how to use all that information to make a good looking skin.

01. DESIGN

The first thing you need to do is set your design. You can come up with your own, which makes you pretty damn awesome, go for something basic (like I will be doing in this tutorial, to help those first-time skinners), or do what I do usually and Google magazine layouts for inspiration.

In this tutorial I'm going to focus on a simple layout with a banner, basic table, and forum. I'm going to assume you have Photoshop or a similar program, so to start off we're going to make our design mock-up on that. It really saves a lot of time - you get the look and feel of it all quickly, and you don't have to spend forever editing and re-editing, uploading and re-uploading, just to get something that looks right.

This is especially important if you're going to have a banner that sits across the whole forum, because you need to get a feel for how it's all going to sit together. For example, for my Cheshire Moon skin, I made this mock-up.

It's also incredibly helpful if you're going for a completely typographic skin, or just one with a lot of coding; instead of taking a shot in the dark, you already have an image you can constantly refer to in order to get things to look just right. Again an example - my original mockup for Dead Easy, and the skin in action. It would have been hell to code if I didn't have that constant reference!

02. COLOURS

It's important that your colours match your banner, so we're going to take them from that. You can have a scheme before you make the banner, but it's much MUCH easier to do it this way. Here is our banner. We're going to take the dominant beige colour as our forum colour, use the red as our background and highlights, and the black as text and accents. Why? Lighter forums are generally easier on the eyes, especially when you navigate away to a page like Google. Red is too heavy to use as a colour to read against, but using it as a backdrop will give the place a rich feel. Black is also a hard colour, but using sparingly it can emphasise key parts of our skin.

I try not to use more than three colours in a skin, because otherwise it just gets a bit hectic.

It's a good idea to know what goes with what when making your scheme. Beige is really nice in that it goes with just about anything. Blue, yellow and red - being the primary colours, they all look good used together against a plain base. The colour wheel is a good guide!

Try to avoid making the forum text stand out too much. #111111 might work better against a white background than a pure #000000. If you've got a dark forum, it might be better to consider a lighter colour for text rather than darker - but not too light, because that's burning to the eye! Finding a good balance takes practice - don't be afraid to ask for advice.

On that note, use #000000 and #ffffff sparingly. I'm not one of those people who are going to say to never use them at all - nothing quite makes an impact like a stark black or white. But they shouldn't be over-used to the point of dominating the forum.

03. USING PATTERNS

Yup, we're still in the getting-resources-together stage. I've noticed a lot of people tend to use straight patterns, which limits what you can do with them. If I hadn't seen people doing that, I'd skip this section. But well!

All it takes is a little colour adjustment. We're going to make a background for our table and main forum using the same pattern that's faintly in the back of the banner. This is it, courtesy of Dinpattern.

1) get your pattern.
2) greyscale it (I also inverted it so the lines were darker than the background - this is optional).
3) create a new layer with a slightly lighter shade of your forum bacgkround colour. put this BENEATH your pattern layer.
4) set it to multiply or colour burn.
5) adjust opacity until it's the colour you want it!

It's a good idea to test it against your mock-up's colours to make sure it's right.

04. USING CODES
A number of common and basic codes in skinning can be found on Proboards Support or sites such as SoCal or Slightly Insane. The ones that I am going to use are -

- Resize Forum Width
- a whole number of Remove codes, which will make the forum basic and streamlined, which is the best kind of base to work on.
- Move PM Bar Above Banner (the code I used is on a site that is now closed, but you can get it here)
- Remove Brackets from Text Menu

A good thing to do is to browse through code directories and find nifty little tweaks and enhancements that will make your forum stand out. But the key is to not use too much, or things that are too complicated! Simple is best, otherwise things start looking crowded and messy and overwhelming.

04.a BORDER AROUND FORUM
Technically there are codes for the former, and there probably are for the latter as well. But these are how I personally do them and I find them far easier to use than codes I have used previously.

For the border-around-forum, it's easiest to use a div. If you want to be IE-compatible, first you have to put this in your global headers;

<style type="text/css">
body {
text-align: center;
}
</style>

And now for the border code! This part goes in the global headers; <div style="width: BORDER WIDTH; padding: 20px; background-color: #IF USING A COLOUR; background: url('IF USING A IMAGE'); margin: 0px auto;">

And this in the global footers; </div>

You can use classes in this, which we will look at in the next section.

05. CSS
All we're going to do in this skin is modify the category titles, but the things you can do here, you can do for anything you want to style with CSS. CSS is basically the style tag, only we put it together a little differently.

To start we write the base of our CSS.

<style type="text/css">
.menubg {
width: 750px;
height: 25px;
text-align: center;
background: transparent!important;
margin-bottom: 10px;
}

.menubg a {
font-family: helvetica; font-size: 13px; letter-spacing: 0px; text-transform: uppercase; color: #000000; text-shadow: 1px 1px 0px #ede8e1; padding: 5px;
}

.bordercolor {
background-color: transparent!important;
}

.catbg {
background: transparent!important;
border-bottom: 3px solid #000000;
line-height: 20px;
}

.cattext {
font-family: helvetica neue;
font-weight: 100;
font-size: 25px;
color: #680002;
text-shadow: 1px 1px 0px #ede8e1;
padding-left: 20px;
text-transform: uppercase;
}
</style>

And that makes something like this. Don't expect to get everything right on the first try! In writing this, it took me four or five times to get it to look right. If you have an extension like Firebug or Webdeveloper on your browser, it makes everything a whole lot easier.

A good place to find spiffy things you can do with CSS is W3schools or just good old Google! Search for things like "Typography with CSS3" and be amazed. Also, if you can code a style tag template, you basically know CSS. We just write it slightly differently.

05.a Classes with CSS
When we edited the catbg and cattext, we were editing the class that Proboards has set by default. But can we use classes too? Of course! When you want to style your own heading, just write it the same as you would for the Category bar - for example;

<style type="text/css">
.headding {
CSS here
}
</style>

Now, when you want something to be a heading, just write <font class="headding">Your heading here!</font>

You can use this to style just font, or even entire tables. Experiment! It's so much fun, if also very frustrating.

06. TAKING ADVICE
You can't improve working in isolation - it's impossible. This is probably the biggest point in the whole tutorial. As with any creative pursuit, you can never stop learning. Don't just accept 'good enough' when you can do 'perfect'! Ask for advice from as many people as possible. If there's something you don't know how to do, ask for help, don't just keep struggling on your own.

Don't dismiss criticism as 'they just don't see it the way I do'. That's why you ask lots of people, so you can differentiate between what is just a matter of taste and what is an actual problem. The best way to learn how to skin is to get feedback and work on those areas, so don't shy away from feedback! Go out and ask for it. I personally rarely make a skin without at least one other person's input - and 90% of the time I'll have someone on MSN to ask for opinions along the way. Don't work in isolation; it's counter-productive.

And that brings us to the end for now. The best way to get better at skinning is to practice, but don't try to do something huge or drastic from the get-go. It takes a lot of time to get used to all the different things involved in making a skin, and can cause major headaches. But it is also very, very fun and rewarding, so don't let that turn you off! Practice, practice, practice, and you will feel incredibly rewarded at the end.

[konya]

DESIGNING A LAYOUT IN PHOTOSHOP

On request!

Before starting this I'd like to state that I use Photoshop CS5, so the locations of some of the menu options might be a bit different if you're using older versions.

A good first step in skinning is getting an idea of the layout in photoshop first - that way you can see how all the elements will work together without having to tear your hair out at the coding stage. In this tutorial I will walk through how I made this.

This will NOT show you how to make each individual skin element. It assumes you know how to use Photoshop, make banners, backgrounds, etc.

STEP 1: GUIDES
FIrst we need our canvas! I personally work on one the size of 1024 x 768 pixels, because it helps me see how things will look for someone with a smaller screen. Here we are. Isn't it lovely?

The next thing we're going to do is set up some guide lines. This helps us keep everything we're working on in proportion. What I do is make another NEW canvas the same size as I want my boards or border-around-forum. In this layout, I wanted a border-around-forum at 760 px wide. so I made a new canvas 760px x 764px, flood filled it with a light grey, and thn copied and pasted it straight on the middle of my blank black layout.

Now, for a border-around-forum, it's pretty much fine to leave it at that. But what if we don't want one of those?

When I make layouts with a transparent banner, I usually make the banner straight at this stage, on the mock-up itself. So I don't make things to big, I use guides.

Make two new guides and move them to the edges of your grey block. Then click 'lock quides'. Delete the original layer Viola! Easy rulers that will show you exactly the boundaries you should be working in, without the hassle of having too many layers! Here's how I used them when working on a different layout. To make sure my banner wasn't too huge, I just made it within the boundaries of those guides! The guides themselves went on to help position my boards when I made them later.

STEP 2: BANNERS, BOARDS AND TEXT
Once you've got your guides set up, it's time to set up the skin itself! Fill your background with your background image. Trim the edges of your border-around-forum, and place your banner. On new layers, make rectangles for a top table and move them around until you have them how you like. Put text in them too! This is a great stage for trying out what text colours look good together and on your skin.

After a lot of playing around, I finally came up with something I liked. And now to work on the boards!

If you followed the screenshots in the previous section, you'd notice I have 'smart guides' on. For this next bit, we also need 'snap to' to be on! Now, when you make a new rectangle with the rectangular selection tool, move or resize a layer, pink guides will appear when it lines up with other layers and elements. They will also 'snap' to these lines, making it easier to position them exactly. I can't screencap it, but you'll know it when you see it.

Using these guides, we can make our boards width line up exactly with the edge of the box I made up there in the banner. Add a bit of text and we have boards! You can go as detailed or as simple as you want when designing boards. I'm really lazy, so I usually just do the category title. But this stage can be incredibly useful if you're using something like the MYO Board Mod, as you can get a solid idea of what you want it to look like before playing around with all that nasty code!

And now for making text that you can imitate with CSS when it gets to the coding stage. Photoshop has many options that allow you to change the appearance of text! You can get these to show up by going to Window > Character. You can adjust line-height, letter-spacing, font width and more!

And that brings us to the end. I hope that was at least, in some ways, useful to people who are a little unsure about how to go about setting things up on Photoshop.