Log in

23 February 2009 @ 11:40 am
Easy Icons, Lesson 5 - multi-image icons, using the 'lighten' technique.  
We'll be using three images for this icon.

I'll be using images that are 200x200 because at 100x100 they were a little hard to see, but I sized down the final icon itself, above.

Note: The 'Lighten' technique is not the only technique you can use for multi-image icons, but it's the one I like best and the one I use the most, so. (:

1. Start with the first base. We're going to call this image 'Nick Sr'.
2. Open the next base. We'll call it 'Nick Jr'.
3. Flip Nick Jr over horizontally. You can do this by 1) Going to Image>Rotate>flip horizontal OR 2) Pressing Ctrl + T on your keyboard and manipulating the image with your mouse. If you choose the second option, a window like this will pop up. Press Enter. Nick Jr is now a regular layer instead of a background image.
3. Duplicate Nick Jr to Nick Sr. We learned how to duplicate in lesson 3.)
4. Set Nick Jr to 'Lighten'. Your icon should look like this:
5. Now open the third image. We'll call it 'Leather Jacket,' for lack of anything else creative. ;]
6. Duplicate Leather Jacket to Nick Sr, set it on top of all the layers, and set it to Lighten. Your icon should look like this:

7. Now, click on Leather Jacket and press Ctrl + T on your keyboard. Now, with your mouse, move the layer to the right until it looks like this:

8. Now. You have a problem, here. See this white part?

This is the blank part of the layer 'Leather Jacket' and you need to erase it. So go to your eraser tool (press E), select a basic brush at about size 40, and erase the white part. If you hide the bottom two layers, your top layer should look like this:

9. Okay, so now your icon has no more white space. Now, click on the layer 'Leather Jacket' and bring up a hue/saturation layer. Reduce the saturation to -100. The layer should be completely colorless now, and the image should look like this:

10. This step is optional. All the blank space in the left bottom corner bothers me, so the easiest thing to do is add text. But I don't feel like writing in tiny text (which, in my opinion, would be the best look for the icon) so I'll use this texture. Add it to the icon, set it to Multiply, and move it around a bit. The finished product looks like this:

Eh. I think it could probably use one more big word in the left bottom corner, something like, "Nick" or "President" or something. So I added it, in a font called 'Illuminate' from dafont.com.

Yaaaay! You're done. =]


Pick three images and make an icon from them, using this technique. You can use these three, or three completely different images you've chosen yourself. It's best if there is blank space somewhere in the image. The 'lighten' setting is a little confusing at first, so play around with it until you get better at judging what kind of images will work best. Yaaaay. (:  Here are the three images.

Lady Hannahspacious_soul on March 9th, 2009 06:11 pm (UTC)
Please! I beg you! Don't make me have to do a Jonas brother's thing for my computer art. :P Can't I do a Narnia one or something? Plllllease? ;)
Alyssa: LOST - Des and Penny Phonemidenianscholar on June 9th, 2009 09:28 pm (UTC)
I love your style. You always come up with the most creative things... Alas, I have almost no style at all - I just do colors/fonts. :P
Lady Hannahspacious_soul on July 3rd, 2009 10:53 pm (UTC)
Oh my gosh, Alyssa- as IF. XD You do such creative things.. your icons are so neat I have like a million saved to my computer, hehe. Icons arethe way I express the way I'm feeling inside.. I changed my icons to beautiful blue themes on my livejournal- icons you and Lea made. =)
Lady Hannahspacious_soul on July 3rd, 2009 10:55 pm (UTC)
I'll have to try these out later, now that there are new options for making artwork, hehe.
Alyssa: LD - Italymidenianscholar on July 4th, 2009 12:02 am (UTC)
Thank you. *bows* I feel better about having style after I figured out the lighten-only layouts. :P