Создайте согласованный набор значков в Sketch

Страница 1 из 2: Страница 1

В настоящее время ваше типичное веб-приложение или настольное приложение выглядит гладким и аккуратным. И это то, чего ожидает средний пользователь. Подумайте о вещах с помощью культурного кода, Dropbox или фантастического от Flexibits. Что у них общего? Хороший интерфейс и последовательный и привлекательный набор иконок. Хороший набор иконок часто может восприниматься как должное, но плохое сразу заметно.

Создание набора значков может показаться простой задачей, но при этом возникает немало проблем. Многим дизайнерам проще создать уникальный значок, чем создавать набор значков. Это потому, что набор элементов представляет собой правила другого типа. Все значки должны работать вместе, как одна команда: вам нужно учитывать вес, штрихи и формы, чтобы добиться стабильного результата. Этот процесс может занять несколько итераций, чтобы получить желаемый результат, но он полезен и интересен.

Хотя вы можете выбрать любую векторную программу, которая вам нравится, Sketch - отличный вариант. Он в первую очередь разработан как графическое приложение для веб-дизайнеров и дизайнеров мобильных устройств, дизайнеров пользовательского интерфейса и дизайнеров иконок, и становится надежной альтернативой наиболее распространенному программному обеспечению для дизайна экрана. Приложение отлично выглядит и отлично работает, хорошо спроектировано и его легко освоить, если вы привыкли к другим инструментам дизайна, таким как Illustrator, Fireworks или Flash.



01. Настройка монтажной области и области рисования.

Настройте монтажную область и область рисования

Запустите Sketch и создайте монтажную область (A). Нарисуйте область с помощью мыши или пера Wacom на холсте - после этого вы можете настроить размеры на панели инспектора справа. Вы также можете изменить положение и цвет фона и выбрать функции, которые вам нравятся.

В Sketch вы можете работать с несколькими монтажными областями. Это очень удобно для проектов, которые имеют разные представления (например, представление пользовательского интерфейса и представление значков).

02. Вставьте прямоугольник.

Вставить прямоугольник

как стать графическим дизайнером фильмов

Этот набор значков предназначен для пользовательского интерфейса веб-почты, и мы разработаем набор из шести согласованных значков. Там будет значок плюса (обозначающий «больше»), значок корзины (удалить), значок колокольчика (уведомление), значок почты (обновить и получить электронные письма), значок ручки (написать сообщение) и значок стрелки назад. (Предыдущее письмо).

Начнем со значка плюса. Вставьте прямоугольник (R) и нарисуйте прямоугольник 100 x 20 пикселей, затем измените радиус на 40, чтобы у вас были закругленные углы.

03. Используйте панель инспектора.

Панель инспектора

Теперь вы можете скопировать и вставить тот же прямоугольник с закругленными углами и изменить его поворот на угол 90 градусов. Вы можете сделать это через панель Inspector в разделе Transform. Все значки, которые мы создаем, являются векторными, поэтому мы можем изменить размер позже, увеличив или уменьшив их размеры.

Если вы привыкли работать с линейками, добавить их в Sketch очень просто («Просмотр»> «Холст»> «Показать линейки»). Вы можете щелкнуть в любом месте линейки, чтобы добавить направляющие, и они будут оставаться видимыми, пока видны линейки.

04. Сгруппируйте значок в папку.

Сгруппируйте значок в папку

Давайте сгруппируем первый значок плюса в папке - так Sketch будет отображать элементы, когда вы нажимаете Cmd + G. На панели «Слой» вы увидите папку с двумя отдельными элементами (прямоугольниками), которые все еще можно редактировать по отдельности. Это удобно, если вы хотите потом изменить формы - например, чтобы удалить закругленные углы или изменить радиус.

05. Значок запуска корзины

Начать с мусорного ведра

как сделать геофильтр на mac

Перейдем к более сложному значку: корзине. Основные формы похожи на значок плюса, поэтому мы начали с плюса. Нарисуйте прямоугольник (R) примерно 15 x 84 пикселей. Скопируйте и вставьте ту же форму и начните строить тело корзины. Здесь нам также придется установить радиус 40, чтобы набор иконок был единообразным.

06. Строить мусорное ведро

Создание корзины

Продолжайте и снова используйте ту же форму для тела значка корзины, просто повернув его на 90 градусов. Для ручки вверху сохраните тот же радиус, и углы получатся ровными и аккуратными. Прямоугольник в верхней части корзины имеет размер 65 x 15 пикселей - в основном на 40 пикселей короче по ширине, чем основание корзины, которое составляет 105 пикселей.

как обрезать и изменять размер фото в фотошопе

07. Добавьте окончательные детали

Заключительные детали

Значок корзины немного более детализирован, чем другие. Если вам нужен более упрощенный подход, вы можете оставить поверхность пустой, но вместо этого давайте добавим ей последний штрих, нарисовав «вмятины» посередине, чтобы имитировать поверхность настоящего мусорного ведра. Часть этого значка, а также значок плюса можно будет повторно использовать позже в этом руководстве.

08. Начать значок колокольчика.

Начиная со значка колокольчика

Вторая иконка нашего набора готова; перейдем к значку колокольчика, который снова более сложен. Мы хотим, чтобы значок поместился на той же площади на экране. Чтобы убедиться, что это сработает, мы можем нарисовать кружки над каждым значком, которые будут служить ориентирами. Мы можем расположить круги на расстоянии 70 пикселей друг от друга. Таким образом, когда мы закончим набор, у нас будет красивый ряд горизонтально выровненных значков, каждый из которых занимает одно и то же место на экране.

Следующая страница: создание дополнительных значков для добавления в набор значков веб-почты

  • 1
  • два

Текущая страница: Страница 1

Следующая Страница Страница 2