Итак, мы будем рисовать иконки для оформления графического интерфейса программ или CMS. В этом уроке я расскажу об основах рисования иконок. Не стоит забывать, что единственное ограничение – это фантазия.
Для начала нужно понять самую важную вещь: назначение любой кнопки, иконки или пиктограммы должно быть понятно при первом взгляде. Огромную роль в этом играет сила привычки. Например, возьмем две кнопки. На одной изображен принтер, на другой штамп:
Мало кто догадается, что их объединяет слово «Печать». Если мы нажимаем на первую кнопку, то знаем, чего ожидать. Документ, который выведен на экран, будет напечатан на бумагу. Но какие действия будут совершены по нажатию второй кнопки – известно одному программисту (или группе программистов ;)).
Даже если штамп у Вас ассоциируется c печатью документов, многие пользователи могут Вас не понять. Для привычных действий должны быть привычные обозначения.
Сейчас мы будем делать пиктограммы для трех кнопок, которые встречаются практически во всех программах: «Новый файл», «Открыть» и «Сохранить».
Так получилось, что эти пиктограммы не изменялись со времен первых графических интерфейсов. Поэтому мы не будем изобретать велосипед, и нарисуем соответственно чистый лист бумаги с загнутым уголком, полураскрытую папку, каких некоторое время не существовало в России, и дискету.
Лирическое отступление:
Первая операционная система с графическим интерфейсом – Amiga OS. На скриншотах хорошо видны пиктограммы. К некоторым даны подписи, чтобы не перепутали :)
Создаем в Вашем любимом графическом редакторе новый файл. Я установил размер 24X24 px, так как на мой взгляд кнопка такого размера смотрится наиболее оптимально. Картинки с этапами прорисовки будут даны в восьмикратном увеличении.
Для начала разметим лист бумаги. Своей формой он должен отдаленно напоминать стандартный лист А4:
Следующий этап – обозначаем загнутый уголок:
Лирическое отступление:
Загнутый уголок – это не прихоть дизайнеров. Чистый лист бумаги выглядел бы просто белым прямоугольником. Трудно догадаться о назначении такой кнопки. Но если вы создаете новый документ, который будет уже заполнен, то можно пожертвовать сгибами бумаги и нанести текстовую разметку.
Этот пример наглядно демонстрирует, что у нас должно случиться после нажатия. В одном случае у нас будет абсолютно пустой документ, в другом – шаблон документа об успешном окончании Физфака Оксфордского Университета :) Шаг третий – заливка. Если мы живем в эру «Окон 95», то хватит простой белой заливки.
Но мы не ищем легких путей. Попробуем разобраться, как ложится тень.
Лист бумаги не может быть идеально белым. Тем более, если он помят. Плоскость листа немного изогнута вдоль короткой стороны. Покажем это с помощью градиента.
Я сделал переход от серого #D7D7D7 к белому #FFFFFF:
Лист наш смотрится не очень естественно. Чтобы придать натуральный вид, сделаем черную рамку светлее и раскрасим уголок:
Завершающий штрих – тени:
Итак, наша первая иконка готова. Если нужно, то можно добавить разметку. На создание этой иконки у меня ушло меньше минуты.
Сегодня значком «Папка» наделены практически все операционные системы. И таких иконок множество. Для начала определимся, какой цвет Вам нравится больше всего. Я предпочитаю серый и синий. Внутренняя часть папки будет серой, внешняя, соответственно, синей.
На первом этапе обозначим форму папки, нарисовав контуры основными цветами:
Затем закрасим области внутри цветами светлее, чем контуры:
Добавляем небольшой градиент на внешнюю сторону, чтобы обозначить сгиб:
Вспоминаем про контуры из первой части – берем цвет немного светлее и обводим:
Теперь основа нашей иконки готова. Если уменьшить значок, то видно, что углы папки очень острые. Чтобы избежать этого, добавляем полупрозрачные пиксели в острые углы. По правой нижней стороне значка пройдемся ластиком небольшого размера с мокрыми краями:
То же самое, но крупнее в два раза:
Применяем небольшой градиент на контуры. На светло-синих бликах расставляем акценты, выделяя верхний и нижний края папки, продолжаем сглаживать острые углы путем добавления полупрозрачных пикселей:
Наша папка готова. Я решил немного приукрасить значок, добавив полоски на внутреннюю сторону:
документ, в другом – шаблон документа об успешном окончании Физфака Оксфордского Университета :) Шаг третий – заливка. Если мы живем в эру «Окон 95», то хватит простой белой заливки.
Вот и второй значок готов. На его создание ушло две минуты.
Кнопка «Сохранить» традиционно имеет пиктограмму дискеты. Рисовать ее шторкой вверх или вниз особого значения не имеет. Для этого значка я взял цвета предыдущей иконки, с одной лишь разницей: на наклейке будет присутствовать красный цвет, чтобы выделить бумагу.
Первый шаг – разметка будущего значка основными цветами:
Шаг второй – заливаем основные области светлыми цветами:
Применяем к основному фону заливку градиентом от нижнего правого угла:
Создаем блики рядом с контуром:
На блики применяем слабый градиент от угла, где текущий светлый цвет будет в левом верхнем углу, а темный в правом нижнем:
Шаг шестой – рисуем строчки на наклейке и ставим блики:
Завершающий шаг – рисуем градиенты от угла в шторке. Градиент сверху слева делаем небольшой. Справа снизу – крупнее:
Вот и последний значок готов. Его я рисовал две минуты. Помимо последнего шага я добавил еще градиент на контур шторки и тень внутри.
