Главное Свежее Вакансии Образование
Выбор редакции:
15 445 57 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Переход с Photoshop на Sketch

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

Статья подготовлена командой sketchapp.me.

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

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

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

Sketch работает только под Mac OS

Как мне кажется, это огромный плюс программы. Так как Sketch использует всю мощь операционной системы Mac OS (автосохранение, отрисовку, рендер текста) и это делает его очень быстрым и современным редактором. В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation,OpenGL и ColorSync.

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

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

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

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

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

b_56afda46ce011.jpg

[Размеры файлов в Sketch]

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

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

i9nPE1-aAcRQQnZsvgsx4x2PNskSxnuKLCFSPn_a

[Общий интерфейс редактора]

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

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

z8dGDOXz_bGULREITL6kgelQsS53qI4-N89RuK1z

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

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

b_56afda9432d60.jpg

[Настраиваемый тулбар]

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

2WyA-twVauDt5EX5ibFiYhngojYfEts36nqjugNx

[Слева направо: свойства папки, фигуры, текста]

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

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

Конечно, Photoshop с Illustrator уже умеют сохранять по несколько холстов в одном документе, но им все еще не хватает дополнительного уровня вложенности (страниц т.е.)

Привязка к пикселям

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

b_56afdaa8a687e.jpg

[Привязать к пикселям]

Стили

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

_6jamnNBGy3cz4PXaG4wwDcHsxkynU4XITz_VFVY

[Работа со стилями в Sketch]

Символы

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

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

-81exBX2OvH0-CQliHPv26WjBsU0IG-5er5aW29e

[Символы]

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

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

OgbA2WEVXBmuGIl5NZJoqJ11_1ATmhlcLc_IPD41

[Фрагменты]

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

-5PAegZazi-4n3T6GvXBliYAc3fdGkeLUQR_uWV1

[Параметры экспорта]

Сетка

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

yBjj1sJ2-YHofmkh3JyAu07ljPV_f0RVr_gFx9_m

[Настройки сетки]

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

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

Множество расширений на все случаи

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

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

CY3xjo2hD-NQo-o0b53gY7g1XH-p9R6ERkTMy_gt

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

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

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

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

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

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

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

Послесловие

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

Скачать Sketch, а также узнать все о графическом редакторе Sketch вы может на сайте sketchapp.me

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
В начало дискуссии
Sergey Fenev
Все равно молчаливое большинство работает в Corel.
Ответить
Магазин Таобао
Cайт (движок) с товарами Taobao на русском языке
Магазин Таобао
я юзаю Sketch и солидарен с ТС полностью, дизайн для сайтов или приложений там делаются очень быстро и красиво.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.