Перевод статьи:
Creating Windows XP Icons
Windows User Experience Team
Microsoft Corporation
July 2001
http://msdn.microsoft.com/library/en-us/dnwxp/html/winxpicons.asp

Содержание
• Введение
• Обзор дизайна иконок
• Шаг 1: Разработка концепции
• Шаг 2: Рисование
• Шаг 3: Создание 24-битовых изображений
• Шаг 4: Создание 8-битовых и 4-битовых изображений
• Шаг 5: Создание .ico файлов
• Создание Панели инструментов (Toolbar)
• Создание AVI

Введение

Microsoft Windows XP вводит новый стиль в разработку иконок. Данное руководство предоставит Вам все стадии проектирования и создания иконок в стиле Windows XP.

Стиль иконок Windows XP - весёлый, цветной и динамичный и со сглаженными краями, так как иконки 32-битовые. Каждая иконка предоставляется в векторном виде и затем обрабатывается в Adobe Photoshop для создания красивого изображения.

Это руководство предназначено для разработчиков. Чтобы создавать изображения, мы рекомендуем Вам работать с хорошим графическим дизайнером, имеющем опыт работы с векторными или 3D программами.

Рисунок 1. Примеры иконок

Обзор дизайна иконок

Этот раздел познакомит Вас с новым стилем Windows XP в процессе подготовки к созданию ваших иконок.

Характеристики стиля иконок

1. Цвет обогащает и дополняет внешний вид Windows XP.
2. Угол и перспектива придают динамичность изображению.
3. Края и углы элементов - мягкие и немного закруглённые.
4. Световой поток исходит из верхнего левого угла с дополнительным окружающим светом, освещающим другие части иконки.
5. Использование градиентов обеспечивает объёмность и придает иконке большую выразительность.
6. Внешняя тень придаёт контраст и объём.
7. Схематичность обеспечивает наглядность.
8. Объекты повседневного использования, такие как, компьютеры и т.п., имеют более современный вид.

Размеры иконок

Иконки Windows бывают четырёх размеров: 48 × 48, 32 × 32, 24 × 24 и 16 × 16 пикселей.

• 48 × 48
• 32 × 32
• 16 × 16

Рисунок 2. Основные размеры иконок

Иконки с правой стороны меню Пуск (Start) отображены в размере 24 × 24 пикселя. Это размер не рекомендуется.

Рисунок 3. Размер 24 × 24 в меню Пуск.

Если Вы создаете иконки для панели инструментов, стандартные размеры Windows — 24 × 24 и 16 × 16 пикселей.

Рисунок 4. Стандартные размеры иконок панели инструментов.

Поддержка глубины цвета

Windows XP поддерживает 32-битовые иконки - 24-бита изображения и 8-битный альфа канал. Это позволяет отображать иконки со сглаженными краями, которые сочетаются с любым фоном.
Каждая иконка Windows XP должна содержать следующие три глубины цвета для совместимости с различными настройками монитора:

• 24 бита с 8-битным альфа каналом (32 бита)
• 8 битов (256 цветов) с одним битом прозрачности
• 4 бита (16 цветов) с одним битом прозрачности

Рисунок 5. 32-битная, 8-битная и 4-битная версии иконки "My Pictures"

Цветовая палитра

Это основные цвета, которые используются в наших иконках:

Рисунок 6. Цветовая палитра иконок Windows XP

Угол и композиция объектов

Такая перспективная решётка применяется в стиле иконок Windows XP:

Рисунок 7. Перспективная решётка Windows XP

• Иконки документов
• Иконки-символы (такие как иконки предупредительные или указательные)
• Иконки уникальных объектов (такие как увеличительное стекло)

Рисунок 8. Пример прямых иконок (Document, Search и Favorites)

Рисунок 9. Пример перекрывания (Add or Remove Programs, Print Pictures, Recent Documents)

Внешняя тень(Drop Shadow)

