Previous Entry | Next Entry

A Coloring Guide

A Coloring Guide.




Guide For: Photoshop CS2
Made in: Photoshop CS2
Level of Difficulty: N/A
Image Heavy? Not a lot of images, but I talk alot.
Translatable? Depends. This was made in PSCS2 so selective coloring is mentioned, though other methods are included as well that do translate.
PSD?N/A
Requested by: brownstudies



The first thing I really picked up when I first started making icons was coloring. It's the thing I get the most comments about. This is a really hard tutorial for me to write because when I color my icons, my methods are always always different. There's no formula I follow or guidelines I go by -- I just do my thing and shoot from the hip basically. So, if this is helpful to someone I will be really happy, because sometimes I don't know what the hell I'm talking about, LOL.

This guide was created in Photoshop CS2. Some methods mentioned here may not translate to PSP or Gimp.

1. Choosing a Picture --> Screencaps, HQ Pictures and e.t.c.
What's the difference in what picture you choose, I hear you asking? There's a major difference. A quality picture right from the start is key to getting good coloring on your icons. I've said this before: crappy pictures do not good icons make. Simple as that.

Make sure your screencap/photo/e.t.c. is HIGH QUALITY. In a screencap I will look for something 600px and higher. HD quality (for screencaps taken directly from downloads or torrents) and DVD quality (capped straight from a dvd) are always ideal. For promo photos, photoshoot pictures and whatnot you shouldn't have a problem finding something HQ, as more often than not these photos are professional and will already be at HQ quality. Magazine scans I try to steer clear of as I am not brilliant enough to make those look good. If you are up to the challenge magazine scans can be fun to work with. And I know there are HQ quality ones out there.

Now you've got your picture open in your graphics program of choice. What next? Base Prep. Resize/Crop. And lastly color. Here are some places to start if you are unsure of how to get your picture prepped and down to icon-size:

>>>> Aspect Ratio For Dummies by dtissagirl
>>>> Image Prep Tutorial and TIps by _jems_
>>>> Icon Cropping Tutorial by quebelly
>>>> A Cropping Tutorial by kellslawells


2. Coloring --> By Fandom

Ok. So you've got your picture prepped, cropped and down to icon size. Time for coloring. In this section of the guide I'm going to briefly explain the different types of coloring I use for different fandom-related pictures. The most questions I see at places like icon_tutorial are coloring questions and the majority of those questions are related to fandom in some way. Now, I will only be going into the fandoms I'm currently interested in. I will not be going into coloring for every fandom. So, if you're looking for tips on how to color Lost or Friday Night Lights screencaps you're in the wrong place. *G*

Fandom : Buffy the Vampire Slayer
Image Issues: Very dark. Most of the show was shot at night or in the dark. In the later seasons of the show, Joss Whedon seemed to favor the orange filter for lighting, so you'll get a lot of reds, pinks and oranges in the screencaps.

Coloring Approach: Right off the bat, you want to lighten the picture. I tend to favor Curves over Screen layers for BTVS caps. I think you get a smoother, cleaner, lighter base from Curves than you do with Screen layers. This, of course, is a personal preference. If you like Screen layers than go with it. Once it's been lightened, you'll want to color. I find that BTVS caps don't really lack in the coloring department -- so don't go too crazy on it -- unless it's really washed out or really dark. Here are some examples of my Buffy icons and the results you can achieve:



1a In the first example, I capitalized on the oranges in this picture. Going with the original color of the picture can sometimes produce a nice result. Basically, I used curves, color balance, levels and hue/saturation to achieve this result. I think I even threw some textures in there to deepen the colors a little.

2b In the second example, I again capitalized on the original colors of the picture. Pretty much the same coloring from the first example -- except I punched up the reds a little with some selective coloring and color balance.

3c In the third example, I went with a favorite coloring of mine for BTVS caps - lots of greens, blues and yellows. I used curves, color balance, selective color and levels to achieve this look. I also added brightness/contrast and hue/saturation adjustment layers to the mix to give the colors more intensity. I favor this type of coloring the most for BTVS caps - the result is cleaner, lighter and more vibrant.

Fandom : Heroes
Image Issues: Again, very dark. Lots of the episodes were shot at night and tend to have a lot of blues and pinks in them. These caps are pretty difficult to work with -- getting the blue out is half the battle.

Coloring Approach: The main thing, lightening the picture and of course, removing the blues. Screen layers, selective coloring, variations and color balance are going to be your weapons of choice for Heroes screencaps. Some examples with my Heroes icons:



1a In the first example, the picture was an outdoor daytime shot -- which made the coloring about 100 times easier. One screen layer, some selective coloring, curves and color balance layers can achieve this result.

2b This icon, from 1x01 Genesis, was dark and heavy on the blue - a repeating theme in first season Heroes caps. I lightened the picture again, with a couple screen layers, color balance and curves. I threw in a cloud texture to punch up the blue of the sky and added a hue/saturation adjustment layer to bring out the skin tones of Peter's face and added a brightness/contrast layer to improve contrast.

