• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Resolution Independent Icon Design
 

Resolution Independent Icon Design

on

  • 3,864 views

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 ...

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.

Statistics

Views

Total Views
3,864
Views on SlideShare
3,825
Embed Views
39

Actions

Likes
2
Downloads
0
Comments
0

2 Embeds 39

http://www.slideshare.net 38
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Resolution Independent Icon Design Resolution Independent Icon Design Presentation Transcript

  • RESOLUTION INDEPENDENT ICON DESIGN Centigrade GmbH
  • 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 WHY RESOLUTION INDEPENDENCE?
  • 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)
  • DISPLAY RESOLUTION 5 • Growing display resolutions (pixel density) • Standard monitor: 100 ppi • iPhone: 160 ppi • Color ebooks: 200 ppi • Print: 300+ ppi
  • NAVIGATION SYSTEM ICONS All icons designed by Centigrade GmbH.
  • WINDOWS VISTA ICONS Tiny (16x16 pixel) Extra Large (256x256 pixel) All icons designed by Centigrade GmbH.
  • TOUCHSCREEN ICONS All icons designed by Centigrade GmbH.
  • 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 THE VECTOR-SCALING DILEMMA
  • 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
  • VECTOR RASTERIZATION DILEMMA 12 ILLUSTRATED
  • MANUAL CORRECTIONS 13
  • MANUAL CORRECTIONS: REMOVE PERSPECTIVE All icons designed by Centigrade GmbH.
  • PRODUCT ICON: OPTIMIZED FOR VARIOUS SIZES All icons designed by Centigrade GmbH.
  • 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 MULTI-SCALE ICONS FOR RICH INTERNET APPLICATIONS
  • 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
  • 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.“
  • 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
  • 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