Ask the Icon Maker: Answers; Part 1

[ex_absolute]

In which I answer about half the questions I received.
I talk too much which is why I had to split it into two parts. Part two will be out, probably, next week. Here though I talk about things like: why I have 200+ canvases open at one time in Photoshop, fandoms I like to icon, why I am an insane person, why layer masks are still god, and I put together four or five 'wham, bam, thank you ma'am' tutorials on backgrounds.






raiindust asked What program do you use? What is your favourite application/add on in the program? Do you use any solid/base colours more often than not when working on colouring with an icon?

I use (and have always used) Photoshop 7. It is the program I learned how to icon on, and it is the only program I know how to use. I've played around on a trial version of CS3, but not for very long (and it let me turn my workspace PINK. OMG that was exciting). So, yeah. Photoshop 7. There are a few features (vibrancy and the ability to animate without FIFTY MILLION FRAMES) from the new versions that sound nifty, but mostly I just love my old school V7. I took a SCREENSHOT of what my workspace usually looks like. When I am really paying attention to photoshop, I usually end up with 200+ canvases open at one time, and it gets really, really super cluttered. A lot of icon makers brag about how they made this one icon that had 35+ layers or whatever, but I tend to work with canvases instead. For instance, with this icon (oh, nifty. The big version), I had to open probably at least three canvases with the original screencap on them. And then there were the various cuts/resizes/crops that came from the screencaps, and the actual .psd file. Not to mention the six or seven different textures I played around with just because and then probably three to four variations. Oh and, you know, the final icon. Haha. But I'll talk more about that later!

My favorite application...hm. I don't know if I can answer that one. I just love so much about the program. But I can tell you my favorite base colors, when I use them, are green, blue, black, and purple. That's just because those colors appeal to me, and therefore, I want to make icons that include them, I guess. :D

raiindust and fahrenheit1993 asked how do you decide how to make an icon/How do you go about choosing a cap, and then creating an icon? Do you crop first, colour first, add textures from the very beginning?

Ahaha, I just throw things together and then go for it. Nah, just kidding. Well. Sort of.

First of all, usually I'm not one of those icon makers who is watching a show and then goes 'MUST ICON THIS!'. I have no attention span. If I'm focused on the show, that's it. So my icons aren't usually premeditated that way. The one exception would be if you give me a concept/theme to work with. A good example of that would be THIS icon. When we were given the theme 'name', I thought about it for awhile, and then came up with the idea (and planned it all out) before making the icon. But that so very rarely happens.

So. We've learned thus far that I have no attention span (that probably explains my need for dozens of canvases to be open at once), and that I am usually incapable of designing an icon before I actually start it. Righty-o.

So...usually when I open photoshop, while I might not know what I'll be making, I have a clear intent in mind. For instance, today, I had to make some icons for legendland; so when I opened I knew that a) I needed to make icons of minor characters and that b) they had to be from, of course, Legend of the Seeker. That's usually how I start out a challenge and a fandom in mind.