3c The lighting on this cap was really orange, so I capitalized on that using brown and/or orange color fill layers on color burn, multiply and softlight to bring out the soft oranges in this cap. I also added a hue/saturation layer to bring out skin tones and a selective coloring layer on the Black channel to improve contrast.

Fandom : House
Image Issues: There aren't many, thankfully. The caps have great lighting and color so mainly what you'll be doing with these pictures is improving color and/or bringing out color.

Coloring Approach: I tend to favor color balance, curves and selective color for House caps. The colors on the show tend to be heavy on the blues, magentas and reds and can look super awesome when intensified. I love House caps. So much fun to work with! :D Here are some examples with my House icons:



1a In the first example, you see that wall in the background? It's always there in some shape or form -- in the hallways of PPTH, House's office, Cuddy's office, e.t.c. It's shiny and pretty and a lovely shade of magenta/orange. I love bringing out the colors in the walls on House caps. I go with color balance, curves and selective coloring to achieve this look.

2b There's the wall again in the second example, but this time there's blue in it. That's another thing featured heavily in House caps - tons of blue colored walls with the magenta/orange walls. On this icon I again went with curves, color balance and selective coloring to achieve this look. I also upped the hue/saturation to make Cuddy's skin more natural and vibrant and fiddled with the contrast to deepen the colors.

3c And lastly, there's green. There is a lot of green in House caps -- mostly in House's office I notice. And again, curves, selective color and color balance were used to achieve this look. I added a dash of light by smearing some white on a new layer and blurring it with Gaussian Blur at around 20.0 pixels to brighten things a little.

Fandom : The Office (US)
Image Issues: None, thankfully. Office caps are brightly lit and have a good even balance of color to them. However, skin tones tend to be a magenta-ish color so you'll mostly be dealing with that when iconning The Office. Don't use too many Screen layers on these caps -- they are bright enough. I mostly work on improving contrast and intensifying color when I make Office icons. Of course, don't overdo it on color - it can get radioactive pretty quick if you go overboard.

Coloring Approach: I go into an Office icon with the idea of making things more yellow. The Office seems to be lit with a lot bright whites for inside-the-office shots and magentas on skin tones and that's pretty much it. So, color balance, curves and hue/saturation are going to be your best bets. Some examples with my Office icons:



1a Here's a perfect example of what I mean by upping the yellows. I used curves, color balance, hue/saturation and a dash of selective color to get the coloring on this icon. I love how pretty the yellows turn out for these icons, especially when iconning Angela because her blonde hair is so pretty. :)

2b This elevator is featured pretty heavily on the show, so whenever I make an icon with the elevator in it, I make sure to bring out the pretty orange colors. Curves, hue/saturation and color balance were used exclusively on this icon.

3c Bringing out the natural skin tones on Office icons is pretty easy -- it's just a matter of getting the magenta out. I will usually go heavy on the yellows and blues to achieve a natural-looking skin tone on the icons that feature a character like Pam here. :) Mostly color balance and curves were used on this icon and of course, hue/saturation to make the skin more natural looking.

Fandom : Supernatural
Image Issues: I saved the best for last. *G* By far, the most challenging fandom to icon. Especially the first two seasons of the show. Kripke had motives when shooting the first two seasons of SPN, he wanted his show to be dark, noir-ish and spooky looking with little to no color, heavy contrast and extreme darkness, LOL. Finding the right color for these caps is a frustrating experience and experimentation and fiddling around are very key to achieving a halfway decent looking color on these caps. For someone like me who prefers light natural colors on icons, this was a challenge. You learn to embrace faded brown or heavy red colorings when you make SPN icons. However, for some odd reason, the show's third season suddenly got colorful. I read somewhere that the CW and Warner Brothers really rode Kripke about the coloring on the show and that's why it's so different in the third season as compared to the first two seasons. So, you have to do a complete 360 when approaching coloring for third season SPN icons. Thanks for that CW and Warner Brothers. :/

Coloring Approach: Like I said above, brown or red colorings are going to work the best for SPN icons. And something that was hard for me to deal with? No selective coloring. Selective coloring, in my opinion, will not really improve SPN icons very much. I know some people use it with a fair amount of success, but I don't because it just makes the icon lean more toward radioactive than natural and *shudder* I hate radioactive. So I don't use selective coloring at all for SPN icons. If you do and it works for you, more power to you I say. *G* On to the examples with my SPN icons:



1a A first season example. Luckily, this was an outdoor shot, so not a lot of screen layers were involved in the making of this icon. And it's heavy on the brown -- really the only ideal way you're going to get a good coloring out of caps from the first season. For the majority of my SPN icons I use screen layers, color balance, levels and soft light layers to achieve this type of coloring.

2b A season two example. Here's an instance where it's important to have good caps. I believe I got this cap from this website. These caps I highly recommend using as they are pretty much the best quality SPN screencaps out there. You can get awesome colors if the base you are working with is excellent to start with. Again, I went with a screen layer, color balance, levels, hue/saturation and a soft light layer to achieve the color on this icon. I'm pretty consistent on the coloring of Season 1 and 2 SPN caps.

