Creating Your Own Buuf2 iPhone Icons

Following on from my post on customising the iPhone Buuf2 theme, I thought it was about time somebody wrote up some instructions on how to create new icons from Mattahan (Paul Davey)’s original desktop icons. Currently, a few Buuf2 “super-users” with the right knowledge and skills are fulfilling many people’s icon requests; if more people knew how to do it, we could spread the load quite a bit, and build up a huge library of icons to cover almost every need.

It took me quite a while (and plenty of assistance!) to figure out how to perform even elementary icon editing, so I figured maybe I should step up to the mark and write down my learnings to help others. So, here goes!

First of all, you need to decide which software you’re going to use. The two best options are Photoshop and GIMP. Photoshop is great, but GIMP is free, and what I use, so my information is going to be centered around GIMP – however, the two programs are functionally very similar, so the principles apply to both. (If you’re using Photoshop, however, you will need the .ico plugin – GIMP opens .ico files just fine on its own.)

The second thing you will need are the source files to work from. Mattahan posted most of these on Deviantart, however some are not available directly from there in the correct format; here are some links you will find useful:

Buuf: note that you cannot use these icons in .png form, you HAVE to convert them to .ico form before you can work with them. There is a converter utility in the archive; if that doesn’t work for you, one of us can probably email you the .ico packs.

SuperBuuf already in png form, ready to work with!

Buuf Deuce in png form.

Buuf Halloween: png’s again.

Right, now that you have the source files, time to try converting one for the iPhone! Pick an icon that you want to use, and open it in GIMP. (If it’s an .ico file, you will see a confusing array of image sizes. Simply select the largest one in the layers dialog, then go to Edit > Copy. Now, Choose File > New; in the Advanced Options section, choose Fill with: Transparency; the image size should be the same as the layer you just copied. Click OK. Now, in your new window, click Edit > Paste.)

We need to resize the icon to 60 x 60 to work on the iPhone’s springboard. So, go to Image > Scale Image. Set the size to 60 x 60 pixels, and click Scale. Now, File > Save As (make sure you save it as a .png). You may get a dialog saying that the PNG format can’t handle layers; select Merge visible layers and Export. Bingo, you have produced a suitable icon for Buuf2 on the iPhone!

Now, that’s simply how to re-size an existing icon. If you want to get creative and try editing or combining the source icons to create new ones, there are many different tools to get to grips with. Here are some of the useful ones that I’ve learned a little bit about.

Open up your first source image. Don’t resize it yet; it’s best to work at a large scale, then scale it down to 60 x 60 when you’re done; hides a lot of errors that way! The eraser, brush and pencil tools are handy for making little edits; I haven’t learned to get to grips with anything complex like the clone tool, blur or smudge yet!

Now, open the next source icon that you want to combine with the first. Choose Edit > Copy, go back to your first icon, and Edit > Paste. You now have your second icon as a new layer. You can use the Move and Scale tools to move it around; hold Ctrl while scaling to lock the aspect ratio. When you save it, do the merge visible layers thing again.

Another trick you can do is to change the opacity of the pasted layer, using the slider in the layers dialog; I find this is useful when combining pictures with the TV icon, about 75% opacity makes it look like the picture is on the TV.

Another useful trick is changing the colour of an existing icon. There’s a good tutorial on how to do that here.

Sometimes you might want to add a bit of shading around the base of your icon; here’s a good tutorial on drop shadows.

Well, that’s about all I can recall for the time being; I hope it helped someone get started on the road to becoming a proficient icon editor!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: