Почему UI-специалисты отказываются от Photoshop и переходят на Sketch. Не работает с растром. Вот почему это так отлично

В последнее время вопрос инструментария 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. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

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

Я думал, что, как и многие прочие новинки со стоимостью около $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 вы сможете добавить аннотации для каждого изартбордов . Он также позволяет вам с легкостью включать, либо отключать их или дажеперестилизовать внешний вид аннотаций, что позволяет их использовать вбрендированном виде для различных презентаций. Я не могу даже выразить словами, как круто это экономит время.

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

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

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

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

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

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

В последнее время вопрос инструментария 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. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

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

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

Фотошоп - как швейцарский нож

Несколько месяцев назад я задумался об альтернативном решении и нашел его: программа «Sketch 3». Ниже я расскажу об особенностях программы на личном опыте.

Что такое Скетч

Скетч - векторный графический редактор. В отличии от многофункционального Фотошопа, Скетч задуман как узкое нишевое решение для дизайна интерфейсов, сайтов, приложений и иконок. Программа доступна только для платформы Mac OS X и стоит 99$.

Разработчики - компания с интересным названием «Bohemian Coding». В команде работают всего десять человек, а офис находится в Гаагах. На мой взгляд это хорошо: небольшая команда проще адаптируется к изменениям в индустрии и больше прислушивается к нуждам пользователей, чем огромные корпорации.

Интерфейс

У Скетча минималистичный интерфейс. Даже слишком - после других программ-собратьев он выглядит как минимум непривычно, а пустота даже немного пугает. Когда открыл программу в первый раз, подумал: «текстовый редактор, что ли? ».

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

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


Минималистичный интерфейс

Организация проектов

Больше всего я тащусь от внутренней организации проектов. Для этого в Скетче придуманы страницы («Pages ») и доски («Artboards »). Последнее я называю просто артбордами, без перевода.

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

Я делаю так: на страницах располагаю действительные страницы сайта - например, «главная», «каталог», «контакты». А внутри каждой страницы делаю артборды под разные разрешения экранов и состояния элементов.

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


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

Символы

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

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



  • Если изменить выравнивание текстового слоя, то текст не съезжает, а остаётся на месте. Мелочь, но в Фотошопе иногда бесила:-)
  • Скетч быстрый. То ли сказывается нативность приложения под OS X, то ли отсутствие тяжелого обвеса функций, не знаю. Но факт - приложение работает на порядок быстрее и плавнее Фотошопа.

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

Вёрстка из макетов

Первый сайт я нарисовал в Скетче буквально на одном дыхании, не переставая удивляться: «ух ты, здесь всё такое классное!». Но дизайн - лишь один этап в создании сайтов, впереди еще вёрстка и разработка.

Когда дошла очередь до экспорта проекта, я наконец-то увидел форматы файлов: JPG, GIF, TIFF, PDF, EPS, SVG. Формата PSD-то нет. Скетч - программа только для Мака, а наш разработчик Максим- на Виндоусе. Понимаете, да? :-) «Упс!»

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

AKVIS Sketch позволяет превратить фотографию в карандашный рисунок.

Теперь не нужно виртуозно владеть карандашом, чтобы создать оригинальное произведение искусства.
Достаточно иметь немного фантазии и AKVIS Sketch !

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

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

Если вы всегда мечтали научиться рисовать, но не знали как, попробуйте AKVIS Sketch !


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

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


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


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

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

AKVIS Sketch позволяет каждому почувствовать себя художником!


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

С помощью закладок Фон , Холст и Надпись можно добавить дополнительные эффекты на изображение: получить сочетание фотографии и рисунка , имитировать рисование по различного вида