В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.

Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался Adobe Photoshop . Однако, недавно первенство компании Adobe на рынке инструментария для digital дизайнеров пошатнулось, в 2012 году компания Bohemian Coding выпустила Sketch . Sketch – это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих. На данный момент актуальной версией является Sketch 3. За эти 3,5 года компания Bohemian Coding проделала огромную работу по улучшению своего продукта, зафиксило множество багов, наростило функциональность и собственно выростила серъезного конкурента Photoshop. Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop . Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком. Поэтому правильно было бы сделать не сравнительный обзор, как это делают многие, а осветить основные преимущества и свойства каждого из редакторов для конкретного кейса.

Назначение

Именно поэтому считаю корректным первым пунктом показать назначение каждой из программ.
Photoshop в основном работает с растровыми изображениями , однако имеет некоторые векторные инструменты. Он незаменим для ретуши фото, обработки изображений. Но функционал предназначенный для работы с векторной графикой в нем достаточно условный. Многие поклонники Adobe возразят мне, но тогда возникает логичный вопрос: зачем в арсенале Adobe есть отдельный векторный редактор Illustrator, если Photoshop умеет все? Именно наличие двух интерфейсов усложняет работу и требует дополнительного времени при решении задач по работе с векторной графикой.
Sketch же изначально заточен на работу с вектором , поскольку разработка интерфейсов подразумевает создание прототипов, фреймворков, иконок, UI-элементов, а зачастую эти элементы должны быть векторными.
Таким образом, чтобы выбрать каким из редакторов пользоваться, нужно понять, какие задачи придется решать с помощью данного инструментария.

Стоимость

Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$ , и для разных регионов эта цифра может изменяться. Но суть остается та же. В отличии от Adobe компания Bohemian Coding пошла по обратному пути: Sketch продается за 99$ , это единоразовый платеж и все обновления пользователь получает бесплатно. Возможно в дальнейшем финансовая стратегия компании изменится, но пока они завоевывают рынок таким образом. Именно этот фактор, наверняка, сыграет роль в масштабах компании. Хотя и для фрилансеров немалозначимым является финансовое планирование своих ресурсов.

Мультиплатформенность

Еще одним значимым аргументом в выборе инструментария для дизайнеров станет платформа, на которой работает тот или иной софт. В нашей компании дизайнеры работают исключительно на Mac устройствах и большинство front-end разработчиков тоже. Поэтому тот факт, что Sketch существует исключительно для OS X , не стал для нас проблемой. А вот для дизайнеров, в распоряжении которых Windows устройства, это явно не решабельный вопрос. Конечно, можно заморочиться и поставить эмулятор OS X на винде, однако ничего путнего из этого может не получиться, максимум вы загрузите свой процессор и операционную систему обработкой ненужных процессов. В отличии от Sketch, Photoshop имеет отдельные версии для Windows и OS X . Поэтому в вопросе мультиплатформенности неизменным лидером остается Adobe Photoshop. Но, опять-таки, то, что на первый взгляд кажется недостатком, является сильным преимуществом в конкретных условиях. Поскольку Sketch существует только под Mac, в нем весь создаваемый контент отрисовывается с помощью средств маковской оси, используется стандартный графический движок от Apple. Именно этим разработчики добились максимальной продуктивности и быстроты работы.

Быстродействие и объем загрузочного файла

Являясь нативным Cocoa приложением, Sketch по минимуму использует нестандартные интерфейсные элементы, поэтому он имеет маленький объем. Загрузочный файл весит всего около 22 Мб . Он достаточно хорошо оптимизирован, в отличии от Photoshop, объем установочного файла которого составляет около 1 Гб .

Интеграция

Важным моментом для любого инструментария является его способность интеграции с другим софтом. Например, после того, как макет сайта полностью проработан и готов к передаче в отдел front-end разработки, становится вопрос непосредственно самой передачи исходников для дальнейшего развития проекта. На сегодняшний день и Sketch, и Photoshop имеют серьезные средства интеграции. Оба редактора могут экспортировать материалы в софт для коммуникации между разработчиками и дизайнерами, такие как Avocode , Zeplin и прочие. Если рассматривать этот кейс для компании, то данное решение крайне важно, оно помогает сэкономить деньги на дополнительные экземпляры графических редакторов для front-end разработчиков.

