1 заметка с тегом

дизайн

12 мая 2015, 6:17
sketchдизайн

Sketch.app

Где рисуют UI, иконки, иллюстрации и буквы

Это статья-мануал в формате действия и его объяснения. Чтобы всё понять, надо разбираться в веб-дизайне, немного в CSS, пользоваться любым графическим редактором для рисования интерфейсов.

Использовала статью “Essential Sketch Plugins For Web Design” и советы из видео-туториалов на сайте SketchCasts.

С чего начать

Скетч прост для освоения. За неделю я не только научилась пользоваться интерфейсом и горячими клавишами, но прошла курс по созданию мини-приложения и установила полезные плагины. Программа интуитивна, в ней нет лишних функций. Когда чего-то не хватает, сразу находится подходящий плагин.

Цена на Sketch привлекательная ($99, и никакой помесячной оплаты). Сообщество Sketch открытое и развивающееся. Количество и качество плагинов подтверждают. Несложно найти готовые наборы иконок, элементов интерфейса, мануалов.

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

Начать лучше со скачивания программы. Создатели скетча Bohemian Coding предусмотрели триал, период бесплатного использования. Чтобы изучить как можно больше в короткий срок, попробуйте нарисовать простое приложение. Ниже ссылки на то, что помогло мне в процессе изучения.

bohemiancoding.com/sketch/support/... Документация Sketch
http://sketchshortcuts.com Горячие клавиши
http://sketchcasts.net Видео-туториалы, немного хороших бесплатных
http://sketchappsources.com Плагины, курсы, исходники
http://sketchresources.com Исходники, курсы, плагины
webdesign.tutsplus.com/courses/... Курс “Practical UI Design With Sketch”

Фичи

Slice разбивает растровую картинку на тянущуюся и статичную части. Удобно без заморочек вставлять скринами кнопки, сайдбары, паттерны и растягивать их в зависимости от внутреннего содержания, не нарушая рисунка.

В 1 документе благодаря Page и Artboard помещаются все страницы и ассеты сайта.

Sketch Mirror дает смотреть свой дизайн на девайсе в реальном времени.

Горячие клавиши

Я люблю запоминать сочетания клавиш, чтобы работать быстрее. Это однажды очень выручило — в путешествии у нас был MacBook Air 11'' с русскоязычным ПО для создания векторной графики. Не было времени фантазировать, как разработчики перевели на русский привычные английские команды и названия в меню. Следовало быстро сориентироваться и по хардкору задизайнить красивую презентацию с нуля в тот же день. Всё получилось даже лучше, чем я планировала. Так появился еще один аргумент в пользу знания шорткатов.

В скетче горячие клавиши отличаются от привычного ПО, но легко запоминаются. Мои любимые связаны с вектором — возможность переключать типы направляющих точек (handlers) клавишами 1 2 3 4 в процессе рисования формы.

Я добавила сочетания клавиш:

⇧ ⌘ ` переводит текст в верхний регистр
⇧ ⌘ ⌥ ` возвращает в нижний
⇧ ⌘ ⌥ P округляет до ближайшего целого пикселя
⌥ ⌘ C схлопывает папки и артборды

Добавьте свои горячие клавиши в Системных настройках: Клавиатура > Сочетания клавиш > Сочетания клавиш программ.

Добавляем свои горячие клавиши в Sketch

Экспорт

Сохраняйте целые страницы, артборды, слои и несколько слоев за раз. Снизу-справа кнопка Make Exportable, выберите несколько типов сохранения — удобно, если разрабатываете для Retina экранов.

Схватите курсором артборд, папку или слой и потяните на рабочий стол или в приложение (почту, слак, скайп, твиттер etc.) — Sketch создаст картинку.

Добавьте перед именем слоя название папки и слэш (Buttons/main-page), и Sketch положит картинку в эту папку.

Плагины

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

Первым делом скачайте Sketch Toolbox, сторонний менеджер плагинов для Sketch (как Package Control в Sublime Text). Он сам установит плагины, выведет их в отдельный список и позволит удалить в случае чего. Умеет искать по названию плагина, описанию или имени автора.

Swap Fill & Border

