Переход с Photoshop на Sketch (редактор для Mac). Полное руководство по началу работы в Sketch (с бесплатной шпаргалкой)
Для лейбла 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 вы можете на сайте
Разработка современных приложений немыслима без работы дизайнера, а дизайнеру для работы необходимо соответствующее программное обеспечение. В основном для разработки дизайна используются Adobe Illustrator, Photoshop и другие профессиональные графические редакторы, но есть и специализированные решения. Недавно вышла третья версия векторного редактора Sketch, ориентированного в первую очередь на создание графики для программ. Чем же отличается этот специализированный векторный редактор?
Разработчики Sketch как будто взяли мощный векторный графический редактор и выбросили из него все лишнее. Потом подумали, и дополнили его всем тем, что необходимо для создания графики в ходе разработки программ. Именно это множество удобных «фишек» и отличают программу от других редакторов. Стоит отметить, что одной только графикой для ПО Sketch не ограничивается, его можно использовать, например, для web-дизайна (функции типа «скопировать стиль как CSS» в этом помогают), но все-таки это назначение - основное.
Благодаря тому, что Sketch - родное OS X приложение, вы всегда можете воспользоваться iCloud и локальными версиями документов. Программа очень легкая, быстрая и отзывчивая.
Кстати, Sketch настолько хороша, что даже разработчики Adobe используют ее 🙂
Название:
Sketch 3
Издатель/разработчик:
Bohemian Coding
Цена:
2690 руб.
Встроенные покупки:
Нет
Скачать:
В последнее время вопрос инструментария 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.
