Sketch. Часть 1

Годами используя различные программы, но я решил скачать 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.

Скетч

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

Обсуждение закрыто.