glasklartHD.dReAmNeT.at

The how-to-make-a-glasklart-hd-icon guide

You want to make your own Glasklart HD icons? You have some time?
GOOD! So here is my how-to-make-a-glasklart-hd-icon guide.

Things you need to know:

The -exact- name of the app. (This shouldn't be a problem.)
The bundle identifier. (Directly from you device or from the forum. Please read the first post!)
The name of the icon. (Also: Directly from you device or from the forum. Please read the first post!)

Tools and files used:

Adobe Photoshop (Sorry, there is no way around, it's a necessary tool).
plist Editor for Windows or Mac OSX.
The glasklart HD icon template: DOWNLOAD (~2.5MB).
And of course a lot of Web search.

Step 1:

OK, so let's start. We are making here a google+ icon in two versions for example. google+ is an App store icon, so we need to use the App store icon template.
First we need the icon graphics, here is a good resource to get them - simply search for google+.
For me the graphic was not good enough, so I'm doing a web search for graphics (search for google+ icon) and I found this one.

Step 2:

Once we have the icon graphic, load it in Potoshop. The graphic here is at very high resolution and has layers, so we hide som layers to get this one:

Step 3:

OK, here comes the tricky part: We have to select the areas that we want in our new glasklart icon. The best way to do this ist to use the magic wand tool. We have to play arount with the settings of the tool to get a good result. Now we have to deselect a view pixels between the colors of the bar at the top of the graphic to make it look better in our icon.

Step 4:

Good, now selecting is done and we can copy the selected areas in a new graphic.
(Copy -> File -> New -> OK -> Paste.)

Step 5:

The new Graphic is much too big, so we resize it to a width of 78px, be shure to keep the aspect ratio.

Step 6:

Now it's all done and we can open up the App store icon template and paste the new graphic into it. Photoshop pastet the new graphic in the middle of the app store icon template, i think it looks better at the top so i moved it to the top of the skinnable area.

Step 7:

All we have to do now is the last step - we copy the layer style from an example icon and inserting it in our the new layer - and our new Glasklart HD icon is done!!!

Finish!

Here is the result (you can see it overlayed over a baseplate here):
Now save your new icon, using the "save for web" function of Photoshop.

One very, VERY important thing:

The skinnable area in a glasklart HD icon is only 78px x 78px wide!! - do not oversize you graphics!!!!

When your icon is done, you can post it at the forum or send them to me, i will post it on this website if it is good enough ;-). Please don't forget the App name, the bundle identifier and the icon name.

App Store icon template
(without baseplate).

Cydia icon template
(with baseplate).

I hope this is readable - GKI @ 2011-10-29.