Skip to content

Create an Icon

Jump to bottom
Günther edited this page Oct 6, 2019 · 4 revisions

Tools and files used:

  • Adobe Photoshop (Sorry, there is no way around, it's a necessary tool).
  • The Glasklart icon template
  • And this page: iTunes Data Crawler

Step 1:

  • We are making here a Glasklart icon for the app "ibisMail - Filtering Mail" for example. ibisMail is an Appstore app with the iTunes ID 300834416, so it is easy to get a big artwork image by entering the iTunes ID in the iTunes Data Crawler.

  • To get good and big artwork images for Cydia apps, there is no way around to search them in the www and hopefully find something useful.

  • Once we have the icon artwork, open it in Photoshop.

Step 2:

  • Now comes the tricky part: We have to select the areas that we want in our new Glasklart icon. The best way to do this is to use the magic wand tool. We have to play around with the settings of the tool to get a good result.

  • For this icon, this is very easy and you can leave all settings in Photoshop untouched. Make sure to select all white parts of the icon by holding down the Shift-Key.

  • Now select the fill tool and fill all the selected areas with black (greyscales, 100%).

guide02_small

Step 3:

  • Good, now selecting is done and we can copy the selected areas in a new 1024x1024px image.

  • Edit -> Copy

  • File -> New (1024x1024px, 72dpi)

  • Edit -> Paste

  • Now select the Move tool and resize the pasted area to a with of 1024px.

  • Congratulations! You have successfully generated a Glasklart source file! Save it as .png using File -> "Save for web".

guide03_small

Step 4:

  • The new Graphic is much too big, so we resize it to a width of 118px.

  • Make sure to always keep aspect ratio.

guide04_small

Step 5:

Now it's all done and we can open up the Glasklart icon template and paste the new graphic into it. Photoshop pastes the new graphic in the middle of the icon template, and for this icon this is OK (for 99% of all Glasklart icons this is OK). We can move the pasted graphic around, but normally this shouldn't be done.

guide05_small

Step 6:

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

guide06_small

Finish!

Now we save the new icon, using the "Save for web" function of Photoshop as PNG-24. Here is the result:

guide07_small

Two very, VERY important things:

  • The "stylable" area in a glasklart HD icon is 118x118px wide!!
  • Only one layer is allowed when applying the Glasklart style!! Do not oversize your graphics or use more than one layer or your icon will not be accepted for the official Glasklart theme!!!!

When your icon is done, you can post it at Github (please follow our guidelines).

Once you got it, you will see it is very easy to make Glasklart icons.

guide08_small

THANK YOU!

Clone this wiki locally