Implementing Stock Images in Your Project

Choosing the right collection of stock icons was not a quick job. But you’ve made the choice, and bought yourself a perfect set to use in your application. Now when you bought the images, how are you going to integrate them with your project? Do you know what file format should be used where, and what size, color depth or image style to use in your development environment for your application?
There are several typical questions asked by developers. Where should I use 32-bit icons with alpha-channel, and why pick them over traditional 256-color images? What development environment support translucent graphics, and what file formats should be used? Finally, which formats to use for the many Windows control elements? Let’s clear these questions one by one.

Stock icon files for development

Picking 32-bit icons over their 256-color counterparts is easy. 32-bit icons feature an extra layer defining a translucency mask. The layer is called alpha channel. Thanks to that alpha channel, icons with 32-bit color depth can blend nicely with backgrounds of any color and complexity, having smooth edges and looking great even if your background has a busy color, gradient, or has an image or pattern. In addition, the alpha channel makes shadows and reflections appear translucent, making them appear natural and overall rendering extremely realistic.
So, 32-bit icons are just the right type to use. The real question is whether you can use them for your project. In reality, 32-bit graphics can be used in a handful of situations – and cannot be used in others. If you’re making a Web site, the chances are that your target audience already has a compatible browser installed that can display 32-bit graphics with full alpha-channel support. Exceptions are far and between, and include Internet Explorer 6 and earlier versions, ancient builds of Mozilla, and a few resource-stranded mobile browsers (although most mobile platforms can still render 32-bit images).

For a Web site, you would use 32-bit icons in PNG format wherever possible. If maintaining support for legacy browsers is essential, you can resort to 24-bit PNG icons, converting the original 32-bit images with an icon editing tool such as IconLover. 8-bit GIF files can be used for designing light Web sites to be used with the slowest mobile platforms. Note that GIF files don’t have a full alpha-channel support; instead, they offer a single-bit transparency mask. Again, you can render your 8-bit images from 32-bit originals with IconLover, or use pre-rendered icons supplied with your stock icon collection. The GIF icons provided with your set will display nicely on most types of backgrounds, but you can produce your own versions if you have a busy or colourful background and want your icons blend with it.

Windows programs can normally only use one particular type of file depending on which control you’re going to use it for. For example, ICO files can be used for application icons. ICO files include the same image (or, rarely, different images) in a number of sizes and color depths within a single file. Windows will automatically choose the right size and color depth depending on the user’s display settings and the location of the icon. It’s best to assemble all standard sizes and color resolutions in an ICO file. Our stock icons already include all standard resolutions and color depths stored in the ICO format; if you want to build your own ICO files, you can use IconLover.

There are dozens of other things we’d love to tell you about integrating your newly purchased stock images. You can access a full version of this article covering the many Windows controls and development environments such as Java, C#, .NET and Visual Studio, at http://www.aha-soft.com/faq/integrating-icons-development-environments.htm. You can always find perfect icons for your programs or Web sites at www.aha-soft.com.

Designing Tab and Menu Icons for Android

When designing mobile apps or designing graphics for Android apps, one must follow srict guidelines. Re-using images made for other operating systems, especially desktop-based, is generally not a good idea. Foreign graphics will look out of place at best, or will make your Android apps hardly recognizable at worst.

There exist precise guidelines available for designing standard-compliant Android icons. Different design guidelines are available for tab icons and menu graphics.

Android Icons for Navigation Tab Bars

Tab icons are drawn in individual tabs in tabbed UI. Tab icons should be provided in two different states: selected and unselected. It is required that tab icons are drawn as simple, flat shapes as opposed to icons drawn in 3D or isometric projection.

Android OS and Android apps are used on a variety of different platforms employing a wide range of hardware. In connection to icon images, those platforms can have different display sizes, display resolutions, pixel dimensions and density. To accommodate the wide range of screens, Android developers must supply all tab icons used in their apps in at least three resolutions to be shown on low, medium, and high density displays. Resolution-wise, the outer boundaries for the three resolutions are defined as 24×24, 32×32, and 48×48 pixels. Inner dimensions should not exceed 22×22, 28×28, and 42×42 pixels respectively. By providing all three standard resolutions, developers can ensure that their apps will be shown properly on a wide range of platforms running the Android OS.

Menu icons are used in the “options” menu, and are displayed to the user when they press the Menu button. Similar to tab icons, menu icons should be flat, grayscale images. Just as tab icons, developers cannot use 3D or isometric projections.