Нажимаете сочетание ⌘ / и меняете местами Stroke и Fill. Удивительно, почему этого нет в функционале программы.

Sketch Page Switch

Переключаетесь между страницами (Pages) горячими клавишами:

⌘ L следующая
⌘ K предыдущая
⌘ ' окно выбора страницы
⌘ P создать новую

Sketch Dynamic Button

Задаете paddings кнопке (сразу как в CSS) и больше никогда не паритесь насчет ручного масштабирования фона.

Чтобы размер менялся, структура папки должна быть как на картинке.

Создаете текстовый слой для кнопки и нажимаете ⌘ J. Плагин сам создаст структуру, не меняйте её в процессе. Текстовый слой переименовываете как padding в CSS — поля верхнее:правое:нижнее:левое без единиц измерения. После любого изменения текста кнопки жмите ⌘ J, и фон расширится.

Select Child Layer

Скачайте плагин по ссылке, установите двойным кликом по файлу .sketchplugin. Через Sketch Toolbox он не устанавливается.

Выделяете папку или любой из внутренних слоев, нажимаете ⌘ ⌥ A, и плагин выделяет все слои в папке.

Efficiency

Встроенный Типограф Муравьева переносит висячие предлоги, не дает переносить тире, правит кавычки. ⇧ ⌘ ^ T

Bitmap To Pattern Fill делает из картинки прямоугольник с этой же картинкой в виде фоновой заливки. ⇧ ^ Y

Spacing: Character, Line, Paragraph настраивает расстояния между буквами, строками, абзацами (у меня Sketch подглючивает от этих горячих клавиш).

Keep only text layers in selection оставляет выделенными текстовые слови.

Random shift перемещает выделенные слои в случайном направлении (не больше заданного максимального расстояния). ⌘ ⌥ R

Random size меняет размер слоев по заданному фактору. ⌘ ⌥ ⇧ R

Toggle ‘Constrain Proportions’ включает/выключает сохранение пропорций при масштабировании ⌘ ⇧ A

Sketch Measure

Показывает параметры слоев — размеры, расстояния между, поля, у текста кегль, интерлиньяж, трекинг. Удобно, когда надо отправить эти параметры разработчику. Горячие клавиши ⌘ ⌃ 1 2 3 4 5 6

Есть подобное приложение Zeplin. Кроме измерений он создает цветовую палитру на основе использованных в дизайне цветов.

Zeplin визуализирует все расстояния и цветовую гамму проекта

Zeplin визуализирует все расстояния и цветовую гамму проекта

Sketch plugins by Cemre Güngör

UPD от 20 мая

Увеличивает и уменьшает в два раза объект, вставляет изображение в позицию выделенного объекта или в прямоугольник-маску (для аватаров, блоков с фоном-картинкой). Делает из прямоугольника гайд.

Stack Children по прототипу выстраивает объекты в таблице. Прототип задается как символ. ^ ⌥ ⌘ T

Stack Children в Sketch plugins by Cemre Güngör

Больше плагинов

Используйте, если работа докажет необходимость:

  • Color-Copier копирует цвет. ⇧ ⌘ C
  • Dynamic Reposition расставляет элементы по заданным в названиях отступам. Когда надо масштабировать фон блока (под разные разрешения экранов или размеры полиграфии). ⌘ P
  • Generate GIF быстро генерит GIF-анимацию. Графика так себе, зато дизайнер сразу доносит идею до менеджера или разработчика.
  • Sketch-Unlinker убирает связи между слоями/группами и заданными символами/стилями. ⌘ ⌥ U
  • Text to Specs делает из текста комментарий к макету (в заданном вами стиле). ⌘ ^ T
  • Sketch-Scripts делит прямоугольник на меньшие, вы задаете количество колонок, рядов и расстояние между элементами (Columns, Rows and Gutter). Похож на Split Into Grid в иллюстраторе.
  • RenameIt добавляет к имени слоя размеры(пишете %w или %h), номера (%n — button 1, button 2) или буквы (%a — button a, button b).
  • Invert Background Color инвертирует цвет фона.

Есть еще плагины вроде Day Player или Content Generator, но я не любитель Lorem Ipsum и случайных картинок в дизайне.

Ссылки

Sketch для полиграфического дизайна