Я люблю иконки!

блог Кондратьевой Анны

Разработка сайта — htmlman

Маленькие иконки

Лично я отношу к маленьким иконкам форматы от 12х12 до 64х64.
Обычно в силу небольшого размера они не используются в качестве центрального графического элемента (одна такая иконка на странице потеряется, несколько сольются в один смысловой блок и уже не будут оцениваться отдельно), но тем не менее, иногда с ними выходит больше возни, чем с любыми другими.

Прежде всего, перечислю самые популярные случаи использования мелких иконок:

  • в объемных меню или многопунктных списках разделов на сайтах;
  • в качестве сопроводительных, поясняющих иконок на сайтах (конвертик напротив емейла, домик напротив «Сделать стартовой» и т.п.);
  • в меню мобильных телефонов;
  • в программных интерфейсах, на «рабочих» кнопках, возле переключалок и маячков и т.п.;
  • в игровых интерфейсах;

Разумеется, список не полон, варианты применения таких иконок вообще очень разнообразные, но это — самые частые. И в принципе, они уже диктуют свои требования к иконкам, которые я свожу к двум главным, о которых часто забывают в погоне за красивой картинкой — интуитивная понятность и общий стиль.

Интуитивная понятность

Это на тизере 200х200 вы можете позволить полет фантазии и необычные метафоры, а 24-пиксельная кнопка «Вырезать» или «Отправить другу на емейл» должна быть понятна пользователю с полувзгляда. Да и геймеру во время напряженного боя будет некогда всматриваться, какое зелье у него лечебное, а какое — зелье маны.

Общий стиль

Нельзя забывать, что мелкие иконки практически никогда не используются по одной — их всегда много. И в этом случае их невероятно легко наплодить абсолютно разношерстными. В больших размерах все-таки больше способов найти для всех рисунков общие элементы, ракурсы, еще что-нибудь. А вот такие мелкие наборы частенько выглядят так, будто набраны из разных сетов — там мячик-«Интернет» получился с отличным обьемом, а вот клавиатура вышла просто эталоном пиксельарта.

Как работать именно на эти два фактора — вопрос индивидуальный, и каждый дизайнер решает его своими методами, коих придумано сотни и еще придумается сотни. Но я все-таки осмелюсь описать несколько приемов, используемых лично мною.

Использование стандартных образов

Для кнопок «Копировать», «Вставить», «Почта» и им подобных уже давно есть привычные всем конвертики, листики и т.п. Лучше попробовать красиво отрисовать эти знаки, чем пытаться заменить их.

Иконки почты

Результаты поиска на Iconfinder по запросу «email«.
Предсказуемо:)

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

Типичные стоковые иконки

Типичные стоковые иконки. Ничего лишнего.

Впрочем, если вы уверенно ориентируетесь в пикселечках и умеете рисовать «вкусную» четкую мелочевку, то именно в этом размере ваши навыки будут как нельзя кстати — на deviantart’е есть даже сообщество авторов и фанатов мелкоразмерных иконок. Советую повдохновляться, работы там действительно потрясающие.

Иконки 32х32 от umar123

32px Mantra от umar123

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

Интерфейс аллодов

Интерфейс АллодовОнлайн. Слева удары, справа всякие полезности.

Или напитки из известного контактского приложения «Коктейль другу» — даже глядя на абсолютно разные коктейли, можно сразу понять, что они из одного набора. Это достигается за счет того, что стаканы в большинстве случаев не рисуются заново, а используются общие «пустые» шаблоны, которые в свою очередь отличаются друг от друга только формой. Таким образом, дизайнер может сколько угодно креативничать с напитком, не боясь получить в итоге выбивающуюся из набора иконку.

Иконки коктейлей

Напитки из приложения «Коктейль Другу».

Еще можно использовать подложки разной формы и цвета, можно разные рамочки.
Если речь идет о контурных иконках, то тут достаточно изменить один из этих факторов, чтобы заметно отделить один блок от другого — остальные же отлично сохранят общность.
Вариантов — масса.
Бегун

Иконки Бегуна от Турбомилков

В принципе, этих трех правил мне обычно хватает, чтобы выкручиваться из сложных ситуаций, связанных с мелочёвкой. Надеюсь, помогут и вам:)

Один комментарий

  1. Sley:

    Спасибо!

    Ответить

Добавить комментарий