Пришло время выполнять свое обещание, данное в одной из прошлых статей, и таки на практике пройти путь создания набора иконок со стилевым единством и перспективой.

К оружию!

Допустим, у нас имеется среднестатистический сайт, на котором есть 16 блоков, которые неплохо бы снабдить иконографикой.

А вот, собственно, и сами блоки:

  • Профиль пользователя
  • Посмотреть группы пользователей
  • Календарь событий
  • Поиск
  • Сохранить запись
  • Загрузить запись на сайт
  • Избранные записи
  • Вход в защищенную зону
  • Отправить сообщение
  • Статистика
  • Удалить запись
  • Редактировать запись
  • Теги
  • Перейти в настройки
  • Каталог
  • Служба поддержки

Итого, задача-незадача – создать набор из 16 иконок размером 48x48 пикселов.

С чего начать в такой непростой ситуации? Для начала поищем и определимся с метафорами. Тут не грех посмотреть на существующие решения и, набравшись вдохновения, перейти к созданию скетчей.

Примерно в этот же момент можно задуматься над общей стилистикой, перспективой и освещением иконок.

Наброски готовы! Теперь давайте выберем 3 интересных, с точки зрения технического воплощения, иконок и пройдем весь путь их отрисовки.

Я бы, пожалуй, выбрал такие: поиск, избранное… ну и, например, редактирование.

Итак, когда у нас уже есть наброски – дело за малым: вооружаемся Pen Tool'ом, Shape'ами и вперед к победе! К победе красивых иконок над их злостными некрасивыми родственниками.

Поиск

Для начала нам понадобится продумать составные части увеличительного стекла.

Этими частями будут: рамка для стекла, само стекло, составная ручка из 4 частей. На каждую эту деталь понадобится по 1 векторному шейпу.

После создания формы переходим к приданию объема.

Начнем со стекла и рамки. У рамки затемняем края и на верхней части показываем падение света. Стеклу придаем синеватый оттенок, показываем объем при помощи внутренней тени более темного оттенка и бликов на поверхности.

Теперь пришло время ручки. У металлических частей затемняем края, посередине даем легкий засвет. У темной части объем показываем за счет света сверху и светлого рефлекса снизу.

Вроде бы готово, но чего-то не хватает… Точно, тень! Обязательный атрибут в нашем наборе.

Вот!

Избранные записи

Избранные записи у нас показаны как книга с закладкой — уже интереснее и сложнее. Нужно постараться передать фактуру материалов, да и еще уместить достаточно много деталей!

Итак, у нас есть сама книга, закладка и звездочка, как довольно распространенный в компьютерной тематике символ избранного. Собираем их вместе. Неплохо, но книга не выглядит достаточно объемной! Добавим ей страниц, а закладку поместим как раз между ними.

Дальше займемся обложкой и корешком. Затемним края, добавим свет на корешке. Чтобы придать фактурности обложке, применим фильтр «Шум», с небольшим значением.

Также добавим свет на верхнюю грань, и тень на нижнюю.

Очередь закладки! Делам падающую тень, свет сверху, четче обозначаем изгиб. Показываем, что звездочка на закладке вдавленная – добавляем тень на верхней границе и небольшое затемнение книзу. Вуаля! И не забываем о тени для иконки.

Редактирования

В очередной раз собираем объект из частей, показываем объем и грани деревянной части карандаша.

Показываем материал металлической части карандаша – блик, рефлексы снизу и сверху, также показываем объем резинки и дорабатываем грани карандаша – четкий засвет на изгибе и рефлекс на нижней грани.

С помощью фильтра «Шум» добавляем фактурности граням карандаша, детали металлической части и, конечно же, тень!

Fin

Ну вот, 3 из 16 готовы!

И, как видим, это было не так страшно, скорее увлекательно и полезно!