Pixel sizes for menu icons are described in a slightly more complex way as opposed to to tab icons. Instead of two resolutions defined for tab graphics (inner shape and boundary box), the inner shape of menu icons can be smaller or bigger depending on whether they are square-shaped or not. If a menu icon is square-shaped, its dimensions should be smaller than for icons with different shapes. The reason for having two different size limits is to establish a consistent visual weight across the two icon types.

The outer dimensions for ldpi, mdpi and hdpi icons are described as 36×36, 48×48, and 72×72 pixels respectively. Inner shapes for square, low-definition icons is 22×22 pixels, while non-square icons should fit into a boundary box sized 24×24 dots. Similarly, mdpi icons should fit 30×30 and 32×32 pixel boxes, while high-definition images should fit into 44×44 and 48×48 pixel rectangles respectively.

Instead of designing your own graphics conforming to these guidelines, Android developers have an option of getting stock icons from professional designers. For example, Android Tab Icons by Aha-Soft offer 112 unique tab images in selected and unselected states and all standard sizes. Should additional resolutions be required, developers can produce graphics at any size by accessing scalable vector sources. Android Tab Icons can be previewed and downloaded at http://www.aha-soft.com/stock-icons/android-tab-icons.htm.

Icon Sizes for iPhone, iPad, and iPod Apps

When designing apps for all generations of Apple iPhone, iPad, and iPod devices, software developers must use a certain set of icons meeting Apple’s stringent Custom Icon and Image Creation Guidelines. As a bare minimum, developers need an application icon and a launch image. However, Apple recommends that apps supply several extra images, such as an icon used by iOS when showing Spotlight search results and Settings.

When developing apps for all generations of Apple iPhone, iPad, and iPod devices, software developers are required to use a specific set of images meeting Apple’s strict Custom Icon and Image Creation Guidelines. As a bare minimum, one needs an application icon and a launch image. However, Apple recommends that apps supply several extra images, such as an icon used by the system when displaying Spotlight search results and Settings. Apps that can handle certain file types (such as documents, tunes, or video clips) will require graphics to represent their supported file formats. Most apps will also need a good deal of icons to draw their navigation bars, tab bars and toolbars.

Icons for iPhone Navigation Bars

As a general rule, Apple imposes very strict requirements on how to design these icons so that each app running on the iPhone, iPad, or iPod platform conforms to common specifications and visual guidelines. Specifications ensure that your app looks in line with what’s offered by Apple and third-party developers.

The Retina Display: Making Icons That Look Great

Apple’s innovative super-high density Retina display packs more pixels into a small area than was possible just a few years ago. These high-resolution displays allow displaying the highest definition graphics to display crisp images with stunning dimension and depth. As such, Retina displays will demand higher resolution graphics to be used in navigation bars, toolbars, and tab bars. Texture-reach, highly detailed, and more realistic images with small elements and engravings will create the most pleasing effect of three-dimensionality and depth. To look good graphics on Retina displays, developers need their icons in resolutions of up to 60×60 pixels.

Icons for Navigation Bars, Toolbars, and Tab Bars

While, generally, apps can use artwork in any reasonable size or resolution, there are a few common sizes your icons must conform to in order for the system to draw them properly in navigation bars, toolbars, and tab bars.

For iPhone and iPod touch toolbar and navigation bars, Apple specifies the icon sizes of 20 x 20 pixels (standard resolution) and 40 x 40 pixels (high resolution, for Retina displays). Toolbar and navigation bars in iPad apps will display 20 x 20 pixel versions solely.

Tab bar icons shall come in two sizes. 30 x 30 pixel icons are used in tab bars displayed in iPad, iPhone and iPod touch apps in standard resolution. In addition, iPhone and iPod touch apps with the Retina display will benefit from having super-sized images in resolution of 60 x 60 pixels.

Stock Icons for iPhone, iPad, and iPod Navigation Bars, Toolbars, and Tab Bars

Aha-Soft provides a collection of readily available royalty-free icons conforming to Apple’s guidelines for toolbars, navigation bars and tab bars. App Tab Bar Icons for iPhone provide an easy way to create stunning navigation bars, toolbars, and tab bars in iPhone, iPad, and iPod apps. 120 different app icons are included in all standard sizes of 20×20, 30×30, 40×40, and 60×60 pixels. Each image is provided in black and white versions. Raster PNG and PSD files and scalable vector AI, SVG, and PDF sources are provided.

Do you want to make icon pictures yourself? Read more at iconeditor.info