Внутреннее руководство Рамблера по созданию иконок
Все иконки наших продуктов разрабатываются в департаменте дизайна без использования сторонних источников.
Данный материал — внутреннее руководство и часть дизайн-системы Ratio, позволяющее поддерживать высокое техническое качество созданных иконок и согласованность наборов.
Иконки разрабатываются в Adobe Illustrator, так как Sketch не удовлетворяет нашим требованиям работы с вектором (и не должен).
Построение
Инструменты, принципы и приёмы
Все действия выполняются с помощью числовых значений (преимущественно в панели трансформации) и клавиатурных стрелок, имеющих фиксированный шаг. Без использования курсора, чтобы не провоцировать вероятность произвольных координат.
Сперва разрабатывается линейный каркас иконок, на следующих этапах превращаемый в заливку.
Первоначальный контур состоит из многоугольников, прямых, эллипса и его частей, чьи формы дорабатываются через изменение ширины, высоты, угла, сдвига и эффекта Zig Zag. Направляющие редактируются стрелками на клавиатуре: для этого необходимо выбрать нужный отрезок, а для более тонкой работы увеличить масштаб иконки.
Каждая иконка в нашей дизайн-системе существует в двух дублирующих друг друга версиях: 15x15 (базовый набор) и 20x20. Толщина линий базового набора — 1.2 px, что визуально равно толщине букв основного интерфейсного шрифта Roboto Regular 13. У дополнительного набора — полтора пикселя.
Закрытые контуры и логически близкие к ним позиционируются относительно пиксельной сетки по своему внешнему краю, потому что одна нечеткая внешняя сторона выглядит аккуратнее, чем две нечетких стороны.
Открытые контуры позиционируются по центру пикселя — таким образом линии сохраняют свой вес и цвет.
Любая точка имеет координаты, кратные 0.5 px, если это не противоречит правилам позиционирования контуров.
Если наклонный объект не представляется возможным построить сразу, как карандаш выше, то наклон можно произвести после построения. Поворот и последующее редактирование позиции осуществляется с помощью панели трансформации относительно центра.
В случаях, когда метафора либо вес иконки относительно всего набора страдает из-за позиционирования точек, мы можем делать исключения, округляя значения координат до кратных 0.5 px и даже 0.05 px.
Например, если выравнивать окружность центра шестерни по сетке, то отверстие получается слишком большим и иконка производит впечатление ромашки. Слишком маленькая окружность превращается из линии в заливку и спорит с общим стилем. Оптимальное среднее значение имеет координаты на половине пикселя.
Позиционирование линий с целым четным значением толщины линии происходит по сетке без фокусов.
Правила в действии
Следующая иконка построена с помощью линий и частей эллипса. Для нее сделано исключение в толщине контура в пользу узнаваемости метафоры.
➊ 1/8 окружности с изменением высоты и ширины. ➋ 1/2 окружности с позицией по принципу закрытого контура. ➌ Прямая с позицией по принципу открытого контура. ➍ Прямая с позицией по принципу закрытого контура. Расстояние между точками ⓐ и ⓑ равно толщине их штриха.
Некоторые детали можно построить иным путем, главное, в итоге получить контур с тем же позиционированием.
Контейнер
После построения кривых и превращения их в заливки рисуем вокруг иконки контейнер — две горизонтальные линии, которые следующим шагом включаем в общий контур, зафиксировав таким образом положение иконки в пространстве.
Скругления
Микроскругления проходят сквозь все наши интерфейсы и иконки не исключение. После превращения линейных каркасов в заливку и фиксации иконки в пространстве, мы добавляем ее форме скругления по внешнему контуру.
Стандартный радиус 1 px, но менее 100%, чтобы сохранить прямой отрезок и избежать формы «колбаски», «сосиски», «пилюли» etc.
Используемые радиусы так же, как и координаты точек, должны быть кратны 0.05 (пяти сотым). Радиусы в порядке приоритета: 1, 0.5, 0.25/0.75 и так далее.
Уменьшение стандартного радиуса требуется стрелкам, чтобы оставаться острыми; линиям, чтобы сохранить прямой отрезок; острым углам. Тупым углам, напротив, иногда требуется увеличение стандартного радиуса.
В ситуации ограниченного пространства мы можем выиграть площадь для иконки за счет увеличения стандартного радиуса. Стрелке, чтобы оставаться острой, показан радиус 0.5, однако в таком случае контур незначительно выйдет за пределы контейнера 15x15. Поэтому мы установим радиус наиболее близкий к 0.5, не выходящий за рамки контейнера и кратный 0.05 (пяти сотым), то есть — 0.75 px.
Если при попытке задать радиус в Illustrator и отсутствии дублирующих точек не появляется соответствующего поля ввода, мы увеличиваем масштаб иконки в 10 раз, задаем нужные радиусы (также увеличенные в 10 раз) и уменьшаем ее обратно. Важно делать это после этапа контейнера.
Масштабирование
Когда нужно изменить размер иконки, например, если визуальный вес не вписывается в набор, необходимо нарисовать ее заново, начиная не позже этапа линий с проверкой координат каждой точки. Порой проще построить иконку с нуля.
Если изменить размер линейной версии без контроля координат каждой точки, координаты поплывут. Если изменить размер версии-заливки, то мы потеряем не только сетку, но и толщину штриха.
Знак успеха — возможность с нуля построить глиф со 100% совпадением, не выходя за рамки декларированного инструментария.
Дисклеймер
Не всегда есть возможность увлекаться идеальным построением, иногда затраты ресурсов могут быть неоправданно высокими. Однако, даже частичное использование этого руководства гарантированно улучшит финальный результат.
Вот и все, спасибо!