Обучение

Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников . Существуют обучающие ресурсы как платные, так и бесплатные. Качество материалов также очень сильно разнится: от примитивных статей неавторитетных авторов до идеально структурированных последовательных видеоуроков квалифицированных профессиональных тренеров. В силу того, что Sketch относительно молодой софт, то и количество обучающих ресурсов не сравнимо меньше , чем у Photoshop. И, как правило, это платные материалы. Например, на известном образовательном ресурсе Udemi менее 40 курсов по Sketch. Однако, уже существуют и обзор от практиков Sketch . Надеюсь, со временем количество обучающих метриалов в сети будет увеличиваться прапорционально с ростом популярности графического редактора Sketch.

Конкуренция – двигатель прогресса

Существует масса других параметров и характеристик Photoshop и Sketch, охватить их все достаточно сложно, но вывод однозначен: каждый из рассмотренных мною графических редакторов хорош для решения конкретной задачи. Если рассматривать разработку интерфейсов, то мы в компании для себя сделали однозначный выбор в пользу Sketch. Этому способствовал комплекс факторов, перечисленных в данной статье. Photoshop по прежнему является лидером в работе с растровой графикой, но нельзя игнорировать тот факт, что появление Sketch дало сильный толчок в развитии Photoshop. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, – это статья для вас.

Во-первых , мы немного познакомимся со Sketch – что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых , изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих , мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).

И, наконец , я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?

1. Почему Sketch?

Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.

Но за последние годы Sketch значительно развился – и его возможности сейчас выходят далеко за рамки создания макетов экранов. Как молодой продукт, созданный специально под нужды сегодняшнего дня, в нем нет всего этого ненужного мусора, как в наборе продуктов Adobe Creative Cloud.

• Ресайз фигур с помощью горячих клавиш
• Дублирование элементов
• Смарт-выделение
• Группировка и разгруппировка элементов
• Прямое выделение в группах
• Настройка 100% масштаба
• Показать все артборды
• Перенос объектов на передний или задний план
• Переименование

• Измерение расстояния между элементами
• Настройка непрозрачности с помощью числовой клавиатуры
• Изменение радиуса каждого угла отдельно
• Настройка нестандартных горячих клавиш
• Использование математических операций внутри полей ввода
• Составные фигуры
• Команда для поворотного копирования
• Слайсы
• Экспортируемые элементы и артборды
• Экспорт исходников для экранов retina

• Позиционирование объектов “за гранью”
• Комбинирование света и тени для задания глубины
• Имитация складчатой поверхности
• Создание резких теней
• Расстояние между объектом и его тенью
• Множественные источники света
• Линия горизонта
• Наложение объектов

И, наконец… проработайте эти уроки по Sketch. Они на русском языке

Серия уроков от Marc Andrew

Создание мобильных приложений в Sketch от Marc Andrew

Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.

3. Более продвинутые приемы работы в Sketch

Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!

Освоение кривых Безье

Как я упоминал ранее, Sketch – это векторный графический редактор, а это значит, что все объекты в Sketch состоят из точек и кривых. Чтобы ощутить всю ценность Sketch, вам нужно научиться управлять этими точками и кривыми. Это позволит вам рисовать сложные фигуры, например, орнаментированные буквы, с нуля.

Создание символов

Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.

Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:

Продвинутые опции ресайза

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

Вот возможные опции:

• Stretch (растянуть): объект будет отресайзен пропорционально общим размерам группы. Это метод по умолчанию, обычно именно такого эффекта вы и ждете от ресайза.
• Pin to corner (прикрепить к углу): размер объекта будет изменен, но его положение не изменится (по отношению к ближайшему углу)
• Resize object (ресайз объекта): размер объекта будет изменен на то же пиксельное значение, на которое ресайзится группа. Если группа становится на 50px шире, то и объект станет на 50px шире.
• Float in place : объект не будет отресайзен при ресайзе группы, но он изменит свое положение пропорционально общим габаритам группы.

Которая все больше привлекала к себе внимание.

Я думал, что, как и многие прочие новинки со стоимостью около $99 наApp Store ,Sketch 3 окажется илисреднячком , или вообще пустой тратой денежных средств.

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

Именно поэтомуSketch 3 так стремительно стал моим лучшим другом.

Пусть странички подарят вам свободу

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

Это просто изменит вашу жизнь. В случае если вы уже используетеIllustrator , то вы в курсе пользы возможности создавать дизайн одновременно на несколькихартбордах в одном файле.

