|
|
|
Designing Dialog Icons for Android Apps
Android developers have to meet strict guidelines when designing icons for their mobile apps. Icon Design Guidelines for Dialog Icons specify icon sizes and provide guidelines for selecting the color palette and visual styling of graphics used in pop-up dialog boxes and interactive prompts.
Android apps run on a wide range of hardware platforms equipped with displays of different pixel densities. To accommodate the variety of screens used in the many devices running Android OS, the guidelines specify three separate icon sizes for low-, mid- and high-definition screens. These sizes are defined as 24x24 pixels for low-resolution displays (ldpi), 32x32 pixels for medium-resolution ones (mdpi), and 48x48 pixels for high-definition screens (hdpi).
Low density screen (ldpi) |
Low density screen (ldpi) |
High density screen (hdpi) |
24 x 24 px |
32 x 32 px |
48 x 48 px |
Style wise, Android dialog icons are flat, face-on images designed with the use of a light gradient and inner shadow. These visual features help dialog icons stand out against a dark background. No isometric projection or 3D styles are permitted in order to maintain a uniform look among Android-compatible apps created by different vendors.
- Dialog icons have a 1 pixel safeframe
- Inner shadow: black, 25% opacity, angle -90°,
distance 1px, size 0px
- Front part: gradient overlay, angle 90°
bottom: r 223 ; g 223 ; b 223,
top: r 249 ; g 249 ; b 249,
bottom color location: 0%,
top color location: 75%
The Design Guidelines specify exact colors for icon's overlay. The gradient overlay is rendered at an angle of 90 degrees. The gradient starts at the bottom as 233, 233, 233 (an R,G,B color), and goes up to 249, 249, 249 (R,G,B) at 75% to the top. The space from that point and up to the top of the overlay is filled with a solid color of 249, 249, 249 (R,G,B).
The inner shadow is rendered black at 25% opacity (controlled via the alpha-channel) at an angle of -90 degrees. The distance (shift) from the main picture is 1px, while the size of the shadow is 0px (meaning the shadow is exactly the size of the main image itself).
Creating Android-style dialog icons is a fairly easy, step-by-step process. You can create your icons in a raster editor such as Adobe Photoshop by simply downloading the Icon Templates Pack for Android 2.3 from the Android Web site. However, raster editing may not be the perfect way, as you will end up drawing each of the three icon sizes separately.
To save time drawing the three resolutions (ldpi, mdpi and hdpi), a vector editor is recommended. You can create the basic shape (main image) of the icon in your favorite vector editor such as Adobe Illustrator and export the shape into Adobe Photoshop, rendering the vector source into the size required (24x24, 32x32, or 48x48 pixels). The rest is easy: add gradient fill as an overlay in a separate layer, and specify the correct inner shadow in yet another layer. Save the icon as a PSD file for future editing, and export it as a PNG file with transparency enabled to use the icon in your Android app.
To save time designing icons for your Android app, you may choose a ready-made collection instead. The collection of Android Dialog Icons by Aha-Soft offers 86 unique images drawn in strict accordance with the Dialog Icons Design Guidelines. This royalty-free collection is supplied in the form of PNG files with alpha-channel, and offers PSD source images. In addition, scalable AI and SVG vector sources are available. You can preview and purchase the collection at the company's Web site.
Android Dialog Icons page: http://www.aha-soft.com/stock-icons/android-dialog-icons.htm
|
Copyright © 2000-2022 Aha-Soft. All rights reserved.
|
|
IconLover is our pick. It allows you to design and edit all kinds of graphics required in the software development cycle, including icons, static and animated cursors and interface elements - all these graphics can now be designed in a single application.
Toolbar Icon Set. A collection of practical and eye catching Windows icons representing all basic operations required for software development.
Business Icon Set will make your software and web products look more modern and attractive. File formats included into the set are Windows icons, GIF and PNG images.
ArtIcons Pro is an advanced icon-specific utility for Windows. It supports ICO, BMP, PNG, GIF, PSD, XPM, XBM, WBMP, CUR and ANI image formats and allows you to manage icon libraries.
Any to Icon converts icons and cursors into BMP, JPG, PNG, GIF, ICO, CUR and other formats. This wizard can find icons and make images for use on Web pages.
|
|
|
|