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

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

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


141.jpg

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

110.jpg

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

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

210.jpg

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

32.jpg

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

42.jpg

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

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

52.jpg6.jpg

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

71.jpg

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

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

81.jpg

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

91.jpg

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

101.jpg

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

112.jpg

Совместите символ с оранжевыми фоновыми объектами, затем разместите отражение на вершине стека, нажав клавиши CTRL / CMD + SHIFT +].

121.jpg

Закончите значок с небольшим оттенком, выбрав

Эффекты> Стилизация> Внешнее свечение.

131.jpg141.jpg



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.