3c And an example from Season Three. Season Three caps tend to be heavy on the red, so you'll want to scale back on your reds when going into an SPN Season Three icon. Again, I'm pretty consistent here -- screen layer, color balance, levels, hue/saturation and a soft light layer on a lowered opacity. I find that Soft Light layers tend to bring out the reds the most so I go easy on those with caps from Season Three. I will sometimes also add a black and white gradient map set on Soft Light at a lowered opacity to dial down the intensity of the color if it gets to be too much. Less is more on these caps and you can get a nice result in the end.

3. Coloring --> HQ images --> Promotional and Professional Pictures

I won't go into much detail on these types of images since I icon more screencaps than I do HQ professional and/or promo photos.

Image Issues: None, really. These images tend to be the best quality-wise, of course. The only gripe I have is how bright they are. Dialing down the brightness and adding contrast without degrading the quality of the image is going to be the biggest hurdle to leap over here.

Coloring Approach: No screen layers whatsoever. Or if you like to add Screen layers, keep it to a minimum of one or two at lowered opacities. These pictures are really bright to start with for the most part, so don't overdo it. My mindset is adding contrast. More often than not these pictures are brightly lit but have really no contrast to them. Contrast = color. The more contrast the better. Of course, don't overdo that either - you don't want 'crispy' looking icons. Examples:



1a On this shot of Adrianne in the first example, the picture was really bright. I used curves and Soft Light layers to achieve this look. I also added some textures to intensify the coloring. An instance where textures can be beneficial in improving color when you've tried all the adjustment layers, LOL.

2b The second example is another instance where textures will benefit your coloring. Notice this SMG icon is darker. That's because I only minimally brightened the picture with a curves layer and then relied mostly on textures set to Multiply, Darken or Color Burn and a Soft Light layer or two to bring out the colors.

3c On the third example, I went heavy on the hue/saturation and selective color to bring out the color on this icon. I brightened it with Curves and added contrast with a Soft Light layer.

4. Coloring --> Black and White

I hate making black and white icons. I tend to go overboard on contrast and they end up way too dark. But we'll briefly go into black and white icons because people ask about these alot too.

Image Issues: Will vary depending on the picture you're using and the type. With screencaps you're mostly dealing with brightening and improving on colors. With HQ photos you'll mostly be dealing with adding contrast.

Coloring Approach: When making icons black and white there are so many different methods I use that to explain them all would take up about 50 pages, LOL. At the moment, I tend to favor a softer look for my black and white icons. Light, bright, minimal contrast and a soft look are my goals with this type of coloring. Even washed out black and white can be appealing. Some examples:



1a Here's what I mean by washed out black and white -- a method I seem to be leaning towards more and more when I make black and white icons. Gradient Fill layers in white and scratchy textures set to Screen at a lowered opacity are key to achieving this look, I've found.

2b A bolder black and white example. This can be achieved by first improving the general colors of the icon before going to black and white. For this icon I duplicated my base and dragged it to the top of my layers several times and then set it to different blending modes: Overlay, Multiply and Soft Light layers were key to achieving this look. I believe I desaturated the icon to make it black and white. A black and white Gradient Map is more my choice for making a picture black and white than simply desaturating -- I find a Gradient Map is the most ideal choice if its contrast you want in a black and white icon.

3c For the softer look on this example, I again went with a Gradient Fill layer (in white) at a lowered opacity and a scratchy texture on Screen at a lowered opacity. This is also an example where I used a black and white Gradient Map to make the photo black and white for just the right amount of contrast. A grungy gray texture on Soft Light was also used to achieve the overall soft look of the icon.

5. In Conclusion....

Coloring on icons is all about experimenting. Start out with tutorials, first step by step so you learn. Then start adding other things to the mix as you follow them. Mix it up by combining methods from the tutorials you've learned from -- sometimes colorings from several different tutorials can work on one icon. Start saving adjustment layer settings as presets and just add them to your icon to see what you come up with. I have a folder on my computer chock full of presets that I constantly use in the coloring of my icons -- some of them work all the time, some of them work none of the time -- that's why it's fun to experiment! *G* In time you can come up with a style all your own and coloring will be a snap -- you can even get to a point where you can eyeball an icon and kind of tell ahead of time what coloring you will need to use for it.

And.... this concludes the guide. As always, comments and feedback are appreciated. If there's anything I missed here feel free to speak up with questions or suggestions. And by no means am I the authority on coloring. There are iconmakers out there who excell at this a whole lot better than I do -- this guide is merely what I've managed to pick up along the way as I've learned the process. :)

PLEASE DIRECT ALL COMMENTS TO THIS ENTRY. Thanks.

Comments

( 2 ideas — Have an idea? )
fragmentx
Mar. 25th, 2010 03:34 pm (UTC)
hi, some of the pic is no longer in used. Can you re-upload?
gallicka
Jan. 2nd, 2011 07:53 pm (UTC)
aww your img url doesn't work anymore... :(
( 2 ideas — Have an idea? )

Tags

Current Month

November 2014
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
Powered by LiveJournal.com
Designed by Lilia Ahner