А также вы знаете, как сильно может раздражать такое:

• Нет никакого способа организацииартбордов , кроме их визуального группирования.
• Ограниченный размерканваса говорит о том, что всеартборды могут и не поместиться.
• Лимит в одну сотнюартбордов не подходит для крупных проектов.
• Крупные файлы работают довольно медленно и могут даже завалить систему.

ОткройтеPages в программеSketch 3. Странички по сути являются эквивалентом наличия целого множестваканвасов (причем неограниченных в размере) вIllustrator .

Вот почему это так отлично:

• Группироватьартборды вместе также легко, как группировать слои.
• Артбордов можно делать так много, сколько вам необходимо.Артборды и страницы не ограничены в числе, и их число не влияет на работоспособность приложенияSketch 3. Программа не тормозит по мере роста вашего проекта.
• Интеллектуальное выравнивание (каксмарт-гайды в программеIllustrator ) вам помогает соблюдать равные отступы междуартбордами . В случае если вы одержимы порядком, тоSketch 3 относится к этому с большим пониманием.

Как я использую странички

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

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

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

Адаптивная сетка, встроенная

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

ПриложениеSketch 3 называет это все такжеLayout (Макет), и вы можете включить, либо отключить сетку при потребности, на каждомартборде .

Layout Settings (то есть Настройки макета) дают возможность делать настройку переменных размеров сетки, правда я, как правило, указываю лишь два параметра, и даюSketch 3 возможность рассчитать все прочее уже самостоятельно. Эти два параметра - этоGutter Width (то есть Ширина канавки) иTotal Width (то есть Общая ширина).

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

Рекомендация : Применяйте настройки сетки сразу к несколькимартбордам , либо всемартбордам на страничке сразу, выделяя их перед выбором менюLayout Settings .

Разумеется, есть шаблоныIllustrator иPhotoshop , которые можно легко скачать с уже готовыми сетками, однако:
1) Вам могут потребоваться другие размеры борозд, либо более широкие строки.
2) Они обычно выполнены для одного размера дисплея (десктоп ) и не включают меньшие версии для мобильного или планшета.
3) Вам все-таки надо будет копировать и вставлять их в каждыйартборд . А это отнимет достаточно много времени. А что если вы решите сменить их во время работы? Если необходимо высчитать параметры ячеек для какой-то нестандартной сетки под различные ширины дисплея, как же увлекательно заниматься этой математикой… За это все вы можете захотеть воспользоватьсяонлайн-инструментом для сеток, однако здесь опять столкнетесь с проблемой № 3.

Вот как выглядит моя страница для адаптивных размеровартборда с активированным сеточным макетом:

Артборды с включенной функциейShow Layout

Ускоряйте процесс со стилями текста и слоя

Вы уже знакомы с текстовыми стилями. Вы знаете, что задаются конкретные стили для основного текста, заголовков. В InDesign иIllustrator такое есть. Даже в текстовых редакторах есть предустановленные стили.

Крайне важно соблюдать втипографике постоянство во всем проекте для того, чтобы было единство стилистики полностью во всех его элементах. Это помогает существенно минимизировать время на создание дизайна. Стилизация текстов в программеSketch 3 помогает добиться этого при помощи построения перечня стилей для любых вариаций текста.

К примеру, базовый перечень может выглядеть приблизительно таким образом:

• Navigation Link
• Body copy
• Body copy link
• Button text dark
• Button text light

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

Это доступно и в программеIllustrator , однако реализация достаточно громоздкая и не очень интуитивная. ВерсияSketch 3 намного проще для понимания и использования, в перечне стилей сразу виден их внешний вид, а это сильно экономит время.

Нет, я совсем не забыл о стилях слоя . Они просто невероятны, если не сказать больше! По сути, это то же, что и стили текста, однако в стилях слоя задается контур, заливка, непрозрачность, режимблендинга , тени.

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

Я также считаю стили слоя очень полезными для макетирования, когда необходимо создать новые заглушки в одинаковом визуальном стиле с теми, которые я использовал раньше.

Изобилие плагинов

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

Вот перечень моих фаворитов:

