November 17, 2020
3D Models for Icons

Icons are tough. They represent what the app does, but are tiny. Graphic design is a whole discipline unto itself, and styles are always changing. As a developer, what to do for the icon can be a head-scratcher.

The icon should be understandable and memorable, so it is easy to spot. When creating an icon, you are designing for 2 sizes, because a large version is typically needed, like for the Android Play Store. The two versions, typically, are the same thing, but each should look good at their respective sizes.

3D

Using 3D models for icons produces good results and solves the problem of designing an image simulatenoulsy for small and large sizes.

Mobile device screens are typically high-pixel-density, which allows detail in small images. An Android icon, on a new Galaxy screen, is less than 1 centimeter wide, and is 192 x 192 pixels. That’s a lot of pixels for that small amount of space.

3D modeling, in contrast to 2D graphic design, allows cramming a lot into a small space. In general, it’s easier to tell what something is, if it’s a 3D model. 3D software generates the reflections and shading programmatically, producing a clear rendering.

Android has used the green robot 3D model for some icons. Cartoonish models work well for icons.

The icon is a symbol, and symbols are powerful. It doesn’t just convey the purpose of the application, it represents the application, in the mind of the user. Using 3D doesn’t only lessen the challenge of creating the icon, it also provides an effective approach to nail this difficult but necessary aspect of software.

Blender

Blender is a great, free, open-source, full-featured 3D modeling program. Forum threads, Stack Exchange pages, YouTube tutorials, and other resources are plentiful, so learning is not really difficult.

Examples

Once you have the model, it is easy to create new still images, from it.

Stand Up Set Helper (Android App)

Sample Metronome (Android App)

Tagged Notes (Android App)

Shuffle Alarm (Android App)

Twidgel (website)

Share this page