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

Google SketchUp является простым в использовании приложением, которое поможет вам научиться создавать 3D-модели жилых зданий, ангаров, гаражей, крыш, различных пристроек к домам и даже космических кораблей.

С помощью SketchUp можно легко добавлять детали, менять текстуры, размеры ваших моделей, промышленных объектов с огромной точностью, а также размещать готовые модели на сервисе Google Earth, делиться ими с другими людьми, разместив на сайте 3D Warehouse или распечатав копии. Google SketchUp это отличный способ узнать, нравится ли вам 3D-моделирование.

SketchUp включает следующие инструменты:

  • рисование и геометрическое моделирование: Polygon (Многоугольник), FollowMe (инструмент для создания простых и сложных форм – кругов, овалов, квадратов, Offset (инструмент для построения пропорциональных уменьшенных копий объекта) и Intersect with Model;
  • конструирование: Dimension (Размеры), Tape Measure (Активизация измерительной рулетки), Protractor (Включение транспортира), Section Slice (Выбор частями), Layers (Слои), Area & Length Calculation (Расчет площади и длины).

Программа SketchUp позволяет:

  • рисовать, редактировать, измерять, вращать и масштабировать геометрические фигуры;
  • делить 3D-модель на секции для просмотра и отделки внутренних деталей;
  • применять к модели готовые текстуры или создавать новые;
  • добавлять к своей модели готовые компоненты, такие как деревья, автомобили, окна, двери, людей или создавать новые;
  • ретушировать, смягчать черты лица;
  • моделировать тени от объектов в реальном времени для любой точки земного шара;
  • имитировать размещение видеокамер;
  • совершать веб-экскурсии;
  • создавать экскурсии – презентации;
  • экспортировать двухмерные графические файлы (. JPG,. PNG,. TIF. TGA. BMP) в 3D-моделей (0,3 DS. Дем. DDF. DWG. DXF. СКП);
  • экспортировать двухмерные изображения своих моделей (. JPG,. BMP,. PNG,. TIF);
  • распечатывать изображения моделей;
  • заниматься разработкой дополнительных приложений для программы с помощью языка Ruby.

SketchUp - инструмент 3D-моделирования для профессиональных дизайнеров: профессиональная версия SketchUp дает профессиональным дизайнерам возможности разработки и анализа сложнейших дизайнерских объектов.

SketchUp-пользователи могут:

Моделируйте все, что только можете представить: ремонт в вашей гостиной, придумывайте новые предметы мебели, создавайте объемные модели городов для сервиса Google Earth. Возможности SketchUp безграничны.

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

Получайте модели онлайн абсолютно бесплатно: вы можете строить модели с нуля или скачать готовым то, что вам нужно. Люди со всего мира делятся своими моделями на сайте Google 3D Warehouse.

Начните прямо сейчас: десятки видео уроков, обширный справочный материал, пользователи по всему миру. Если вы хотите создавать трехмерные модели с SketchUp – просто сделайте это!

ПРИМЕЧАНИЕ: Google SketchUp является бесплатным ПО только для личного использования.

Ключевые особенности и функции

  • Edges и Faces (Ребра и Грани): Каждая модель SketchUp состоит только из двух вещей: ребер и граней. Ребра представляют собой прямые линии, грани – простые двухмерные формы, которые получаются от пересечения линий. Например, прямоугольная грань имеет четыре ребра, которые соединены между собой под прямым углом. Для построения моделей в SketchUp имеются несколько простейших инструментов, с которыми вы познакомитесь за короткое время;
  • Push / Pull: быстро перейти из 2D в 3D: При помощи инструмента Push / Pull можно быстро перенести любую плоскую поверхность в трехмерный образ. Это опция для создания объемных фигур и регулировки толщины объекта. Просто нажмите кнопку, наведите курсор мыши и нажмите кнопку для остановки. Таким образом можно, нарисовав всего лишь контур лестницы, перенести ее в 3D. Точно так же появится окно в стене. Push / Pull – причина того, что SketchUp считается программой, простой в использовании;
  • точность измерений: Поскольку вы работаете на компьютере, то все, что вы создаете в SketchUp можно точно измерить. Для этого существуют инструменты конструирования. Кроме того, масштабные модели можно распечатывать на бумаге или экспортировать их в другие программы, например, AutoCAD и 3ds MAX;
  • Follow Me: При помощи инструмента Follow Me 3D-формы создаются путем вытягивания 2D поверхности вдоль заданного пути. Можно создать трехмерное изображение бутылки по половине ее конструкции, можно округлять края на таких макетах, как поручни, мебель и электронные гаджеты;
  • Paint Bucket: Создавая свои модели, вы можете использовать необходимые цвета для заливки отдельных деталей или всего макета, рисовать модели при помощи необходимых цветов и текстур;
  • Groups и Components (Группы и Компоненты): Для того чтобы уточнять вид отдельных частей объемных объектов, при помощи инструмента Groups можно создавать суб-объекты, которые легче перемещать, копировать и прятать. Components (Компоненты) во многом похожи на Groups, но с одной особенностью: скопированные элементы связаны между собой, поэтому изменения, которые вы вносите в один компонент, отображаются на всех остальных. Окна, двери, стулья и миллионы других компонентов вашей модели можно изменять, изменяя всего один;
  • Shadow (Тени): Рисование теней в SketchUp можно стало простым и точным: теперь ваши объекты будут отбрасывать правильные тени в режиме реального времени в любой точке земного шара при помощи Shadow Engine;
  • Sections (Секции): Инструмент Sections (Секции) позволяет временно «отрезать» части вашего проекта и «заглядывать» внутрь. Данную функцию можно использовать для создания чертежей, экспортирования форм в CAD-программы, использующие SketchUp Pro или для более полного представления о вашей модели в процессе работы над ней. Функция Section Planes дает возможность перемещать, вращать и даже анимировать созданные проекты;
  • Scenes (Эпизоды): Мы создали Scenes (Эпизоды) для того, чтобы вы могли легко сохранить точный вид вашей модели, позволяющий вернуться к ней позже. Есть неоходимость в создании анимации? Просто создайте несколько таких эпизодов и нажмите на кнопку;
  • Look Around и Walk: В SketchUp имеется набор простых инструментов навигации, призванный дать вам вид от первого лица. Кликните положение камеры, чтобы «стать» в любое место вашей модели. Использование инструмента Look Around позволяет вам «вертеть головой». Функция Walk дает возможность изучить ваше творение во время «пешей прогулки», даже спускаясь и поднимаясь по лестницам, пандусам и прочим элементам архитектуры также, как в видеоиграх;
  • Dimensions и Labels (Размеры и Пометки): Вы можете использовать интуитивно понятные инструменты для добавления размеров, аннотаций и различных пометок на вашей модели;
  • Instructor (Инструктор): Instructor – это диалоговое окно, в котором вы можете получить помощь в контексте вашей работы;
  • Layers и Outliner: При строительстве большой и сложной модели можно легко запутаться. SketchUp предоставляет два простых способа сохранить контроль над ходом работ – Слои и Вкладыши;
  • Google Earth: SketchUp и Google Earth являются частями одного и того же семейства продуктов, что позволяет обмениваться между ними информацией. Необходима строительная площадка для вашего проекта? Импортируйте масштабируемую аэрофотосъемку, в том числе и топографию непосредственно из Google Earth в SketchUp, нажав всего одну кнопку. Хотите увидеть свои SketchUp модели в контексте в Google Earth? Просто нажмите другую кнопку. Каждый может использовать SketchUp для создания моделей, которые затем все увидят в Google Earth;
  • инструменты Sandbox: Инструменты Sandbox позволяют создавать, оптимизировать и изменить 3D местность. Вы можете создавать гладкие пейзажи из множества контурных линий, добавлять насыпи, долины, создавать площадки для зданий и дорог;
  • сайт 3D Warehouse: Сайт 3D Warehouse – это огромное онлайн хранилище 3D-моделей. Зачем строить что-то, когда вы можете скачать его бесплатно;
  • импорт 3DS: Вы можете импортировать файлы 3DS непосредственно в модели SketchUp. Если есть образец в 3DS формате, который вы хотели бы использовать, то нужно просто импортировать его, а затем сохранить;
  • импорт изображений: Со SketchUp можно импортировать файлы изображений в форматах JPG, TIFF, PNG и PDF. Вы можете использовать их сами по себе или наложить их на поверхность для создания фотореалистичных моделей зданий, конструкций упаковок и многого другого;
  • экспорт TIFF, JPEG и PNG: SketchUp позволяет экспортировать растровые изображения до 10000 квадратных пикселей, генерировать изображения для отправки по электронной почте, публиковать в документах и других проектах.

Кому подходит 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, которая, по заверениям разработчиков, лучше справляется с большими файлами.

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

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

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

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

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

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

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

Интерфейс

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

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

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


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

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

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

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

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

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


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

Символы

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

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



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

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

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

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

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

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

Всем привет, я Олейник Антон — дизайнер интерфейсов, поклонник Sketch и один из авторов тематического проекта sketchapp.me . В сегодняшнем гостевом посте детально расскажу про данный графический редактор для Mac OS.

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

Итак, несколько самых главных причин попробовать уже даже и не особо новый Sketch app

Sketch — графический редактор для Mac OS

Да, обычно это упоминают как большой минус. На самом деле это большой плюс приложения, потому что она вовсю использует системные средства OS X (автосохранение, отрисовку, рендер текста). На винде вам пришлось бы страдать со Sketch так же, как и с любой большой программой для графики.

Не работает с растром

Тоже все записывают в минусы. Конечно же, все совсем наоборот. Sketch - векторный и для дизайна интерфейсов. Это не программа для ретуши фотографий. Ну, а интерфейсы в растре, думаю, никто уже сто лет как не рисует.

Небольшие файлы

Документы в Sketch редакторе весят значительно меньше, чем файлы ai или psd (опять же, благодаря использованию системных программных ресурсов макинтоша).

Например, вот файл btn.sketch с одной кнопкой весит 33КБ, такой же btn.ai весит 194КБ, такой же btn.psd - 91КБ. Эти документы небольшие, но и так уже можно примерно оценить соотношение.

Простой интерфейс Sketch

На первый взгляд вам покажется, что вы открыли что-то вроде Keynote. Да, такой чистый внешний вид профессиональной (!) программы немного сбивает с толку ребят, привыкших долго целиться мышкой в чекбоксы на бесчисленных панельках софта от Adobe. Тем не менее, это как раз тот случай, когда меньше = больше. Такой простой интерфейс дает вам время думать головой о своей работе, а не об инструменте.

Немного по интерфейсу

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

[Панель слоев Sketch app]

Наверху панель инструментов («тулбар»). Ее, как и в других программах на Маке, можно настроить по своему усмотрению. Инструментов не много, и большую часть из них вы запомните на клавиатуре.

Справа контекстная панель (назовем ее так). Очень похожая, только горизонтальная, была в покойном Фаерворксе. Панель меняется в зависимости от того, чем вы занимаетесь на холсте. Есть три режима - свойства группы, свойства фигуры, свойства текста.

Страницы и холсты

Документ в программе Sketch разделен на страницы. Страницы, в свою очередь, разделены на холсты. Это делает организацию экранов вашего приложения предельно удобной. Например, вы делаете страницу «Login», а внутри несколько холстов с разными состояниями экрана «Login».

В принципе, Фотошоп с Иллюстратором уже умеют сохранять по несколько холстов в одном документе, но им все еще не хватает дополнительного уровня (страниц т.е.)

Тотальная привязка к пикселям всего и вся

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

Стили

В Sketch app, конечно, есть и стили графики, и стили текста. Работают, опять же, поначалу немного привычно: когда вы где-то обновляете стиль у объекта (меняете обводку, цвет, шрифт), стиль обновляется автоматически везде. Нет никаких кнопок типа «Update style».

Символы Sketch редактора очень похожи на символы Фотошопа и чуть-чуть на символы Иллюстратора. Символ здесь - это такая папка (только другого цвета), внутри которой может быть что угодно, но не другой символ. Работает так же, как и стили: обновили в одном месте - автоматически обновляется везде.

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

Удобный экспорт

Экспорт графики реализован очень просто и удобно. У каждого элемента есть действие «Make Exportable», где вы сможете выбрать нужные форматы и размеры конечных файлов. Есть и всем знакомые фрагменты (slices), чтобы вручную выделять область для экспорта.

Очень удобный момент в экспорте - выбор сразу нескольких форматов и размеров.

Сетка

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

Системный рендер текста

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

Sketch плагины на все случаи

Как и для всех приличных приложений, для программы Sketch тоже есть расширения. Действия - от простых (расставить выбранные объекты с шагом в 10 пикселей) до замороченных (найти все текстовые слои в документе со словом «адоби» и заменить его на «Adobe», без учета регистра). Если программа не умеет что-то очень нужное, то скорее всего «there’s plugin for that».

Чтобы поставить плагин в Sketch, скачайте (обычно с Гитхаба разрабочика) и просто нажмите дважды или переместите в папку Plugins. Открыть папку: меню Plugins->Reveal Plugins Folder…

[Показать папку плагинов в Sketch]

Потом в меню Plugins у вас появится соответствующий свежему плагину пункт

Список расширений, с которых стоит начать:

  • Sketch Commands - большая пачка расширений, пригодится во многих ситуациях;
  • Rename It - для удобного и быстрого именования и переименования слоев;
  • Content Generator - генератор фото, текстов, имен, географических названий.

Вам может пригодиться небольшое приложение Toolbox, которое упростит установку/удаление плагинов для Sketch.

Малый период обучения

По данному графическому редактору для Mac OS, конечно, cуществуют в сети курсы (вроде бы даже платные есть), но в принципе вам хватит всего пары часов, чтобы самостоятельно разобраться во всех самых важных деталях. Поначалу будет непривычно, но только потому, что вы будете его сравнивать с Фотошопом.

Послесловие

Что можно сказать в финале обзора Sketch? — конечно, он не идеален. Есть иногда тормоза, не хватает некоторых функций (нет растровых), но все же даже в таком состоянии он может сильно облегчить и ускорить вам разработку дизайна.

Скачать программу Sketch, а также узнать все о редакторе Sketch вы можете на сайте

Понравилась статья? Поделиться с друзьями:
Вам также может быть интересно
ВКонтакте «Доступ закрыт» — как зайти Браузер блокирует вконтакте
Браузеры
В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия...