Создайте векторный значок RSS с помощью Illustrator

Вероятно, одна из самых популярных и узнаваемых иконок в веб-вселенной; значок RSS отображается на многих веб-сайтах для обозначения доступности канала подписки. Существуют готовые значки, которые можно загрузить и разместить на своем веб-сайте, однако в этом руководстве описывается процесс создания собственного пользовательского значка RSS в Illustrator.

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

Для начинающих в Illustrator следующая диаграмма показывает структуру элементов, которые будут составлять значок. Как и в Photoshop, Illustrator работает в слоях, но несколько объектов могут также накладываться друг на друга в одном слое. Используя ‘CTRL / CMD + [‘ и ‘CTRL / CMD +]’, вы можете изменить порядок наложения выбранного объекта и, кроме того, нажимая ‘CTRL / CMD + SHIFT + [‘ и ‘CTRL / CMD + SHIFT +]’ отправит объект в нижнюю и верхнюю часть стека соответственно.

Для начала нарисуйте скругленный прямоугольник. Нажимайте клавиши курсора «Вверх» и «Вниз», чтобы отрегулировать закругление углов, прежде чем отпустить мышь, и удерживайте клавишу «SHIFT», чтобы ограничить пропорции, чтобы сделать его квадратным. В качестве альтернативы, простое нажатие на артборде вызовет диалоговое окно, в котором можно ввести точные измерения.

Заполните эту форму вертикальным градиентом от темно-оранжевого до более светлого тона.

Нажмите «CTRL / CMD + C» и «CTRL / CMD + F», чтобы скопировать форму и поместить ее впереди. Затем немного уменьшите форму, удерживая клавишу ALT. Заполните эту форму более темными из ранее использованных оранжевых тонов. Нажмите CTRL / CMD + C, чтобы скопировать форму.

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

Это интересно: Как создать ретро-фантастический компьютерный игровой плакат: описываем во всех подробностях

Нажмите CTRL / CMD + F, чтобы вставить форму, скопированную на предыдущем шаге. Мы скопировали фигуру перед добавлением градиентной сетки, потому что сетка может ограничить возможность редактирования фигуры и, по сути, испортить вещи! Заполните форму белым.

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

Выберите и белый объект, и новую форму, созданную с помощью инструмента «Перо», затем нажмите кнопку «Вычесть из области формы» в окне «Навигатор», а затем разверните. Уменьшите непрозрачность этой формы до 20%.

Чтобы создать реальный символ RSS, нарисуйте круг (удерживайте SHIFT) и добавьте черный штрих. Увеличьте ход, чтобы получить широкое кольцо. Запишите размер, в моем случае он был 12pt, но ваш может зависеть от размера, с которым вы работаете.

Используйте инструмент Direct Selection Tool, чтобы выбрать и удалить две из четырех точек, которые составляют круг, это оставит вам только четверть круга. Скопируйте эту форму и двигайтесь вниз на 45 градусов влево.

Используйте направляющие для визуальной помощи, когда вы масштабируете и выравниваете фигуры, в зависимости от того, установлены ли ваши предпочтения для масштабирования штрихов, вам может понадобиться сбросить обводку второй фигуры на 12pt (или любой другой размер, который вы отметили ранее!)

Выберите пару и перейдите в Object> Expand и установите флажок Stroke, чтобы преобразовать штрихи в законченные формы.

Завершите символ, добавив кружок, удерживая SHIFT, чтобы ограничить пропорции, и используйте направляющие для выравнивания с другими объектами, нажмите CTRL / CMD + G, чтобы сгруппировать объекты, затем заполните градиентом от белого до светло-серого.