And then I open whatever screencap site I have bookmarked for that fandom (in today's case it was this site) and start browsing through. I look for screencaps that appeal to me. Sometimes it is because it looks interesting (characters in action, something obstructing a clear view of the character, an interesting shadow/light source). And sometimes I'm looking for a particular emotion/scene (i.e. break her legs, a happy Harry, or Santana smiling). But more often than not, I am drawn to colors. THIS cap is a fantastic example. I mean, look at the green in that! And that's how I figure out which caps I want to use. Typically, I don't rush straight back to photoshop. I find a few that I like first and then start playing around.

Once I have my screencap sitting pretty in photoshop I typically goes straight for the crop, and I try several things before I settle on one thing. You all know that I start with 300x300 canvases for my icons. So usually I create a 300x300 (or if my cap is really, super awesome/I want a close crop, I'll make it bigger...like 650x650 and then resize down to 300x300 from that. So cap >> 650x650 >> 300x300) canvas that is blank (and transparent!). Then I use the selection tool (set to fixed aspect ration) to figure out what part of the screencap looks the niftiest, and the I copy and pate that onto a new canvas. And then resize it to 300x300. And then paste that onto the old 300x300 canvas. Don't ask me why I need two 300x300 versions. I just do.

So screencap, select, copy, resize (300x300). \O/

And now we have THIS!. Huzzah. A base.

Usually it isn't that simple. Actually when I was really working on an icon from this cap, I went through four or five different crops (and I ended up with two icons) before I found what I liked. So the cropping process it really trial and error. Sometimes I get halfway through coloring an icon and scrap it because I decide the crop isn't to my liking.

At any rate, after I crop (and for centered icons? Cropping isn't just crop and then resize. My centered icons actually take a lot of work to make them usable bases. There'll be more on that later!) , I color. I won't go really into detail about the coloring as I did a tutorial about it. But there's lots of soft light layers and lots of my fiddling with opacities and layer visibility. Oh and layer masks. Lots of those.

And finally, textures and text. As far as textures go...I don't have a whole lot downloaded, to be honest. I'm not a huge, huge texture user (and generally speaking, I'm more likely to be really harsh on makers who use textures as a big part of their style (aka. Textures are their style >.<). Not because textures aren't valid tools and heaps cool...just because I don't think creative, awesome icons need textures to be awesome. But that's just personal preference!). But I love light textures like the ones drankmywar makes. And I like dark textures I can put on lighten to make icons moody. Recently, though, I've been trying to use Photoshop tools or the screencap itself to make "textures" (e.g I used another part of the screencap to give the bottom something nifty; Photoshop Filters to give an interesting background to Cara; and parts of the screencap again to spice up this center crop of Xena).

And much like cropping, textures are trial and error. I use them if I need to fill up space, if I want to give a certain feel or color to the icon, if I'm bored out of my mind, etc. Haha.

Text...If the icon says something to me, then it gets text. I don't like to randomly put text on icons. Examples of an icon "speaking" to me: this one, this, this, and this.

I'm not good great at picking out fonts, so my tride and true method is: scroll through the damn font list until something looks alright. And I get the colors from either using the eye dropper to steal colors from the icon or using white/black and then changing the blending mode of the text layer.

And then several crops, some random layers, lots of squinting at my computer screen, various 'wtf?' moments, some annoyance, some panicking, and numerous variations and tests later...I sharpen and resize down to 100x100 (on a separate canvas from the 300x300). Wah lah.

*wheezes* I didn't mean for that to go on so long. Er, moving on.

raiindust asked What are your favourite & least favourite fandoms to icon?

Let's see...My favorites right now are probably:
Xena because of all the bright colors. I look at Xena screencaps, and I see endless possibilities. Even screencaps that look like you can't get anything out of them make interesting icons. Like this! I mean...I turned a chair into interesting purple lights! What other fandom can you do that in? IDK!

Disney because, for the most part, I find the Disney icon community (and by that I, without shame, point directly at elite_disney) to be one of the most supportive. ♥ And it is fun because it is a whole other world from the rest of the stuff I icon. It's animated for goodness sake! It gives me a chance to try stuff that I wouldn't on any other type of icon.

And my least favorite:

Merlin because...well, Merlin caps are difficult to work with and usually very non pretty. :-/ That's why I hardly ever icon it anymore. *nods* But, I mean, can't hate on it too much because it was the catalyst for me sharing my icons with people again.

char_cohen and lacedcrown asked I would like to know how you do backgrounds/Ok, so I have been crushing on this icon for a long time. I was wondering how you made it look so epic with the clouds.

LAYER MASKS! THE BEST TOOL PHOTOSHOP EVER GAVE US! \O/ Oh wait. I'm getting ahead of myself. >.<

Okay, I'm going to try and split this part into coherent sections.

1. Part One: CLOUDS
>> Okay. So clouds. I like clouds. Putting clouds into an icon is pretty. But there's a way to do it and a way not to do it. You can't just...stick an image of clouds onto a screencap. You just can't.

First of all, I never, ever just put clouds onto a transparent background and call it a day. No siree bob. You want your clouds to look like part of the image, even though they are not. So, first off, I recommend actually using a shot from outside. I mean, you can use inside shots, but the lighting is really, really wrong for that. Anyway, then you want to prepare your "sky". How do you do that? Smudge it! Use the smudge tool and prepare a sky.



The top half of the icon has been smudged up to create a sort of fake "sky". That's where your cloud image is going to go. So then the next bit is to find an image of clouds. I usually just google 'clouds' or 'storm clouds' if I want epic stuff. I have a couple of cloud images that I have saved because they were truly awesome, and lucky for you all the cloud stock used in this icon I actually have saved! Ugh. Too big for tinypic. Sorry I can't share. D:

I took the full stock image and then I resized it to 300x400. I want my clouds to cover the whole icon to start off with because it is easier (and it looks better in the end) to integrate with the rest of my base if I do it that way. And then, I think, I change the blending mode to multiply. That way the fake sky and the real sky blend together and take on some of the same colors.

Okay, then comes LAYER MASKS! \O/ You can get excited now, lol. Alright, so you need to add a layer mask to the sky layer, and then MASK THE CLOUDS OFF THE FACES OF THE PEOPLE BECAUSE CLOUDS OVER TOP THEIR FACES LOOKS DUMB, YES? If you read my earlier tutorial, you know that I like to use soft, round brushes for this kind of thing (and by that I mean everything). Don't be afraid to let a little sky overlap the ground, but make sure it is completely off anything human (skin, clothes, etc).



And then I colored. Which basically involved a lot of soft light. Hm. But, when you are coloring, you should make sure to keep a light source in mind. In this one, the sky has the most light in the upper right corner, so I tried to keep my light effects in the same sort of range.



Old Icon
New Icon




Pretty darn close! I think I chose where to put the light blobs a little differently. More light behind in the old version; more light in front in the new version.

So basically, to answer both questions before me move along: To do backgrounds well remember one thing: INTEGRATE. Backgrounds aren't a separate part of your icon, and you shouldn't treat them as such. The goal is to make it a natural part of the icon. So use blend modes and layer masks to do that. :) As for epic: first of all, I point fingers at the image I used of the clouds. It looked pretty epic to begin with. Then, when I color, I tend toward the dramatic anyway because I am all about soft light layers (of various types), lights, and shadows. So I get bright colors, high contrast, and a variance of light and shade that looks...epic, I guess? :D

2. Part Two: PRETTY LIGHTS ETC

Okay. Pretty lights. Since this was all about backgrounds, I figured this sort of background was just a legit as the rest. Backgrounds like these are pretty simple because they always come directly from the screencap itself. I would suggest you use screencaps in which the backgrounds aren't too cluttered with various things. Try natural clutter like trees, or just simply walls and lights. Then use the smudge tool and go wild. If you are afraid you'll mess up, duplicate your base, do you smudging on the duplicate layer, and the add a layer mask and mask away what you don't want from the original base.

Usually I try and stick with a pattern because that means we don't have to blur and fix things so much later. But, for the sake of explaining things, let's just assume I went wild crazy and ended up with this.



So...that'll need to be fixed. Yeah. So this is where the handy dandy amazing Blur Tools come in! I'm not talking just the simple Blur either. Actually, I hardly ever use plain old Blur. We're talking things like Gaussian Blur, Radial Blur, and Motion Blur. All can be found under the Filter menu, and all are insanely fun to work with. So for the base in question, I just went through and tried out the blurs.

Gaussian blur is typically my go to for things like this, but in this case, it looked a little silly. And Motion Blur will be taken care of in the next section, which left me with Radial Blur! Which is the much overlooked runt of the Blur family, but on occasion has served me well! So. I used a little Radial Blur and the masked it away from Spock leaving me with this.



Which, idk, looks kind of nifty, right? I do use a lot of plain, negative space backgrounds (which we'll make fun of in the next section), but when I first started with Xena icons, I liked this swirly light background. It's fun. It spices up a boring icon. And...COLORS. Which is the most important part of backgrounds like these. If there aren't any pretty colors, then I don't bother.



I colored the cap (some variations to spice up the colors, lots of soft light, a little more blur, and bam), and I got this in the end. Which probably would end up in the scrap pile tbh because...the balance is off. :-/ The light side of the icon and the dark side.



So I copied bits from either side, dragged them to the opposite side, and then fiddled around a bit until I got something that was decent. Except, omg, this still sucks. Erm, you see the problem? THE FACE. Okay, I know we're focusing on background here, but...I'm making this icon as I go through this. So it is completely new, and IT NEEDS FIXING. SO the face. Too dark. Too blue. Ugly. MUST FIX.

So a couple of tan multiply layers (masked off everything but Spock's face) and a Diffuse Glow layer (also masked off everything except the face) later...



Which, okay, I'll probably still wander back and try and fix it up some more because I'm a crazy person, but for now I'll stop. *stares at icon; eye twitches*

BACK ON TOPIC. Swirling light backgrounds in summary go like this: SMUDGE TOOL IS YOUR FRIEND. Make sure you have lots of lights, and don't be afraid to experiment with the Blur Tools. And that's it!

3. Part Three: BACKGROUND EXTENSIONS

Yeah, yeah, I know. This was probably the section everyone was interested in anyway, right? I probably should have done it first because, honestly, this is the section that everything is sort of based off of. You have to use bits and piece of this to do Part One and Part Two. BUT WHATEVER. I NEVER GO IN THE RIGHT ORDER OF THINGS ANYWAY.

So background extensions. Um. Let's see. Where to start. I guess we should just start with the basics, right? So.

Part A

Negative space background extensions! These are pretty easy because all you have to do is extend, make it look "flawless", and then color.

I'm just going to do this quick and dirty. No images. You grab a screencap. I recommend one that has a pretty clear background to extend. You can use more complicated things (and sometimes I do), but they make it harder in the end and you'll spend a lot more time making your base pretty (actually, tbh, that's what I always spend the most time on which is why my coloring methods tend to be very simple. I spend half and hour trying to make the base ready. Ahaha.).

Okay, so you have your screencap. I tend to select the bit I want to use, copy, put it on a new canvas, resize so that the width is 300 pixels, and then put it on a 300x300 canvas. And then it is time to do the actual extending.

I do this one of two ways. The first way is probably the easiest. You select the bit of the background that is going to get extended, and then hit Ctrl+t (for those of you who don't know, that's the keyboard shortcut for the Free Transform Tool). Then you just drag upwards until you've fill all the space. 98% of the time, once you've done this you end up with a very subtle stretch line where you started stretching. Sometimes you get a bit of streaking too. So I use Gaussian Blur and layer masks to fix the background up, smooth it out, and give it that 'flawless' look that you can see in both my recent Disney 20in20 sets (especially the Lion King 2 one). Then you just color, sharpen, and resize. Pretty easy.

There's also the second way which you've already experimented with. This way is also better if you're dealing with slightly more complex backgrounds (ones that you can't just Free Transform). This one involves the Smudge Tool again. The smudge tool and I go way back, man. You use the smudge tool to get rid of anything in the background you don't want and also to extend what you do want up to fill the empty space. As with method one, you're going to have some imperfections that can easily be taken care of with Gaussian Blur and layer masks. This is the method I used to make THIS icon do what I wanted. I got rid of some of the wall, and extended the green part up and over to the left to create a full background.

And that's the easy way to do background extensions. So let's get into the harder bits.

Part B

Using the image/screencap itself to extend your background. These are two ways to do this, but the second way will be included in Part C. So, the first way.

The first way is this: Xena or Kahlan and Richard or Cara.
This way is way more complicated (though it won't sound it), and it can be used in infinite amount of ways (and I have used it in many ways). I don't just use it to create backgrounds, but also to create space/to add something else to the icon (as you can see in the example using Kahlan and Richard).

The easiest way to to go about it is just to create some space/to add something. That would be the icon of Xena. There, I just duplicated it, and put it behind her. There's an element of imperfection to it that I actually like. It is the one time I recommend not aspiring to the ultimate goal of "integration". I don't blur. I don't make to part of the rest of the background behind Xena. There's very clearly a line there.

The important part of using this method in this way is that the image you use behind the original base (which, for me, is always part of the original image to begin with) needs to be interesting. Not necessarily eye catching in a way that draws you from the subject but not so boring as a block of plain color (although, I do occasionally use that method as well. It has its place.). In this case, I used a bigger version of the trees/flowers around Xena because the colors and lights were nice.

The second way is Cara. Basically, you go through the motions of the first way, only you actually integrate. To do this, I use layer masks (to get rid of the line) and the blur tool to make it more natural. Once again, it is very important to use something that works with the rest of the base. So I used the trees behind Cara, only I rotated the image a bit so it wasn't exactly the same. We'll do a quick walk through of that then:



So I took the original screencap and resized it. That would be the bottom half of the base here. Then I ran into some problems in that the screencap didn't have anything big enough for me to just crop, resize, and use for the top half. So I had to take two parts of the original screencap and put them together using a layer mask (to get rid of Richard's head...). So the top half is actually two parts of the original screencap put together.



Okay. So. Layer Masks. It might be easier if I just show you the layer palette...here. Both layer masks have been Gaussian Blurred to make the edges softer and to blend everything together.

And then I color...(and ignore the fact that I can still see some of the line on my 300x300 canvas because I know I can't see it in the 100x100...). Coloring was a lot of soft light again. Some variations to add green to the background (masked off Kahlan and Richard, of course), and then some selective coloring because I hate red (Under Red, I took the little Yellow marker and got rid of all the yellow in the reds in the icon. Meaning that the reds all took on a blue/purple quality). Then a little Diffuse glow to make things pop. Almost all these layers had layer masks for various reasons.



The important thing to remember when you're doing this is, again, integrate. Even though you are using different parts of the same screencap, they aren't going to look nice together unless you pay attention to details. For instance, when I used a layer mask, I got rid of the bright white spot of sky by Kahlan's head to allow better integration with the green I was adding in. If you focus on that sort of thing, your icon will come out looking better.

Part C

Motion Blur! Fun times! Okay, I already did a tutorial for this here, and, yes, the Castiel icon used in the example at the beginning is made the same way. The thing with using the motion blur tool is...there's no way to hide it. If you've used it, I (and everyone else) can tell. There's no "natural" or "flawless" in icons like these. You can still integrate, of course! (And, actually, I did a better job on Castiel than I did on Buffy in the tutorial, lol.) But, ultimately, this is the least natural of the lot. And also the one hardest to do exactly right because each image is totally different, and you have to be careful or lines/parts of the original screencap duplicate will show up.

However, this is pretty fun and because you can change the direction and intensity (explained in the tutorial) of the blur, you can do all kinds of fun things. Just don't overdo it. Too much of this in one post, imo, looks ridiculous. I try and limit my use of it especially when I'm making it really obvious (like here).

And, yeah, there you have it! I think I've covered all the basics of extending backgrounds (at least the way I extend backgrounds). So time to move onto the last (and my least favorite) part!

4. Part Four: TEXTURES

Okay. Textures. :-/ Or adding a completely new background to an image (Ares go boom). Or getting rid of the entire background of an image (Want your bad romance). Etc.

Basically this is an exercise in patience and me trying not to yell at my photoshop program for various reasons.

So for Clopin (the first icon example), I used the lasso tool to get rid of the background. But I only do that with Disney icons because A) they've usually got black lines around them that make them easy to cut out and B) because the lasso tool hates me. I'm not kidding. I'll be almost done and it will suddenly select everything and I'll have to start all over again.

So for everything else there's layer masks. :D

So, um, for the icon of Santana, I started with the full screencap, and then, below that, I put a solid color layer (using the eye cropper, i chose a color that came from the screencap itself). Then I proceeded to mask away parts. Now usually I cheat a little bit. Or, you know, a lot.

If you'll take a look at the Ares example, you'll see that I use images that had the same sort of color scheme. I blended together Ares (who was dark and had flame shadows) with...an explosion that happens minutes later. So Ares, who was already dark, got blended with bits that were dark too. That meant that I could get away with not having a super smooth cut out of Ares. There are bits of the original Ares image in there that shouldn't be, but you can't tell.

It's the same sort of thing with Santana as well. Because I made the final icon so small, I could have a few mistakes. If you look at the 300x300 canvas:



You can see the imperfections. In around her legs, her hair, etc. There's color that overlaps and various places that aren't 100%. But you can't really see that when the final icon is so small.

So that's the trick really. I hate doing icons like this because I need place where I can lapse. I don't have the patience to stick to cutting out an image for an hour and a half. The one of Santana took almost an hour or so to get right as it was (and let's not even talk about the coloring because I worked even harder on that and I basically hate this icon, omg.).

Um. If you don't mind me being scatter brained, I'd like to return to the Clopin example because I am supposed to be talking about textures here...Um, the texture used in the icon is made by...chambertin, I believe. And it had to be resized and recolored before I could use it to begin with. Which almost always happens when I used textures like this. Then I reinforce what I said way back when we were talking about clouds, by putting the texture on a blending mode that isn't normal. It was probably multiply again, but it could have been overlay. Not sure now. It has been way too long since I made it. Anyway, then you mask away the bits that cover Clopin. Then, idk, layer masks sometimes don't do the trick, even after they've been blurred. So I, a lot of times, take the base image, drag a duplicate of it to the top, and set that to soft light. Not for coloring purposes, but to soften edges and make things look more seamless.

So this section in summary: I hate the lasso tool (but use it for Disney icons), layer masks are, again, god, and to use textures in icons (as backgrounds at least), you have to work the same way you do with clouds: integrate!

And, yeah, I guess that's it. :D

ETA: Oh my goodness. I had to switch over to a desktop computer and to Internet Explorer for a moment, and, haha, everything is a touch brighter and a touch more saturated than on my lap top and with Firefox. That's so interesting! Fun fact: I started making icons on a desktop and with IE, but about a year ago I switched to lao top/FF. So yeah. Interesting. Not a huge difference or anything, but still. Okay, I'll stop bothering everyone now. :D

Part Two will include: The kind of light I use on icons, my favorite icon makers, and me ranting about icon trends and the like. It'll be a blast.