Кому подходит Sketch?
Вам стоит работать в Sketch, если вы:
- работаете на Mac (версии под PC пока не предвидится),
- занимаетесь в основном интерфейсами (не иллюстрациями, графическим дизайном, фотоманипуляциями и т. п.)
- понимаете, как программисты будут работать с вашими исходными файлами (формат «.sketch»), либо вы сами будете экспортировать всю графику для верстальщиков или программистов.
Плюсы Sketch
1. Узкопрофессиональный инструмент для дизайна интерфейсов
Sketch строго заточен под дизайн интерфейсов. Здесь нет, как в Photoshop, инструментов для создания трехмерной графики, редактирования фотографических изображений, покадровой анимации и прочего, чем нагружен сложный и тяжелый продукт от Adobe. Это позволяет разработчикам Sketch быстрее и чаще исправлять баги и добавлять новый функционал.
Sketch можно сравнить с хирургическим скальпелем, противопоставив его швейцарскому ножу под названием Photoshop.
2. Экспорт графики
В Sketch особенно удобно реализован экспорт графики. Создаете дизайн приложения, например, под retina-дисплей, а затем настраиваете для каждого из элементов экспорт в нескольких разрешениях. Программа разложит всю графику в соответствующих размерах по папкам. Очень удобный и для разработчика инструмент. Я настоятельно рекомендую разработчикам мобильных приложений овладеть Sketch, так как программа становится все более актуальной в этой отрасли.
Мой знакомый дизайнер-иконщик долго сопротивлялся переходу на Sketch, не поддавался на уговоры. Однако, когда возникла необходимость генерировать одну и ту же иконку во множестве разных разрешений, он пришел в восторг от возможностей программы. Теперь для наших проектов от рисует иконки в Sketch.
Помимо экспорта отдельных элементов очень удобна функция экспорта артбордов (при необходимости сохранить каждый экран в виде отдельного файла) и слайсов (если нужно создать превью из нескольких экранов, или любого отдельного фрагмента приложения).
3. Простота интерфейса
По сравнению с усложненным интерфейсом Photoshop, инструментарий Sketch проще, удобнее и интуитивно понятнее. В нем нет множества лишних панелей, расставленных вокруг рабочей области. Все, что нужно, показывается в процессе работы.
Например, инструменты редактирования векторных форм появляются только тогда, когда вы начинаете редактирование векторного объекта. Второй пример: пока вы не придали определенное свойство объекту, описание этого свойства находится в свернутом состоянии.
3. Несовершенные векторные инструменты
Инструменты для рисования в Sketch оставляют желать лучшего, они пока несовершенны и у многих дизайнеров вызывают раздражение. В этом плане Illustrator по-прежнему остается непревзойденным. Кстати, векторные формы, созданные в Illustrator хорошо копируются непосредственно в Sketch (⌘+C → ⌘+V).
Плагины
На сегодняшний момент самым полезным плагином, на мой взгляд, является Sketch Measure . Он позволяет быстро создавать обмеры для макетов: показывать размеры элементов, расстояния между ними, указывать их цвет, параметры текста и т. п. Все обмеры создаются в виде отдельных слоев в документе. Эта информация пригодится программистам при работе над макетами, а также при создании гайдлайнов.
Плагин Sketch Measure
Полезные ссылки
- подборка советов по Sketch
- список плагинов для Sketch
- видео со Sketch Meetup Russia 2014
Примечания
1. Дизайнер Олег Андрианов советует минимизировать общение с разработчиками и отдавать им дизайн, его описание и упакованные по папкам файлы (подробнее см. видео со Sketch Meetup Russia 2014 с 3:22:00).
2. Во время написания этой заметки вышла бета-версия Sketсh 3.2, которая, по заверениям разработчиков, лучше справляется с большими файлами.
Которая все больше привлекала к себе внимание.
Я думал, что, как и многие прочие новинки со стоимостью около $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 вы сможете добавить аннотации для каждого изартбордов . Он также позволяет вам с легкостью включать, либо отключать их или дажеперестилизовать внешний вид аннотаций, что позволяет их использовать вбрендированном виде для различных презентаций. Я не могу даже выразить словами, как круто это экономит время.
Ранее я экспортировал своискрины как картинки, и импортировал их в отдельную презентацию, где необходимо было вручную добавлять перечни аннотаций, стилизовать их и регулярно обновлять картинки, чтобы синхронизировать их со всеми последними изменениями в дизайне. Это была просто адская трата времени. Однако сейчас я уже могу документировать в ходе дизайна, при этом отключая свои пометки для того, чтобы они не мешали, или вновь включая их при потребности.
Это крайне полезное средство. Испробуйте его сами, оно реально помогает!
Добавление аннотаций при помощи
Сайдбар с аннотациями по умолчанию имеет темно-серый фон с белым, либо серым текстом и маркерами зеленого цвета. Вы, возможно, захотите изменить внешний вид данных элементов, их тип шрифта, цвет или удалить ненужные части, добавить свое лого, к примеру.
Для этого следует ввести первую порцию данных. Полностью автоматически создастся новаястраничка сартбордом , используемым как шаблон для всех аннотаций. Редактирование макета, удаление или добавление элементов на данномартборде будет автоматически менять всесайдбары с аннотациями.
Вам надо будет удалять ранее созданные и повторно их
Разработка современных приложений немыслима без работы дизайнера, а дизайнеру для работы необходимо соответствующее программное обеспечение. В основном для разработки дизайна используются Adobe Illustrator, Photoshop и другие профессиональные графические редакторы, но есть и специализированные решения. Недавно вышла третья версия векторного редактора Sketch, ориентированного в первую очередь на создание графики для программ. Чем же отличается этот специализированный векторный редактор?
Разработчики Sketch как будто взяли мощный векторный графический редактор и выбросили из него все лишнее. Потом подумали, и дополнили его всем тем, что необходимо для создания графики в ходе разработки программ. Именно это множество удобных «фишек» и отличают программу от других редакторов. Стоит отметить, что одной только графикой для ПО Sketch не ограничивается, его можно использовать, например, для web-дизайна (функции типа «скопировать стиль как CSS» в этом помогают), но все-таки это назначение - основное.
Благодаря тому, что Sketch - родное OS X приложение, вы всегда можете воспользоваться iCloud и локальными версиями документов. Программа очень легкая, быстрая и отзывчивая.
Кстати, Sketch настолько хороша, что даже разработчики Adobe используют ее 🙂
Название:
Sketch 3
Издатель/разработчик:
Bohemian Coding
Цена:
2690 руб.
Встроенные покупки:
Нет
Скачать:
Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, – это статья для вас.
Во-первых , мы немного познакомимся со 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 : объект не будет отресайзен при ресайзе группы, но он изменит свое положение пропорционально общим габаритам группы.
В последнее время вопрос инструментария 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.
