Роман Соколов, дизайнер, «Creologica»

В последнее время практически ни один веб-проект не обходится без иконок. Они, с одной стороны, могут помочь в восприятии информации, указать на какой-либо раздел (послужить указателем) или просто «разбавить» сайт. Кто-то скажет, что это ненужное «украшательство», а вот многие профессионалы наоборот рекомендуют добавлять чуть ли не любой кнопке графический элемент. Не будем углубляться в теорию, так как эта тема тесно связана с проектированием интерфейсов.

Выполняя заказ для одного клиента я попутно написал этот урок, так как мне часто стали задавать вопрос: «Как это сделано?». С одной стороны ничего сложного нет, но с другой нужно немного фантазии, терпения, усидчивости и, наверное, опыта. Хотя последний в данном случае влияет только на скорость выполнения задачи.

Мы будем создавать/рисовать (кому как больше нравится) иконку пластиковой печати.  Они очень распространены и как мне кажется подобную вещь видел каждый.

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

 

 

Весь процесс выглядит так:

1. Создаем новый документ. Рисуем прямоугольник.   Добавляем к нему три новые опорные точки.
Замечу, что размеры моей иконки 135 на 109, но у вас они могут отличаться. Важно научится подбирать соотношение сторон самостоятельно, хотя в уроках на том же Демиарте частенько сразу обозначают какого размера объект создается. Я считаю, что это необходимо только начинающим.

Чтобы выровнять опорные точки: выбираем (зажимаем shift) нужные точки с помощью direct selection tool и отправляемся наверх в панель выравнивания (Align).

2. С помощье Direct Selection tool изменяем прямоугольник до нужной нам формы

3. Скопируем полученный объект и немного изменим его.

Новый объект я уменьшил, убрал две боковые опорные точки, которые мы добавляли на первом этапе. Оригинал фигуры перекрасил с помощью линейного градиента. Цвета указывать не буду, так как лучше
самостоятельно учиться подбору цветов и, в принципе, это не сложно. Смотрим на фото, добавляем по бокам две фигуры (рисую произвольно с помощью pen tool) чтобы придать объем нашей печати. По бокам света будет меньше, поэтому изменяем цвет на более темный. После этих действий я совмещаю объекты.

4. Далее рисуем подвижный механизм печати (ножку).

Все объекты должны оставаться отедльными частями — они еще нам пригодятся.

5. Сделаем надпись trodat (логотип). Я не стал заниматься поиском аналогичного шрифта, а взял Bauhaus 93 и немного модифицировал его в соответствии с логотипом. Скорее всего сам лого либо делали также, либо оно набранно более современным шрифтом — последователем Bauhaus 93. После того как лого набран переходим к следующему этапу. Если посмотреть на фото или на печать (мб у кого-то есть), то можно увидеть, что лого вдавлен в корпус печати. Добится этого эффекта не сложно. Меняем цвет лого на чуть более темный по сравнению с цветом корпуса, где будет размещено логотип. С помощью комбинаций клавиш ctrl+c, ctrl+f копируем объект. Теперь он расположен сверху исходника. Дальше меняем его цвет на более светлый и смещаем его вниз вправо на пару пикселей. Вот что должно получится.

6. Дальше рисуем «ребро», которое расположено над логотипом и заливаем его линейным градиентом. Ставим прозрачность 70%.

7. Рисуем кнопку, расположенную под логотипом. Я так и не понял зачем она нужна, так как на моей печати она не работает. По идее она должна выдавливать картридж. Сначала рисуем впадину, где расположена кнопка. Все операции проделываются с помощью direct selection tool.

8. Заливаем полученный объект радиальным градиентом. С помощью Gradien tool меняем области заливки.

9. Рисуем кнопку и заливаем ее линейным градиентом с углом 90°. После этого копируем объект и помещаем сверху исходника. Убираем заливку, ставим обводку в 1px светло-серого цвета; object — expand. После этого идем в меню эффектов — стилизация — перо (feather). Этот эффект дает более мягкое размытие, чем размытие по Гаусу. Нам нужно получить блики вокруг кнопки. Примечание: на этом этапе можно попробовать разные значения как самого эффекта, так и предварительно поменять цвет и толщину обводки. Результаты будут разными.

10. Создадим тень для объекта. Нарисуем овал и зальем его линейным градиентом с углом 0°. После этого сжимаем объект и помещаем его на задний план под печатью.

11. Теперь переходим к рисованию окошка с надписью «Копия верна».
В случае иконки для NEDGEO это должна быть надпись «Согласовано». Рисуем форму окна. Это можно несколькими способами, но самый простой — это нарисовать форму с помощью Rounded rectangle tool, изменить расположение опорных точек и немного их загнуть (простите за косноязычие). Полученную форму красим в светло-серый. Дальше рисуем прямоугольник (убираем заливку) и добавляем ему обводку (толщину можно подобрать самостоятельно) синего цвета. Не забываем про expand object. Текст можно набрать с помощью шрифта Arial. Дальше переводим текст в кривые и немного сжимаем по вертикали чтобы создать иллюзию расположения под углом. Помещаем «штамп» над плашкой, которую мы сделали до этого. Копируем плашку и помещаем ее над всеми объектами. Устанавливаем прозрачность на 50% и заливаем радиальным градиентом от белого к серому. С помощью gradient tool меняем область заливки (как мы это делали в предыдущих этапах). Добавляем обводку белого цвета (толщину подбираем самостоятельно; я установил 1px). Еще раз копируем объект, убираем обводку и заливаем уже линейным градиентом под 90° чтобы создать блик на пластиковом окошке. Для этого в панели градиента я установил три цветовые точки: 2 (серый) с прозрачностью 0% по краям и одну (белый) в середине с 100% заливкой. Теперь перейдем к ножке (механизму) печати и выберем прямоугольник в середине. Зальем его линейным градиентом (90°) от черного к серому.

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

13. Добавим по бокам кнопки блокировки с помощью pen tool. К боковинам добавляем по 2 опорные точки и вытягиваем так чтобы получилось как на рисунке.

14. Можно добавить бликов и теней прямо в illustrator, но это будет домашним заданием. Иногда, чтобы не тратить время я импортирую изображениев Photoshop и там уже его довожу до нужного состояния с помощью уровней и т.п. Правлю тень, добавляю блики и прочее.

 

Роман Соколов, дизайнер, «Creologica»

——————————————————————————————————————————-

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