Автор: Greatmatis

В Юду у меня кардинально поменялся рабочий процесс. В основном, конечно, из-за перехода на Скетч. По рабочим и этическим причинам не смогу показать на примере наших боевых дизайнов. Уверяю, что описанные процессы использую постоянно, без надуманной рекламной выдумки.

Понял, какой подлог «векторность» Фотошопа. Ещё в Юзерстори ПМ Женя (в прошлом дизайнер, но показавший мне, что бывших дизайнеров не бывает) приучил меня использовать векторные маски. То было давненько, я много чего не знал, в том числе о таких векторных инструментах в Фотошопе. Женя так и говорил — векторные маски. Я не понимал, почему он так называет эти сущности: вот обычный прямоугольник, вот обычный круг. Понятно почему векторные, но почему маски? Что маскируется-то?

Только теперь стало доходить. Фотошоп, хоть ты тресни, растровый. То, что я понимал под гибридностью, мол, есть место и вектору, есть место и растру, оказалось условной правдой. Когда мы рисуем прямоугольник, Фотошоп именно что создаёт маску, которую потом наполняет самым, что ни на есть, растровым содержимым. Это может быть монотонная заливка, это может быть градиент, это может быть паттерн — суть одна.

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

Отсюда вес фотошоповских макетов, отсюда его неповоротливость по сравнению с Иллюстратором при схожих операциях. Считай векторные маски просто помогают тебе редактировать тот же тяжеловесный растр. Рисовать интерфейсы таким инструментом начинает казаться неуместным. Да, Фотошоп может это делать. Да, при наличии сильного аппарата он может это делать шустро. А в голове всё равно свербит, что работаешь не тем инструментом.

Это такое долгое приветствие Скетча. Честный вектор. Смешной вес макетов. Лёгкость проектного файла позволяет создавать большое количество артбордов. Можешь хоть всё приложение/сайт в одном файле хранить: на микроуровне распределять контент артбордами, на макроуровне раскидывать по страницам.

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

После Скетча, где у тебя весь продукт на артбордах в одном лёгком файле, открывать по одному экрану тяжеленным проектным файлом Фотошопа кажется абсурдным. Хочешь поменять что-то общее для всех экранов? В Фотошопе есть вложенные смарт-объекты, но это изменения в разных файлах, а не в одном, как у Скетча. Здесь у Фотошопа проблема на уровне философии. Это лишний раз наталкивает мысль: Фотошоп просто не для того.

Да, в Скетче пока кое-чего нет. Без плагинов геморройно работать с абзацами: нет абзацного отступа, нет настройки интерлиньяжа для конкретной строки блока тектса. Работа с шейпами пока непонятная: не могу на 100% понять как работают булевы операции в Скетче — для рисования иконок использую Иллюстратор, где эта же вещь предсказуема. Да и вообще в каждом чейнджлоге нет-нет да найдёшь фичку, о которой думаешь: «А как они раньше то без этого работали в Скетче?».

Всё ещё не считаю эти проблемы перевешивающими в сторону Фотошопа. С какой-то стороны, и я серьёзно, эти изъяны Скетча можно разглядывать как пользу. Ведь кастумизация каждой конкретной строки абзаца в Фотошопе лишний раз загадывает загадку верстальщику: что за надстроек дизайнер туда понапихал? Скетч заставляет тебя показывать явно. Тупо приходится выделять отдельный текстовый слой: отодвигать его вправо, если это красная строка, двигать текст под ним, если он подразумевает свой особенный отступ. Гемор? Так-то да. Но вот верстальщик пропустил особенность очередного хитронастроенного абзаца, и вот он ты уже тратишь время на объяснение.

Рядом ещё одна тема: связка Скетча и Zeplin. Цеплин расшифровывает макет для верстальщика. Выдаёт ему CSS и ассеты. Цеплиновское представление макета висит в облаке: любой участник цикла может смотреть дизайн где угодно. Таким образом Цеплин выполняет ещё и роль показывалки дизайна: cmd+E из Скетча и все специалисты видят выбранный в Скетче холст.

Фотошоп тоже подключается к Цеплину, но фотошоповские макеты весят по 50–100 мегабайт, а то и больше — экспорт в Цеплин занимает вечность. Скетчевские пара мегабайт прыгают в Цеплин на счёт раз.

Моя любимая фишка Цеплина это выдача графики верстальщику или ещё какому технарю. Наш иос-программист работает в Икскоде. По неведанным причинам эта среда понимает векторную графику только в ПДФ. Мне казалось, что это формат для больших многостраничных документов. Причём тут графика для приложений? Ну может я предвзят и не знаю чего. Как бы там ни было, это не проблема. Указываю в Скетче какую графику отдавать в ПДФ. В качестве фолбека указываю нарезать ещё несколько ПНГ разных разрешений — всё это за 4 клика. Цеплин понимает эти указания, и, где бы я или программист не были, графика легко достаётся из цеплиновского облака. Технарь не ищет в какой группе слоёв у меня спрятана иконка. Он кликает в Цеплине на иконку и получает её во всех нужных форматах.

Ещё в инструментарии появился Framer. Ранее, чтобы не объяснять анимации на пальцах, я использовал Афтер Эффектс. Это лучше чем ничего — не прибегаешь к словесному описанию: вот эта фигнюшка сюда вжих, а вон та хреновина такая прыг-прыг… Но технарю по-хорошему этого всё ещё недостаточно. Надо ж увиденную анимацию в код перенести, а гифка применима не всегда. И тут ты либо оставляешь анимацию на откуп его пониманию, либо таки чётко указываешь начальные/конечные координаты, тайминги и кривые анимаций. Здесь и помогает Фреймер. Он позволяет на простом псевдокоде смоделировать анимацию и даже простенькую интерактивность. Технарь смотрит листинг и забирает из него всё что ему нужно.

Что Скетч, что Фреймер быстро показывают дизайн прямо на устройстве. Это совсем кайф. Об удобной области тапа или удобоваримом кегле больше не догадываешься, сразу смотришь на аппарате.

Вот такие перевороты, а это только второй месяц на новом месте. То ли ещё будет.