Переход с Photoshop на Sketch
Статья подготовлена командой sketchapp.me.
При создании дизайна я не любою создавать много отдельных файлов, все пытался делать в одном документе, так я мог видеть всю картину целиком. При таком подходе, файлы весили по несколько гигабайт и не всегда открывались на слабых машинах. Это создавало очень много проблем, в конечном итоге мне приходилось разбивать файл на несколько страниц для других дизайнеров.
Я часто посещаю различные мероприятия связанные с профессиональной деятельностью, там я впервые услышал о Sketch. Приехав с очередной конференции я выделил выходные для изучения нового инструмента, моим эмоциям и восторгу не было предела. В то время, Sketch был довольно сырым, но уже позволял сильно упростить процесс создания интерфейсов. Он был прост в освоении, файлы весили по несколько мегабайт вмещая в себя по 30 страниц уникального дизайна. Символы и стили текста давали возможность очень быстро создавать большое количество экранов мобильного приложения либо сайта.
Когда я создал свой первый дизайн, Sketch был установлен только на моем компьютере, поэтому, мне пришлось сделать порезку макета для разработчиков, что тоже не составило никакого труда. На данный момент, работать с нарисованным макетом в Sketch может человек с любой операционной системой и это круто!
Sketch работает только под Mac OS
Как мне кажется, это огромный плюс программы. Так как Sketch использует всю мощь операционной системы Mac OS (автосохранение, отрисовку, рендер текста) и это делает его очень быстрым и современным редактором. В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation,OpenGL и ColorSync.
Не работает с растром
Sketch предназначен для дизайна интерфейсов, а не для работы с фотографиями. Sketch - это векторный графический редактор вннаправленный на создание мобильных и десктоп приложений, что дает возможность экспортировать исходники в любом размере.
Небольшие файлы
Файлы исходников Sketch весят меньше, чем файлы ai или psd (разработчики этого добились благодаря использованию Sketch системных ресурсов Mac OS).
Вот пример, файл btn.sketch всего с одной кнопкой весит 33КБ, такой же самый файл btn.ai весит 194КБ, такой же btn.psd — 91КБ. Это небольшой документ, но уже можно оценить вес исходников.
[Размеры файлов в Sketch]
Простой интерфейс
На первый взгляд вам покажется, что в интерфейсе очень мало инструментов. Но это не так! Тут есть весь набор инструментов для создания качественного интерфейса, просто разработчики не стали копировать кучу неудобных панелей с других редакторов, а создали свой удобный велосипед. Простой интерфейс - это плюс в копилку Sketch.
[Общий интерфейс редактора]
Немного по интерфейсу
Слева панель со слоями. Кончно непривычно после Photoshop, но привыкаешь быстро. Сверху в этой панели есть список страниц. Его можно переключить в «раскрытое» состояние — удобно, если страниц в файле не много.
[Панель слоев Sketch]
Наверху панель инструментов («тулбар»). Эту панель, как и в других программах на Mac OS, можно настроить по своему усмотрению. Инструментов не так уж много, и большую часть из них вы можете использовать с помощью горячих клавиш.
[Настраиваемый тулбар]
Справа контекстная панель (назовем ее так). Очень похожая, только горизонтальная, была в покойном Фаерворксе. Панель меняется в зависимости от того, чем вы занимаетесь на холсте. Есть три режима — свойства группы, свойства фигуры, свойства текста.
[Слева направо: свойства папки, фигуры, текста]
Страницы и холсты
Документ в Sketch разделен постранично. Страницы, в свою очередь, разделены на холсты. Фишкой Sketch является организация экранов мобильного приложения или сайта . Например, вы делаете страницу «Contacts», а внутри несколько холстов с разными состояниями экрана «Contacts».
Конечно, Photoshop с Illustrator уже умеют сохранять по несколько холстов в одном документе, но им все еще не хватает дополнительного уровня вложенности (страниц т.е.)
Привязка к пикселям
Всем нам знакомы ситуации, когда наш дизайн не попадает в пиксели, появляются, так называемые, полупиксели. С этим Sketch справился очень хорошо, мы больше не сможем увидеть размытых краев в дизайне, а если у нас это получится, это легко исправить.
[Привязать к пикселям]
Стили
У Sketch, конечно, есть и стили графики, и стили текста. Работают, опять же, поначалу немного привычно: когда вы где-то обновляете стиль у объекта (меняете обводку, цвет, шрифт), стиль обновляется автоматически везде. Нет никаких кнопок типа «Update style».
[Работа со стилями в Sketch]
Символы
Символы Sketch очень похожи на символы Фотошопа и чуть-чуть на символы Иллюстратора. Символ здесь — это такая папка (только другого цвета), внутри которой может быть что угодно, но не другой символ. Работает так же, как и стили: обновили в одном месте — автоматически обновляется везде.
Есть чуть замороченный и формально не документированный прием, как вкладывать одни символы в другие, но об этом в другой раз.
[Символы]
Удобный экспорт
Экспорт графики реализован очень просто и удобно. У каждого элемента есть действие «Make Exportable», где вы сможете выбрать нужные форматы и размеры конечных файлов. Есть и всем знакомые фрагменты (slices), чтобы вручную выделять область для экспорта.
[Фрагменты]
Очень удобный момент в экспорте — выбор сразу нескольких форматов и размеров.
[Параметры экспорта]
Сетка
В Sketch есть встроенная и гибкая сетка. Вам не нужно ни вручную, ни с помощью сторонних плагинов размечать макет. Все поддерживается из коробки и в любой момент может быть настроено под любые потребности.
[Настройки сетки]
Системный рендер текста
Благодаря тому, что Sketch использует системные ресурсы для отрисовки графики, текст в нем выглядит точно так же, как будет выглядеть в браузере в «живом» продукте.
Множество расширений на все случаи
Как и для всех приличных приложений, для Sketch тоже есть расширения. Действия — от простых (расставить выбранные объекты с шагом в 10 пикселей) до замороченных (найти все текстовые слои в документе со словом «адоби» и заменить его на «Adobe», без учета регистра). Если Sketch не умеет что-то очень нужное, то скорее всего «there’s plugin for that».
Чтобы поставить плагин, скачайте (обычно с Гитхаба разрабочика) и просто нажмите дважды или переместите в папку Plugins. Открыть папку: меню Plugins->Reveal Plugins Folder…
[Показать папку плагинов]
Потом в меню Plugins у вас появится соответствующий свежему плагину пункт
Вот небольшой список расширений, с которых стоит начать:
- Sketch Commands — большая пачка расширений, пригодится во многих ситуациях;
- Rename It — для удобного и быстрого именования и переименования слоев;
- Content Generator — генератор фото, текстов, имен, географических названий.
Вам может пригодиться небольшое приложение Sketch Toolbox, которое упростит установку/удаление плагинов.
Малый период обучения
Существуют в сети, конечно, курсы по Sketch (вроде бы даже платные есть), но в принципе вам хватит всего пары часов, чтобы самостоятельно разобраться во всех самых важных деталях. Поначалу будет непривычно, но только потому, что вы будете его сравнивать с Фотошопом.
Послесловие
Sketch, конечно, не идеален. Есть иногда тормоза, не хватает некоторых функций (нет растровых), но все же даже в таком состоянии он может сильно облегчить и ускорить вам разработку дизайна.
Скачать Sketch, а также узнать все о графическом редакторе Sketch вы может на сайте sketchapp.me
