PNG vs. GIF

In order to render the best quality icons for your widget, you’ll need to upload your icons in PNG 24 format with alpha-transparency blending. If you know what this means, you can skim through this article, read the section on sizing, and get back to work on your widget. If you don’t, please read through this tutorial and complain to the management if you haven’t figured it out by the end.

Below are four images that show the difference between what you can do with the alpha channel capabilities of the PNG format, and what you can (or can’t) do with the anti-aliasing capabilities of the GIF format. Note that the two examples on the left blend seamlessly with the background, while the images on the right break abruptly.

PNG 24: Alpha channel against a transparent background.		GIF: Anti-aliasing with one color (white) removed against a transparent background.
PNG 24: Image with an alpha channel against a colored background.		GIF: Image anti-aliased against a white background on top of an unintended background color.

Now that you see the distinction between the two image formats, you’re probably wondering why anyone would use the GIF format when PNGs are so much sexier. The answer’s easy: Not all devices support the PNG format, so the fallback is GIF.

Problem? Nah! Fortunately for you, the exceptionally talented and hard-working Blueprint rendering team here at Yahoo! Mobile has solved this problem for you. They’ve built an engine that renders your icons as PNGs on devices that support them, and as GIFs on the devices that don’t. It even anti-aliases the GIFs against the various background colors on page headers, section headers and placards.

So, the bottom line is: Figure out this PNG stuff, upload them with your widget, and you’re square. Upload GIFs and you’re… wait, bad analogy –you know what I mean.

*If you want to know more about alpha channels and anti-aliasing, please read the addendum at the bottom of this article.

Working with Branded Assets

Are you building a widget for an established company? If so, then you can often find a logo in PNG, EPS or PDF format on the Press section of the company’s website or from a designer within the company. If nobody gives you one, keep asking. They’re bound to have it somewhere. Once you have a good source file in one of these formats, it’s pretty easy, using an imaging program such as Adobe Photoshop, to convert them while retaining the alpha information and resize them to the correct sizes needed for your widget.

Logo Creation from Scratch

I’ll go over the process of logo creation using tools many people are familiar with, Adobe Flash and Adobe PhotoShop. If you’re not familiar with these programs, you should probably just give-up now and hire a designer. If you’re stubborn, however, you can download trial versions from their website at Adobe.com and labor through the following instructions.

First, I’ll create a piece of vector art in Flash, then render it into a high-resolution PNG file for further manipulation in Photoshop. Working with vectors is an excellent way to get a high-quality image that scales without losing quality. You can draw your icons at a high resolution, then scale them down to get a good idea of how they will look at various sizes.

Step 1: Draw your logo

Open a new Adobe Flash file and start drawing your logo. It’s important to remember that your logo will eventually be contained in a small square, so you’ll want to leave out extremely detailed features or text that will be unreadable at small sizes. A good technique is to draw a square box on a layer of it’s own, lock the layer, and then draw your logo inside it on a new layer above. Then, when you’re finished, you can simply remove the underlying layer before exporting your image.

Here is an example of a logo I created in Adobe Flash for my moBar widget that can be scaled down to look good at any size.

Step 2: Export your image

Once you’ve created your logo and are happy with the way it looks at various sizes, you’ll want to remove the background box and any other artwork (such as the scaled-down copies you just created) and export the image. You do this by selecting File > Export > Export Image from the menu.

Once you name your file and select Save, you’ll be presented with a dialog box that looks something like this:

Don’t worry too much about the Dimensions of the image at this point, but you’ll need to make sure that you select Minimum Image Area from the Include dropdown and select the Smooth checkbox.

There you have it! You’re PNGing, baby! Almost there!

Step 3: Sizing Appropriately

Now that you have your PNG source file, you can start resizing your icon to the various sizes needed by the Blueprint rendering engine. It’s important to note that although you only need to upload one 90×90 icon for your widget, it’s good practice to create as many sizes as possible so that you have some control over what gets rendered at each size. Those smart and conscientious Blueprint engineers I told you about earlier, have identified 19 different sizes of icon that various devices will display, so if you want to ensure that your icon is going to look how you intended, you can create each of these sizes and upload them with your widget.

In some cases, if you have a logo that looks good at say, 52×52 pixels, but terrible at 12×12, you may want to consider using entirely different artwork at the smaller sizes. If you don’t have the time or patience to create all 19 sizes of logo, don’t worry, the Blueprint renderer will take the closest size match that is bigger than the size the device will display and scale it down to the appropriate size for that specific device.

It’s always a good idea to include at least these four sizes:

90×90, 52×52, 34×34 & 16×16.

If you’re paranoid, however, you can include them all (believe me, it’s fun):

