Sketch или Photoshop? Сравнение инструментов для разработчика

Александра Воробьева
Александра Воробьева
Руководитель отдела разработки
28 августа 2015 | sketch  photoshop  frontend Все статьи →

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

Общие преимущества Sketch:
  • Быстрая загрузка и работа без тормозов
  • Панели компактные и легко настраиваемые
  • Удобная работа со стилями слоя и текстами

Недостатком Sketch я считаю отсутствие версии для Windows, хотя, сейчас всё большее количество разработчиков используют Mac.

Задача: быстро перейти к нужному слою

Кликнуть по слою с зажатой кнопкой Cmd либо выбрать его в контекстном меню.

Минус: довольно сложно сделать, если слоев много, они организованы в группы или названы непонятно.


0 баллов

Кликнуть по слою с зажатой кнопкой Cmd.

Плюс: при любой вложенности сразу будет выбран нужный слой, подсветка помогает в выборе.



1 балл

Задача: экспорт изображений макета


File → Save for web для каждого изображения.

Минус:
невозможно экспортировать каждый слой отдельно.
Плюс: гибкие настройки экспорта.


1 балл

Панель «Экспорт»

Плюс: при любой вложенности сразу будет выбран нужный слой, подсветка помогает в выборе.


1 балл
Эксперимент: выясним, какой из редакторов лучше сжимает файлы при экспорте.
Я выбрала 2 изображения и сохранила их с одинаковыми параметрами сжатия в обоих редакторах.
Результат:

.png-24, 500×500, 164,6 Кб



.jpg, 80% качества, 1024×768, 278 Кб


0 баллов

.png, 500×500, 65 Кб



.jpg, 80% качества, 1024×768, 201 Кб


1 балл

Как мы видим, файлы, сохраненные в Sketch, при таком же качестве весят в среднем на 30% меньше.

Задача: измерить цвет

Инструмент «Color Picker» (Пипетка). Вызывается горячей клавишей I.

Минус:
измерение в 2 шага — клик пипеткой, потом переход в палитру цветов.


0 баллов

Edit → Pick color либо горячей клавишей Ctrl + C.

Плюс: хороший зум, четкий выбор пикселей, значение цвета видно сразу





1 балл

Задача: копирование css-стилей слоя

Layers → Copy CSS.

Минус: свойства градиента не копируются.
Плюс: в скопированном стиле присутствует позиция элемента и его размеры.



1 балл

Edit → Copy css attributes (или выбрать соотв. пункт,
кликнув правой кнопкой мыши по слою).

Плюс: к слою можно применить несколько свойств одного типа
(несколько теней, границ, градиентов), все копируются в стили CSS.


1 балл
Хозяйке на заметку:
https://github.com/poyi/copy-fill-color — плагин добавляет горячие клавиши для копирования цветов.
https://github.com/graphical-iain/copy-scss-colors — копирование стилей в нотации SCSS.

То, чего нет в Photoshop

Pixel perfection

Допустим, у вас есть слой в Sketch, у которого не выровнена позиция, размер или есть какие-то огрехи в пикселях. В Sketch для этого специально есть инструмент Layer → Round to nearest pixels edge, который автоматически исправляет неточности макета: (изображение отсюда)


Sketch: 1 балл



Layouts

Этот функционал очень удобен, если верстаешь по сетке, например, Bootstrap или 960 Grid. Чтобы отобразить сетку, кликните в верхнем меню кнопку «Show layout» или используйте сочетание клавиш Ctrl+L.

Параметры сетки, такие, как количество колонок, их ширина и др. настраиваются в меню
View → Canvas → Layout Settings

Если вы верстаете сайты с использованием сеток бутстрап, вот ресурсы, которые могут вам помочь:


Sketch: 1 балл

Заключение:

Итого, получаем финальный счет:

2 балла
7 баллов

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


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

http://sketchshortcuts.com — общий список хоткеев
http://spin.atomicobject.com/2014/10/21/sketch-keyboard-shortcuts,
http://www.sketchtips.info/articles/mind-your-shortcuts — настройки горячих клавиш

Полезные ссылки:

http://www.sketchappsources.com
http://sketchapphub.com/ — различные плагины Sketch
https://medium.com/sketch-app — серия статей о Sketch
http://www.sketchtips.info — набор советов «how to...»