Framer JS (десктопная программа) - мощное средство для прототипирования, позволяющий использовать код (CoffeeScript) для настройки микровзаимодействий и тестировать новые интерактивные концепты без потребности предварительно верстать дизайн CSS и HTML. Это качественное прототипирование в наилучшем его виде. Применяйте его для прототипов под компьютеры, смартфоны и что угодно другое с установленным браузером. В случае если вы не знакомы с CoffeeScript, Framer предоставляет специальную документацию, уроки, а также встроенный текстовый редактор вам в помощь. Применяя Framer, я впервые ознакомился с CoffeeScript, и это знакомство прошло весьма безболезненно.

UXPin (веб-приложения) - средство для и безболезненного прототипирования. В UXPin предлагается прекрасный интуитивный веб-интерфейс с полной поддержкой синхронизации вашего проекта с файлами Sketch 3. Добавление переходов, реалистичных взаимодействий здесь реализовано очень просто. Знакомые практически любому дизайнеру выпадающие меню и кнопки, помогут за пару секунд создать высокоточные прототипы.

Zeplin (десктопное, веб-приложение) - когда дизайн полностью готов для разработчиков, то вам остается лишь экспортировать арборды в Zeplin, а он уже позаботится обо всем. Zeplin показывает разработчикам, какие шрифты и цвета вы используете по всему проекту, отображает расстояния между всеми объектами, которые можно узнать, наведя для этого курсором на объекты. Также делает Sketch 3, в случае если при этом удерживать клавишу Option Alt.

Исходники каждой картинки можно легко экспортировать изZeplin без потребности заранее экспортировать их из программыSketch 3. Разработчику вообще не потребуется использовать приложениеSketch 3. Это главное средство, которое сэкономит ваше время, и при этом предоставит разработчикам все нужное для интеграции дизайна в код продукта.

Sketch Toolbox - находите расширения и устанавливайте их при помощи этого легкого и быстрогоприложения-компаньона . Сейчас нет лучшего метода для поиска нового полезного расширения их установки, либо удаления. Это также крайне необходимый инструмент для всех пользователейSketch 3.

Мастерски экспортируйте исходники

Простой и быстрый экспорт исходников - это одна из особенностейSketch 3. Надо ли вам экспортировать всего одинзначек или все сразу, необходима ли версия @1x PNG или же сразу несколько в @1x @2x и @3x плюсSVG-версия , экспорт будет быстрым и легким. Кликните на слой, потом кликните на кнопку“ Export +”, установите настройки для размера, формата и префикса. Вы можете даже перетащить мышкой объект с окна приложения на рабочий стол, а исходник сохранится на рабочем столе.

Также вы можете перетащить его в поле загрузки ввеб-браузере (попробуйте для того, чтобы увидеть, что именно я имею в виду). Поддержка экспорта сразу в несколько форматов одновременно (JPEG, TIFF, PNG, PDF, EPS, SVG), а также несколько размеров (1x, 2x, 3x, 0.5x,custom x , либоmax height /width ) - тоже удивительно просто!

Вы можете просто экспортировать весь набор исходников за одну операцию, и приложениеSketch 3 запомнит все настройки, которые были выбраны вами для каждого из них.

Настройки экспорта при выделенном слое

Документация? И это вы можете

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

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

Это крайне полезное средство. Испробуйте его сами, оно реально помогает!

Добавление аннотаций при помощи

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

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

Вам надо будет удалять ранее созданные и повторно их

25 лет назад, 19 февраля 1990 года, братья Джон и Томас Нолл запустили небольшую программу, которая соединила компьютер со сканером. Проект назвали Photoshop. На протяжении двух десятилетий он был монополистом на рынке графических программ, а слово «фотошоп» стало нарицательным.

Однако, вероятно, первенство Photoshop пошатнулось. Сейчас многие веб-дизайнеры переходят на Sketch - продукт, созданный специально для UI-специалистов. Шеф-редактор сайт пообщался с разработчиками интерфейсов и выяснил, готова ли индустрия сменить поставщика программного обеспечения.

«Для меня переход с Photoshop на Sketch был крайне болезненным, - рассказывает Артур Касимов, продуктовый дизайнер "Яндекса". - Я, что называется, человек старой закалки. Помню ещё ранние версии Photoshop». За 25 лет Photoshop стал стандартом для индустрии веб-дизайна, несмотря на «вес» (программа занимает больше 1 Гб дискового пространства), невостребованные функции в интерфейсе и чрезвычайно запутанную процедуру покупки, на которую даже жаловался создатель соцсети «ВКонтакте» Павел Дуров.

