butterfly: (Never Alone -- Daniel/Jack)
butterfly ([personal profile] butterfly) wrote2005-02-03 03:10 pm

Icon Tutorial -- Glowing and Stroking (well, it is a Jack/Daniel icon)

So, making icons can be a lot of fun. It's also an investment of quite a bit of time and care.

Sometimes, I find the image first and then decide whether or not to use text. Sometimes, I see a 'perfect' quote and then look up what image would fit it best.

This time, I start with an image (it's big, btw).

First step, cutting that baby down to size. Now, I invariably make icons that are 100x100 because I like using every bit of space that I'm allotted. This is just a personal thing.

But, wait -- that isn't the first step. The first step is making sure that the icon will still look good once it's been shrunk. So, the first thing that I do is duplicate the background layer (under the layer heading, just below 'new').

Next, I sharpen (under 'filter', I just go with the first 'sharpen' option) the bottom layer (the original) until it looks almost grainy (in this case, three times).

Now, I go back to the top image (the unsharpened one) and I up the brightness and contrast (located under 'image' and then 'adjustments', 'brightness/contrast' option). In this case, I set brightness at +36 and contrast at +26. Hey, Daniel's eyes are blue, who knew?

Next, I decide what the image is about and what I can afford to cut off. I decide that Daniel's reaction is what I'm looking for, so I chose a cut-off point for him that won't change. I use the crop tool and we have a confirmed left side.

Now, I want to make the image a square. I go to canvas size (under 'image'). Once in there, I click on the middle left arrow so that I won't accidentally cut off Daniel. Then, I simply change the greater of the two values to match the lesser. In this case, I change height from 399 to 270. I curse and realize that Jack is too cut off.

I go back and undo the canvas size. This time, I crop off a little more of Daniel.

I change the canvas size again. Much better.

Mistakes are part of the process.

Now, I change the image size to 100x100 (under 'image'). At this point, I still have two layers. I will now switch the icon magnification between 100% and 200% for every single step, to see how it looks (under 'filter' -- 'zoom in' and 'zoom out').

Layer One:


Layer Two:


I sharpen the bottom layer.


And then again.


I go back to the top layer and set it to 50% opacity (and now you can see both layers on the icon).


I look at the icon and sharpen the bottom layer one last time.


I use gaussian blur (under 'filter' and then 'blur') on the top layer. At 1.4 pixel radius.


After studying the icon, I up the opacity on the top layer to 71%.


Now, I need to decide what I want on the icon. This time around, I take a quote from the show and retrofit it -- Daniel's "I always seem to be saying goodbye to you," becomes "always saying goodbye".

For the initial text, I just use white. I can change it later. In Romeo, to start with.


I go to 'layer' and 'layer style' and choose the 'stroke' option. I change it from the default of three pixels wide and bright red to one pixel of #0A3E18, a deep green that matches Daniel's BDUs.

Default:


Small and green:


I decide that I like Romeo for 'always saying', but that I want something different for 'goodbye'. I decide on Aardvark Cafe.


I like having a border, so I go to the top image layer (the blurred and bright one) and I outline a border that is one pixel away from the edge of the image and one pixel thick. After looking at it, I decide to go back and not have the line go through Jack.

Through Jack:


Not through Jack:



I move the text to just where I want it (with the zoom up to 500%, so that I can place it precisely).


Now, I hit 'merge visible' and ta-da! I have an icon.

Jack/Daniel -- free to good home, let me know if you'd like to keep it or share it.


My best advice when making icons? Mess around with the options. As long as you don't save, you aren't committed, so go nuts.
ext_2353: amanda tapping, chris judge, end of an era (Default)

[identity profile] scrollgirl.livejournal.com 2005-02-03 11:19 pm (UTC)(link)
Oh YAY!! Thank you! I have to go make dinner now but I'm bookmarking this and will be back to read up and comment. Thanks for putting this together. Wow, so fast too :)
ext_1774: butterfly against blue background (Default)

[identity profile] butterfly.livejournal.com 2005-02-03 11:21 pm (UTC)(link)
You're welcome.

I was motivated -- I wanted to do it while I was still thinking of it, which meant before I leave for work (in twenty minutes).
ann1962: (Default)

[personal profile] ann1962 2005-02-04 12:41 am (UTC)(link)
I got here by way of Scroll. Thank you for posting this. Into memories it goes!
ext_1774: butterfly against blue background (Default)

[identity profile] butterfly.livejournal.com 2005-02-04 08:17 am (UTC)(link)
Yay, I'm glad that I was helpful.
ext_2353: amanda tapping, chris judge, end of an era (Default)

[identity profile] scrollgirl.livejournal.com 2005-02-08 12:30 am (UTC)(link)
Hey there, thanks again for doing this! I'm trying to follow your tutorial right now to make myself a Shifu icon, but well. I must be pretty dumb because I can't seem to get my two layers to do two different things. Everything I do to one layer, happens to the other as well, for some reason! Ah well, I'm gonna keep playing with this thing (I'm now on PhotoShop 6, which might make a difference) until I get it right. *nod nod*