Для того, чтобы добавить внешнюю тень к вашим изображениям, нажмите два раза кнопкой мыши на Layer (слой) изображения в Photoshop и выберите Drop Shadow. Затем измените Angle(Угол) до 135, Distance(Расстояние) до 2, и Size(Размер) до 2. Уровень непрозрачности(opacity) внешней тени — 75% .

Рисунок 10. До и после добавления внешней тени к иконке.

Эскиз

Шаг 1: Разработка концепции

Вот пример эскиза для иконки My Pictures :

Рисунок 11. Эскиз иконки My Pictures

• По возможности используйте общепринятые стандарты, чтобы гарантировать однозначность определения пользователем назначения иконки .
• Посмотрите, как иконка будет выглядеть в контексте вашего пользовательского интерфейса и как она может смотреться в комплексе с другими иконками.
• Рассмотрите эстетичность вашей графики. Избегайте использовать буквы, слова, руки или лица на иконках. Если Вам необходимо показать людей, изобразите их по возможности схематично.
• При объединении нескольких объектов в один образ на иконке, определите как изображение будет масштабироваться до мелких размеров. Мы советуем Вам использовать не более трёх объектов на иконке. Чтобы улучшить распознаваемость в размере 16 × 16, Вы можете также решить: удалить объекты или упростить изображение.

• Для соблюдения принципов торговой марки и марки Windows, не используйте флаг Windows на иконках, за исключением иконки Windows Update.
• Флаг Windows должен быть использован только на иконках, которые загружаются как часть операционной системы Microsoft® Windows®.
• Группа торговой марки Microsoft (The Microsoft branding team), должна рецензировать любое использование флага Windows в иконках.
  

Общие иконки

Рисунок 12. Общие иконки для Windows XP

Общие иконки панели инструментов

Рисунок 13. Общие иконки панели инструментов

Шаг 2: Рисование

1. Нарисуйте изображение, используя FreeHand или Illustrator.
2. Создайте три размера изображения. Поскольку позже будет добавлена внешняя тень, Вы должны создать три размера, примерно 46 × 46, 30 × 30 и 14 × 14 пикселей.
3. Скопируйте и вставьте векторные изображения в Photoshop.

Рисунок 14. Диалог вставки

Шаг 3: Создание 24-битовых изображений

1. Как только Вы вставите изображения трёх размеров в Photoshop, проверьте удобочитаемость и вид Ваших изображений, особенно в размере 16 × 16. Возможно Вам придётся удалить некоторые пиксели. Если 16 × 16 выглядит нечётко, нужно вернуться во FreeHand, чтобы упростить изображение в этом размере.
2. Добавьте внешнюю тень к вашим изображениям двойным кликом на Layer (слое) изображения и выберите Drop Shadow. Затем измените Angle(Угол) до 135, Distance(Расстояние) до 2, и Size(Размер) до 2. Оpacity (Непрозрачность) внешней тени установите на 75%.
   

   Рисунок 15. Настройки внешней тени

3. Для объединения внешней тени и 24-битного изображения, создайте новый пустой слой. В меню Layers (Слои) выберите Merge Visible (Объединить видимые слои) и эти 3 слоя.
   
   

   Рисунок 16. Объединение слоёв, содержащих внешнюю тень

4. Создайте три новых файла Photoshop, каждого размера: 48 × 48, 32 × 32 и 16 × 16 пикселей. Скопируйте и вставьте соответствующее изображение. Если внешняя тень изображения усекается, Вы должны возвращаться к FreeHand, пропорционально уменьшить изображение и заново выполнить все предыдущие действия.
5. Сохраните каждый файл с расширением .psd. Не объединяйте слой изображение со слоем фона. Это поможет включить размер и глубину цвета в файле.
   

Шаг 4: Создание 8-битовых и 4-битовых изображений

Создание 8-битовых изображений

