Bohemian Coding Sketch

Sketch - это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих.

Основные функции

1. Полный набор инструментов
2. Точность изображений до пикселя
3. Поддержка векторного редактирования
4. Экспорт пресетов и кода
5. Сетка и направляющие позволяющие сделать ровные изображения
6. Прототипирование

Вам стоит работать в Sketch, если вы:

• работаете на Mac (версии под WIN пока не предвидится),
• занимаетесь в основном интерфейсами (не иллюстрациями, графическим дизайном, фотоманипуляциями и т. п.)
• понимаете, как программисты будут работать с вашими исходными файлами (формат «.sketch»), либо вы сами будете экспортировать всю графику для верстальщиков или программистов.

Плюсы Sketch

Узкопрофессиональный инструмент для дизайна интерфейсов 

Sketch строго заточен под дизайн интерфейсов. Здесь нет, как в Photoshop, инструментов для создания трехмерной графики, редактирования фотографических изображений, покадровой анимации и прочего, чем нагружен сложный и тяжелый продукт от Adobe. Это позволяет разработчикам Sketch быстрее и чаще исправлять баги и добавлять новый функционал.

Sketch можно сравнить с хирургическим скальпелем, противопоставив его швейцарскому ножу под названием Photoshop.

Экспорт графики

Варианты экспорта выбранного графического элемента под разные разрешения

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

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

Простота интерфейса

Блоки свойств объекта разворачиваются при обращении к ним

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

Например, инструменты редактирования векторных форм появляются только тогда, когда вы начинаете редактирование векторного объекта. Второй пример: пока вы не придали определенное свойство объекту, описание этого свойства находится в свернутом состоянии.

В программе предусмотрены сочетания клавиш, существенно ускоряющие работу.

Удобная работа с текстом

Работа с текстом в Sketch отлично адаптирована под экраны:

• красивый рендеринг текста
• удобная настройка текстовых блоков в режимах auto и fixed;
• при изменении выравнивания (left, centered, right) в режиме текстового блока auto текст не прыгает, как в Photoshop;
• автоматически устанавливаемый адекватный интерлиньяж;
• панель спецсимволов 

Интерфейс 

Sketch очень простой и осваивается за несколько минут. Большая часть экрана отведена под холст, на котором будет создаваться будущий дизайн. Для основных операций используется панель инструментов вверху, слева расположена панель слоев, справа — удобный инспектор свойств. В Sketch есть возможность задать сразу несколько вариантов заливки, тени, линий и остальных атрибутов фигур и указать опции их смешивания. Помимо меню и кнопок, практически все функции дублированы горячими клавишами, что позволяет очень быстро и эффективно работать, не отрываясь от клавиатуры.

Так как Sketch — редактор векторный, а графика чаще всего нужна растровая, то этому было уделено пристальное внимание. При использовании Sketch у вас не будет ни малейших проблем с масштабированием под любые размеры. В несколько кликов вы сможете получить сразу серию растровых изображений в нужных разрешениях со сглаживанием и без малейших артефактов. Экспортировать можно слой целиком (для этого нужно включить флажок «Exportable» в правом нижем углу инспектора), либо задать специальную экспортируемую зону «slice». Настроив опции экспорта для отдельных частей вашего дизайна, вы можете «выгрузить» всю нужную графику одним нажатием на кнопку. Для совершенного вида растровых изображений можно воспользоваться функцией выравнивания объектов до целых пикселей, что позволяет обойтись без размытия и сглаживания.

С помощью комбинации Ctrl-P вы можете переключать Sketch с векторного на пиксельное отображение и обратно, это позволяет посмотреть, как будет выглядеть дизайн после экспорта. С помощью клавиши «P» в любой момент можно включить инструмент «карандаш» и рисовать как в обычном растровом редакторе, Sketch потом аккуратно преобразует нарисованное в вектор.

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

В ходе написания этого обзора постоянно ловлю себя на использовании разнообразных превосходных эпитетов. Но что делать, если программа действительно замечательно справляется со своими задачами, а внимание разработчиков к деталям — удивительно. Поэтому продолжу.

Одна из главных «фишек» Sketch — связанные стили для фигур и текста. Это позволяет объединить разные элементы, придав им одинаковый внешний вид и в несколько кликов менять внешний вид всех ваших объектов. То же самое касается текста. Так же можно создавать символы, превращая выбранный слой в удобный для повторного использования элемент.