Adobe также выпускает векторный Illustrator, из-за чего разработчикам интерфейсов часто приходилось постоянно держать открытыми сразу два редактора. «Кто-то выходит из этой ситуации выбором в пользу Illustrator, но в силу сформировавшихся привычек было жалко время на это», - рассказывает UI-специалист Антон Фролов.

«Photoshop cоздавался и развивался, как софт для фотографов. Потом его напичкали всем, что только в голову пришло. От этого редактор стал похож на неповоротливого бегемота», - считает продуктовый дизайнер «Яндекса» Артур Касимов. Сложности возникали и со скоростью работы и с производительностью. Например, макеты, содержащие большое количество слоев, заметно замедляли процессы в Photoshop. Особо ощущались «тормоза» при одновременной работе над несколькими макетами.

Кроме того, для создания стандартных интерфейсных элементов - таких как кнопка Mac OS, выпадающий список в браузере или прямоугольник с закругленными краями - приходилось проделывать иногда с десяток действий. Все это отражалось на скорости работы дизайнера. «Photoshop и Illustrator не заточены под веб-дизайн. Поэтому проектирование интерфейсов и любые попытки сделать что-то внятное иначе как костылями не назовешь», - считает UI-специалист компании MacPaw Дмитрий Новиков.

Впрочем, на рынке появлялись альтернативы Photoshop: GIMP, Krita, Paint.NET и другие. Однако они не могли предоставить даже близко необходимый набор инструментов для проектирования интерфейсов, считают UI-специалисты.

Появление Sketch

Несколько лет назад разработчики компании Bohemian Coding выпустили программу для Mac OS под названием Sketch . Первое отличие, сразу бросавшееся в глаза - приложение являлось альтернативой Photoshop, однако его интерфейс был больше похож на программу из пакета iWork - нативные иконки из Cocoa, минимальное количество инструментов на панели, единственный блок настроек, подстраивающийся под действия пользователя.

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента - эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Благодаря этому даже последняя версия программы занимает всего 42 Мб на диске.

Однако с первыми версиями оказалось не всё так гладко. Многие дизайнеры заметили новинку, но побоялись отказаться от Photoshop. Тогда еще разработчики Sketch не могли определиться, для кого они выпустили продукт - поэтому часть функций напоминала графический редактор, другая часть - приложение для создания сайтов. Sketch 2 расставил нужные акценты - программа была ориентирована на UI-специалистов. Но её бедой было большое количество багов.

«Мы пробовали переходить на Sketch еще в конце 2013. Но это была его вторая версия - очень глючная. Мы убили кучу времени и тогда пришлось вернуться обратно в Photoshop», - рассказал руководитель отдела проектирования и дизайна интерфейсов Mail.Ru Group Юрий Ветров.

Появление отлаженной третьей версии Sketch привело к началу популяризации программы среди специалистов.

Sketch

«Sketch очень оптимизирован - в одном документе могут быть отрисованы десятки экранов приложения, доступные для редактирования без лишних действий, и никакой просадки в производительности, - рассказывает Антон Фролов, - Кроме того, очень продуманный интерфейс, ощущение, что это софт от тех, кто в нем же и нуждается - быстрое отображение отступов, удобная работа с символам и стилями, параметрами элементов, интуитивные шорткаты и так далее».

Например, в Photoshop дизайнерам приходилось постоянно подстраиваться под пиксельную сетку, чтобы избавиться от размытых краев объектов. Разработчики Sketch добавили автоматическую привязку контента к сетке, благодаря чему удается избегать размытых краев и других неровностей.

Другой пример - скругленные края у прямоугольных объектов. В Photoshop задать скругление можно было только перед отрисовкой объекта - в случае необходимости дизайнерам приходилось менять положение кривых вручную по пикселам. В Sketch предусмотрели возможность настройки скруглений слоя в любой момент через панель настройки.

В последней версии Sketch появилась еще более глубокая интеграция с нативными средствами Mac OS X: поддержка iCloud, Time Machine, автосохранения, нативный рендер шрифтов, трансляция макетов на мобильное устройство.

«Cамое главное, на мой взгляд - продуманный интерфейс нарезки графики, который парой кликов позволяет указать, в какие папки, с какими именами и размерами нарезать графику. По умолчанию поддерживается нарезка для iOS и Android, но можно добавить и свои форматы», - делится своим опытом Антон Фролов.

