Alyssa (kiwi_moon_juice) wrote in customshapeicon,

How To Make A Custom-Shaped Icon (Using Photoshop)

My first icon tutorial! YAY! I'm making this using Photoshop (Photoshop Elements, but there isn't much of a diffference) because that's what I use. But this should show you how to make a custom-shaped icon basicially from scratch.

Create a new image and change the settings so they look like this:
Image hosted by

The dimensions, of course, cannot be messed with but it also MUST be set to "Transparent." If you leave it on "White," you will not have a custom-shaped icon. On Transparent, your background will show up as blocks but it will really be clear. So to start with, your image should look like this:

Image hosted by

Now this part is for those who want to just customize ready-made shapes. If you're going to make your own shape, skip this part: Go to the Tools window and next to the big T (also known as the Type Tool) there is the Shape tool. If it isn't already on Custom Shape, click it and scroll down to it. Then click on a shape (I chose a speech bubble) and make it as big as you can. You can mess with the shape from there.

Image hosted by

Image hosted by

The first one is what my icon looked like after I made it as big as a possibly could, given the pixel restrictions. The second one is after I messed with it. Not too stunning but it doesn't matter. But here's the good part:

Check out the save options. There should be a "Save," "Save As," and a "Save for Web." The last one is the one we're looking for. Then you get this window:
Image hosted by

39.1K is nothing to scream about, but when making bigger icons, the size change can come in handy. Of course, that's not the main reason we're at the this window. You make your icon a GIF and check off "Transparency." This is ESSENTIAL in making a custom-shaped icon. I don't know what the other things do but I don't think I would touch them either. And this is my icon:
Image hosted by

So that's one way to get a non-square icon! Unfortunately, doing this is more complicated in Paint Shop Pro, and we don't really know how to do it. So, if you have Paint Shop Pro, and not some version of Photoshop (and neither do your friends), email to us the icon you created in Paint Shop Pro. We can save it for you, keeping the transparent background. But, once we put it up for you we ask that you save it to your own Photobucket (or whatever site you use for image hosting) so that way we don't have our Photobuckets filled up.

Tags: tutorials
  • Post a new comment


    default userpic
  • 1 comment