Icon Guide Dos
FIRST OF ALL, SINCE I HATE REPEATING STUFF this is an ADVANCED USERS guide! Basically, I'm going to assume you've already read this, and thus know how to find things like your paint bucket too, what your history does, how to make actions, borders, sharpen, etc. This guide covers NEW TECHNIQUES mostly involving layering, selection, icon clean up and patterns. I will also reference Nishi's guide now and then as it covers a bunch of stuff I never did.
Also, if you find my layout a bit odd, it's because I've MOVED ON to Photoshop CS3, which is not particularly different from 8.0 other than a cleaner layout which I prefer. You should be able to follow along just fine whichever version you have.
**Also, a pre-emptive note. When I talk about Opacity in this guide as dealing with Layers, you may note in my images that it's actually the 'Fill' bar that is down and the 'Opacity' one is always at 100%. I'm not TOTALLY SURE of the difference between Fill and Opacity, other than Fill seems to effect solid blacks less when filtering layers, thus why I like it for these icons. However, they do more or less the same thing.
***I Tried to keep the file sizes on these images as small as possible. All the images in total amount to 1.5mb, so that's about as dial-up friendly as I get.
Getting Prepared
Okay, first of all guys. If you're going to do this sort of HEAVY ICON UPDATING it's VERY IMPORTANT to save everything and have copies. Cuz it could be you will do twenty icons, decide you hate it, and want to go back and you want to have a way to do that easily. I simply made duplicate folders of Ticky's White and Black icons, and saved all my new icons in the 'neo' folders. Incase I ever don't like Ticky's icons? I can go back to the old thing no prob.
ALSO IMPORTANT. SAVE *.PSDs OF EVERYTHING. I AM NOT FUCKING KIDDING. I redid almost every damn icon several times over, as I figured out new things to do, or changed something. because I wanted a different background, or it wasn't clean enough, or Ticky's skin wasn't light/dark enough. If you only save a jpg you have to start ALL OVER and it's VERY TIRESOME. There is an easy action you can make to save yourself both a *.psd and a *.jpg file easily.
How? Well, first start your recording, than follow this actions exactly.
Go up to File
Choose Save As...
Save the image as a *.psd, since you should have layers, this will be the default option - DO NOT CHANGE IT'S NAME
Once it is saved, go to Layer on the toolbar
Choose Flatten
Now again go to Save As...
This time save as a *.jpg (or whatever you like) - ONCE AGAIN, DO NOT CHANGE IT'S NAME
Now end your recording.
Your final action should look the picture. As you might have noticed, the key is to not specify a certain name, only a folder. Ideally, you are working from already made icons, and so they are already organized however you like them. This will save, side by side, a *.jpg you can upload and a *.psd that you can update whenever you want.
Keep in mind that you need a new action for each folder you want to save in, thus why I have "Color Save Black" and "Color Save White" actions.
BTW, NISHI IS RIGHT. SAVE YOUR FUCKING COLORS. I use swatches. By right clicking a swatch you can rename it however you like if you don't have a good memory. The first sixty or so colors there are the defaults, which I keep for when I don't know WHAT I want and just want to poke around. The last few where the colors start getting weird are ones I use for Ticky's icons (the gold-orange is his eyes, the gray-brown the brown icons, the dark brown is for the blood effects, etc, the red way later on is Luke's overlay).
The Color Fill Layer
First, a basic one. This icon is just the brown layer and the shirt.
For Ticky's Black icons I have an action which, all at once, creates the brown layer, set's it to multiply, and then creates a blank layer and selects it so that I can do th eye color/smoke color/shirt color whatever on that layer.
The brown layer is solid color I use by going down to the 'create new fill or adjustment layer' option you see at the bottom of the layers tab here. Technically, simply making a new layer and filling it with whatever color you want via paint bucket will not yield a different effect. HOWEVER:
By clicking that little colored box on the layer? You can adjust the color of that layer however you like and watch the effect it has on your icon.
White Effects and the Burn/Dodge Tools
1
2
I fiddled around a LOT to find various effects that would make icons interesting without being overwhelming. It's a lot more boring without the white shirt, right? But I didn't want a background because... well. It's such a hot image on it's own. It doesn't really need my HELP.
As you can see in image two, Ticky's shirt layer is totally separate. I drew white onto the layer, set it to 'screen' and adjusted it til it was noticeable but not completely distracting, in this case 60% (though I use between 25-60% for various icons). Then I went through and carefully erased so the white didn't go over the outline.
In THIS particular picture, you can notice how Ticky's shirt gets noticeably darker as it gets lower? Well, the thing with screen is, it WILL go over your darks, but not as strongly the darker they are! You can either thus erase the white in that area, or you can darken the darks, or a mixture of both.
THE BURN/DODGE TOOLS ARE YOUR FRIENDS.
1 - You can find them here, along side the sponge tool. The way they work? Well Burn makes whatever you use it on darker, and Dodge makes whatever you use it on lighter.
2 - This is the Range that you will effect when using Dodge/Burn. Your options are Highlights, Midtones and Shadow, this is the same for both tools. Basically, if you use Burn and set it to Shadows you will darken ONLY darker pixels. I use this tool OBSESSIVELY to get those annoying little darkgray dots out of Ticky's black hair. Similarly! If you use the Dodge tool and set your range to Highlights, you will lighten all those little barely-gray specks you get in virtually all scans.
WHY IS THIS AWESOME? Well, if you do a quick 'burn' of your darker lines, you then can use 'dodge' to get rid of most screentones without the effect or carefully erasing everything! Or if your solid blacks are MARED WITH GRAY but using levels will make the image too pixely? Burn them out of there.
3 - This is your exposure, basically how strong of an effect the tool will have. I tend to keep mine pretty damn low, it builds up fast, trust me. 20 - 30% is usually plenty. Exposure is useful because if you set it low enough and are careful, and use a broad stroke you can even out skin tones by dodging/burning in Midtone range. I use this a lot on Ticky icons when I don't have HQ volume scans to work from.
Anyway, in THIS PARTICULAR ICON I used Burn to darken Ticky's shirt, gradually more-so as it got lower. But any time I use 'screen' to highlight Ticky's shirt or something I usually use a bit of Burn to darken the lines underneath.
Aaand that's really all there is to that icon! I use the white effect a lot in Ticky's icons. The smoke gets a lower opacity, in the 30-40 range, and if I have multiple screens (smoke and shirt) they both get different layers with different opacity levels.
The Eye Likes Varity as my art teacher always liked to remind me. Just a little change to a simple image makes it far more interesting and enjoyable.
Backgrounds: Preparation
FIRST OF ALL: To use backgrounds to you need patterns! I kindly have zipped and uploaded all of my patterns which I gathered from various places on the internet.
To use them, download them, then unzip them in your Photoshop Pattern's folder, for me the path to this is C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Patterns
This is the default path, the only thing that should be different is the folder in italics, which will reflect whatever version you are using.
Okay, so ON USING PATTERNS TO CREATE BACKGROUNDS. First get to know your stuff
1- You get to Patterns by going to the Paint Bucket and changing the drop down 'foreground' option to 'pattern'.
2- This little drop down pattern shows you your Default Presets. Note that mine are all monochrome. If you have a need for colored patterns, I suggest keeping them in a different preset for the sake of your sanity. Anyway, if you select one of these and then use the paint bucket you will 'fill' the image or selected area with that pattern.
3- NOTE THAT LARGE THUMBNAIL is checked. Don't be stupid like me and leave on Small Thumbnail for ages. IT'S MUCH EASIER to choose a pattern when the thumbnail is big enough you can see the pattern. orz
4- Okay, now go HERE.
Okay, this is your Preset Manager. It is your dear friend.
I suggest what you do is you delete all of the Adobe default presets (which tend to be colored or nature textured) and then load up all the ones I have you. You can do this by selecting Load... and directing yourself to the Pattern's folder I talked about earlier. You can only load *.pat files here.
Once you load up the ones I gave you (and whatever else you want) go through them and delete ones you don't like. By holding ctrl you can select multiple patterns at once to delete. I'd get rid of the nature patterns ones, the stone ones, the wood ones, and anything in color. Generally speaking you want simple patterns for your icons, and something that will complement the linework of your character.
Once you are done, I suggest you click "Save Set..." and save this set of patterns just incase, and otherwise click Done.
Backgrounds: Selecting, Filling, Fucking With
Backgrounds are actually WAY easier than they appear.
Okay, things to notice about this.
1 - SEE HOW THIS LAYER ISN'T ACTIVE? If you get into fucking around with backgrounds, you're going to have to flip around between choices. Using the 'Snapshot' option in your history is one way to do it, but also? It's a good idea to just. Make new layers! In this case I didn't use Layer 1, but I kept it incase I ever changed my mind.
2 - The background I actually used. Note that it's above the base image but below the Color Fill layer. You want it right there because if your layer has any white (instead of negative space) or gray, it will filter through the brown.
While I'm at it, the 'Screen'ed shirt layer? Goes above the color fill layer or it won't work.
Okay, Selecting Your Background Space
First of all, you obviously want a clean icon for this. You now know how to use layers, the erase tool and the dodge/burn tools so I assume you can get that far on your own. In my case I like to have the border already on the icon, but that's up to you.
Now the Magic Wand Tool.
1 - This is your TOOL. Love it. Magic wand tool selects any area you click.
2 - In this case, I clicked the MASSIVE WHITE SPACE there, and, that's all I need to do!
3 - From left to right these buttons are:
New Selection- what it sounds like. Removes any previous selection and creates a new one where you clicked.
Add to Selection- will KEEP your previous selection and add to it, whether this be a few more barely-gray pixels that didn't make the initial selection, or a whole new area of the image. Holding down shift as you make your additional selection has the same effect.
Subtract from Selection- Like 'Add to Selection' but in reverse
Intersect with Selection- ......I don't know.
4 - IMPORTANT STUFF.
Tolerance refers, basically, to how much 'alteration' from the color you select can occur. Basically, at 0 tolerance NOTHING but the pure beautiful white I click on will be selected. If I upped that a notch or two, it would also select those light grays, more and it will select darker grays, etc. The larger the tolerance the greater the deviation from the color I select.
Contiguous basically means 'pixels must be touching'. If I were to de-select this option and then click a white pixel in the image, EVERY white pixel in the image will be selected, even if they are divided by a big black line.
Sample All Layers means it will treat all layers as one. So even if you're technically on the background layer, if you have another layer above that, it will count that into it's selection.
Now you have your selection. BEFORE CHOOSING YOUR BACKGROUND I heavily suggest TWO IMPORTANT THINGS.
1- Constrict Your Selection. Nishi's tutorial covers this. It amounts to making your selection, then going to Select >> Modify >> Constrict. I suggest constricting by 1 pixel. When backgrounds intersect with your character's lines and the border they don't look as nice. Also? Make yourself a recording of this.
2- Make A New Layer for your background, select it, then set it to Multiply. This is key for several reasons. First of all, you want to make your background on a new layer so you can switch it in and out, so you can change your mind without messing with your clean icon. Secondly, when you do backgrounds you use the History tab OBSESSIVELY. Jumping back to pick something else and try again. If You Do Not Make A Change to the Layer (by setting it to multiply right then) You Have To Reselect That Layer Every Goddamn Time. IT'S VERY ANNOYING. So Select it, set it to multiply (which you need it to be on anyway) and then go about doing your backgrounds.
And once you have your selection? It's pretty easy. Choose the Background you want and click anywhere within the selection you've made. Where you click does not matter, the pattern will come out the same. Additionally, if you have two separate areas clicked, or even if you do the pattern twice on different parts of the image, the background will APPEAR completely connected.
If you like you can use the 'Move' tool to shift the pattern around, but otherwise it will always appear exactly the same.
Helpful Tip! If you find your selection line annoying, but don't want to deselect it because you need that? Ctrl + H will Hide selection lines, highlights, slice lines, rulers and pretty much anything that isn't actually a part of the image. This is especially helpful when you're editing selected text and don't want to see it highlighted.
Anyway, if you don't like the background you've selected, just go back an action on your History Tab and try a new one. If you do like it, leave a layer of it there, make a new one, set it to Multiply and try some other options.
This is my most complicated background icon. MY WHYS LET ME SHOW YOU IT.
1- This layer is set to Screen with 16% Opacity. It contains a checker-patterned background.
2- This layer is set to Multiply with 52% Opacity. It ALSO contains a checker-patterned background.
3- This layer is Ticky's shirt, which is set to Screen with 30% Opacity.
Now, remember what I said about keeping your background under the Color Fill layer? WELL CLEARLY, THERE ARE EXCEPTIONS TO YOUR RULE. In this case, the pattern I'm working with has dark grays, light grays and white.
Look what happens if I make this icon the way I 'normally' would. Layer 2, the layer set to 'Multiply', is now below the Color Fill layer and I set its Opacity to 100%. Layer 1, the 'Screen'ed layer, is turned off. It's not BAD? But it's still kind of boring.
Or! If I turn off Layer 2, the 'Multiply' layer, and set Layer 1, the 'Screen'ed layer to 100%, it just looks sort of dumb!
By combining the two bring forward both the lights and the darks in a nice mix that makes the icon more interesting.
SOME OTHER IDEAS! Try inverting your backgrounds to get different effects! Going to Image >> Adjustments >> Invert will turn white to black and black to white. If you have a pattern that uses black and 'negative space' instead of black and white, create a layer under it and fill it with white. Turn off ALL LAYERS except for the pattern and your white background, then go to Layer >> Merge Visible to make these one layer. Then you can Invert effectively. I have some backgrounds that are actually supposed to be thin black lines, but I inverted to get a dark background with thin white lines that suit black ticky better.
Also, since a pattern lays out the same EVERY TIME, try creating two layers with the same pattern, set one to 'Screen' to bring out the lights, and one to 'Multiply' to carry up the darks. Or Invert one layer and not the other, and play around with Screen/Multiply and the Opacities. YOU CAN GET A LOT OF VARITY THIS WAY.
Gold Eyes, Red Hearts and Dramatic Lighting Effects
As something of a disclaimer? I figured out ALL of these by simply screwing around with layers and colors until I got the effect I wanted. THEY WORK FOR TICKY. Chances are you want something different for your character. But here's some ideas to get you started.
Ticky's eyes are simply a orange-gold on their own layer, which is set to 'Overlay' at 60% Opacity. Overlay works because the gold is much more saturated than the brown layer below it. If it were a milder color it wouldn't stick out as well, and a different layer setting might be necessary.
I'm rather proud of this one, as it took a while of screwing with to get right.
1- This is your basic background layer. I selected the space I wanted to darken, then filled it in with just black instead of a pattern. It is set to 'Multiply' and 100% Opacity. If you look at the little box though, you can see that there is a circle of gray where the black has been lightened. To do this I used the Eraser tool, set to probably 50% Opacity or so, and just clicked once to lighten that whole thing to make a circle of 'light'.
2- The flame! This is made just like the eye layers. Gold color on a 'Overlay' layer, only this one is set to 100% Opacity to give a stronger effect. I also used a slightly darker orange to give it a better 'flame' effect. It's important to be sparing in these kinds of details though, since these icons are meant to be artistic more than realistic.
3- The KEY LAYER. In order to do this I Inverted the selection I used to make the background. By going to Select >> Inverse after making Layer 2, it pulls my selection inside out. Basically, now I can effect Ticky without effecting the background! I had to screw around a while, but what I ended up with was using a pale yellow circle that follows the same path as the light gray of the light-gray one on the background. Then the layer is set to 'Screen' with 17% Opacity. I then went and erased the yellow on the underside of Ticky's upper lip to give a bit more of a shadow effect.
Altogether it gives the effect of a weak yellow light. It works because all the different colors I use still come from the same basic Orange/Yellow hue, so they don't clash or get too distracting but rather complement each other.
K now that you probably have the GENERAL IDEA I'm going to go faster. Here are some layer combinations I did to get certain effects.
1- The same color I use for the Color Fill layer. This layer is set to 'Color Dodge' with 60% Opacity.
2- Over that, a white circle, slightly smaller than the brown below it, set to 'Hard Mix'* with 20% Opacity.
*Hard Mix is new to the CS series, I believe. Linaer Light and Vivid Light tend to have very similar effects.
Made the same as the other example, only I erased the white on the 'Hard Mix' layer where Ticky is, to make him more obvious in the image and give the impression he is in front of the explosion.
Still with the Color Dodge/Hard Mix combo, but this time I used the Erase too set to a low Opacity to fade out the edges of the circle for a gradient effect.
Something New!
1- Your normal Color Fill layer. No changes here.
2- Background layer, but with the pattern going over the whole image to give Ticky 'action lines', and above the Color Fill. This is set to 'Color Dodge' with 72% Opacity
3- Another Color Fill Layer! This is set to 'Hard Mix' with 34% Opcaity.
I really just made this icon by screwing around unti I liked the effects.
Layer 2 is set to Color Dodge at 100% Opacity. In this case I dropped a paint bucket of the same brown I use into a new layer so I could go through and Erase it from around Ticky. Now the trees are all nice and stark and creepy.
KEEP IN MIND you are FAR MORE LIKELY to find a new effect by just screwing with varieties of your base color, than going all over the rainbow. AGAIN. Different saturations/lightness of the same hue look FABULOUS next to each other. RANDOM SHOTS OF GREEN? Not so much. (Also, opposite complement, thus Nishi's yellow/blue scheme. But if you go around with a red/green set of icons you're going to look kinda christmasy).
Covered the cards with white on their own layer. Set that layer to 'Vivid Light' with 37% Opacity to give them a nice glowy effect.
I use this same effect on these icons:
and
1- This one took a while. I had to carefully clean out around the hand and the heart to get a clean white space, and redraw some of the fingers. Then I selected that, constricted my selection and made a basic black ground layer.
2- Basic Color Fill layer.
3- This is Ticky's glove. Drawn in with white, set to 'Screen' and 30% Opacity.
4- The heart! Drawn in with the default brown I'm using, set to 'Hard Mix' and 54% Opacity.
As I recall, I went back with Burn and Dodge to edit the main image and make the heart a bit darker at the base and lighter at the top to give it the gradient effect you see here.
Enough brown, no? Ticky's Butterfly Icons are made with a bright blue Color Fill layer set to 'Screen'. I wanted to give them the electric effect you see in the anime, but still be clearly visible. Plus, I knew his hobo form would be some variation of blue, and I didn't want my icon set to have a large color variety.
The Hobo Icons
The Hobo Icons TOOK A WHILE because I wanted them to be clearly be in the 'pattern' as the Black Icons, yet distinctly different as well. I knew I wanted some sort of blue, but hesitated for a while because. well. Ticky's skin color isn't blue in his white form! Where as it is brown in his black form. Anyway, I fucked around for a while and landed on this.
NOTE I HAVE TWO COLOR FILL LAYERS. This is for a very specific purpose.
1- This Color Fill is a very dark, slightly desaturated blue. It is set to 'Screen' and 100% Opacity so that basically, any of the black from the Canvas Layer will be filtered to this shade of blue.
2- Next is a light, desaturated blue. SAME HUE!. This layer is set to Multiply and 100% Opacity, meaning it will just add itself to all the layers below it. Since the black lines are already fairly dark, you don't really notice the effect, but the white and light grays are clearly now light blue.
3- After some debate, I decided the reason Ticky's shirt looked nice painted white in the Black Side icons was the contrast, so for his White Side I painted in his shirt Black on another layer. This layer is set to 'Linear Light' at 20% Opacity, giving it a nice gray that doesn't distract from the overall blue but still complements Ticky's paleness.
4- Eye layer! The only one I needed for White Ticky. I filled around for a white and ended up coloring in his eyes with dark brown, then setting the layer to 'Vivid Light' and 90% Opacity.
After I figured out how I wanted to do the White Icons, I made an Action Recording that set up the two color fill layers automatically.
If you were wondering why I don't use black lines on my White Icons, this is why. By turning off that dark blue Color Fill layer, the icon is suddenly much flatter and more uninteresting, no? It doesn't look like a blue scheme so much as the white's being blue for no real reason.
Otherwise, Ticky's White icons are made in mostly the same fashion. Backgrounds are still set to multiply, and need to be below the Color Fill layers. I used the 'White Effects' in his glasses and his smoke, but kept it subtle. Even if it's not glaringly obvious that the change is there, the eye will still pick on it and enjoy it better than if it was really clearly WHITE.
Aaand! That's it!
Some things that keep in mind are that 'Patterns' are really just screentones. You make them 'Backgrounds' by keeping them in the background. But if you ever want to oh, fix a character's uneven skintone by just completely redoing it? This is basically how digital screentones are done, and you can do it do it with some careful selection/erasing and the use of the right pattern.
This site seems to be a good place to get a varity of screentones. My pattern package already has some things form this site.
I was at one point going to make a guide for icon cleaning with Burn/Dodge but I think this hits the points well enough that you can all figure it out?
If you have any questions, just let me know. I tried to be as clear as I could be.
And, incase you hadn't noticed, making icons like this takes literally FOREVER. But it is nice to have done. It's not a style that would work on all characters, either, but if you're able to get clean pictures of your characters and erase backgrounds and replace them with what you want, it will work nicely.
Also, if you find my layout a bit odd, it's because I've MOVED ON to Photoshop CS3, which is not particularly different from 8.0 other than a cleaner layout which I prefer. You should be able to follow along just fine whichever version you have.
**Also, a pre-emptive note. When I talk about Opacity in this guide as dealing with Layers, you may note in my images that it's actually the 'Fill' bar that is down and the 'Opacity' one is always at 100%. I'm not TOTALLY SURE of the difference between Fill and Opacity, other than Fill seems to effect solid blacks less when filtering layers, thus why I like it for these icons. However, they do more or less the same thing.
***I Tried to keep the file sizes on these images as small as possible. All the images in total amount to 1.5mb, so that's about as dial-up friendly as I get.
Getting Prepared
Okay, first of all guys. If you're going to do this sort of HEAVY ICON UPDATING it's VERY IMPORTANT to save everything and have copies. Cuz it could be you will do twenty icons, decide you hate it, and want to go back and you want to have a way to do that easily. I simply made duplicate folders of Ticky's White and Black icons, and saved all my new icons in the 'neo' folders. Incase I ever don't like Ticky's icons? I can go back to the old thing no prob.
ALSO IMPORTANT. SAVE *.PSDs OF EVERYTHING. I AM NOT FUCKING KIDDING. I redid almost every damn icon several times over, as I figured out new things to do, or changed something. because I wanted a different background, or it wasn't clean enough, or Ticky's skin wasn't light/dark enough. If you only save a jpg you have to start ALL OVER and it's VERY TIRESOME. There is an easy action you can make to save yourself both a *.psd and a *.jpg file easily.
How? Well, first start your recording, than follow this actions exactly.
Go up to File
Choose Save As...
Save the image as a *.psd, since you should have layers, this will be the default option - DO NOT CHANGE IT'S NAME
Once it is saved, go to Layer on the toolbar
Choose Flatten
Now again go to Save As...
This time save as a *.jpg (or whatever you like) - ONCE AGAIN, DO NOT CHANGE IT'S NAME
Now end your recording.
Your final action should look the picture. As you might have noticed, the key is to not specify a certain name, only a folder. Ideally, you are working from already made icons, and so they are already organized however you like them. This will save, side by side, a *.jpg you can upload and a *.psd that you can update whenever you want.
Keep in mind that you need a new action for each folder you want to save in, thus why I have "Color Save Black" and "Color Save White" actions.
BTW, NISHI IS RIGHT. SAVE YOUR FUCKING COLORS. I use swatches. By right clicking a swatch you can rename it however you like if you don't have a good memory. The first sixty or so colors there are the defaults, which I keep for when I don't know WHAT I want and just want to poke around. The last few where the colors start getting weird are ones I use for Ticky's icons (the gold-orange is his eyes, the gray-brown the brown icons, the dark brown is for the blood effects, etc, the red way later on is Luke's overlay).
The Color Fill Layer
First, a basic one. This icon is just the brown layer and the shirt.
For Ticky's Black icons I have an action which, all at once, creates the brown layer, set's it to multiply, and then creates a blank layer and selects it so that I can do th eye color/smoke color/shirt color whatever on that layer.
The brown layer is solid color I use by going down to the 'create new fill or adjustment layer' option you see at the bottom of the layers tab here. Technically, simply making a new layer and filling it with whatever color you want via paint bucket will not yield a different effect. HOWEVER:
By clicking that little colored box on the layer? You can adjust the color of that layer however you like and watch the effect it has on your icon.
White Effects and the Burn/Dodge Tools
1
2
I fiddled around a LOT to find various effects that would make icons interesting without being overwhelming. It's a lot more boring without the white shirt, right? But I didn't want a background because... well. It's such a hot image on it's own. It doesn't really need my HELP.
As you can see in image two, Ticky's shirt layer is totally separate. I drew white onto the layer, set it to 'screen' and adjusted it til it was noticeable but not completely distracting, in this case 60% (though I use between 25-60% for various icons). Then I went through and carefully erased so the white didn't go over the outline.
In THIS particular picture, you can notice how Ticky's shirt gets noticeably darker as it gets lower? Well, the thing with screen is, it WILL go over your darks, but not as strongly the darker they are! You can either thus erase the white in that area, or you can darken the darks, or a mixture of both.
THE BURN/DODGE TOOLS ARE YOUR FRIENDS.
1 - You can find them here, along side the sponge tool. The way they work? Well Burn makes whatever you use it on darker, and Dodge makes whatever you use it on lighter.
2 - This is the Range that you will effect when using Dodge/Burn. Your options are Highlights, Midtones and Shadow, this is the same for both tools. Basically, if you use Burn and set it to Shadows you will darken ONLY darker pixels. I use this tool OBSESSIVELY to get those annoying little darkgray dots out of Ticky's black hair. Similarly! If you use the Dodge tool and set your range to Highlights, you will lighten all those little barely-gray specks you get in virtually all scans.
WHY IS THIS AWESOME? Well, if you do a quick 'burn' of your darker lines, you then can use 'dodge' to get rid of most screentones without the effect or carefully erasing everything! Or if your solid blacks are MARED WITH GRAY but using levels will make the image too pixely? Burn them out of there.
3 - This is your exposure, basically how strong of an effect the tool will have. I tend to keep mine pretty damn low, it builds up fast, trust me. 20 - 30% is usually plenty. Exposure is useful because if you set it low enough and are careful, and use a broad stroke you can even out skin tones by dodging/burning in Midtone range. I use this a lot on Ticky icons when I don't have HQ volume scans to work from.
Anyway, in THIS PARTICULAR ICON I used Burn to darken Ticky's shirt, gradually more-so as it got lower. But any time I use 'screen' to highlight Ticky's shirt or something I usually use a bit of Burn to darken the lines underneath.
Aaand that's really all there is to that icon! I use the white effect a lot in Ticky's icons. The smoke gets a lower opacity, in the 30-40 range, and if I have multiple screens (smoke and shirt) they both get different layers with different opacity levels.
The Eye Likes Varity as my art teacher always liked to remind me. Just a little change to a simple image makes it far more interesting and enjoyable.
Backgrounds: Preparation
FIRST OF ALL: To use backgrounds to you need patterns! I kindly have zipped and uploaded all of my patterns which I gathered from various places on the internet.
To use them, download them, then unzip them in your Photoshop Pattern's folder, for me the path to this is C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Patterns
This is the default path, the only thing that should be different is the folder in italics, which will reflect whatever version you are using.
Okay, so ON USING PATTERNS TO CREATE BACKGROUNDS. First get to know your stuff
1- You get to Patterns by going to the Paint Bucket and changing the drop down 'foreground' option to 'pattern'.
2- This little drop down pattern shows you your Default Presets. Note that mine are all monochrome. If you have a need for colored patterns, I suggest keeping them in a different preset for the sake of your sanity. Anyway, if you select one of these and then use the paint bucket you will 'fill' the image or selected area with that pattern.
3- NOTE THAT LARGE THUMBNAIL is checked. Don't be stupid like me and leave on Small Thumbnail for ages. IT'S MUCH EASIER to choose a pattern when the thumbnail is big enough you can see the pattern. orz
4- Okay, now go HERE.
Okay, this is your Preset Manager. It is your dear friend.
I suggest what you do is you delete all of the Adobe default presets (which tend to be colored or nature textured) and then load up all the ones I have you. You can do this by selecting Load... and directing yourself to the Pattern's folder I talked about earlier. You can only load *.pat files here.
Once you load up the ones I gave you (and whatever else you want) go through them and delete ones you don't like. By holding ctrl you can select multiple patterns at once to delete. I'd get rid of the nature patterns ones, the stone ones, the wood ones, and anything in color. Generally speaking you want simple patterns for your icons, and something that will complement the linework of your character.
Once you are done, I suggest you click "Save Set..." and save this set of patterns just incase, and otherwise click Done.
Backgrounds: Selecting, Filling, Fucking With
Backgrounds are actually WAY easier than they appear.
Okay, things to notice about this.
1 - SEE HOW THIS LAYER ISN'T ACTIVE? If you get into fucking around with backgrounds, you're going to have to flip around between choices. Using the 'Snapshot' option in your history is one way to do it, but also? It's a good idea to just. Make new layers! In this case I didn't use Layer 1, but I kept it incase I ever changed my mind.
2 - The background I actually used. Note that it's above the base image but below the Color Fill layer. You want it right there because if your layer has any white (instead of negative space) or gray, it will filter through the brown.
While I'm at it, the 'Screen'ed shirt layer? Goes above the color fill layer or it won't work.
Okay, Selecting Your Background Space
First of all, you obviously want a clean icon for this. You now know how to use layers, the erase tool and the dodge/burn tools so I assume you can get that far on your own. In my case I like to have the border already on the icon, but that's up to you.
Now the Magic Wand Tool.
1 - This is your TOOL. Love it. Magic wand tool selects any area you click.
2 - In this case, I clicked the MASSIVE WHITE SPACE there, and, that's all I need to do!
3 - From left to right these buttons are:
New Selection- what it sounds like. Removes any previous selection and creates a new one where you clicked.
Add to Selection- will KEEP your previous selection and add to it, whether this be a few more barely-gray pixels that didn't make the initial selection, or a whole new area of the image. Holding down shift as you make your additional selection has the same effect.
Subtract from Selection- Like 'Add to Selection' but in reverse
Intersect with Selection- ......I don't know.
4 - IMPORTANT STUFF.
Tolerance refers, basically, to how much 'alteration' from the color you select can occur. Basically, at 0 tolerance NOTHING but the pure beautiful white I click on will be selected. If I upped that a notch or two, it would also select those light grays, more and it will select darker grays, etc. The larger the tolerance the greater the deviation from the color I select.
Contiguous basically means 'pixels must be touching'. If I were to de-select this option and then click a white pixel in the image, EVERY white pixel in the image will be selected, even if they are divided by a big black line.
Sample All Layers means it will treat all layers as one. So even if you're technically on the background layer, if you have another layer above that, it will count that into it's selection.
Now you have your selection. BEFORE CHOOSING YOUR BACKGROUND I heavily suggest TWO IMPORTANT THINGS.
1- Constrict Your Selection. Nishi's tutorial covers this. It amounts to making your selection, then going to Select >> Modify >> Constrict. I suggest constricting by 1 pixel. When backgrounds intersect with your character's lines and the border they don't look as nice. Also? Make yourself a recording of this.
2- Make A New Layer for your background, select it, then set it to Multiply. This is key for several reasons. First of all, you want to make your background on a new layer so you can switch it in and out, so you can change your mind without messing with your clean icon. Secondly, when you do backgrounds you use the History tab OBSESSIVELY. Jumping back to pick something else and try again. If You Do Not Make A Change to the Layer (by setting it to multiply right then) You Have To Reselect That Layer Every Goddamn Time. IT'S VERY ANNOYING. So Select it, set it to multiply (which you need it to be on anyway) and then go about doing your backgrounds.
And once you have your selection? It's pretty easy. Choose the Background you want and click anywhere within the selection you've made. Where you click does not matter, the pattern will come out the same. Additionally, if you have two separate areas clicked, or even if you do the pattern twice on different parts of the image, the background will APPEAR completely connected.
If you like you can use the 'Move' tool to shift the pattern around, but otherwise it will always appear exactly the same.
Helpful Tip! If you find your selection line annoying, but don't want to deselect it because you need that? Ctrl + H will Hide selection lines, highlights, slice lines, rulers and pretty much anything that isn't actually a part of the image. This is especially helpful when you're editing selected text and don't want to see it highlighted.
Anyway, if you don't like the background you've selected, just go back an action on your History Tab and try a new one. If you do like it, leave a layer of it there, make a new one, set it to Multiply and try some other options.
This is my most complicated background icon. MY WHYS LET ME SHOW YOU IT.
1- This layer is set to Screen with 16% Opacity. It contains a checker-patterned background.
2- This layer is set to Multiply with 52% Opacity. It ALSO contains a checker-patterned background.
3- This layer is Ticky's shirt, which is set to Screen with 30% Opacity.
Now, remember what I said about keeping your background under the Color Fill layer? WELL CLEARLY, THERE ARE EXCEPTIONS TO YOUR RULE. In this case, the pattern I'm working with has dark grays, light grays and white.
Look what happens if I make this icon the way I 'normally' would. Layer 2, the layer set to 'Multiply', is now below the Color Fill layer and I set its Opacity to 100%. Layer 1, the 'Screen'ed layer, is turned off. It's not BAD? But it's still kind of boring.
Or! If I turn off Layer 2, the 'Multiply' layer, and set Layer 1, the 'Screen'ed layer to 100%, it just looks sort of dumb!
By combining the two bring forward both the lights and the darks in a nice mix that makes the icon more interesting.
SOME OTHER IDEAS! Try inverting your backgrounds to get different effects! Going to Image >> Adjustments >> Invert will turn white to black and black to white. If you have a pattern that uses black and 'negative space' instead of black and white, create a layer under it and fill it with white. Turn off ALL LAYERS except for the pattern and your white background, then go to Layer >> Merge Visible to make these one layer. Then you can Invert effectively. I have some backgrounds that are actually supposed to be thin black lines, but I inverted to get a dark background with thin white lines that suit black ticky better.
Also, since a pattern lays out the same EVERY TIME, try creating two layers with the same pattern, set one to 'Screen' to bring out the lights, and one to 'Multiply' to carry up the darks. Or Invert one layer and not the other, and play around with Screen/Multiply and the Opacities. YOU CAN GET A LOT OF VARITY THIS WAY.
Gold Eyes, Red Hearts and Dramatic Lighting Effects
As something of a disclaimer? I figured out ALL of these by simply screwing around with layers and colors until I got the effect I wanted. THEY WORK FOR TICKY. Chances are you want something different for your character. But here's some ideas to get you started.
Ticky's eyes are simply a orange-gold on their own layer, which is set to 'Overlay' at 60% Opacity. Overlay works because the gold is much more saturated than the brown layer below it. If it were a milder color it wouldn't stick out as well, and a different layer setting might be necessary.
I'm rather proud of this one, as it took a while of screwing with to get right.
1- This is your basic background layer. I selected the space I wanted to darken, then filled it in with just black instead of a pattern. It is set to 'Multiply' and 100% Opacity. If you look at the little box though, you can see that there is a circle of gray where the black has been lightened. To do this I used the Eraser tool, set to probably 50% Opacity or so, and just clicked once to lighten that whole thing to make a circle of 'light'.
2- The flame! This is made just like the eye layers. Gold color on a 'Overlay' layer, only this one is set to 100% Opacity to give a stronger effect. I also used a slightly darker orange to give it a better 'flame' effect. It's important to be sparing in these kinds of details though, since these icons are meant to be artistic more than realistic.
3- The KEY LAYER. In order to do this I Inverted the selection I used to make the background. By going to Select >> Inverse after making Layer 2, it pulls my selection inside out. Basically, now I can effect Ticky without effecting the background! I had to screw around a while, but what I ended up with was using a pale yellow circle that follows the same path as the light gray of the light-gray one on the background. Then the layer is set to 'Screen' with 17% Opacity. I then went and erased the yellow on the underside of Ticky's upper lip to give a bit more of a shadow effect.
Altogether it gives the effect of a weak yellow light. It works because all the different colors I use still come from the same basic Orange/Yellow hue, so they don't clash or get too distracting but rather complement each other.
K now that you probably have the GENERAL IDEA I'm going to go faster. Here are some layer combinations I did to get certain effects.
1- The same color I use for the Color Fill layer. This layer is set to 'Color Dodge' with 60% Opacity.
2- Over that, a white circle, slightly smaller than the brown below it, set to 'Hard Mix'* with 20% Opacity.
*Hard Mix is new to the CS series, I believe. Linaer Light and Vivid Light tend to have very similar effects.
Made the same as the other example, only I erased the white on the 'Hard Mix' layer where Ticky is, to make him more obvious in the image and give the impression he is in front of the explosion.
Still with the Color Dodge/Hard Mix combo, but this time I used the Erase too set to a low Opacity to fade out the edges of the circle for a gradient effect.
Something New!
1- Your normal Color Fill layer. No changes here.
2- Background layer, but with the pattern going over the whole image to give Ticky 'action lines', and above the Color Fill. This is set to 'Color Dodge' with 72% Opacity
3- Another Color Fill Layer! This is set to 'Hard Mix' with 34% Opcaity.
I really just made this icon by screwing around unti I liked the effects.
Layer 2 is set to Color Dodge at 100% Opacity. In this case I dropped a paint bucket of the same brown I use into a new layer so I could go through and Erase it from around Ticky. Now the trees are all nice and stark and creepy.
KEEP IN MIND you are FAR MORE LIKELY to find a new effect by just screwing with varieties of your base color, than going all over the rainbow. AGAIN. Different saturations/lightness of the same hue look FABULOUS next to each other. RANDOM SHOTS OF GREEN? Not so much. (Also, opposite complement, thus Nishi's yellow/blue scheme. But if you go around with a red/green set of icons you're going to look kinda christmasy).
Covered the cards with white on their own layer. Set that layer to 'Vivid Light' with 37% Opacity to give them a nice glowy effect.
I use this same effect on these icons:
and
1- This one took a while. I had to carefully clean out around the hand and the heart to get a clean white space, and redraw some of the fingers. Then I selected that, constricted my selection and made a basic black ground layer.
2- Basic Color Fill layer.
3- This is Ticky's glove. Drawn in with white, set to 'Screen' and 30% Opacity.
4- The heart! Drawn in with the default brown I'm using, set to 'Hard Mix' and 54% Opacity.
As I recall, I went back with Burn and Dodge to edit the main image and make the heart a bit darker at the base and lighter at the top to give it the gradient effect you see here.
Enough brown, no? Ticky's Butterfly Icons are made with a bright blue Color Fill layer set to 'Screen'. I wanted to give them the electric effect you see in the anime, but still be clearly visible. Plus, I knew his hobo form would be some variation of blue, and I didn't want my icon set to have a large color variety.
The Hobo Icons
The Hobo Icons TOOK A WHILE because I wanted them to be clearly be in the 'pattern' as the Black Icons, yet distinctly different as well. I knew I wanted some sort of blue, but hesitated for a while because. well. Ticky's skin color isn't blue in his white form! Where as it is brown in his black form. Anyway, I fucked around for a while and landed on this.
NOTE I HAVE TWO COLOR FILL LAYERS. This is for a very specific purpose.
1- This Color Fill is a very dark, slightly desaturated blue. It is set to 'Screen' and 100% Opacity so that basically, any of the black from the Canvas Layer will be filtered to this shade of blue.
2- Next is a light, desaturated blue. SAME HUE!. This layer is set to Multiply and 100% Opacity, meaning it will just add itself to all the layers below it. Since the black lines are already fairly dark, you don't really notice the effect, but the white and light grays are clearly now light blue.
3- After some debate, I decided the reason Ticky's shirt looked nice painted white in the Black Side icons was the contrast, so for his White Side I painted in his shirt Black on another layer. This layer is set to 'Linear Light' at 20% Opacity, giving it a nice gray that doesn't distract from the overall blue but still complements Ticky's paleness.
4- Eye layer! The only one I needed for White Ticky. I filled around for a white and ended up coloring in his eyes with dark brown, then setting the layer to 'Vivid Light' and 90% Opacity.
After I figured out how I wanted to do the White Icons, I made an Action Recording that set up the two color fill layers automatically.
If you were wondering why I don't use black lines on my White Icons, this is why. By turning off that dark blue Color Fill layer, the icon is suddenly much flatter and more uninteresting, no? It doesn't look like a blue scheme so much as the white's being blue for no real reason.
Otherwise, Ticky's White icons are made in mostly the same fashion. Backgrounds are still set to multiply, and need to be below the Color Fill layers. I used the 'White Effects' in his glasses and his smoke, but kept it subtle. Even if it's not glaringly obvious that the change is there, the eye will still pick on it and enjoy it better than if it was really clearly WHITE.
Aaand! That's it!
Some things that keep in mind are that 'Patterns' are really just screentones. You make them 'Backgrounds' by keeping them in the background. But if you ever want to oh, fix a character's uneven skintone by just completely redoing it? This is basically how digital screentones are done, and you can do it do it with some careful selection/erasing and the use of the right pattern.
This site seems to be a good place to get a varity of screentones. My pattern package already has some things form this site.
I was at one point going to make a guide for icon cleaning with Burn/Dodge but I think this hits the points well enough that you can all figure it out?
If you have any questions, just let me know. I tried to be as clear as I could be.
And, incase you hadn't noticed, making icons like this takes literally FOREVER. But it is nice to have done. It's not a style that would work on all characters, either, but if you're able to get clean pictures of your characters and erase backgrounds and replace them with what you want, it will work nicely.