Почему нужно перейти на Sketch. Преимущества Sketch.

История давно минувших дней. Годами используя различные программы, я решила скачать Sketch. Чтобы не усложнять жизнь ни мне ни программе, наше знакомство обошлось демо-версией. И как принято говорить «Первое впечатление нельзя произвести дважды» и «Встречают по одежке», в моем случае оказались провальными. Совсем меня не впечатлила эта программа. Как-то все подозрительно просто, по сравнению со сложным и напичканным всякими функциями интерфейсом Adobe. Короче говоря WOW-эффекта не получилось. Я немного поиграла с демкой, удалила и забыла про нее совсем. Но потом пожалела..

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

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

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

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

Пораскинув мозгами, вспомнила про Sketch. Узнала, что там для слоев есть свойство Background Blur, позволяющее просто добиться необходимого эффекта матового стекла на полупрозрачных панелях без применения каких-либо хитростей.

Скачала программу третий раз, причем полную версию. Как уверяли разработчики, в этой версии глюков и недоразумений не предвидится. Я твердо решила свитчнуться из фотошопа во что-то более подходящее, несмотря на то, что продукту от Adobe я была верна целых 10 лет.
Наглядный пример сравнения паленей в Photoshop (верхний) и Sketch (снизу).

Итак, приступим. Исходными данными являлся макет в формате EPS. Очень примитивное векторное изображение.

Фотошоп в этом случае может мне предложить только редактировать этот объект в Adobe Illustrator. Крайне неудобно. Приходится бесконечно, копировать/вставлять, переносить, скрывать, вращать объекты. Затем пришлось собрать все элементы до кучи в Иллюстраторе и по отдельности переносить обратно в фотошоп. Это оказалось очень утомительным занятием, которое еще и увеличило вес моего макета больше чем в 5 раз. Такие удобства предлагает своим пользователям разработчики Adobe.

Почему же не выполнить всю работу в Иллюстраторе, спросите вы. Как-то у нас с ним не сложилось. Такое же напичканный элементами (в большинстве случаев абсолютно бесполезными), да и производительность отвратительная. В итоге он мне нужен как промежуточное звено (лично для меня), но не основной программы для дизайна.

Я просто перезаписала свой макет из формата EPS в SVG и открыла в Sketch. Загрузка прототипа пролетела моментально, без ущерба качеству. Все группировки векторных форм сохранились, и работать было одно удовольствие. Я сохранила проект в формате .sketch и он оказался немного больше исходника (7.5 мб), по сравнению с 40 мб в формате .psd.
Как настоящий Шерлок, я изучила скорость запуска в обеих программах, занимаемый вес, времен записи и скорость выхода из программ.
Результаты в таблице:

Абсолютным лидером по всем показателем считается Sketch. Аплодисменты.

Еще одним преимуществом оказалось то, что у них практически совпадают горячие клавиши. Даже спустя время, мне пришлось использовать фотошоп, и я по привычке хотела воспользоваться скетчевскими шорткатами.
Далее пришло время создать то самое окно с эффектом полупрозрачного матового стекла.
Так получилось в фотошопе, не прошло и года.

То же самое в Sketch за считанные минуты. Размер файла в этом случае меньше ровно в 10 раз.

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

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

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

После того, как я создала десяток таких всплывающих окон, размер в Скетч вырос до 700 Кб, по сравнению с соответствующим фотошоповским в 20 МБ.

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

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

В Sketch такого феномена не существует.Блок всегда остается на своем месте, меняется лишь расположение текста внутри самого блока.

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

Дополнительных трудностей создавала работа с размерами объектов. Если например, необходимо вставить большое количество изображений разного размера, превратить их в смарт-объекты и сделать одинаковой высоту, начинались мои трудности.

Каждый отдельный элемент необходимо было редактировать вручную. На панели инструментов размер указывается в процентах, а мне нужно в пикселях. К тому же функция пропорционального масштаба всегда по умолчанию отключена, и из раза в раз нужно было ее включать.
Практически всегда фотошоп отлично справлялся с масштабированием. Иногда попадались варианты 99 и 101 пиксель. В Sketch, вы задаете определенное количество пикселей. Никаких расхождений.
Присутствует очень интересный способ распределения объектов – это создание сетки. Для этого выделяем необходимые элементы:

Далее выбираем команду Arrange > Make Grid.

Объекты автоматически распределяются с указанным отступом.

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

При этом размер бокса автоматически определяется программой под самый большой размер из выделенных объектов. А последние, будут автоматически расположены по центру бокса. Хорошая функция для распределения неодинаковых по размеру объектов.

Еще один лайфхак. Если вы нарисовали разносторонний треугольник, одним движением руки он может стать равнобедренным нажав на инспекторе чекбокс Equilateral.

На сегодня все. Продолжение следует..

По материалам: www.webdesguru.com