LEWI.RU

Сегодня:
Карта сайта Контакты Главная
Скрыть рекламный блок

Календарь

Архив новостей

Март 2024 (7030)
Февраль 2024 (6746)
Январь 2024 (5383)
Декабрь 2023 (7870)
Ноябрь 2023 (7448)
Октябрь 2023 (5624)

Сенсации

Наши партнеры

Авторизация

Опрос

Каким интернетом вы пользуетесь ? [Все опросы]


Счетчики


[noleech] Яндекс.Метрика [/noleech]

Сенсации

Наши партнеры

НОВЫЕ ОБНОВЛЕНИЯ НА САЙТЕ !!!

ВНИМАНИЕ !!! ОБЪЯВЛЕНИЕ !!!

БОЛЕЕ 600 ОНЛАЙН ИГР НА ЛЮБОЙ ВКУС ! МНОЖЕСТВО КАТЕГОРИЙ ! ВОЗМОЖНОСТЬ СКАЧАТЬ ИЛИ ДОБАВИТЬ В ПОПУЛЯРНЫЕ СОЦИАЛЬНЫЕ СЕТИ ОДНОКЛАССНИКИ, ВКОНТАКТЕ, FACEBOOK...!

==>>> ПЕРЕЙТИ К ИГРАМ
Раздел: Статьи

Скачать Создание иконок в стиле Windows XP

АвторАвтор: Fender | ДатаДата: 2 августа 2008 | Нашли ошибку?
Перевод статьи:
Creating Windows XP Icons
Windows User Experience Team
Microsoft Corporation
July 2001


В этой статье обсуждается методика разработки и создания красочных и динамичных иконок для Windows XP, используя редакторы векторной графики такие, как например, FreeHand или Illustrator, и Photoshop.

Введение


Microsoft Windows XP вводит новый стиль в разработку иконок. Данное руководство предоставит Вам все стадии проектирования и создания иконок в стиле Windows XP.
Стиль иконок Windows XP - весёлый, цветной и динамичный и со сглаженными краями, так как иконки 32-битовые. Каждая иконка предоставляется в векторном виде и затем обрабатывается в Adobe Photoshop для создания красивого изображения.
Это руководство предназначено для разработчиков. Чтобы создавать изображения, мы рекомендуем Вам работать с хорошим графическим дизайнером, имеющем опыт работы с векторными или 3D программами.

Создание иконок в стиле Windows XP


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

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

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

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

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

Иконки 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

Не все объекты 16 × 16 хорошо смотрятся под углом. Следующие объекты обычно показываются прямо:
Иконки документов
Иконки-символы (такие как иконки предупредительные или указательные)
Иконки уникальных объектов (такие как увеличительное стекло)



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

Создайте перекрывающие второстепенные объекты в углу, изобразив их прямо, если основные не очень выразительны. Это сделает иконку более наглядной. Посмотрите как могут выглядеть ваши иконки — подобное расположение поможет правильно сгруппировать объекты:



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

Внешняя тень(Drop Shadow)
В иконках Windows XP используется внешняя тень, которая придаёт выразительность и дополнительный объём. Добавление этого эффекта в редакторе Photoshop рассмотрено далее в этом руководстве.

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



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

Эскиз
Рисуя иконки в стиле XP, составьте эскиз чтобы убедиться в том, что изображение хорошо смотрится на разных цветах фона.
Шаг 1: Разработка концепции
При проектировании новых иконок, мы рекомендуем взять карандаш и бумагу и сделать набросок Ваших идей.

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



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

Соображения при проектировании иконок:
По возможности используйте общепринятые стандарты, чтобы гарантировать однозначность определения пользователем назначения иконки .
Посмотрите, как иконка будет выглядеть в контексте вашего пользовательского интерфейса и как она может смотреться в комплексе с другими иконками.
Рассмотрите эстетичность вашей графики. Избегайте использовать буквы, слова, руки или лица на иконках. Если Вам необходимо показать людей, изобразите их по возможности схематично.
При объединении нескольких объектов в один образ на иконке, определите как изображение будет масштабироваться до мелких размеров. Мы советуем Вам использовать не более трёх объектов на иконке. Чтобы улучшить распознаваемость в размере 16 × 16, Вы можете также решить: удалить объекты или упростить изображение.
Примечание: Используйте следующие соображения при использовании флага Windows на иконках:
Для соблюдения принципов торговой марки и марки Windows, не используйте флаг Windows на иконках, за исключением иконки Windows Update.
Флаг Windows должен быть использован только на иконках, которые загружаются как часть операционной системы Microsoft® Windows®.
Группа торговой марки Microsoft (The Microsoft branding team), должна рецензировать любое использование флага Windows в иконках.

Общие иконки



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

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



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

Шаг 2: Рисование
Для рисования иконки в стиле Microsoft Windows XP, мы рекомендуем использовать такие редакторы векторной графики, как, например, Macromedia FreeHand или Adobe Illustrator. Используйте указанные в Обзоре дизайна иконок палитру и характеристики стиля.
1.Нарисуйте изображение, используя FreeHand или Illustrator.
2.Создайте три размера изображения. Поскольку позже будет добавлена внешняя тень, Вы должны создать три размера, примерно 46 × 46, 30 × 30 и 14 × 14 пикселей.
3.Скопируйте и вставьте векторные изображения в Photoshop.



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