1. В Photoshop продублируйте 24-битный слой Вашего изображения и переименуйте слой в 8-битное изображение.
2. Создайте новый пустой слой и залейте его темным цветом (например, синим).
3. Объедините 8-битный слой изображения с новым.
4. Наведите порядок на краях с однотонными цветами, удаляя все сглаженные (antialiased) пиксели. Используйте последовательную ступеньчатость, чтобы сделать зубчатые края менее заметными.
5. Чтобы посмотреть как выглядит ваше изображение, поместите его на светлый фон (например, белый).
   
   

   Рисунок 17. Наводение порядка в изображении с 8-битной глубиной цвета

6. Создайте три новых файла Photoshop каждого размера: 48 × 48, 32 × 32 и 16 × 16 пикселей . Скопируйте и вставьте соответствующее изображение.
7. Затем Вам нужно проиндексировать изображение до 256 цветов. 8-битовые иконки могут иметь настраиваемые палитры. (Next you need to index the images down to 256 colors. The 8-bit icons can have custom palettes)
   1. В изображении 48 × 48 залейте фон уникальным цветом (не используйте цвет изображения). Обычно используется фуксин (R255 G0 B255).
   2. Зайдите в Image->Mode->Indexed Color, и выберите Flatten Layers.
   3. В ниспадающем меню Palette (Палитра) выберите Custom. В диалоговом окне кликните OK. Кликните OK в диалоговом окне Indexed Color.
   4. Сохраните файл в формате .psd .
   5. Сохраните другие два размера, используя тот же цвет фона и применяя Сustom palette (Выборочная палитра).
      
8. Сохраните каждый файл в формате .psd.

Создание 4- Битовых изображений

1. Проиндексируйте ваши 8-битовые изображения в 16-цветную палитру Windows.
   
2. Используйте в своих изображениях только 16 цветов.
   
3. Используйте черный цвет на нижнем и правом краях изображения.
   
4. Используйте темно-серый или другой темный цвет для левого и верхнего краев изображения.
   
5. Сохраните три размера, используя тот же цвет фона. Убедитесь, что цвет фона не использован в изображении, поскольку этот цвет будет прозрачным.
   
   

Рисунок 18. Пример 4-битной иконки

Шаг 5: Создание .ico файлов

1. Вы должны использовать в общем девять файлов - три размера каждой глубины цвета:
   48 × 48 - 24 бита
   32 × 32 - 24 бита
   16 × 16 - 24 бита
   
   48 × 48 - 8 бит
   32 × 32 - 8 бит
   16 × 16 - 8 бит
   
   48 × 48 - 4 бита
   32 × 32 - 4 бита
   16 × 16 - 4 бита
   
2. Откройте Gif Movie Gear (GMG) и просто перетащите изображение в окно (или используйте File->Insert Frames(Файл->Вставить фрейм)). Каждое изображение станет фреймом.
3. Когда Вы перетаскиваете 24-битное изображение (или любой .psd файл со слоями) в GMG, появляется такое диалоговое окно:
   
   

   Рисунок 19. Параметры настройки 24-битовых изображений в GMG

   Проверьте, что установки следующие:
   • Layers as multiple frames in animation (слои как составляющие фреймы в анимации)
   • No blending: each Layer is a frame. (Не смешивать: каждый слой это фрейм)
   • Keep background transparency (Сохранить прозрачность фона)
4. Фоновый слой каждого изображения появится как фрейм. Удалите эти пустые фреймы: выберите фрейм и нажмите клавишу Delete.
5. В итоге у Вас получятся девять фреймов. Иконки должны быть в порядке увеличения цветности: первые три -- 4-битовые (16 цветов), следующие три -- 8-битовые (256 цветов), последние три -- 24-битовый цвет и 8-битовый альфа канал (всего 32 бита).
   
   

   Рисунок 20. Порядок фреймов в GMG

   Примечание: Для проверки атрибутов изображения поместите вашу мышь поверх изображений. Вы увидите окно, содержащее информацию о разрешающей способности каждого изображения. Параметр по умолчанию показывает размерность, прозрачность, и количество битов. Вы можете добавлять или удалять отображаемые пункты, следуя Edit->Preferences->Frame Tips.

6. Для 8-битовых и 4-битовых версий Вы должны сделать фон прозрачным. В GMG для придатия прозрачности используется цвет lime green. Вы можете установить свой цвет (или оставить цвет фона по умолчанию) используя пункт меню View->Transparency As. Выбранный цвет используется только при просмотре и не влияет на изображение.
7. Для того, чтобы сделать 8-битовые и 4-битовые версии прозрачными, необходимо:
1. Выбрать фрейм и нажать иконку на панели инструментов Pick Transparency Color (the eye-dropper - пипетка).
   
   

   Рисунок 21. Использование меню Transparency

2. В диалоговом окне появится Ваша иконка. Пипеткой кликните цвет фона на иконке. Этот цвет изменится на lime green (или на тот цвет, который был выбран прозрачным цветом фона в GMG).
3. Повторите для всех 4-битовых и 8-битовых фреймов.
8. Сохраните иконки, выбрав File->Save Icon As….

Создание панели инструментов (Toolbar)

Иконки панели инструментов Windows следуют следуют тому же стилю как и другие иконки кроме одного -- они не используют внешнюю тень(drop shadow). Поскольку значки панели инструментов довольно небольшие, мы рекомендуем готовить простые изображения. Допускается прямое изображение, а не перспективное, если это сделает изображение более удобочитаемым.

Панель инструментов Windows отображает два размера иконок: 24 × 24 и 16 × 16 пикселей. Есть два состояния - по умолчанию и активное(hot state - mouseover - курсор на иконке). Для активного состояния, мы слегка увеличиваем насыщенность изображений. Создание иконок панели инструментов очень похоже на создание иконок неинструментальной панели кроме изображений, которые помещены в полосу .bmp, - упорядоченную строку иконок.

1. Как только Вы нарисовали иконки в FreeHand в каждом размере, скопируйте и вставьте их в Photoshop. Поместите 24 × 24-ые на одном уровне и 16 × 16-ые на другом.
2. Нарисуйте отдельную строка блоков для каждого размера на разных слоях. Одна строка 16 × 16 блоков и другая строка 24 × 24 блока.
   

   Рисунок 22. Пример блоков для иконок панели инструментов.

3. Положите каждое изображение в квадрат в необходимом порядке. Проверьте, что изображения не перекрываются.
   
4. Сохраните файл.
5. Затем создайте активное состояние (hot states) в Photoshop.
   1. Продублируйте слои 24 × 24 и 16 × 16. Переименуйте слои, так чтобы они были чётко отмечены как активные(hot) версии.
   2. Для каждой активной версии, выберите слой, и следуя Image->Adjust->Levels… переместите средний указатель на 0.75. Нажмите OK.
      

      Рисунок 24. Изменение уровня для создания "активного"("hot") вида.

6. После создания активных версий, у Вас есть один слой полос: одна по умолчанию 24 × 24, одна активная 24 × 24, одна по умолчанию 16 × 16, и одна активная 16 × 16.
7. Затем Вы должны создать индивидуальные файлы для каждой полосы.
   1. Один из способов сделать это - использовать инструмент Crop(Вырезать) и вырезать файл до одной размерности, а затем сохранить этот файл.
   2. Сохраните каждую полосу отдельными 24-битовыми .psd файлами.
      

      Рисунок 25. 24-битовая полоска панели инструментов в Photoshop.

8. Для сохранения полосу в 32-битовом изображении, перетащите полосу в GMG. Удалите все пустые фреймы. Следуйте File->Export as->Filmstrip. В диалоговом окне Film Export, проверьте что выбран BMP/DIB, и 24-bit with Alpha.

Создание AVI

Microsoft Windows XP использует 8-битовые AVI. Процесс для создания .avi файла тот же самый как иконок - Вы готовите части в Photoshop, затем перетаскиваете их в GMG. Следуйте инструкциям по созданию 8-битовых версий.

Чтобы сохранить Ваши AVI-файлы в GMG выберите File->Export As->AVI file… .

• В качестве прозрачного цвета фона используйте фуксин (R255 G0 B255).
• Важно, чтобы в Photoshop не появились паразитные пиксели.