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

    
    Microsoft Windows XP вводит новый стиль в разработку иконок. Данное руководство предоставит Вам все стадии проектирования и создания иконок в стиле Windows XP.
    Стиль иконок Windows XP - весёлый, цветной и динамичный и со сглаженными краями, так как иконки 32-битовые.
    Каждая иконка предоставляется в векторном виде и затем обрабатывается в Adobe Photoshop для создания красивого изображения.
    Это руководство предназначено для разработчиков. Чтобы создавать изображения, мы рекомендуем Вам работать с хорошим графическим дизайнером, имеющем опыт работы с векторными или 3D программами.
    
    Этот раздел познакомит Вас с новым стилем 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
    Иконки с правой стороны меню Пуск (Start) отображены в размере 24*24 пикселя. Это размер не рекомендуется.
    Если Вы создаете иконки для панели инструментов, стандартные размеры Windows — 24*24 и 16*16 пикселей.
    Поддержка глубины цвета
    Windows XP поддерживает 32-битовые иконки - 24-бита изображения и 8-битный альфа канал. Это позволяет отображать иконки со сглаженными краями, которые сочетаются с любым фоном.
    Каждая иконка Windows XP должна содержать следующие три глубины цвета для совместимости с различными настройками монитора:
      - 24 бита с 8-битным альфа каналом (32 бита)
      - 8 битов (256 цветов) с одним битом прозрачности
      - 4 бита (16 цветов) с одним битом прозрачности
    Угол и композиция объектов
    Не все объекты 16*16 хорошо смотрятся под углом. Следующие объекты обычно показываются прямо:
      - Иконки документов
      - Иконки-символы (такие как иконки предупредительные или указательные)
      - Иконки уникальных объектов (такие как увеличительное стекло)
    Создайте перекрывающие второстепенные объекты в углу, изобразив их прямо, если основные не очень выразительны. Это сделает иконку более наглядной. Посмотрите как могут выглядеть ваши иконки — подобное расположение поможет правильно сгруппировать объекты:
    Внешняя тень(Drop Shadow)
    В иконках Windows XP используется внешняя тень, которая придаёт выразительность и дополнительный объём. Добавление этого эффекта в редакторе Photoshop рассмотрено далее в этом руководстве.
    Для того, чтобы добавить внешнюю тень к вашим изображениям, нажмите два раза кнопкой мыши на Layer (слой) изображения в Photoshop и выберите Drop Shadow. Затем измените Angle(Угол) до 135, Distance(Расстояние) до 2, и Size(Размер) до 2. Уровень непрозрачности(opacity) внешней тени — 75% .
    Эскиз
    Рисуя иконки в стиле XP, составьте эскиз чтобы убедиться в том, что изображение хорошо смотрится на разных цветах фона.
    
    При проектировании новых иконок, мы рекомендуем взять карандаш и бумагу и сделать набросок Ваших идей.
    Соображения при проектировании иконок:
      - По возможности используйте общепринятые стандарты, чтобы гарантировать однозначность определения пользователем назначения иконки .
      - Посмотрите, как иконка будет выглядеть в контексте вашего пользовательского интерфейса и как она может смотреться в комплексе с другими иконками.
      - Рассмотрите эстетичность вашей графики. Избегайте использовать буквы, слова, руки или лица на иконках. Если Вам необходимо показать людей, изобразите их по возможности схематично.
      - При объединении нескольких объектов в один образ на иконке, определите как изображение будет масштабироваться до мелких размеров. Мы советуем Вам использовать не более трёх объектов на иконке. Чтобы улучшить распознаваемость в размере 16*16, Вы можете также решить: удалить объекты или упростить изображение.
    Примечание: Используйте следующие соображения при использовании флага Windows на иконках:
      - Для соблюдения принципов торговой марки и марки Windows, не используйте флаг Windows на иконках, за исключением иконки Windows Update.
      - Флаг Windows должен быть использован только на иконках, которые загружаются как часть операционной системы Microsoft® Windows®.
      - Группа торговой марки Microsoft (The Microsoft branding team), должна рецензировать любое использование флага Windows в иконках.
    
    Для рисования иконки в стиле Microsoft Windows XP, мы рекомендуем использовать такие редакторы векторной графики, как, например, Macromedia FreeHand или Adobe Illustrator. Используйте указанные в Обзоре дизайна иконок палитру и характеристики стиля.
      1. Нарисуйте изображение, используя FreeHand или Illustrator.
      2. Создайте три размера изображения. Поскольку позже будет добавлена внешняя тень, Вы должны создать три размера, примерно 46*46, 30*30 и 14*14 пикселей.
      3. Скопируйте и вставьте векторные изображения в Photoshop.
    Примечание: Photoshop - рекомендуемый графический редактор для создания изображений, поскольку Gif Movie Gear, инструмент, который мы используем, для создания .ico файлов, предполагает прямой импорт файлов Photoshop. Любое созданное в Photoshop изображение, которое использует режим "RGB", подключает альфа канал. Если есть прозрачность в изображении или слое, этот канал становится исключительно значимым для иконок.
    
    После вставки Ваших векторных файлов в Photoshop, на следующем этапе закончим 24-битное изображение.
      1. Как только Вы вставите изображения трёх размеров в Photoshop, проверьте удобочитаемость и вид Ваших изображений, особенно в размере 16*16. Возможно Вам придётся удалить некоторые пиксели. Если 16*16 выглядит нечётко, нужно вернуться во FreeHand, чтобы упростить изображение в этом размере.
      2. Добавьте внешнюю тень к вашим изображениям двойным кликом на Layer (слое) изображения и выберите Drop Shadow. Затем измените Angle(Угол) до 135, Distance(Расстояние) до 2, и Size(Размер) до 2. Оpacity (Непрозрачность) внешней тени установите на 75%.
      3. Для объединения внешней тени и 24-битного изображения, создайте новый пустой слой. В меню Layers (Слои) выберите Merge Visible (Объединить видимые слои) и эти 3 слоя.
      4. Создайте три новых файла Photoshop, каждого размера: 48*48, 32*32 и 16*16 пикселей. Скопируйте и вставьте соответствующее изображение. Если внешняя тень изображения усекается, Вы должны возвращаться к FreeHand, пропорционально уменьшить изображение и заново выполнить все предыдущие действия.
      5. Сохраните каждый файл с расширением .psd. Не объединяйте слой изображение со слоем фона. Это поможет включить размер и глубину цвета в файле.
    
    Создание 8-битовых изображений
    Теперь, когда у вас есть 24-битовые изображения, подготовленные для 32-битовых иконок, Вам нужно создать 8-битовые версии. 8-битовые иконки будут отображаться хуже, чем 32-битовые при любом качестве цветопередачи.
    8-битовые версии не будут иметь 8-битовый альфа канал, так что наведите порядок на краях изображения, так как нет сглаживания (то есть, края будут зубчатыми).
      1. В Photoshop продублируйте 24-битный слой Вашего изображения и переименуйте слой в 8-битное изображение.
      2. Создайте новый пустой слой и залейте его темным цветом (например, синим).
      3. Объедините 8-битный слой изображения с новым.
      4. Наведите порядок на краях с однотонными цветами, удаляя все сглаженные (antialiased) пиксели. Используйте последовательную ступеньчатость, чтобы сделать зубчатые края менее заметными.
      5. Чтобы посмотреть как выглядит ваше изображение, поместите его на светлый фон (например, белый).
      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. Сохраните другие два размера, используя тот же цвет фона и применяя Сustom palette (Выборочная палитра).
      8. Сохраните каждый файл в формате .psd.
    Создание 4- Битовых изображений
    Если Вы хотите, чтобы иконки хорошо смотрелись в более низком уровне, сделайте 16-цветные версии.
      1. Проиндексируйте ваши 8-битовые изображения в 16-цветную палитру Windows.
      2. Используйте в своих изображениях только 16 цветов.
      3. Используйте черный цвет на нижнем и правом краях изображения.
      4. Используйте темно-серый или другой темный цвет для левого и верхнего краев изображения.
      5. Сохраните три размера, используя тот же цвет фона. Убедитесь, что цвет фона не использован в изображении, поскольку этот цвет будет прозрачным.
    
    Теперь, когда у Вас есть все изображения, настало время скомпилировать их в .ico файл. Для создания 32-битной иконки используйте Gif Movie Gear (GMG). Получить этот инструмент можно на сайте Gamani.
    Эти шаги ознакомят Вас с процессом создания типичных .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, появляется диалоговое окно.
       Проверьте, что установки следующие:
       - 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 бита).
       Примечание: Для проверки атрибутов изображения поместите вашу мышь поверх изображений. Вы увидите окно, содержащее информацию о разрешающей способности каждого изображения. Параметр по умолчанию показывает размерность, прозрачность, и количество битов. Вы можете добавлять или удалять отображаемые пункты, следуя Edit->Preferences->Frame Tips.
      6. Для 8-битовых и 4-битовых версий Вы должны сделать фон прозрачным. В GMG для придатия прозрачности используется цвет lime green. Вы можете установить свой цвет (или оставить цвет фона по умолчанию) используя пункт меню View->Transparency As. Выбранный цвет используется только при просмотре и не влияет на изображение.
      7. Для того, чтобы сделать 8-битовые и 4-битовые версии прозрачными, необходимо:
       a. Выбрать фрейм и нажать иконку на панели инструментов Pick Transparency Color (the eye-dropper - пипетка).
       b. В диалоговом окне появится Ваша иконка. Пипеткой кликните цвет фона на иконке. Этот цвет изменится на lime green (или на тот цвет, который был выбран прозрачным цветом фона в GMG).
       c. Повторите для всех 4-битовых и 8-битовых фреймов.
      8. Сохраните иконки, выбрав File->Save Icon As….
    
    Иконки панели инструментов Windows следуют тому же стилю как и другие иконки кроме одного -- они не используют внешнюю тень(drop shadow). Поскольку значки панели инструментов довольно небольшие, мы рекомендуем готовить простые изображения. Допускается прямое изображение, а не перспективное, если это сделает изображение более удобочитаемым.
    Панель инструментов Windows отображает два размера иконок: 24*24 и 16*16 пикселей. Есть два состояния - по умолчанию и активное(hot state - mouseover - курсор на иконке). Для активного состояния, мы слегка увеличиваем насыщенность изображений. Создание иконок панели инструментов очень похоже на создание иконок неинструментальной панели кроме изображений, которые помещены в полосу .bmp, - упорядоченную строку иконок.
      1. Как только Вы нарисовали иконки в FreeHand в каждом размере, скопируйте и вставьте их в Photoshop. Поместите 24*24-ые на одном уровне и 16*16-ые на другом.
      2. Нарисуйте отдельную строка блоков для каждого размера на разных слоях. Одна строка 16*16 блоков и другая строка 24*24 блока.
      3. Положите каждое изображение в квадрат в необходимом порядке. Проверьте, что изображения не перекрываются.
      4. Сохраните файл.
      5. Затем создайте активное состояние (hot states) в Photoshop.
       a. Продублируйте слои 24*24 и 16*16. Переименуйте слои, так чтобы они были чётко отмечены как активные(hot) версии.
       b. Для каждой активной версии, выберите слой, и следуя Image->Adjust->Levels… переместите средний указатель на 0.75. Нажмите OK.
      6. После создания активных версий, у Вас есть один слой полос: одна по умолчанию 24*24, одна активная 24*24, одна по умолчанию 16*16, и одна активная 16*16.
      7. Затем Вы должны создать индивидуальные файлы для каждой полосы.
       a. Один из способов сделать это - использовать инструмент Crop(Вырезать) и вырезать файл до одной размерности, а затем сохранить этот файл.
       b. Сохраните каждую полосу отдельными 24-битовыми .psd файлами.
      8. Для сохранения полосу в 32-битовом изображении, перетащите полосу в GMG. Удалите все пустые фреймы. Следуйте File->Export as->Filmstrip. В диалоговом окне Film Export, проверьте что выбран BMP/DIB, и 24-bit with Alpha.