Примечание: Photoshop - рекомендуемый графический редактор для создания изображений, поскольку Gif Movie Gear, инструмент, который мы используем, для создания .ico файлов, предполагает прямой импорт файлов Photoshop. Любое созданное в Photoshop изображение, которое использует режим "RGB", подключает альфа канал. Если есть прозрачность в изображении или слое, этот канал становится исключительно значимым для иконок.
Шаг 3: Создание 24-битовых изображений
После вставки Ваших векторных файлов в Photoshop, на следующем этапе закончим 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-битовых изображений
Теперь, когда у вас есть 24-битовые изображения, подготовленные для 32-битовых иконок, Вам нужно создать 8-битовые версии. 8-битовые иконки будут отображаться хуже, чем 32-битовые при любом качестве цветопередачи.
8-битовые версии не будут иметь 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)
a.В изображении 48 × 48 залейте фон уникальным цветом (не используйте цвет изображения). Обычно используется фуксин (R255 G0 B255).
b.Зайдите в Image->Mode->Indexed Color, и выберите Flatten Layers.
c.В ниспадающем меню Palette (Палитра) выберите Custom. В диалоговом окне ликните OK. Кликните OK в диалоговом окне Indexed Color.
d.Сохраните файл в формате .psd .
e.Сохраните другие два размера, используя тот же цвет фона и применяя
f.Сustom palette (Выборочная палитра).
g.Сохраните каждый файл в формате .psd.

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

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



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

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

Теперь, когда у Вас есть все изображения, настало время скомпилировать их в .ico файл. Для создания 32-битной иконки используйте Gif Movie Gear (GMG). Получить этот инструмент можно на сайте Gamani.
Эти шаги ознакомят Вас с процессом создания типичных .ico файлов, которые бывают трёх размеров и трёх глубин цвета.
Вы должны использовать в общем девять файлов - три размера каждой глубины цвета:
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 бита

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



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

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



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

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



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

В диалоговом окне появится Ваша иконка. Пипеткой кликните цвет фона на иконке. Этот цвет изменится на lime green (или на тот цвет, который был выбран прозрачным цветом фона в GMG).
Повторите для всех 4-битовых и 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.Положите каждое изображение в квадрат в необходимом порядке. Проверьте, что изображения не перекрываются.



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



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

6.После создания активных версий, у Вас есть один слой полос: одна по умолчанию 24 × 24, одна активная 24 × 24, одна по умолчанию 16 × 16, и одна активная 16 × 16.
7.Затем Вы должны создать индивидуальные файлы для каждой полосы.
Один из способов сделать это - использовать инструмент Crop(Вырезать) и вырезать файл до одной размерности, а затем сохранить этот файл.
Сохраните каждую полосу отдельными 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… .
Советы по созданию .avi-файлов:
В качестве прозрачного цвета фона используйте фуксин (R255 G0 B255).
Важно, чтобы в Photoshop не появились паразитные пиксели.
{lop-1}{esp-block-1}
[related-news]

Другие новости на эту тему:

    {related-news}
[/related-news]

Теги к статье:

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетителям:
Здесь вы можете скачать бесплатно, без регистрации и смс программы, игры, windows, музыку, софт, Русскую рыбалку, взлом и секреты одноклассников и вконтакте, книги, Total Commander, Yasu, скрипты, скачать ключи к kaspersky и drweb, crack, photoshop, трейнеры и nocd для игр, и многое другое. Играть во флеш игры онлайн. На сайте представлено множество полезной информации.
Welcome to our site. Here you will not find the information on cars and motorcycles, currencies and quotations of securities, the real estate, insurance, the medical, political, financial, legal and other information which are not concerning a software and the multimedia data. For us you can find and download free of charge, without what or registrations - the newest films, fresh music in format MP3, flash games, breaking and the secrets of my classmates and VKontakte, novelties of games for PC and the consoles, interesting and beneficial programs and utilities as from eminent manufacturers of a software, and to anybody unknown programmers. You can always download under links from our site of Windows XP, Vista, Windows 7 Seven, Microsoft Office with the newest upgrades, Adobe Photoshop, 3D Studio Max, AutoCAD, Total Commander, Kaspersky Anti Virus, Kaspersky Internet Security, DrWEB and other known antiviruses, wall-paper for a desktop, e-books, scripts for web designers, trainers, Nocd, cracks and keygens to programs, serial keys and many other things.
Правообладателям:
Все материалы найдены на просторах сети интернет как свободно распространяемые и выложены исключительно в ознакомительных целях. Если вы являетесь законным правообладателем какого либо продукта и против его размещения на данном сайте, сообщите нам и мы немедленно удалим данный материал. Администрация сайта не несет ответственности за действия посетителей, нарушающих авторские права.
All materials are found on open spaces of a network the Internet as freely extended and laid out exclusively in the fact-finding purposes. If you are what lawful legal owner or a product and against its placing on the given site, inform us and we will immediately remove the given material. The administration of a site does not bear responsibility for actions of the visitors breaking copyrights.