Первые сайты я рисовал в Photoshop. Я всегда удивлялся, почему для такого сложного дела дизайнеры выбрали программу, предназначенную для чистого творчества. Акционные страницы и лендинги набросать в фотошопе еще можно, но проектировать в нем сложный многостраничный проект или мобильное приложение – это ад. Мне не нравилось в нем почти все:

  • ранжирование и редактирование слоев и групп;
  • работа с векторными шейпами;
  • работа с текстовыми стилями и списками;
  • время загрузки и сохранения лейаутов… а их у тебя двадцать, и везде необходимо «немного» поправить шапку сайта и поменять шрифтовую гарнитуру.

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

Некоторое время веб-страницы я проектировал в Illustrator. О нем я обязательно сделаю отдельный пост. И только с середины прошлого года перешел на Sketch.

Sketch стоит 100$, весит около 50 мегабайт и его без проблем можно скачать с официального сайта. В новой версии есть готовые шаблоны с размерами под десктопные и мобильные устройства, планшеты и даже смарт-часы разных производителей. Sketch позиционируется как программа для проектирования и отрисовки интерфейсов. Но без продуктов Adobe вам, скорее всего, не обойтись, так как рисовать в нем векторные объекты довольно трудно, а редактировать растровые изображения – невозможно.

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

Пиксель-перфект при создании элементов Sketch выдает по умолчанию.

Если это не так, зайдите в меню Preferences и включите опцию Fit layers and points to pixels bounds, чтобы фигуры имели целопиксельные размеры и «ложились в клеточки». Включите опцию Show Pixels Grid (вкладка View/canvas) для определения резкости фигур. Затем наведите курсором на элементы и зажмите Alt, чтобы посмотреть растояние между ними. Чтобы определить его между объектами, которые находятся в различных группах, вместо Alt нажмите Cmd + Alt.

Для ускорения работы в Photoshop/Illustrator я переносил все панели инструментов на правую сторону экрана. Левше панели инструментов лучше перенести на левую сторону — так будет гораздо комфортнее. Эта фича также работает со сменой руки с оружием в контр-страйке и даже фильтры поиска в интернет-магазинах правшам намного проще щелкать по правому краю веб-страницы.

Все панели Sketch: инструментов, списка слоев и форматирования (здесь она получила название «инспектор»)  перемещать нельзя, поэтому я советую выучить хоткеи. После этого можно скрыть все панели сочетанием клавиш (⌘ +) и тогда можно видеть только рабочую поверхность с артбордами.

Панели Sketch:

1.Панель инструментов

2.Панель слоев

3.Рабочая поверхность

4.Инспектор (панель форматирования)

Фигуры:

  • прямоугольник (R),
  • овал (O),
  • закругленный прямоугольник (U),
  • текст (T),
  • вектор (V),
  • артборд (A),
  • линия (L).

Если вы будете выгружать сайт со Sketch в Zeplin (программу для взаимодействия дизайнеров и разработчиков), обязательно обведите все растровые элементы и векторные иконки слайсом (S). Для каждого элемента со слайсом создайте отдельную папку.

Редактирование фигур:

  • передвигаться по канвасу (Space + потянуть),
  • трансформировать (Cmd + Shift + T),
  • повернуть (Cmd +Shift + R),
  • заблокировать / разблокировать слой (Cmd + Shift+ L),
  • спрятать / показать слой (Cmd + Shift + H),
  • экспортировать (Cmd + Shift + E),
  • снять выделение / выделить родительский артборд или группу (Esc).

Выделенные объекты
При выделенном слое вы можете использовать следующие горячие клавиши в Sketсh:

  • непрозрачность слоя (от 1 до 0),
  • заливка (F),
  • выбор цвета (Ctrl + C) – действует как пипетка в фотошопе и может работать вне рабочей области программы.

Работая с несколькими фигурами, можно использовать маску (Ctrl + Cmd + M). Здесь она работает чуть по-другому, чем в «Фотошоп» – верхний слой перекрывает все нижние.

Редактирование точек фигур, объединение и вычитание в Sketch я не использую. Рисовать иконки или сложные векторные объекты в Illustrator намного проще. Это мое субъективное мнение.

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

Организация слоев и групп:
• сгруппировать (Cmd + G),

• разгруппировать (Shift + Cmd + G),

• вперед (Alt + Cmd + ↑),

• назад (Alt + Cmd + ↓),

• на передний план (Ctrl + Alt + Cmd + ↑),

• на задний план (Ctrl + Alt + Cmd + ↓).

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

Копирование и масштабирование:
копировать (Cmd + C),

вставить (Cmd + V),

вставить на место (Cmd + Shift + V),

вставить на место курсора — Правый клик / Paste Here (вставить здесь),

копировать стиль (Alt + Cmd + C),

вставить стиль (Alt + Cmd + V),

включить сетку (Ctrl + G),

включить линейку (Ctrl + R),

масштабировать до действительного размера 100% (Cmd + 0),

увеличить (Cmd + +).

Можно создать собственные горячие клавиши под инструменты и команды. Для этого необходимо перейти в системные настройки macOS → Keyboard в System → Preferences и кликнуть вкладку Shortcuts. Там нажмите (+) и выберите программу для которой хотите установить хоткеи.

Стили, Символы и вложенные символы (структуры в символах)
Используйте символы, когда в макетах много одинаковых блоков и элементов (кнопки, стрелки, карточки товара, меню сайта, копирайты в футере). Особенность символов в том, что при изменении символа в одном месте, он также меняется автоматически во всех местах, где присутствуют его копии. Контент в символах редактируется (текст, картинки). Также в символах можно создавать встроенные символы. А во встроенных символах еще символы. И так бесконечно.

Символы можно сортировать по группам. Это очень удобно, когда символов много и они, при взаимодействии с пользователем, имеют разные состояния кнопок. Для этого перед названием напишите любое название группы и поставьте обычный слэш “buttons/btn_buy_hover””, а название символа оставьте. Получится вот так:

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

Возьмите за привычку назначать только что созданным элементам стили, делать символы. Называть и правильно группировать слои при их создании.

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

Функция Group Resizing
При создании адаптивного дизайна мне помогает функция Group Resizing.

Поведение объекта в группе при изменении размера у его родительского элемента можно настраивать с помощью блокировки или разблокировки маркеров позиционирования. Опции функции наглядно показывает эта схема:

Математические расчеты значений
Размеры блоков и элементов можно задавать математическими выражениями.Например, текстовый блок нам необходимо сделать шире на 25 пикселей. Желаемую ширину блока можно посчитать в уме и, потянув нужный маркер размера объекта, выставить требуемое значение. А можно написать в инпуте ширину объекта +25 и объект автоматически увеличится на необходимое значение. Элементы будут увеличиваться или уменьшаться по направлению справа и снизу.

Sketch привлекает еще тем, что все CSS-свойства объектов можно скопировать себе в редактор кода (правая кнопка мыши и Copy CSS-attributes).

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