Стилистическое руководство по иконкам KolibriOS v1.0
Цель данного руководства — рассказать что из себя представляют иконки в КолибриОС и дать некоторые базовые советы по их созданию, чтобы они выглядели хорошо и вписывались в общий стиль системы.
Общая информация
Иконки Колибри бывают двух размеров: 16х16 и 32х32 пикселя. Они содержатся в файлах ICONS16.PNG и ICONS32.PNG соответственно.
ICONS16.PNG используется для иконок файлов в OpenDial и Eolite, а также для тулбара в TextEdit, IconEdit и WebView.
ICONS32.PNG используется исключительно для иконок файлов и программ.
Технические ограничения
Отсутствие полупрозрачности. Хотя формат PNG поддерживает полупрозрачность (альфа-канал), такая поддержка отсутствует в библиотеках и программах Колибри. Это делает невозможным использование полупрозрачных теней и плавный переход со сглаживанием на границе картинки и прозрачной области. Поэтому следует избегать диагональных линий, соприкасающихся с прозрачной областью.
Глубина цвета не ограничена и можно использовать любое количество цветов, однако стоит учитывать, что дополнительные цвета делают иконку тяжелее, что идет вразрез с парадигмой миниатюрности Колибри. Поэтому стоит экономить цвета. Также стоит учитывать, что горизонтальные градиенты сжимаются в PNG лучше, чем вертикальные.
Рекомендации по технике рисования
Для упрощения просмотра все изображения здесь увеличены в 2 раза.
- Иконка должна быть максимального размера, не оставляя свободного места по сторонам
- Добавляйте небольшую объемность, выделив светлые и темные области
- Контурные линии должны быть толщиной в 1 пиксель
- Добавляйте сглаживание (антиалайзинг) острым углам и резким переходам
- Желательно, чтобы источник света находился сверху и немного слева
- Добавляйте иконкам темный ободок с закруглением в 1 пиксель там, где это возможно
- Диагональная линия, поделенная на равные сегменты, будет выглядеть на экране лучше
- Используйте контрастные, но при этом спокойные цвета, избегайте ярких градиентов, бликов, больших теней
Можно ли не рисовать иконку с нуля, а взять готовую?
Использование готовой иконки сильно экономит время. Для этого берите только иконки под свободной лицензией.
Однако, сложно найти готовую иконку, подходящую Колибри по стилю. В основном, потому что иконки без полупрозрачности сейчас редкость, как и иконки размером 32х32 пикселя. Художники рисуют большую картинку и затем ужимают под более мелкие форматы и, таким образом, на маленьких размерах выходит «мыло». Иногда просто цвета не гармонируют с общей палитрой.
Так что чаще всего необходима доработка напильником. Типичный процесс допилки выглядит примерно так:
Советы по идее иконки / Что рисовать?
1. Иконка должна отображать суть программы, которой она назначена. Не стоит вкладывать в иконку сложную метафору или историю, так как пользователь должен без лишних усилий понимать какую программу он запускает.
2. Пользователь привык к определенным символьным обозначениям и ждет что за ними скрывается знакомый ему функционал. Поэтому, вначале стоит ознакомиться с теми идеями, что уже реализованы в иконках сходных по функционалу приложений. Мы привыкли что иконка "сохранения" – дискета, а не православный Крест.
3. Чем проще и понятнее иконка, тем она лучше.
4. Смысл иконки должен быть универсален и понятен людям разных национальностей, потому как пользователи Колибри проживают в разных странах, в которых свои культурные особенности и традиции.
5. Из названия программы не стоит делать иконку приложения, так как приложение и так обычно подписано. В целом использование текста в иконках не самое хорошее решение, узнаваемый знак работает куда лучше.
Качества, присущие хорошему знаку
1. Стилевое единство: следует убедиться, что иконка вписывается в общий знаковый ряд.
2. Узнаваемость: достаточно ли иконка отличается от других по форме и содержанию, чтобы не путать пользователя.
3. Контрастность: стоит убедиться, что иконка достаточно контрастна к разным фонам. Хорошим решением будет темный ободок и следующий за ним светлый цвет.
4. Лаконизм: большое количество избыточных элементов затрудняет считываемость знака.
5. Ограниченная палитра сэкономит место в дистрибутиве и принесет знаку пользу. Сдержанная по цветам иконка и цветастая образно отличаются, как девушка, которая пользуются косметикой умеренно, и та, что не знает меры. Цветов должно быть наименьшее полезное количество, но не меньше (см. Бритва Оккама).
6. Эстетика: именно с иконки приложения пользователь начинает знакомство с программой.
Примеры
- Библиотека
- Редактор TEdit
- Скрипт / автозапуск
