Секреты дизайна и предпросмотра иконок в Sketch
Наш канал в

Пока мы работаем в Sketch, мы заметили, что постепенно совсем перестали рисовать собственные иконки. Главная причина в том, что нам не нравилось использовать Sketch именно для дизайна иконок. Вторая причина – IconJar оказался настолько хорош и прост в этом деле. Будучи дизайнерами, мы все же решили все-таки поднатужиться и вернуться к созданию собственных иконок для проектов по разработке UI.

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

 

Секреты дизайна и предпросмотра иконок в Sketch

 

Потом мы нашли оптимальный способ отображения иконок в 100% масштабе, в то же время имея возможность подгонять опорные точки к полупикселям в увеличенном масштабе. Бесконечный зум в Sketch – это потрясающая возможность, как и использование кнопки § для возврата в 100% масштаб (на американских клавиатурах это клавиша ~). Тем не менее, это совсем не тот подход в работе, к которому мы привыкли в Photoshop. Вот что и подтолкнуло к поиску новых методов оптимизации работы.

В итоге мы выработали такую технологию, которая отлично работает на детализированных иконках, которые должны быть pixel-perfect:

Начните с создания нового артборда в Sketch разрешением для имеющегося у вас устройства Apple. Убедитесь, что используете разрешение @1x (все нужные размеры уже встроены в Sketch, их можно найти в сайдбаре, который появляется при переходе в меню Insert > Artboard)
Переключитесь в пиксельный вид, чтобы было понятнее, как векторные фигуры и опорные точки соотносятся с пикселями.

  1. Увеличивайте масштаб до удобных вам размеров на своем экране.
  2. Подключите свой iPad или iPhone к Sketch через Sketch Mirror и позвольте Sketch магическим образом подстроить артборд в @1x до @2x версии на вашем девайсе.
  3. И начинайте творить свои иконки!

 

дизайн иконок в Sketch

 

Мы знаем, что многие дизайнеры пользуются Adobe Illustrator или другими инструментами для дизайна иконок. Но мы хотели преодолеть неудобства и оставаться в Sketch. Эти простые правила – лучшее решение для подобных нужд, хотя и возникает необходимость в дополнительном устройстве Apple. У большинства людей будет устройство с разрешением retina, отображение на котором будет отличаться от устройств с другим разрешением на 100%. Давайте обсудим возможные альтернативы для превью иконок в процессе дизайна, оставаясь в Sketch и не прибегая к другим программам.

 

Перевод статьи yummygum.com.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете.

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

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