reeg420’s Custom Icons Tutorial
Welcome to my tutorial on how to make icon sets for HTC Home Customizer. Through this whole tutorial I will be using Gimp. Gimp is a Photoshop-like program that is free. It doesn’t have all the fancy stuff like Photoshop but you will see that it does all that you need it to do for the average person. You can get GIMP by clicking the banner in the left navigation bar.
Gimp is not included with a windows installer by the developers themselves. However there are links in the download section at the top for gimp with a windows installer. That’s what I used with no problem. So if you downloaded it and wont do anything or you have no idea what to do you probably downloaded the wrong one. Try again. It should be able to run just by clicking on the icon and it does the rest.
HOW TO MAKE ICONS
First off you need to either get icons from the web or make your own. I don’t have the experience to make my own from scratch but there are plenty of places to download free icon packs. Or use any picture (more on that at end of tutorial).
I like as a start. They have a lot of high quality images and icons to download by some very talented artists. The icons I am using for this tutorial I got from here. That is just a specific user named kearone’s gallery. I liked his icon sets because of the glossy finish that they have on them. Much thanks to him. I then chose the 6 icons I would use for the basic icons at the bottom of HTC Home. You can also choose the 3 icons above them for missed calls, text messages, and email which I have done. I then moved them to their own folder and renamed them something easier to find later.
Then you want to get a basic icon set. If you wanted to really change it around you could change all the icons in there but some are things that you never see unless you use them.
To get one of the basic icon sets. Sync phone with pc after HHC is installed and run for the first time. Go to program files. Open HTC Home Customizer. Then open the folder files. Next open the folder icons. Then drag one of the folders to your pc. When you open that folder (might be zipped depending on the version) you will see about 50 icons. Some of them are close duplicates.
I didn’t use a default icon set from HHC but they will look the same as far as file names. We are going to change the highlighted files with the icons that we want to use from our icon set.
Image Sizes for the different icons.
Normal Icons are 32×32 pixels.
The message icons are 16×16 pixels.
Ok now that we have all the files that we need to start gimp, and then open your first icon that you want to use.
Now since we are gonna use this icon for the home tab. The icon size is 32×32. I usually crop the image first so that there is an even border around the icon in the home plug.
To do this click image on the top bar, go down to autocrop image.
It will do it automatically. Next we want to scale the image to 32×32 pixels. This is done under the same menu. Click image then scroll to scale image.
When you click that it will bring up a dialog box. Input the dimensions that are needed. If you are making a regular icon the size is 32×32 pixels if you are making an icon for the missed calls etc. the size is 16×16 pixels.
Note the chain looking thing next to the image size and resolution. If the image is scaled different from the original it will keep the same scale. With some of the icons I’m using after you autocrop them they are not square and you will have to uncheck that chain so you can make them 32×32 or 16×16. Watch what happens when you put 32 as the width and click on height it automatically changes it depending on the width and size of original to keep it in scale. So just uncheck that to make sure it’s gonna hold the 32×32 or 16×16 size before you click into height.
After you scale the icon to the proper size you are all set with that one. Save it and continue to do the same to all the other icons making sure that you are sizing them right.
When you are done the folder should look something like this.
I flipped a couple of the icons to make it look better. You can do that by clicking the flip tool as seen in the pic and flip by layer under affect. Click in middle of image hold it and drag to edge. It will flip it over for you.
Copy all of the regular icons in the new icon folder. Don’t bother with the message icons since there is only one of each in the folder.
Now make sure all the icons are in .png format since all icons in htc home are .png’s. Now we have to rename them to replace the original icons in the folder. Notice how some are doubled that’s because one of the icons is normal and the other is when it is pressed. That is why we copied the icons in the new folder.
Go down the list and rename your new icons from the name from the appropriate old icon. If you want to make the pressed icon different from the original you could lighten or darken the image in gimp to show the difference. I don’t see the need since if it’s pressed it will change the screen anyway. So I just use the same image for both.
After you rename all files in the new icon folder it will look something like this.
Now copy all of those files into the original folder replacing all the other icons. After you rename folder to something to resemble the new icons I choose GlassToon it will look something like this.
You could go through and change all of the launcher icons along with the music icons if you wanted but I’m gonna stop there since this is just the basics. But its all done the same way. Just check the image size and follow the same instructions.
Now copy that folder over to where you got the original one from (might have to rezip folder depending on version) and choose it in HHC. Happy designing.
As a side note I’m gonna show you how to make a normal image say a jpeg that you want to make into an icon. Problem with that is jpeg’s don’t have a transparent layer. Now if you don’t mind that you could just open the jpeg in gimp autocrop, scale to the right size and save to a .png and you’re done. However if your like me you want it to blend with your today screen your gonna want a transparent background. This can be done like this. I’m gonna use a Red Sox logo since I’m gonna make a Red Sox icon set (Go Sox gonna F stuff up again this year) next and I gotta do it anyway.
Open image in gimp.
Press ctrl+l to bring up the layers menu. On the bottom left of that box is a tab to create a new layer. Create one the same size but set the background as transparent.
Now make sure you have the layer with the logo highlighted in the layer box. Now on the top bar choose select the click on all.
Now with the fuzzy select tool (looks like a wand with a glowing top) we are going to deselect all of the white in the image. After you’re into the fuzzy select dialog at the bottom of the main gimp window, under mode you want to choose subtract from selection. You want to mess with the threshold so that it’s choosing just the right amount around the image to make it look right. 51.0 is perfect for this picture.
After you click in the white the flashing dotted line with go around the image. Right click on the image then under edit choose copy. Now in the layers dialog box uncheck the eye ball so that the original image isn’t viewable. Now highlight the new layer in the layers dialog box. Now you should only see the transparent background with the dotted line flashing where you copied an object from. Right click in that area and under edit choose paste. Now go over to the layer dialog box and right click on the layer that says floating and choose anchor layer. Delete the original layer. Now you have just the logo on a transparent background.
Crop image, Resize and save as a png. Done.
I am not an expert by any means using Gimp so there might be easier ways to do what I’ve done today that’s just how I taught myself how to do it. Also some of the images for the icons might not be exactly the right size in the plug-in because of the shape of the image. Since I haven’t tried on my phone yet I figured that Id mention that so people aren’t flipping out because it’s a little off. That’s like me though because if I put it on my phone and one of the icons was a pixel or two off it would piss me off and Id have to fix it.
Anyway the launcher and people icons from this tutorial might go over a little. If that’s the case just scale the image a pixel or so and copy it back to the device and reload it in HHC. Check out my clock making tutorial for the HHC here. Good Luck!