注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

优品设计

简约至上 点石成金(http://www.upindesign.com

 
 
 

日志

 
 

vista图标 ( Icons)设计  

2009-01-14 08:59:02|  分类: 网站设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

“图标”是对象的图形化呈现方式,其重要性不仅仅在于作为一个程序视觉形象的美学原因,更是有着让用户能够几乎立即理解所要传达的含义的实用原因。Windows Vista® 引入了一种新的图标设计风格,以给 Windows 带来更高层次的细节与复杂度。

color

  • Icon files require 8-bit and 4-bit palette versions as well, to support the default setting in a remote desktop. These files can be created through a batch process, but they should be reviewed, as some will require retouching for better readability.

    There is no strict color palette restriction. Only full-saturation (top right) is avoided.

  • Bit levels: ICO design for 32-bit (alpha included) + 8-bit + 4-bit (dithered down automatically—pixel poke only most critical). Only a 32-bit copy of the 256x256 pixel image should be included, and only the 256x256 pixel image should be compressed to keep the file size down. Several icon tools offer compression for Windows Vista.
  • Bit levels: Toolbars 24-bit + alpha (1 bit mask), 8-bit and 4-bit.
  • Toolbars or AVI files: Use magenta (R255 G0 B255) as the background transparency color.
    • Size requirements

      General

      • Pay special attention to high visibility icons, such as main application icons, file icons that can appear in Windows Explorer, and icons appearing in the Start Menu or on the desktop.
        • Application icons and Control Panel items: The full set includes 16x16, 32x32, 48x48, and 256x256 (code scales between 32 and 256). The .ico file format is required. For Classic Mode, the full set is 16x16, 24x24, 32x32, 48x48 and 64x64.
        • List item icon options: Use live thumbnails or file icons of the file type (for example, .doc); full set.
        • Toolbar icons: 16x16, 24x24, 32x32. Note that toolbar icons are always flat, not 3D, even at the 32x32 size.
        • Dialog and wizard icons: 32x32 and 48x48.
        • Overlays: Core shell code (for example, a shortcut) 10x10 (for 16x16), 16x16 (for 32x32), 24x24 (for 48x48), 128x128 (for 256x256). Note that some of these are slightly smaller but are close to this size, depending on shape and optical balance.
        • Quick Launch area: Icons will scale down from 48x48 in Alt+Tab dynamic overlays, but for a more crisp version, add a 40x40 to .ico file.
        • Balloon icons: 32x32 and 40x40.
        • Additional sizes: These are useful to have on hand as resources to make other files (for example, annotations, toolbar strips, overlays, high dpi, and special cases): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10, and 8x8. You can use .ico, .png, .bmp, or other file formats, depending on code in that area.

      For high dpi

      • Windows Vista targets 96 dpi and 120 dpi.

      The following tables show examples of scaling ratios applied to two common icon sizes. Note that not all of these sizes must be included in the .ico file. The code will scale larger ones down.

      dpi Icon size Scale factor
      96 16x16 1.0 (100%)
      120 22x22 1.375 (137.5%)
      144 24x24 1.5 (150%)
      192 32x32 2.0 (200%)

      dpi Icon size Scale factor
      96 32x32 1.0 (100%)
      120 40x40 1.25 (125%)
      144 48x48 1.5 (150%)
      192 64x64 2.0 (200%)

      .ico file sizes (standard)

      .ico file sizes (special cases)

      Annotations and overlays

      • Annotations go in bottom-right corner of icon, and should fill 25 percent of icon area.
        • Exception: 16x16 icons take 10x10 annotations.
      • Don't use more than one annotation over an icon.
      • Overlays go in bottom-left corner of icon, and should fill 25 percent of icon area.
        • Exception: 16x16 icons take 10x10 overlays.

      Level of detail

      • 16x16 size of many of these icons is still widely used and therefore important.
      • The details in an icon of this size must clearly show the key point of the icon.
      • As an icon gets smaller, transparency and some special details found in larger sizes should be sacrificed in order to simplify and get the point across.
      • Attributes and colors should be exaggerated and used to emphasize the key forms.

        At 16x16, the icon for the portable audio device could easily be mistaken for a cell phone—so the ear piece is a key visual detail to show.

      • Simply scaling down from the 256x256 size does not work.
      • All sizes need relevant level of detail; the smaller the icon the more you need to exaggerate the defining details.

      Icon development

      Designing and producing icons

      • Hire an experienced graphic designer. For great graphics, images, and icons work with experts. Experience in illustrations using vector art or 3D programs is recommended.
      • Plan to do series of iterations, from initial concept sketches, to in-context mock-ups, to final production review and fit-and-finish of icons in the working product.
      • Think ahead—icon creation can be expensive. Gather all existing details and requirements, such as: the complete set of icons needed; the main function and meaning for each; families or clusters in the set you want to be apparent; brand requirements; the exact file names; image formats used in your code; and size requirements. Ensure up front that you can make the most of your time with the designer.
      • Remember that the designer may not be familiar with your product, so provide functional information, screen shots, and spec sections, as appropriate.
      • Plan for geopolitical and legal reviews as appropriate.
      • Map out a timeframe and have regular communication.

      From concept sketch to end-product

      • Create concept sketches.
      • Try out the concept in different sizes.
      • Render in 3D if necessary.
      • Test sizes on different background colors.
      • Evaluate icons in the context of the real UI.
      • Produce final .ico file or other graphic resource formats.

      Tools

      • Pencil and paper: Initial concept ideas, listed and sketched.
      • 3D Studio Max: Render 3D objects in perspective.
      • Adobe Photoshop: Sketch and iterate, mock-up in context, and finalize details.
      • Adobe Illustrator/ Macromedia Freehand: Sketch and iterate, finalize details.
      • Gamani Gif Movie Gear: Produce .ico file (with compression if needed).
      • Axialis Icon Workshop: Produce .ico file (with compression if needed).
      • Microsoft Visual Studio® doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors).

      Production

      Step 1: Conceptualize

      • Use established concepts where possible, to ensure consistency of meanings for the icon and its relevance to other uses.
      • Consider how the icon will appear in the context of the UI, and how it might work as part of a set of icons.
      • If revising an existing icon, consider whether complexity can be reduced.
      • Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. Depict representations of people or users as generically as possible, if needed.
      • If combining multiple objects into a single image in an icon, consider how the image will scale to smaller sizes. Use no more than three objects in an icon (two is preferred). For the 16x16 size, consider removing objects or simplifying the image to improve recognition.
      • Do not use the Windows flag in icons.

      Step 2: Illustrate

      • To illustrate Windows Aero style icons, use a vector tool such as Macromedia Freehand or Adobe Illustrator. Use the palette and style characteristics as outlined earlier in this article.
      • Illustrate image using Freehand or Illustrator. Copy and paste the vector images into Adobe Photoshop.
      • Make and use a template layer in Photoshop to make sure that work is done within square regions of the regulated sizes.
      • Create the images in a size a bit smaller than the overall icon size demands to allow space for a drop shadow (for those sizes that require one).
      • Place images at the bottom of the squares, so that all icons in a directory are positioned consistently. Avoid cutting off shadows.
      • If you are adding another object to an image or a series, keep the main object in a fixed position, and place flat smaller sized images in a fixed position, such as the lower-left or upper-right depending on the case.

      Step 3: Create the 24-bit images

      • Once you've pasted sizes in Photoshop, check the readability of images, especially at 16x16 and smaller sizes. Pixel-poking using percentages of colors may be required. Reduction of transparency may also be needed. It is common to exaggerate aspects at smaller sizes and to eliminate aspects as well, in order to focus on the key point.
      • The 8-bit icons will be displayed in any color mode lower than 32-bit and will not have the 8-bit alpha channel, so they may need to have their edges or more cleaned up because there's no anti-aliasing (edges may be jagged and image may be hard to read).
      • In Photoshop, duplicate the 24-bit image layer and rename the layer to 4-bit images. Index 4-bit images to the Windows 16 color palette.
      • Clean up images using only the colors from the 16 color palette. Outlines made from darker or lighter versions of the object's colors are usually preferable to grey or black.
      • If working on a bitmap, be sure that the background color isn't used in the image itself, because that color that will be the transparent color. Magenta (R255 G0 B255) is often used as the background transparency color.

      Step 4: Create the 8-bit and 4-bit images

      • Now that the 24-bit images are ready to be made into 32-bit icons, 8-bit versions need to be created.
      • This is a great time to test contextual screen shots. It's amazing what can be discovered by viewing other icons or a family of icons in context. This step can save time and money. It is much better to catch issues before files go through production and are handed off.
      • Add the drop shadow to your images in sizes that require them.
      • Merge the drop shadow and the 24-bit images together.
      • Create a new Photoshop file for each size. Copy and paste the appropriate image. Save each file as a .psd file.
      • Do not merge the image layer with the background layer. It's helpful to include the size and color depth in the file name while working, but the file may ultimately need to be renamed.

      Step 5: Create the .ico file

      • Choose the application that best meets needs and skills of artists. Remember that icons to be used in a shipping product must be created in a tool that has been purchased or licensed. This means that trial versions cannot be used.
      • Both of the products listed below have been used by designers who have produced icons for Windows Vista, and each offers the ability to export to Adobe Photoshop CS.
        • Gamani Gif Movie Gear: Produce .ico file
        • Axialis Icon Workshop: Produce .ico file
      • Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors), so its use is not recommended.
      • Icon (.ico format) files must contain the 4- and 8-bit versions, as well as the 24-bit + alpha.
      • Save files as a "Windows icon (.ico)" no matter which icon creation program you choose to use.
      • Some iconographic assets may actually be bitmap strips, which also require an alpha channel (for example, for toolbars), or .png files saved with transparency. Not all are necessarily .ico format; check for what format is supported in code.

      Step 6: Evaluate

      • Look at all sizes.
      • Look at the family together to evaluate family resemblance, optical balance, and distinction.
      • Look at in context to evaluate relative weights and visibility (make sure that one doesn't dominate).
      • Consider cases that may not be used now, but could be in the near future. Could this icon ever be annotated or have an overlay?
      • Look at in code.

      Icons in the context of list views, toolbars, and tree views

      List views

      • For Windows Vista, use thumbnails for files holding content that is visually distinct at small scale, such that users can directly recognize the file they are looking for. (Use the Windows Thumbnailing application programming interface for this.)

      • Application icon overlays (not shown here) on thumbnails help association with the application for the file type, in addition to showing the file's preview.

      Note: For files without visually distinct content, don't use thumbnails. Instead, use traditional symbolic file icons showing object representation and the associated application or type.

      Toolbars

      • Icons that appear in a toolbar must have an optical balance in size, color, and complexity.
      • Test potential icons in a contextual screen shot to avoid any undesired dominance or imbalances.
      • Testing in screen shots easily helps avoid expensive iterations in code.
      • Review the icons in code as well. Motion and other factors can impact the success of an icon; in some cases further iterations may be needed.

      In the above example, the optical balance has not yet been achieved.

      Try iterations in context.

      Tree views

      • Optical balance is needed to preserve the hierarchy in a tree view control.
      • Therefore, icons that are typically used in this context should be evaluated there. Sometimes a particular 16x16 icon should be made smaller because its shape has an optical dominance over others.
      • Compensation for optical imbalances is an important part of producing top quality icons.

        评论这张
       
      阅读(49)| 评论(0)
      推荐 转载

      历史上的今天

      评论

      <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
       
       
       
       
       
       
       
       
       
       
       
       
       
       

      页脚

      网易公司版权所有 ©1997-2017