Полное руководство по началу работы в Sketch (с бесплатной шпаргалкой)

20.11.2020 0

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

Возможности

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

Используйте подробную настройку кистей и создавайте неповторимые эффекты к вашим фото и картинкам. Adobe Sketch обладает специальными инструментами, которые строят «перспективы» при создании трехмерных эскизов. Создавая эскизы в формате 3D, вы смотрите на объект с разных ракурсов и выбираете подходящий угол обзора перспективы.

Работайте со стилусами от компаний: Adonit, Wacom, Apple Pencil и многими другими. Перед работой над новым скетчем, скачайте изображения из Adobe Stock и используйте их как часть «пейзажа» или поставьте в виде фона. Воспользуйтесь слоем и придайте изображению необычный фон и красивое оформление.

Выберите слой к изображению и сделайте картинку более насыщенной. Экспортируйте готовые рисунки в другие приложения и программы Adobe Systems – Illustrator и Photoshop. Adobe Sketch работает совместно с сервисом Behance, поэтому скетчи загружаются как «работа» для портфолио.

Стоимость

Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$

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

Steps to download Android apps/games for phone

To download and install applications or games from our website to your smartphone: 1. Accept softwares installed from external sources (Settings -> Apps -> Unknown sources selected area) 2. Download the apk file of the application you need (for example: Adobe Photoshop Sketch)
and save to your phone 3. Open the downloaded apk file and install

Draw with pencils, pens, markers, erasers, thick acrylic, ink brush, soft pastel and watercolor paint brushes to create artwork that can be sent as layered files to Adobe Photoshop CC or Adobe Illustrator CC.

Artists tell us they love the: Access to 11 tools that can adjust size, color, opacity and blending settings. Ability to create an infinite variety of Sketch brushes using Capture CC. Ability to add multiple image and drawing layers they can restack, rename, transform and merge. Flexibility to organize their favorite tools and colors in the toolbar Ability to send their sketches to Photoshop or Illustrator with layers preserved

Try using Photoshop Sketch with: Capture CC Photoshop CC Illustrator CC

Take advantage of other Creative Cloud services like:

ADOBE STOCK Search for and license high-res, royalty-free images from inside Sketch. Incorporate quality imagery into your work.

CREATIVE CLOUD LIBRARIES Get easy in-app access to your assets — including Adobe Stock images and brushes created in Capture CC.

DIRECT TO DESKTOP Send a file to Photoshop CC or Illustrator CC with layers preserved. It automatically opens on your desktop, letting you effortlessly build on your idea.

POWERED BY CREATIVESYNC Adobe CreativeSync ensures that your files, fonts, design assets, settings and more all instantly appear in your workflow wherever you need them.

GET FEEDBACK Publish your work to the Behance creative community and get feedback without leaving the app. You can also share through Facebook, Twitter and email.

TOU: https://www.adobe.com/special/misc/terms.html. Privacy Policy: https://www.adobe.com/privacy/policy-linkfree.html

Adobe Sketch – это мобильное приложение для рисования от известного разработчика.

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

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

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

Почему Sketch?

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

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

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

Что такое Sketch?

Sketch – одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории – Adobe Illustrator, CorelDRAW и OpenOffice Draw.

Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:

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

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

Интеграция

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

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

Чему обучит курс

1. Знакомство с интерфейсом

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

2. Работа в редакторе

Sketch UI design уроки помогут организовать рабочий процесс в редакторе. Научись быстро править свой проект, используя сетку и фильтры. Обеспечь себе максимальное удобство работы в Sketch программе для дизайна.

3. Прокачка навыков

Adobe Sketch онлайн для компьютера – это многофункциональная система для создания дизайна. Можно бесконечно углублять свои навыки работы с программой, используя новые инструменты и плагины. Уроки Sketch раскроют секретные возможности редактора.

4. Актуальность

Онлайн-курс по веб-дизайну в Sketch поможет всегда быть в курсе обновлений программы. Также курс научит, где и как следить за выходом новых плагинов и инструментов. Это позволит вам опережать конкурентов в создании инновационного дизайна.

Обучение

Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников

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

Установить плагины

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

На скриншоте с интерфейсом Sketch я показал плагин Craft от Invision, который помогает работать с контентом: моментально вставлять изображения в макет и делать копии элементов.

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

Где искать плагины

Удобные плагины в гайдлайнах СКБ Контур,

Большой список плагинов на GitHub.

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

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

Плюсы Sketch

Узкопрофессиональный инструмент для дизайна интерфейсов

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

Sketch можно сравнить с хирургическим скальпелем, противопоставив его швейцарскому ножу под названием Photoshop.

Экспорт графики

Варианты экспорта выбранного графического элемента под разные разрешения

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

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

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

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

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

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

В программе предусмотрены сочетания клавиш, существенно ускоряющие работу.

Удобная работа с текстом

Работа с текстом в Sketch отлично адаптирована под экраны:

  • красивый рендеринг текста (никаких «мутных» режимов отображения типа crisp, smooth и т. п.);
  • удобная настройка текстовых блоков в режимах auto и fixed;
  • при изменении выравнивания (left, centered, right) в режиме текстового блока auto текст не прыгает, как в Photoshop;
  • автоматически устанавливаемый адекватный интерлиньяж (мелочь, а приятно);
  • панель спецсимволов (Ctrl + ⌘ + Пробел).

Пипетка

В Sketch наконец-то решена проблема удобной работы пипетки.

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

Cимволы

В Sketch можно создавать собственные библиотеки символов и редактировать их
Символы я бы поместил на более высокое место в списке плюсов программы, если бы их функционал был лучше проработан. Хотелось бы иметь возможность трансформировать символы в режиме 9-slice (с назначением зон, которые не подвергаются трансформации), а также возможность создавать сложные символы (как это сделано в Fireworks, например). Последнее помогло бы создавать символы для разных состояний кнопок — очень полезный для дизайна интерфейсов функционал.

Регулярные обновления

Программа регулярно обновляется через App Store: исправляются баги и добавляются новый функционал.

Приемлемая цена

Программа Sketch стоит 3290 рублей. Вы можете установить себе несколько копий программы на разные компьютеры, при условии, что ими будете пользоваться только вы лично. Для сравнение использование Photoshop в течение года вам обойдется в 3600 в год (или 300 рублей ежемесячно).

Утилита Sketch Mirror

Утилита Sketch Mirror позволяет просмотривать дизайн, который вы создаете в Sketch, прямо на мобильном устройстве (iPad/iPhone) в реальном времени. Прямо на устройстве можно свайпом перелистывать артборды из вашего рабочего файла. Причем, можно транслировать работу с макетом сразу на два устройства.

Использование

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

Данное решение будет актуальным для тех, кто любит рисовать и готов заниматься любимым делом где угодно – в очередях, поездках в городском транспорте, дома на кухне, пока готовится обед. Adobe Sketch для Android можно скачать на нашем сайте или же прямо из Play Market.