Создайте веб-значок
НАЧИНАЮЩИЙ · 5 МИН
Используйте инструменты формы в Adobe Illustrator, чтобы искусно комбинировать векторные фигуры и создавать запоминающиеся значки для вашего следующего цифрового проекта.
Для нашего примера проекта мы разрабатываем значок камеры, который будет использоваться в качестве изображения профиля в социальной сети, а также для кнопки со ссылкой на портфолио в цифровом резюме.
Настройте свой проект
Запустите Illustrator и нажмите кнопку «Создать» или нажмите «Control+N» (Windows) или «Command+N» (macOS). Выберите вкладку Web и введите размер справа; мы набрали 400 пикселей для ширины и высоты. Совет: При создании дизайна значков полезно работать в квадратном формате.
Нажмите «Создать».
Рисование основных фигур
Сначала вы нарисуете корпус камеры.
Выберите инструмент «Прямоугольник» на панели «Инструменты». Нажмите и перетащите прямоугольник на монтажной области.
Нарисуйте второй, меньший прямоугольник, перекрывающий верхнюю часть большего прямоугольника, как показано на рисунке.
Вы будете использовать быстрые направляющие, чтобы расположить прямоугольники так, чтобы их центры были выровнены. Перетащите центральный виджет (круг в центре) меньшего прямоугольника на больший, пока не появится вертикальная пурпурная направляющая.
Узнайте больше об использовании быстрых направляющих в Illustrator.
Далее вы добавите вспышку.
Нажмите и удерживайте инструмент «Прямоугольник», чтобы получить доступ к другим фигурам, и выберите инструмент «Эллипс». Нажмите и перетащите круг, пока не увидите направляющие перекрестия, указывающие на то, что вы рисуете идеально круглый круг. Отпустите курсор, когда он станет подходящего размера.
Совет : Чтобы пропорционально изменить размер круга, нажмите Shift и перетащите угловой виджет.
При необходимости перетащите центральный виджет, чтобы изменить положение круга внутри большего прямоугольника.
Теперь вы создадите форму линзы.
Выбрав инструмент «Эллипс», наведите указатель мыши на больший прямоугольник, пока не появится слово center . Нажмите Alt (Windows) или Option (macOS) и перетащите круг, нарисованный из центра. Найдите направляющие перекрестия и отпустите курсор, когда круг станет нужного размера.
Нарисуйте маленький круг сбоку. Щелкните в его центре и перетащите его на больший круг, пока не увидите слово , пересекающее или в центре 9.появляется 0048. Опустите меньший круг на место.
Комбинирование фигур
На этом этапе вы объедините прямоугольники.
Нажмите V для инструмента «Выделение». Щелкните большой прямоугольник; затем нажмите Shift и щелкните маленький прямоугольник, чтобы выбрать оба. Выберите инструмент «Создание фигур» и перетащите линию, соединяющую оба прямоугольника, как показано на рисунке.
Добавить цвет
Теперь вы примените к фигурам цвет заливки и различные атрибуты обводки.
Нажмите V, чтобы переключиться на инструмент «Выделение». Выбрав корпус камеры, щелкните образец цвета заливки в разделе «Внешний вид» на панели «Свойства». Выберите параметр «Образцы» справа и щелкните цвет на панели «Образцы». Затем щелкните образец «Обводка» и выберите «Нет», чтобы удалить обводку.
Повторите для мигающего круга: примените белую заливку и не используйте обводку.
Чтобы раскрасить линзу, сначала выберите внешний круг; затем нажмите Shift и щелкните второй круг, чтобы выбрать и его. Не применяйте заливку и белую обводку. Увеличьте Толщину обводки до 5 pt.
Завершающий штрих
Вы можете закруглить углы формы, чтобы создать другой вид.
Выберите корпус камеры. Нажмите A, чтобы переключиться на инструмент «Частичное выделение», и перетащите виджет с закругленными углами, чтобы скруглить все углы одновременно.
Сохранить для веб-вывода
Если вам нужно изменить размер значка относительно монтажной области, выберите «Выделение» > «Все», чтобы выбрать весь значок.
Нажмите V, чтобы переключиться на инструмент «Выделение». Нажмите Alt+Shift (Windows) или Option+Shift (macOS) и перетащите угловой маркер, чтобы изменить его размер пропорционально от центра. Наконец, измените положение значка, перетащив его центр.
Выберите «Файл» > «Сохранить». Дайте вашему проекту уникальное имя и сохраните его в формате Adobe Illustrator (AI). Вы можете редактировать этот файл в Illustrator в любое время.
Чтобы сохранить окончательную версию, готовую к публикации в Интернете, выберите «Файл» > «Экспорт» > «Экспорт для экранов». Выберите место и выберите формат PNG.
Совет: Перед экспортом можно изменить размер монтажной области. Выберите «Ширина» или «Высота» в раскрывающемся меню «Масштаб» и введите новый размер.
Щелкните значок шестеренки и выберите Art Optimized (Supersampling) в раскрывающемся меню Anti-aliasing. Нажмите «Сохранить настройки», а затем нажмите «Экспорт монтажной области».
Надеюсь, вам было весело.
Просмотрите Экспорт ресурсов для веб-дизайна и дизайна приложений, чтобы узнать больше о сохранении иллюстраций для Интернета.
Разработка значка веб-части
Редактировать Твиттер LinkedIn Фейсбук Электронная почта- Статья
Значки веб-частей разработаны простыми, репрезентативными и символическими. Каждая иконка выполнена в минималистском стиле, который представляет наиболее важные атрибуты. Значки будут отображаться на панели инструментов на страницах SharePoint и, при необходимости, в магазине. Примеры форм значков: квадрат, круг, вертикаль и горизонталь.
Формы ключевых линий сетки
Значки веб-частей отображаются с размером 32×32 пикселя, но имеют вдвое больший размер, т.
е. 64×64 пикселя. Создавайте значки со 100% масштабом, чтобы обеспечить точность пикселей.
Макет
Дизайн значков в области контейнера 64×64 пикселей. Это гарантирует правильное отображение значка.
Формы
Не все значки или логотипы имеют идеальный квадрат. Используйте это руководство по основным фигурам, чтобы понять, как объединить различные формы значков в сетке и сделать так, чтобы они отображались с пропорциональным размером. Убедитесь, что значок заполняет либо всю ширину, либо всю высоту сетки, в зависимости от его формы.
Четкость пикселей
Постарайтесь избежать искажения значков, привязав края к координатам X и Y. По возможности используйте целые числа.
Цвета и фоны
Значок — это визуальное выражение вашей веб-части и ее функции. Значки могут помочь просто и четко передать основную идею вашей веб-части.
Значки веб-частей могут быть одноцветными или полноцветными.