Первые сайты я рисовал в 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 не является первой и главной программой для проектирования интерфейсов. Наверное, потому что не мультиплатформенный. Но его скорость, интуитивный интерфейс, частые апдейты с новыми крутыми фичами и кучи удобных плагинов сделают его таковым в ближайшее время. Это выводы, основанные на личном опыте работы в разных редакторах.