Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.
Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался 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. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (31)
biziwalker
05.02.2016 21:25-1Для быстрого проектирования пользуемся Axure RP. Очень удобный софт при обсуждении проекта с заказчиком. После того как концепция утверждена, то все компануем в Photoshop, а для вектора используем Illustrator
Gray_Wolf
05.02.2016 21:31+1Как насчёт сравнения попроще:
Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов.
Сколько процентов поставленных задач можно решить каждым продуктом?
olegion
05.02.2016 22:42Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop. Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком.
Что касается фирменного стиля, то можно обойтись одним Photoshop. А если говорить про разработку интерфейса e-commerce например, то Sketch на пару с Axure может решить эту задачу.
damat
05.02.2016 22:19+1крайне странно не увидеть сравнение на тему того, насколько оба софта вообще подходят для разработки интерфейсов. Ребята из адоби твердолобики, и никак не могут понять, что smart object — это галимый костыль, а невозможность расшарить стиль на несколько слоев/групп с возможностью обновления — это, по сути, приговор быстрой работе.
с другой стороны, авторы скетча тоже те еще упертыши. Причина, по которой скетча нет на винде — это лицензирование и «невозможность» защиты. Только вот почему-то Balsamiq нормально себе живут подо всеми платформами.
0leGG
08.02.2016 08:34+1Легко назвать упёртостью нежелание переписывать вообще всё полностью с нуля. Sketch очень завязан на Core Graphics, во многом благодаря которому ему и удаётся весить 20Мб против 1Гб, выглядеть легковесно и нативно. Выпуск версии под Windows — это такая головная боль, которую они, всего скорей, не потянут.
damat
08.02.2016 14:38Я не до конца верно выразился. Я могу понять в условиях отсутствия на вине аналогов Core Graphic нежелание начинать с win-версии или сразу с кроссплатформенной разработки. Но сейчас есть вполне реальный риск потерять свой сегмент рынка, не имея версии под win. Прошло уже несколько лет, и за это время можно решить любые проблемы по разработке под винду, учитывая, что есть полное понимание, какой функционал требуется.
olegkrasnov
06.02.2016 00:37+4Со дня на день зарелизят Comet и разработку Sketch можно будет сворачивать.
Заодно начать применять Photoshop по прямому назначению (для ретуши).
Мне кажется, причина того что Комета взлетит — в кроссплатформенности и авторитете Adobe.
Zanael
06.02.2016 01:16+3Сперва отнесся к вашему комментарию негативно, но после того как посмотрел промо-материалы к Comet, стало грустно за Sketch.
Спасибо за наводку.
designiac
09.02.2016 16:59Есть еще ребята из Serif с их Affinty Designer (вполне конкурент иллюстратора и недавних пор и скетча тоже) и Affinty Photo (конкурент фотошопа в фоторетуши).
Semmaz
06.02.2016 01:28Заодно начать применять Photoshop по прямому назначению (для ретуши).
Не зря же в Photoshop'е пилят Design Space.
IMHO, рабочий процесс вполне может быть таким:
Comet (прототипирование) => Photoshop (доработка напильником и экспорт asset'ов).
Lsh
08.02.2016 15:54Может я и ошибаюсь, да и рано еще говорить до релиза, но мне кажется (по просмотренным материалам), что приложение в основном пригодно для модного плоского и простого дизайна. Если мода повернется обратно, либо просто надо нарисовать чего-то нестандартное (интерфейс игры со сложно текстурированными кнопками, например), то будет всё уже не так круто, как на презентациях.
Xu4
06.02.2016 06:22+2Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$, и для разных регионов эта цифра может изменяться.
Я покупал в конце декабря годовую подписку на именно Photoshop. Обошлось в 3588 рублей за весь год. План назывался «План Creative Cloud для фотографов (на один год, с предварительной оплатой, продление вручную)». Там доступен только фотошоп. Если поделить, получается 299 рублей в месяц. В долларах это, по текущему курсу, составляет $3,91. То есть, далеко не 20 долларов в месяц — в 5 раз меньше.olegion
08.02.2016 13:23Речь идет о «Плане на отдельное приложение» непосредственно для Украины.
Xu4
08.02.2016 14:13Обратите внимание на план слева от того, что вы обводили. Это как раз план, ограниченный фотошопом. Это во первых. Во вторых, у меня показывались такие же суммы в долларах, пока я не перешёл к оплате. Теоретически, у меня должно было получиться 120 долларов за год за «План для фотографов». Когда я перешёл к оплате, мне написали, что я должен заплатить 3588 рублей (иенно в рублях уже была написана сумма), и с карты у меня в итоге списалось после покупки $52.69 именно в долларах.
Опять же, про план: вы сами видите на картинке, что есть план конкретно для фотошопа, который стоит в два раза дешевле. Зачем нужно выбирать «План на отдельное приложение», если этим отдельным приложением у вас будет фотошоп? Ладно, если бы вы покупали Premiere или After Effects — для них нет отдельных планов. Но с фотошопом нет смысла переплачивать в два раза.Xu4
08.02.2016 14:23Хотя, вру. Списывалось с карты в рублях. Это у меня просто банк в отчёте показал сумму в долларах в $52.69. В детялях платежа всё-таки было написано, что снималось рублями.
Xu4
08.02.2016 16:16По поводу цен, по моим наблюдениям, Adobe старается не сильно привязываться к скачкам курса в странах, где есть их представительство. В Украине, например, представительство Adobe есть. В ситуации с рублём, они заморозили внутренний курс на, примерно, 30-ти рублях за доллар. Вполне может быть, что при при оплате с территории Украины гривнами, они посчитают курс $1 = 8грн. И, в итоге, вы вместо 20 долларов (для того плана, который вы обводили рамкой) фактически будете платить эквивалент 7-ми долларов, если я правильно понимаю текущий курс гривны.
i360u
06.02.2016 10:39-2Я сейчас, возможно, кого-то шокирую, но для дизайна интерфейсов лучше всего использовать HTML + CSS + JS + SVG + Polymer (веб-компоненты). Когда вы постигнете дзен создания макетов и прототипов сразу в коде, все эти споры по поводу фотошопов, скетчей, экшуров и бальзамиков будут вас только умилять.
medved6216
06.02.2016 12:51+1Не соглашусь с Вам. Когда Вы работаете со своим проектом — пожалуйста, Вы тут царь. Но когда Вы(студия) работаете по заказу, то зачастую только прототип созданный в редакторе(photoshop, sketch, axure RP и другие) будет наименьшей затратой человеческих ресурсов и времени, чем скажем уже верстать этот прототип в HTML + CSS + JS — заказчику может не понравится Ваша работа и придется переделывать.
i360u
06.02.2016 20:10Я говорю именно про промышленную разработку и участие в этой разработке на всех этапах жизненного цикла сложного продукта (CI в UX/UI дизайне). И я изначально не надеюсь на то, что эта моя, для кого-то ортодоксальная мысль, будет легко принята аудиторией, потому как на эту тему можно написать длинную статью, и трудно, наверное, быть убедительным в паре строчек комментария. Но я знаю о чем говорю, потому что уже давно именно этим профессионально занимаюсь. Фокус в том, что реальные трудозатраты при сопоставлении этих подходов вполне сравнимы, но в случае использования подхода «дизайн в коде», качество решений несравнимо выше, что существенно сокращает количество проблем (и, соответственно, трудозатраты) на следующих, более дорогих этапах и в принципе способствует гораздо более органичному рабочему потоку именно в командной разработке. А начинал я тоже с фотошопов с акшурами, да…
olegkrasnov
06.02.2016 19:55Только, чтоб адекватно и быстро мокапить в коде, надо хорошо знать HTML + CSS + JS + SVG + Polymer и много других опасных слов. А в sketch макет можно наклацать мышкой за пару часов с нулевыми знаниями кода.
i360u
06.02.2016 20:16Чтобы адекватно и быстро заниматься UX-дизайном в принципе нужно очень много чего знать. С нулевыми знаниями наклацать можно только примитивный лэндинг или страничку Васи Пупкина, которую сердитый фронтэндер вам еще десять раз вернет на доработку.
ko11ega
06.02.2016 19:45+1Просто для понимания того как может создаваться макет приложения из Polymer (веб-компонентов)
fo0x
08.02.2016 20:07+1благодаря Sketch я полюбил делать простые интерфейсы
фотошоп теперь и открывать не хочется
kamushken
09.02.2016 14:22мне любопытно, когда наконец первый дельный пост появится в UI хабе в этом году
EzS
Как по мне, не совсем корректно сравнивать приложения, одно из которых доступно только для OS X, а второе кроссплатформенно.
Scetch крут, был бы под винды, пользовался бы.