Illustrator: Создаем векторную RSS иконку

Лучший способ изучать новое приложение – «приложить к нему руки». Этот урок работы с Adobe Illustrator демонстрирует простые шаги в создании векторной RSS иконки и включает ряд удобных методов, которые могут применяться в будущих проектах. Adobe Illustrator – приложение, основанное на векторном методе построения изображения. Не важно, какого размера картинку мы создаем. Мы можем увеличивать и уменьшать ее до нужных размеров и при этом не происходит потери качества. В отличие от работы в Photoshop, в Illustrator все наши линии и формы будут держать свои гладкие края и цвета, потому что они строятся исходя из математических вычислений вместо добрых старых пикселей.
Открываем Illustrator и создаем новый документ. Щелкаем и удерживаем ЛК мыши над инструментом «Rectangle tool» и выбираем опцию «Rounded Rectangle«. Удерживая Shift рисуем прямоугольную форму с округлыми краями, при этом при помощи клавиш [UP] и [DOWN] мы можем регуливорать округлость углов.
Еще одно различие Illustrator и Photoshop – палитра инструментов. Сейчас нас интересует ее нижняя часть. В Photoshop здесь размещены установки цвета фона (Background color) и переднего плана (Foreground color). В Illustrator это заменяется на цвет заливки (Fill) и цвет линий (Stroke). По умолчанию наша форма получилась с ободком. По этому щелкаем на опцию Stroke на контрольной панели («Window» -> «Control») и очищаем все значения («none»). Далее выделяем нашу форму при помощи «Selection tool» [V], открываем панель градиента [Ctrl+F9] и делаем оранжевую заливку, которая варьируется вертикально от темного вверху к светлому внизу.
Создадим меньшую копию нашей формы. В главном меню выбираем «Object -> Path -> Offset Path» (форма должна быть выделена) и задаем парметр Offset -0,1 см.
Выделив меньшую фигуру, открываем панель градиента и, нажав на кнопку дополнительных опций
, выбираем «Flip Vertical». Так большая и меньшая формы получают обратно противоположную заливку.
Теперь нарисуем RSS форму. Выбираем «Ellipse Tool» [L] и, удерживая Shift, рисуем где-нибудь в стороне круг. Убираем заливку (Fill color ставим на «none») и устанавливаем линию «Stroke» черного цвета толщиной в 16pt.
При помощи «Direct Selection Tool» [A] выделяем только левую и нижнюю точки круга и нажимаем [Delete], чтобы получить четверть круга.
Копируем [Ctrl+C] четверть круга и вставляем ее на передний план [Ctrl+F]. Уменьшаем форму, удерживая [Shift] и перетаскивая правый верхний угол по диагонали налево вниз.
Нажимаем [Ctrl+R], чтобы показать линейки, затем делаем пару гидов на уровне с краями четвертей круга. Используя пересечение гидов в качестве ориентира, рисуем маленький круг, чтобы закончить RSS форму.
Наши четверти круга в настоящий момент выставлены как линии, но мы можем быстро превратить их в объекты, чтобы завершить форму. Для этого выделяем обе четверти и в главном меню выбираем «Object -> Expand» и отмечаем только опцию «Stroke».
Выбрав все три объекта, добавляем вертикальный серо-белый градиент и устанавливаем толщиной в 2pt светло-серый ободок (Stroke).
Нажимаем [Ctrl+G], чтобы сгруппировать объекты вместе, и помещаем их в оранжевый контейнер, подогнав по масштабу.
Выделяем внутренний прямоугольник контейнера, копируем [Ctrl+C] и вставляем его на передний план [Ctrl+F]. Заливаем белым цветом. В отличие от Photoshop, в Illustrator один слой может содержать несколько разных эллементов, размещенных один поверх другого.
Рисуем большой, плоский овал над белым прямоугольником. Смотрим, чтоб нижняя кривая частично покрывает белую форму примерно на 30-40%. Далее, выделив овал и прямоугольник, нажимаем на «Intersect Shape Area» в палитре «Pathfinder».
Устанавливаем непрозрачность («Opacity» на палитре «Transparency» [Shift+Ctrl+F10]) этой новой формы около 15%, придавая тем самым сияние иконке.
Дополняем рисунок парой бликов в форме кругов с 15% непрозрачности.
Получилась простая векторная RSS иконка. Как видим, процесс создания не занимает много времени, но расскрывает мощные инструменты Illustrator.




, выбираем «Flip Vertical». Так большая и меньшая формы получают обратно противоположную заливку.
















