reeg420’s Custom Clock Tutorial
Welcome to my tutorial on how to make clock 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 from the Free Software links to the left.
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 it won’t 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 CLOCK SETS
Luckily GIMP has a lot of possibilities for text built right in. I’m not gonna show them all but Ill show you where they are.
Along with the regular text window on the main gimp dialog box there is also others that show shadows, glowing, effects, and all sorts of possibilities that works just like the text window. We will choose one from that area since they look so much better.
To start we need to get a basic clock that’s installed into HHC already. To do that sync with pc, explore the ppc and go to program files. Then click on HTC Home Customizer. Then the folder files. Open the clock folder and drag one of the folders on your pc. It will look something like this when you open it.
Note the size of them all.
Normal Digits (0-9) are 45×61 pixels (including the blank ones)
Alarms are 22×23 pixels
And the Separators are 19×54 pixels
Now under the main GIMP box click Extensions (shown as “Xtns” at top). Scroll down to logos and choose one I’m gonna pick glossy to match my icon set from the other tutorial.
That will open up a new box. Type in the text that you want to use, Ill start with 0. You can just keep the font size at 100 since we are gonna scale the image later anyway. Next pick your font I’m gonna use Snap ITC since it’s a little cartoonish. Now we are gonna pick the gradient that we want to use for the face of the objects. There is a lot of different choices to use but I’m gonna stick with the default black into white. Keep the background color as white (we are going to remove it later). You can mess with the other stuff but I’m just keeping it basic. It will look like this.
Hit ok and GIMP will open the image in a new window. Like this.
Now we need to get rid of the background color so it’s on a transparent background. To do this hit ctrl+l to bring up the layer dialog box and scroll down to the layer labeled background.
Right Click on the layer background and hit delete layer. Now the image will look like this.
Now we have to merge the layers. To do this right click on one of the layers in the layers dialog box and choose merge visible layers this will show up.
Hit merge and it will all be condensed it one layer. It will look the same just now we scale all the images at the same time. Now we are going to manual crop the image. Some images will allow you to use the autocrop feature found under images on top bar. But this image has shadows and it throws off the images making it look funny when scaled to right size.
To do this click button that looks like an exacto knife and drag a box over the portion of the image you want. Leave a little bit of space on the edges. Try to remember roughly how much space you use so that you can match that on other digits. However on some numbers and symbols you might need more space to make it right. Like the number 1 and the colon in between the digits need to have more space or else it looks too big compared to the rest of the numbers. So with that said. It should roughly be the same size box for all of them. Doesn’t have to be exact because it just not needed but it needs to be close.
Ok back on track here. After you click the knife button and drag a box over the part of the image that we want it gonna look like this.
Now hit enter and it will crop the image to the lightened part.
Now we need to scale the image to the right size in this case the size would be 45×61. Make sure you click the chain looking thing on the side of the width and height boxes so that it doesn’t change the size as you go to the other one. For instance it will always try and keep the same proportions as the original. If the image is rectangle it will try and keep it rectangle unless you uncheck that chain. In this case we need to do this.
Hit scale and it will look like this now.
Now click file then scroll down to save as. Then save it as a .png file. I called mine 0.png. Then you’re done with this one.
Following this procedure will you to create the other digits and symbols because it’s all pretty much the same. Ill show you how to do the alarm and am/pm now.
The most basic thing to do with the alarm would be to keep it the same but that’s no fun. I usually do a Google search for images and it shows a lot of stuff. I did a search for clock icons and came up with this one. It’s pretty much perfect for the task. Remember to try and get a big image even though we are gonna shrink it the image will look better in the end.
Click on image on the top bar then scroll down to autocrop. Now the rest of the clock is in black and white and this has blue in it so we need to change that. To do this we need to switch the color scale. Click on image again, scroll down to mode then over to grayscale.
Now it looks like this.
Notice even in grayscale is still shows the glossy finish. That will match perfectly with the digits. Now we need to scale the image to the same size as the original which is size 22×23. To do this click image again and scroll down to scale image.
Be sure to uncheck the chain so you can change to proportions of the image. Hit scale. Save it as a .png file and your all set. It looks like this.
OK that’s the alarm. Now for the trickiest part the am/pm. It doesn’t seem hard but the way the image is makes it difficult. Both of them are present on one image. When its pm the am is shaded out and visa versa. Well not to say that it has to be shaded out above it since its two separate images. But if you scale am to the size of the image it looks super tall and doesn’t look right.
To make it right we are gonna do a little trickery. Ok first make both files the same way as the rest of the clock. Crop the image, save as .png etc.
Now go to the files and check the size of each. In my case the am image is 214×123 and the pm image is 214×112.
So to make this right we are gonna have to make a new image in gimp by clicking file then new. I’m gonna want to make mine 214 pixel wide and we’ll say 240 high (doesn’t have to be exact). Make sure you set it to a transparent background under the advanced options.
Once you hit ok it will open up a new image. Now open up the layer dialog box (ctrl+l). Find either the am or pm file and drag it right in the layers dialog box. Now it will show up in the middle of your image. Like this.
To move the am to the top of this like as the original click the fuzzy select tool. Then make sure you click back on the top title bar to have the image as the active window and use your arrows to move the am to the top. Also make sure that the layer with am on it is highlighted in the layers dialog box.
Click image and then scale image to the right size which is 24×26.
Save it as a .png file. When you try and save it gonna want you to export the file. Click export because of the different layers. If you merged visible layer before save then this wouldn’t come up but it doesn’t make a difference.
Repeat the same for pm. If you wanted to show both in each icon just one is dulled out. You can drag both files in the layers dialog box. Move am to the top and pm to the bottom and adjust the opacity (transparency) of each layer. For instance if it were the am icon you would dull out the pm image. Blah Blah Blah.
Now rename all the files that you made just like the corresponding icon in the original folder. Rename the original folder to whatever you’d like I called mine GlassToons Clock. Copy all of your files into there overwriting the originals.
Well that it. Hope you like and I’ve shown you a few things.
I’m no were near an expert with GIMP so things might be able to be done quicker but that how I showed myself to make them. Also check out my Icon Tutorial here.