important tutorials

new

« Prev
1
Next »

king of westeros

fancy nancy

AKA

PLAYED BY: royal

profile

plotter

Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape

important tutorials Dec 31, 2013 15:01:05 GMT

Post by fancy nancy on Dec 31, 2013 15:01:05 GMT

source: paddy/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.

Last Edit: Dec 31, 2013 15:01:18 GMT by fancy nancy

king of westeros

fancy nancy

AKA

PLAYED BY: royal

profile

plotter

Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape

important tutorials Dec 31, 2013 15:01:56 GMT

Post by fancy nancy on Dec 31, 2013 15:01:56 GMT

source: konya/paddy

Because I found my safety saves when I was looking for skin previews and I thought 'why not'!

A COMPLETELY UNPLANNED GUIDE TO COLOURING MANGA SCANS BY PADEMELON, USING PHOTOSHOP.

01. THE IMAGE
Pick one. Pretty obvious first step, eh? Crop it to the size you want and darken up those lines - a really easy way to do this is by going Image > Adjustments > Levels. It is important that you erase any screentone from the scan! Screentones are the greys used by the mangaka to add depth. Since we're going to be colouring, we don't need them, and they just get in the way. It's time consuming but worth it in the long run!

01. THE PALETTE, AND GETTING STARTED

First things first, we need to decide on a colour scheme! Sleeping Gareki is so adorable, I decided I wanted soft colours - greens and blues. Make a new layer and scribble some colours and variants on there - we're going to be needing them for reference.

And now to start the actual colouring. Set your lineart layer to the very top and on multiply. Create a new group beneath that, and call it 'skin'. All the layers in this group are, obviously, going to be the skin colour. For our first base layer, pick a nice light beige. Then on top of that, we're going to work our shading. Obviously we're going to use darker variants of that base colour, but what you can also do is introduce some of the other colours you're going to be using in to those shadows.

I've used a kind of blue/purple for the spots that should be the darkest. My light source is at the top of the frame, so all the shadows are going to be based around the bottom.

Warm colours pop out of the page, and cool colours push back. Use cools for the shadows, but introduce some warms too! Try not to go too dark with your beige variants, and angle them more towards the oranges/reds than the yellows/greys.

A STYLE TIP! (this is how I do things - you can do it differently) Don't use the smudge tool excessively. Real skin is not completely smooth, so it looks a little weird in our colouring if it is. Instead, use the alt key to pick up on colours directly from the image and use those to blend. For example - our first layer of shadows can just be plopped on a layer above the base without any blending. Then, using the alt key, select the colour at the VERY EDGE of the shadows - colour a bit using that, and repeat. It'll give it a very nice painterly look c:

02. CLOTHING & HIGHLIGHTS

Basically the same as the skin - we put down our base, add some shadows. Make sure to follow the folds of the fabric as you colour! You can see that again, blue has been used for the darkest areas - this is because blue is the coolest colour in this palette.

But on to highlights! I usually do these last, on a layer above everything else. I go over with white, sometimes followed by a blur and shape with the eraser. STYLE TIP! if you're using a tablet with pressure-sensitivity, set your brush opacity and width to this. It lets you build up slowly rather than being left with a solid blocky colour. You can set this by going to your brush properties > Shape Dynamics and Transfer.

Sometimes, like in the case of his shirt, I add in a bit of warm colours where the highlights go. The green in those areas is more yellow than the rest - can you tell? It might be subtle, but it helps draw the whole picture together.

Once you've done most of the image, it might be a good idea to go back and darken a few of those shadows! When I got to this stage, I added in more blue. In hindsight I should have put some green in that huge fluffy futon, but at the time the thought didn't occur to me.

04. HAIR AND ACCESSORIES

Hair is one of the few cases in which we're going to be working ABOVE the line art. You just can't colour dark hair properly by working on a layer beneath it, and it's far too much like effort to try and clear the inside and make our own lineart. Using the scan as a guide and a fairly thick, set some light colours - then build on those, going darker and darker. It's perfectly fine to smudge here!

Hair should be the darkest at the roots. Depending on the type, it can also be dark at the tips - since Gareki has pretty dark hair, that's what I've done here (a little). But that's just the base! Once you've got something that feels like a good base, make a new layer and switch to a tiny brush - maybe 4px or so. Then using medium to dark colours and a flicking motion of the wrist (like Wingardium Leviosa), add in some detailed strands. If you look closely at the hair, you can see where I've done this.

When THAT'S done, make another new layer and, using bright colours and maybe even a bit of white (but not too much, especially if you're colouring a young character) add in some subtle highlight strands. These are super fun! But try not to go overboard.

Finally, make a new layer on top of THAT. Using white, blockily brush in your main highlight - here, it's the lighter coloured ring on his hair. Using the smudge tool, blur the top part of this (at the moment) blocky and ugly bit of white. Then set the layer to overlay, and play with opacity until satisfied! Depending on the hair colour and type, you might want to try a different colour other than white - like a super light yellow, orange or even pink.

The hardest part of this scan was his goggles. The band wasn't that bad - just followed the contours and added in shadows where applicable. But the lenses! Our light here is pretty bright (it's amazing he can sleep at all), so the base colour was left a very very light grey. Then, since glass reflects, I used blues and browns to create the shading. Don't just use greys! It won't look very nice if you do.

05. LINEART
We could just leave the lines black, but it won't look very appealing if we do. So, once you're 100% sure you're finished (might want to make a safety .psd save before this bit), merge all the colour layers together except for where you've worked above the lineart. Move them above the lineart. Set them to multiply. Then make a layer between them and the lineart, and flood fill with a dark colour - I think I used green. Set this layer to screen. Then, on this layer, use a brush and go over the edges of the lines with the colour you want them to be. Presto! Easily coloured lineart!

And now you're done c: I hope this was in some way helpful and not just a random rambling. If you've used this tutorial, please post what you've coloured! I'd love to see them all c: