Resolution Independent Icon Design

2,899 views

Published on

This presentation gives an overview over what resolution independence means and why it is important in the context of icon design. Finally, a solution is introduced that allows to provide icons in a format that is especially appropriate for Rich Internet Applications and mobile applications.

Published in: Design, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,899
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide





















  • Resolution Independent Icon Design

    1. 1. RESOLUTION INDEPENDENT ICON DESIGN Centigrade GmbH
    2. 2. OVERVIEW 2 • What is Resolution Independence? • The Vector-Scaling Dilemma • Hands on Example in Photoshop • Multi-Scale Icons for Rich Internet Applications and Live Demo
    3. 3. 3 WHY RESOLUTION INDEPENDENCE?
    4. 4. DISPLAY SIZE 4 • Growing diversity of display sizes • Cell phones (tiny) • Navigation systems (small) • Desktop systems (small to large) • Multi-touch tables (large) • Touch walls (jumbo)
    5. 5. DISPLAY RESOLUTION 5 • Growing display resolutions (pixel density) • Standard monitor: 100 ppi • iPhone: 160 ppi • Color ebooks: 200 ppi • Print: 300+ ppi
    6. 6. NAVIGATION SYSTEM ICONS All icons designed by Centigrade GmbH.
    7. 7. WINDOWS VISTA ICONS Tiny (16x16 pixel) Extra Large (256x256 pixel) All icons designed by Centigrade GmbH.
    8. 8. TOUCHSCREEN ICONS All icons designed by Centigrade GmbH.
    9. 9. RESOLUTION INDEPENDENCE: GOAL 9 • Design and render visuals such as icons or components in a way that guarantees optimum recognizability and aesthetic appearance on every screen device • Obvious (but insufficient) solution: use vector graphics to create and deploy visuals
    10. 10. 10 THE VECTOR-SCALING DILEMMA
    11. 11. THE POWER AND WEAKNESS OF VECTORS 11 • Vector-graphics do not require much memory and can be used to flexibly scale an icon to different size without aliasing - true. • However: it‘s a myth that vector graphics can be freely scaled to any size without quality loss • At small display sizes or low display resolutions unoptimized vector icons can quickly look blurry and even become unrecognizable
    12. 12. VECTOR RASTERIZATION DILEMMA 12 ILLUSTRATED
    13. 13. MANUAL CORRECTIONS 13
    14. 14. MANUAL CORRECTIONS: REMOVE PERSPECTIVE All icons designed by Centigrade GmbH.
    15. 15. PRODUCT ICON: OPTIMIZED FOR VARIOUS SIZES All icons designed by Centigrade GmbH.
    16. 16. THE POWER AND WEAKNESS OF BITMAPS 16 • Raster graphics are still needed to guarantee optimal display quality and recognizability • 1st Problem: one different image version per icon is a pain when later changes occur - no solution yet available here. • 2nd Problem: raster graphics need a significant amount of memory which is a problem for network connected apps - possible solution is available.
    17. 17. 17 MULTI-SCALE ICONS FOR RICH INTERNET APPLICATIONS
    18. 18. CHALLENGE 18 • How to provide many different raster images per icon while keeping network bandwith consumption low? • Solution: benefit from technology from where this problem has already been tackled
    19. 19. Seadragon Deep Zoom 19 „Change the way we use screens, from wall- sized displays all the way down to cell phones, so that graphics and photos are smoothly browsed, regardless of the amount of data or the bandwidth of the network.“
    20. 20. Seadragon Deep Zoom 20 • Microsoft Live Labs project • Implementations for Silverlight, Ajax and iPhone available • Multi-scale images are saved in DCI/DZI file format • Deep Zoom Composer can be freely downloaded to create multi-scale images and works smoothly with Blend
    21. 21. DEMO 21 • For an interactive live demo of a multi-scale icon visit www.centigrade.de/icon-design/MultiScaleIconDemo.html • Demo was created with Deep Zoom Composer, Microsoft Expression Blend 2 SP1 and some custom coding • For a more detailed writing on resolution independent icon design visit www.centigrade.de/en/blog/article/ resolution-independent-icon-design-part-1 • For more information visit www.centigrade.de

    ×