Кроме того, часть работы в Sketch можно автоматизировать при помощи плагинов. Например, Measure и InVision, которые позволяют быстро и удобно подготавливать спецификацию для разработчиков. «Со Sketch я стал больше заботиться об автоматизации работы. Многие вещи, которым раньше уделял много времени и внимания, сейчас делаю с помощью плагинов, стараюсь найти более простой и быстрый способ решения задачи», - рассказывает Артур Касимов.

Переход на Sketch

«Преимущество Sketch - низкий порог вхождения, буквально любой может научиться работать в нем за пару дней», - считает UI-специалист компании MacPaw Дмитрий Новиков. - Важно, что здесь вы занимаетесь непосредственно дизайном, а не работой в редакторе - то есть сама программа становится незаметной, и вы можете сосредоточиться на создаваемом продукте».

Переход с Photoshop на Sketch, однако, может оказаться непривычным. «Я настолько привык к Photoshop, что от одной мысли о других графических редакторах мне становилось как-то не по себе, - рассказывает Касимов. - Ситуация осложнялась тем, что мои коллеги-дизайнеры, с которыми я тогда работал, уже перешли на Sketch и всячески его хвалили. Они подкалывали меня, смеялись. Но я продолжал придумывать отмазки (в первую очередь, для самого себя). Сначала я говорил, что перейду, когда сделают "зум" колёсиком мышки, потом уверял себя, что по окончанию проекта с Photoshop будет покончено. Я и сам видел, что скорость работы в Sketch у моих коллег возросла».

Новиков рассказывает, что ему удалось быстро перейти на новый инструмент благодаря радикальному решению - он удалил всё со своего Mac и оставил только Sketch: «Всего неделя и как будто всю жизнь в нем работал».

Одна из трудностей, по мнению продуктового дизайнера «Яндекса» Артура Касимова, заключалась в непривычных «шорткатах» Photoshop - в Sketch они по умолчанию были другими: «Я не сразу догадался вручную подстроить всё под себя. Но когда сделал это, скорость работы заметно возросла».

Также пользователям Photoshop будет непривычен принцип работы с векторными объектами - в Sketch он больше похож на Illustrator: «К этому я привыкал довольно долго. Но сейчас понимаю, что этот принцип лучше. Значительно лучше», - считает Касимов.

Отказ от Photoshop

Sketch - не идеальный продукт, считают многие опрошенные ЦП UI-специалисты. В программе все еще много багов. В интернете есть даже отдельные ресурсы, которые собирают ошибки и мониторят их исправление.

«Не хватает инструментов для командной работы, что очень актуально для студий и компаний с отдельными командами дизайнеров», - жалуется Фролов. Кроме того, в Sketch практически отсутствует работа с растром, что в некоторых задачах пока не позволяет полностью отказаться от продуктов Adobe.

«Я считаю, что не нужно отказываться от хорошего инструмента, - отвечает Дмитрий Новиков на вопрос об отказе от Photoshop. - Sketch не заменяет Photoshop полностью, он отлично подходит для создания сайтов и интерфейсов, но это не значит что я не могу пользоваться продуктом Adobe для подготовки фотографий или 3D-редактором для моделирования и рендера».

Однако учитывая низкую, по сравнению с Photoshop, стоимость приобретения Sketch ($99,99), Adobe может потерять большой кусок постоянных клиентов в лице UI-специалистов, считают дизайнеры.

Разработка современных приложений немыслима без работы дизайнера, а дизайнеру для работы необходимо соответствующее программное обеспечение. В основном для разработки дизайна используются Adobe Illustrator, Photoshop и другие профессиональные графические редакторы, но есть и специализированные решения. Недавно вышла третья версия векторного редактора Sketch, ориентированного в первую очередь на создание графики для программ. Чем же отличается этот специализированный векторный редактор?

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

Благодаря тому, что Sketch - родное OS X приложение, вы всегда можете воспользоваться iCloud и локальными версиями документов. Программа очень легкая, быстрая и отзывчивая.

Кстати, Sketch настолько хороша, что даже разработчики Adobe используют ее 🙂

Название: Sketch 3
Издатель/разработчик: Bohemian Coding
Цена: 2690 руб.
Встроенные покупки: Нет
Скачать: