Windows User Experience Team
Microsoft Corporation
июль 2001
Резюме: В этой статье обсуждается, как проектировать и создавать красочные и динамичные значки для Windows XP, используя редакторы векторной графики типа FreeHand, Illustrator или Photoshop.
Введение
Краткий обзор разработки значка
Шаг 1: Концепция
Шаг 2: Рисование
Шаг 3: Создание 24-х битного изображения
Шаг 4: Создание 8-ми битного и 4-х битного изображений
Шаг 5: Создание файла значка
Создание значков для панели инструментов
Создание 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 x 48, 32 x 32, 24 x 24, и 16 x 16 пикселей.
Мы рекомендуем использовать в ваших значках эти три размера:
· 48 x 48
· 32 x 32
· 16 x 16
Рисунок 2. Основные размеры значков
Значки на правой стороне меню Пуск отображаются размером 24 x 24 пикселя. Вам не нужно использовать этот размер.
Рисунок 3. Значки размером 24 x 24 в меню Пуск
Если вы создаете значки для панелей инструментов, то стандартный размер Windows – 24 x 24 and 16 x 16.
Рисунок 4. Стандартный размер значков для панелей инструментов
Windows XP поддерживает 32-х битные значки, которые являются 24-х битным изображением с 8-ми битным альфа-каналом. Это позволяет значкам отображаться с мягкими сглаженными краями, которые смешиваются с задним фоном.
Каждый значок Windows XP должен содержать эти три глубины цвета для поддержки различных настроек монитора:
· 24-бит с 8-бит альфа-канал (32-бит)
· 8-бит (256 цветов) с 1-бит прозрачности
· 4-бит (16 цветов) с 1-бит прозрачности
Рисунок 5. 32-бит, 8-бит и 4-бит версии значка Мои рисунки
Это первичные цвета, используемые в наших значках:
Рисунок 6. Цветовая палитра Windows XP
Эта сетка перспективы, которую используют значки Windows XP:
Рисунок 7. Перспектива значков Windows XP
Не все объекты размером 16 x 16 хорошо выглядят под углом. Следующие объекты обычно используются в прямом отображении:
· Значки документов
· Значки символов (такие как предупреждение или информация)
· Объекты, представляющие отдельный предмет (такие как лупа)
Рисунок 8. Примеры прямого отображения (.Jpg-документ, Поиск и Избранное)
Для удобочитаемости вторичные объекты, которые накладываются на первый объект, можно не наклонять, если это не придаст большего смысла изображению. Сочетайте также ваши значки, как набор, чтобы помочь определить принадлежность данной группы к какой-нибудь цели по смыслу.
Рисунок 9. Пример наложения (Добавить/Удалить программу, Печать изображения, Прошлые документы)
Значки Windows XP используют тень для придания глубины и объема. Этот эффект добавляется в Photoshop’е и описан ниже в этой рекомендации.
Для добавления тени сделайте двойной щелчок по имидж-слою в Photoshop’е и выберите Тень. Затем измените угол на 135, удаление на 2 и размер на 2. Глубина тени – 75%.
Рисунок 10. До и после добавления тени значку
При иллюстрировании значков добавьте контур к изображению, чтобы обеспечить четкость и гарантировать, что изображение будет хорошо смотреться на разных фонах.
При проектировании новых значков мы рекомендуем захватить вам карандаш и бумагу, чтобы делать наброски.
Здесь показан набросок значка Мои рисунки:
Рисунок 11. Набросок значка Мои рисунки
Соображения при проектировании значков:
· Используйте принятую концепцию, когда это возможно, чтобы гарантировать последовательность значений для пользователя.
· Представьте, как значок будет смотреться в интерфейсе пользователя, и как он будет смотреться в группе таких же значков.
· Подумайте о восприятие вашего значка. Старайтесь не использовать буквы, слова, руки или лица людей в ваших значках. Если вам все-таки нужно изобразить людей, то постарайтесь сделать это, как можно обобщенней.
· Объединяя несколько изображений в одном значке, представьте, как будут выглядеть изображения маленького размера. Мы предлагаем использовать в значках не более трех объектов. Для размера 16 x 16 вы должны создать более упрощенное изображения, чтобы можно было проще распознать его.
Внимание Пользуйтесь следующими рекомендациями при использовании флажка Windows в значках:
· Не рекомендуем использовать флаг, торговую марку и брэнд Windows в ваших значках за исключением значка Windows Update.
· Флаг Windows может быть использован только, как часть операционной системы Microsoft® Windows®.
· Группа Microsoft следит за использованием флага Windows в значках.
Рисунок 12. Общие значки Windows XP
Рисунок 13. Общие значки панели инструментов Windows XP
Чтобы иллюстрировать значки в стиле Microsoft Windows XP, мы рекомендуем использовать редакторы векторной графики такие, как Macromedia FreeHand или Adobe Illustrator. Используйте палитру цветов и стиль описанные в Кратком обзоре разработки значка.
1. Создавайте ваши рисунки, используя FreeHand или Illustrator.
2. Создайте рисунки трех размеров. Поскольку придется позднее добавлять тень, вы должны создать рисунки размерами 46 x 46, 30 x 30, и 14 x 14 пикселей.
3. Скопируйте и вставьте векторный рисунок в Photoshop.
Рисунок 14. Диалоговое окно вставки
После вставки векторного файла в Photoshop,следующим шагом будет создание 24-х битного изображения.
1. Как только вы вставили изображение всех трех размеров, проверьте удобочитаемость рисунков, особенно размером 16 x 16. Вам нужно будет удалить лишние пиксели. Если изображение 16 x 16 не читаемо, то придется создавать заново рисунок специально под этот размер.
2. Добавьте тень к вашему рисунку, сделайте двойной щелчок по имидж-слою и выберете Drop Shadow. Затем задайте значения угол 135, удаление 2 и размер 2. Прозрачность тени 75%.
Рисунок 15. Установка параметров тени
3. Чтобы соединить тень и изображение, создайте новый слой. В меню Layers выберете Merge Visible и соедините все три слоя.
Рисунок 16. Соединение слоев при добавлении тени
4. Создайте три новых файла, по одному для каждого размера: 48 x 48, 32 x 32 и 16 x 16 пикселей. Скопируйте и вставьте соответствующие изображения. Если тень оказалась подрезана то вам придется заново попробовать создать изображение.
5. Сохраните каждый файл с расширением *.psd. Не соединяйте изображение с фоном. Полезно в названии файла указать размер и глубину цвета.
Теперь, когда вы имеете 24-х битное изображение, готовое к созданию 32-х битного значка, вам нужно создать 8-ми битную версию. 8-ми битный значок будет отображаться на мониторах с глубиной цвета меньшей, чем 32 бита.
8-ми битная версия не имеет альфа-канала, который нужен для сглаживания, поэтому их края будут зазубрены.
1. В Photoshop’е продублируйте 24-х битное изображение и переделайте его в 8-ми битный.
2. Создайте новый слой и заполните его темным цветов, например, синим.
3. Соедините 8-ми битное изображение с новым слоем.
4. Очистите грани от ярких пикселей. Используйте ступенчатое продвижение, чтобы сделать грани более мягкими.
5. Проверьте ваше изображение на светлом фоне, например, белом, чтобы посмотреть, как оно выглядит.
Рисунок 17. Очистка граней для 8-ми битного рисунка
6. Создайте три новых файла для каждого размера: 48 x 48, 32 x 32 и 16 x 16 пикселей. Скопируйте и вставьте соответствующие изображения.
7. Затем вы должны конвертировать изображение в 256 цветов.
a. В рисунке 48 x 48 заполните фон цветом, который вы не используете в вашем изображении. Мы, в основном применяем цвет magenta (R255 G0 B255).
b. Перейдите Image->Mode->Indexed Color и выберете Flatten Layers.
c. В контекстном меню Palette выберете Custom. В диалоговом окне Custom нажмите OK. Нажмите OK в диалоговом окне Indexed Color.
d. Сохраните файл с расширением *.psd.
e. Проделайте тоже самое с остальными двумя изображениями.
8. Сохраните каждый файл с расширением *.psd.
Если вы хотите, чтобы ваши значки хорошо выглядели на мониторах с малой глубиной цвета, примените 16-цветную версию ваших значков.
1. Конвертируйте 8-ми битное изображение в 16-цветную палитру Windows.
2. Откорректируйте изображение, используя только 16-цветную палитру.
3. Используйте черный контур по нижнему и правому краю.
4. Используйте темный серый или другой темный цвет контура для верхнего и левого края.
5. Сохраните все три изображения, используя любой цвет фона. Будьте уверены, что цвет фона не совпадает с каким-нибудь цветом в рисунке, иначе этот цвет будет потерян при применении прозрачности.
Рисунок 18. Образец 16-цветного изображения
Теперь, когда у вас есть все изображения, настало время создать файл значка с расширением *.ico. Чтобы создать 32-х битный значок, мы используем инструмент называемый Gif Movie Gear (GMG). Получить его вы можете на сайте Gamani.
Эти шаги проведут вас через процесс создания файла значка, который будет иметь три размера и три типа глубины цвета.
1. У вас должны быть девять файлов трех размеров и трех глубин цвета:
48 x 48 и 24 бит
32 x 32 и 24 бит
16 x 16 и 24 бит
48 x 48 и 8 бит
32 x 32 и 8 бит
16 x 16 и 8 бит
48 x 48 и 4 бит
32 x 32 и 4 бит
16 x 16 и 4 бит
2. Откройте Gif Movie Gear (GMG) и перетащите каждое изображение в окно программы (или используйте File->Insert Frames). Каждое изображение будет помещено в отдельную рамку.
3. Когда вы перетащите любой файл *.psd в GMG, перед вами появится это диалоговое окно:
Рисунок 19. Установки для 24-х битных изображений в Gif Movie Gear
· Слои, как фреймы для анимации
· Не смешивать: каждый слой отдельным фреймом
· Сохранить прозрачность фона
4. Фоновый слой каждого 24-х битного рисунка будет, как отдельный слой. Удалите его, выбрав этот фрейм и нажав клавишу Delete.
5. У вас должно получиться в общем девять изображений. Значки следует упорядочит по возрастанию их глубины цвета: сначала 16-цветные, затем 8-ми битные (256 цветов), и в конце 24-х битные изображения с 8-ми битным альфа-каналом (32 бита).
Рисунок 20. Размещение фреймов в Gif Movie Gear
6. Для версий на 8 бит и 4 бит, вы должны сделать прозрачный фон. GMG использует ярко зеленый цвет для определения «прозрачного» цвета. Вы можете установить свой собственный цвет или оставить по умолчанию, используя меню View->Transparency As. Выбранный цвет используется только для просмотра, и не будет применяться в значке.
7. Чтобы сделать 8-ми битную и 4-х битную версии прозрачными:
Рисунок 21. Использование инструмента прозрачности
b. Диалоговое окно покажет ваш значок. Пипеткой выберите цвет фона. Этот цвет измениться на ярко зеленый (или на другой цвет, который был выбран, как «прозрачный» в GMG).
c. Повторите это для всех 4-х битных и 8-ми битных фреймов.
8. Чтобы сохранить значок выберите в меню File->Save Icon As...
Значки панели инструментов Windows следуют тем же рекомендациям, что и остальные значки за исключением применения тени. Поскольку значки панели инструментов являются достаточно маленькими, мы рекомендуем использование простых изображений. Приемлемо использовать рисунок с прямым изображением, а не под углом, чтобы удобнее было его читать.
Панель инструментов Windows отображает два вида размеров значков: 24 x 24 и 16 x 16 пикселя. Есть два значения – по умолчанию и активный (мышь над значком). Для активного типа мы немного увеличиваем насыщенность изображения.
Создание значков для панели инструментов подобно другим значкам кроме одного. Изображения помещены на ленту в основном в формате *.bmp в порядке их расположения на панели инструментов.
1. Создав значки каждого размера в FreeHand, скопируйте и вставьте их в Photoshop. Поместите 24 x 24 на один слой, а 16 x 16 на другой.
2. Нарисуйте отдельный блок для каждого размера на отдельном слое. Одна строка 16 x 16, а другая 24 x 24.
Рисунок 22. Образец лент для значков панели инструментов
3. Поместите каждое изображение в квадратах по порядку. Проверьте, чтобы изображения ничего не перекрывали.
Рисунок 23. Помещение значков панели инструментов в рамки
4. Сохраните ваш файл Photoshop.
5. Затем создайте активный вид значков в Photoshop.
a. Сдублируйте 24 x 24 и 16 x 16 слои. Переименуйте их так, чтобы было ясно, что это активные значки.
b. Для каждой активной версии выберете слой и перейдите Image->Adjust->Levels и передвиньте средний указатель до значения 0.75. Нажмите OK.
Рисунок 24. Изменение насыщенности для активных значков
6. Как только вы создали активную версию, у вас должны получиться полосы со значениями: по умолчанию 24 x 24, активная 24 x 24, по умолчанию 16 x 16 и активная 16 x 16.
7. Затем вы должны создать отдельные файлы для каждой полосы.
a. Один способ заключается в том, чтобы использовать инструмент Crop и выделив полосу соответствующую полосу, сохранить ее отдельным файлом. Каждая полоса должна быть отмерена от конца предыдущей до начала следующей.
b. Сохраните каждую полосу, как 24-х битный файл *.psd.
Рисунок 25. Полоса 24-х битного изображения в Photoshop
8. Чтобы сохранить полосу с разрешением 32 бит, перетащите ее в GMG. Удалите любые пустые рамки. Перейдите File->Export as->Filmstrip. В диалоговом окне Film Export, отметьте, что выбраны BMP/DIB and 24-bit with Alpha.
Microsoft Windows XP использует 8-ми битные файлы анимации. Процесс изготовления анимированных файлов такой же, как и простых значков – вы подготавливаете изображения в Photoshop и перетаскиваете в GMG. Следуйте инструкции по созданию 8-ми битной версии.
Чтобы сохранить ваш анимированный файл с расширением *.avi перейдите File->Export As->AVI file...
Соображения по созданию файлов *.avi:
· Используйте цвет magenta (R255 G0 B255), как фоновый для обеспечения прозрачности.
Для создания значков в стиле Windows XP очень удобной программой является продукт от компании Aha-soft IconXP.
|
© 2003 Microsoft Corporation. All rights reserved. © MCAGENCY 2003 |