90×90, 70×70, 68×68, 56×56, 52×52, 46×46, 44×44, 40×40, 38×38, 34×34, 30×30, 28×28, 26×26, 22×22, 20×20, 18×18, 16×16, 14×14 & 12×12.

Step 4: Resizing in Adobe PhotoShop

Now that you have your source file and know the image sizes you want, you can start working in PhotoShop. I recommend taking the following steps.

1. Resize your source file to a perfect square. You do this by selecting Image > Canvas Size in the menu, then adjusting the height or width in the dialog to match the larger of the two sizes. In the example below, I’ve changed the width to the same size as the height and left the anchor at center.

   

2. Now you can start resizing. My tactic is to create the same number of duplicates of the image in Adobe PhotoShop as I’ll be making icons. You can do this by going to Image > Duplicate in the menu. It’s a good idea at this point to give the same name to the duplicates as the names of the final images you’ll be saving.

3. Once you have all your duplicates on the stage you can start resizing them. It’s important to remember that the final icons will need to have at least one pixel of transparent space around all edges of the image. What I found works best is to resize each duplicate to exactly two pixels smaller than the final target size, then go back and resize the canvas to the actual export size. So, you would resize your 90×90 image to 88×88, your 34×34 to 32×32, etc., then go back into the Canvas Size dialog and resize the canvas to the same size that you named the image while setting the Anchor in the middle of the box. This will ensure that you always have one pixel of transparency around the final icon.

4. So, the steps are as follows:

   1. Go to Image > Image size in the menu, and resize the icon. (e.g. 88×88)

   2. Go to Image > Canvas Size and resize the canvas. (e.g. 90×90)

   3. Go to File > Save for Web and Devices and save as a PNG 24 with the Transparency checkbox checked in the controls on the right of the dialog.

   4. Save your file, making sure to name it with the underscore and size convention. (e.g. olive_90×90.png).

Follow the same steps for all your icon sizes and you’re almost there. Remember, you need the one pixel of transparency around the edges of the image, so that the Blueprint renderer can do a better job of resizing your icons for various devices.

Below is an example of what a 90×90 icon will look like when finished. I’ve blown it up to immense proportions, so you can see the detail.

90×90 olive icon at 300%. Note the 1 pixel of transparency around the edges.

Step 5: Using separate artwork for smaller logos

Again, using separate artwork at different sizes can be critical. Let’s say your icon is a hippopotamus. That’s a cool icon, and it may look great at 52×52, but anything under 34×34 looks like something that came out the back of a hippopotamus. One idea would be to use just one part of the larger image, such as the head of the hippo for your smaller sized icons.

This is a common problem with icons that contain logotype. An icon containing text is always unreadable at small sizes, so it’s important to have an alternate strategy.

Step 6: Submitting your icons

Now that you have all your icons and are ready to upload your widget, you’ll need to make sure you put them in the resources/images folder of your widget and name them appropriately. You can name your icon whatever you like, but it must contain the size information in the name. The format is this: olive_52×52.png, olive_34×34.png, olive_16×16.png, etc. Just make sure you also add the correct name to the nodes of your config.xml file before uploading. The default is “icon”, but in this case, it would be: olive.

Step 7: Brag

That’s it! You’re finished. Once your widget is active in the gallery, you can show all your friends what a great icon maker you are. Congratulations! Now go have drink, and don’t forget to tip one up for the Blueprint team!

Cheers, -T

More on Alpha-Channels

Alpha channels contain transparency information on a per-pixel basis, which is important for blending images into underlying backgrounds. Think of each pixel containing four channels; red, green, blue and alpha. By blending the first three channels you obtain color, while the fourth channel determines the transparency of the pixel. Transparency is especially important for the edges of your icons, which will be rendered against various color backgrounds. The only image format containing an alpha channel rendered by modern browsers is PNG (Portable Network Graphics), but unfortunately, not all browsers, especially mobile web browsers, support the PNG format, so in Blueprint, your PNGs will be converted to anti-aliased GIFs on the devices that can only render GIFs.

More on Anti-Aliasing

Anti-aliasing is a process of blending foreground pixels into background pixels without retaining the alpha information, thus creating a gradient of colors between the two layers. For example, anti-aliasing a black image against a white background, or visa versa, would result in a gradient of gray pixels between the two colors. This works great if your image is going to appear on the intended background color, but terribly if it ends-up on a different color. It’s still common to see GIF images on web pages with a halo around them, due to being displayed on a background unintended by the original designer. The GIF format does not support alpha channels, but instead supports full pixel transparency. This means that you can’t have color and transparency in the same pixel. Anti-aliasing against the correct color will yield great results, but if the image appears over the wrong color, you’ll have a choppy halo around the image.