Быстрое "создание" иконок, курсоров и т.п.

    Переименовав .bmp файл в .ico Вы получите "полнофункциональную" иконку. Только размер файла не изменится... Обратное "преобразование" тоже работает. Также можно переименовывать эти файлы в .cur и изменять вид курсора.

Pocket Icon 1.30
    Pocket Icon - это утилита для создания и редактирования иконок (ico-файлы) всех стандартных размеров с цветовой гаммой вплоть до True Color на Вашем Pocket PC!
    Множество дизайнеров и программистов тратят многие часы, рисуя иконки, сидя за настольным компьютером. А ведь рисование иконок - это одна из очень немногих задач, которую на карманном компьютере выполнять даже проще и удобнее: с карманным компьютером Вы можете удобно расположиться в кресле или лечь под деревом на даче, Вы можете сэкономить свое время, выполняя работу сидя в пробке или ожидая своей очереди! И заметьте, Вам не нужна клавиатура или мышь, рисуйте естественным инструментом - карандашом!

     Скачать Pocket Icon 1.30 - Downlo@d - ~ 1 Mb

IconCool Studio 3.0 Build 60912
    IconCool Studio - это целая "студия" для редактирования и создания иконок. Позволяет также импортировать и экспортировать иконки. Cодержит значительное число художественных инструментов для создания и редактирования иконок стандартных и специальных размеров. С помощью IconCool Studio вы также можете: Создавать значки любых размеров, с глубиной цвета вплоть до 32bit True Color Создавать полупрозрачные иконки для Windows XP Экспортировать иконочные картинки в Photoshop Легко и просто редактировать анимационные GIF файлы и многое другое...
    Компания iconcool, известная, в частности, своим ПО для быстрого, удобного и профессионального создания самых различных иконок и прочих миниатюрных изображений, выпустила новую версию программы IconCool Studio, которая стала первой специализированной и серьезной программой, с помощью которой можно легко создавать собственные иконки.
     Реальный вид формируемых изображений демонстрируется в окне предварительного просмотра; дополнительно можно воспользоваться кнопкой Test, при щелчке по которой, например, привычный курсор сменится разрабатываемым анимированным. Созданные статичные изображения можно сохранять в форматах BMP, CUR, GIF, JPG, ICL, ICO, PNG, WBMP, EMF, WMF, TGA и TIF, а анимированные курсоры — в формате ANI.
    Пользователю для работы предоставляются стандартный набор графических инструментов, большая библиотека палитр и разнообразные градиентные заливки, которые можно использовать не только для статичных графических объектов, но и для текста и анимированных изображений. К создаваемым изображениям можно применить порядка 60 фильтров, включая размытие, усиление резкости, барельеф, диффузию, различные варианты деформации, добавить трехмерную тень или создать иллюзию трехмерной кнопки и пр. Через фильтры доступны и классические возможности цветовой коррекции изображений. Кроме того, возможно применение 15 эффектов, в числе которых различные варианты поворотов, отражений и т.п.
    Среди прочих возможностей IconCool Studio — одновременная работа с несколькими изображениями, простое получение мультиформатных иконок на основе одноформатного изображения (рис. 8), удобство конвертирования изображений из одного формата в другой, легкость изменения размера иконки и глубины ее цвета, смена Windows-иконок и программных скинов и др

Скачать IconCool Studio 3.0 Build 60912 - Downlo@d - 12.5 Mb
Зеркало - Downlo@d - 12.5 Mb
То, что нужно - Downlo@d
Зеркало - Downlo@d

К оглавлению

---

К оглавлению

---

Для быстрой подписки поставьте галочки у выбранных Вами рассылок, введите свой e-mail и нажмите "OK"

К оглавлению

Контактные данные:

E-mail: FirstAid@list.ru
ICQ: 335617359