Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Сообщетсво UI\UX дизайнеров
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
37
Битрикс24

Битрикс24

www.bitrix24.ru

28
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
Eczo.bike

Eczo.bike

www.eczo.bike

9
GIFTD

GIFTD

giftd.tech

7
Flowlu

Flowlu

flowlu.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

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

Статья подготовлена командой 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
Первые Новые Популярные
Хорошие письма
HTML-шаблоны писем для рассылок
andersdir
Вы написали качественную статью и очень хорошо снабдили актуальной графикой, за это большой плюс.

Но:
1) Почему вы говорите о переходе с фотошопа на скетч, если это два совершенно разных продукта. Сравнивайте тогда уж с Axure.
2) Никогда и ни в какой вселенной не будет плюсом, для продукта такого типа то, что он работает только под одной операционной системой ;)
Ответить
Показать предыдущие комментарии
nikolaenkov
после этого комментария уж позвольте мне считать вас идиотом. )) смешно.
Ответить
Хорошие письма
HTML-шаблоны писем для рассылок
andersdir
Я вижу два аккаунта-однодневки. В активности которых нет ничего, кроме комментариев к этому посту.
Или это все люди, которые пришли на спарк именно для того, чтобы доказать мне, что я не прав? Не смешите меня.
Ответить
nikolaenkov
вы прекрасны в своей недальновидности. да, бывает и такое. уж в богемиан апп кодинг я точно не работаю.
Ответить
Хорошие письма
HTML-шаблоны писем для рассылок
andersdir
Буду считать себя важной персоной, раз люди заходят сюда из-за того, что я что-то сказал о статье. Круто.
Ответить
Хорошие письма
HTML-шаблоны писем для рассылок
andersdir
Давайте сравним.
1) Программа работает на 10% быстрее. Ну например.
2) У кого-то. Не у меня на винде.

Что по баллам важности выигрывает?
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
Фотошоп - это отраслевой стандарт. Дизайнер, ни один, не может не знать Фотошопа. К сожалению, вы не поменяете стандарт, если программа работает только под МакОСью.
Ответить
Sketchapp
Сообщетсво UI\UX дизайнеров
Anton Oleynik
Я с вами согласен, что фотошоп это основной инструмент для дизайнера и его нужно знать. Но я знаю много очень крупных офисов, которые полностью перешли на Sketch по ряду причин. Для дизайнеров интерефейсов - это то что нужно! Для остальных дизайнеров, пока фотошоп и иллюстратор не заменить.
Ответить
Perecel
автоматический отбор целевой аудитории (реклама в соц сетях)
Дмитрий Кубитский
для растра есть пиксельматор.
Адобы предоставляют на столько навороченный подходящий для всех продукт, что в итоге он становится избыточно сложный для простых вещей, неповоротливым, и черезвычайно лагающим, (в некоторых продуктах на столько отвратительная работа базовых функций, что даже не понимаю кто вобще этим дерьмом пользуется - например DreamWeaver)
Ответить
Gordon Shamway
а чем верстать?
Ответить
Sketchapp
Сообщетсво UI\UX дизайнеров
Anton Oleynik
C версткой проблем нет, существует Zeplin или Avocode для передачи макета кодерам. Также есть плагины в помощь верстальщикам.
Ответить
Gordon Shamway
Скетч инструмент неплохой. Но во-первых он стал частью маркетингового фашизма эппла (кто не в курсе с начала времен, в каждой профессиональной сфере деятельности эпплом поощряется развитие софта пи условии его одноплатформенности). Инструмент только на маке это очень очень плохо. Во вторых, он дает завышенную самооценку дизайнерам, которые в нем работают.
С учетом того, что фотошоп превращается в жрущую ресурсы несуразно работающую свалку бестолковостей, то скетч будучи кроссплатформенным мог бы стать хорошим стандартом. Но не станет. И через 3 года его никто не вспомнит.
Ответить
Показать предыдущие комментарии
Anton Zotov
Вот фошисты! Используют карательные инструменты OS X: Quartz Extreme, Core Image, Core Animation. Нелюди. А еще соседка рассказывала, что из-за этого Sketch занимает всего 40 мб. Ухх, врёт, не иначе!
Ответить
Gordon Shamway
ок, верьте в чудеса и творог из ватрушек
Ответить
Николаев Лалай
А как занимаемая память в озу связана с дисплей сервером? Из всех этих слов, quartz exreme - это поделка apple на x11 (open source), core image никогда даже не сравнивали с imagemagic (open source), функционал core animation реализован отдельно в графических либах и весь этот зоопарк связан исключительно с UI Mac OS приложений (не с вебом). Так же сомневаюсь, что CoreGraphic используется в Sketch (по крайней мере это было бы странно), потому что этот фреймворк традиционно плохо работает с вектором и обычно используют cairo (open source).
Чтобы тоже показать бессмысленные цифры вот запустил gimp на x11 с awesomewm. После запуска занимает 72 мб в озу.
Ответить
ctqwa
> Во вторых, он дает завышенную самооценку дизайнерам, которые в нем работают.

Возможно еще год назад было так. Сейчас же вся элитарность практически улетучилась :(

> Но не станет. И через 3 года его никто не вспомнит.

Уже стал.
Ответить
Gordon Shamway
Если будет на винде, то может быть еще шанс есть. Сейчас не то время когда один продукт есть, а другие просто не видят смысла с ним конкурировать. В наше время востребованы совершенно идентичные решения лишь бы новее и моднее.Я уже говорил современный пользователь (к сожалению и профессиональным софтом) это как баба с туфлями. Хоть тоже самое, но лишь бы новее. Ну а те кто на рынке давно, истерят и творят со своими продуктами гормональные мутации. Я жду фотошоп с возможностью делать стрим экрана и выбором плейлиста прослушиваемой музыки.
Ответить
Surgebook
Платформа для создания и публикации онлайн книг
Андрей Ивашкевич
А я вот ушел с фотошопа на Affinity Designer. Sketch вообще не понравился.
Ответить
Sketchapp
Сообщетсво UI\UX дизайнеров
Anton Oleynik
Он же заточен, как я понимаю, под иллюстрации? Интерфейсы в нем рисовать удобно?
Ответить
Surgebook
Платформа для создания и публикации онлайн книг
Андрей Ивашкевич
ах да, Affinity кушает все файлы PSD и иллююстратора, а так же может экспортирвоать в этих форматах.
Ответить
Gordon Shamway
Есть один спорный немного оффтоп момент, на котором я хочу заострить внимание, раз открыта тема дизайна моб интерфейсов.. Для приложений я хотел бы, чтобы скетч или чтото аналогичное (что будет с адобовским эклипсом?) стал более приоритетным, чем фотошоп.
Но я очень озадачен тенденцией делать макеты мобильных версий сайта в скетче по шаблону приложения. Это очень сильно совсем не то, что апп. Во первых потому что координатное пространство браузера в котором мы будем видеть сайт это от 0 до 320+- в то время как матрица телефона 1 к 1 выводит порядка 640 в ширину. Надеюсь все понимают что такое dpi. Так вот приложение это грубо говоря графика 1 к 1. А моб сайт это 2 к 1 если рисовать картинку на 640 и 1 к1 если 320.
Что из этого выходит - верстальщик получает на выходе макет который с точки зрения браузерных координат и величин шрифтов полная дезинформация. Или все делить на два. В средства автоматизированного перевода макетов в html я не верю. Я уже много раз сталкивался с ситуаций когда доверяя полуавтоматическим хреновинам разработчки говорят, что они вот так вот не смогут. Приходилось делать руками, моими.
Дальше, делая макет на пиксельные размеры телефона, дизайнеры фигачат "картинки под ретину" не понимая что происходит в браузере. А там случается следующее, картинке задается ширина 320, то есть она уменьшается вдвое. Телефон открывает эту картинку на 640 и увеличивает растр вдвое. То есть если картинка была 640 то в итоге ее туда сюда уменьшили увеличили и она смотрится 1 к 1 максимально прекрасно. А картинка изначально шириной 320 в браузере не уменьшается, но зато в телефоне в 2 раза увеличивается, что выглядит хуже. Это все понятно и очевидно. Но, сам вопрос. Ведь увеличенная в 2 (а по площади в 4) раза картинка "для ретины" для мобильного устройства чтобы красиво смотреться растет в объеме. А вся затея, что мобильная версия будет юзаться по мобильному интернету кажется немного странной. Нахрена огромные красивые картинки, если загрузка будет вечной? Этот парадокс меня довольно сильно достал. Порядок паники заказчика и исполнителя уже традиционно такой:
1) ой, а оно сильно большое оказалось, верстальщик не знает как быть
2) шрифты очень мелкие
3)а у меня на айфончеге картинки плохого качества
4)ой качество хорошее, но долго грузится
и дальше замкнутый цикл между 3 и 4 пунктами
Ответить
Показать предыдущие комментарии
Gordon Shamway
Да, я его помню, в итоге чуть иначе делаю. Да и медиазапросами он сейчас заменяется. С этим вопросов нет как каждому устройству свое дать. Тут философская тема как быть когда "надо сделать картинки под ретину" и "надо сделать картинки под 3g" )) (не элементы интерфейса)
Ответить
Ерофеев Алексей
в мобильных интерфейсах используется dip
в приложениях как минимум четыре-шесть вариантов картинок для андроид и два для айос а это уже 6-8 различных коэффициентов
цеплин умеет выгружать пакетно под разный dpi
остальное в дипах тоже показывает
остальное - учиться аккуратно макетировать и верстать, видимо, улюлю
Ответить
Gordon Shamway
и все таки как ответить на пожелание "хочу картинки под ретину но чтобы быстро открывались на мобильном интернтете"?))
Ответить
ctqwa
A. Магии не бывает
B. Вообще по минимуму использовать растровую графику в вебе
Ответить
Gordon Shamway
ну контент векторным ведь не будет. элемнты интерфейса даже растровые не создают проблем. я то знаю, что магии нет. но мне интересно кто что ответил заказчику новостного сайта например, где каждый пост снабжен картинкой на вопрос "а как сделать так чтобы и картинки не мутные были и чтобы грузилось быстро" я вот оставляю "мутными" для сайта с с массой изображений и в 2 раза большие если это просто красивая имиджевая цацка. или же мне просто лень заморачиваться.
Ответить
Алим Анисимов
>Так как Sketch использует всю мощь операционной системы Mac OS (автосохранение, отрисовку, рендер текста).
Госпаде, вот эта необузданная мощь !
Ответить
nikolaenkov
вообще-то это действительно чувствуется. но вы, видимо, не пробовали, поэтому остается только паяцничать.
Ответить
Павел Харитонов
Ну бедняга кроме ФШ с его вездекоекак работающим движком ничего не пробовал ... либо корел открывал, а апы оперативы, процессора и т.д не давали ощутимого эффекта. Вот уже считает ту скорость работы за стандарт и просто не в состоянии поверить в большую производительность.

Чуствую, если ему показать старенький Air с макетом сайта на 4 девайса (моник, планшет ширина, планшет высота, мобильник) и поизменять - то сначала будет думать - что это просто видео. Если дать ему самому поизменять - начнет себя щипать, думая что спит. Потом психоз, апатия, абулия, упадок сил ...
Не ... пускай лучше на ФШ "сидит", здоровее будет.
Ответить
Wisdom Reason
А есть программы для Windows xp, на которых можно рисовать ... к примеру рисуешь на таблете, скажем Galaxy Note со стилусом, а рисунок отображается на экране компьютера. Я щас не имею ввиду bamboo tablet.
Ответить
Ипполит Бугуртов
Скетч не нужен, если ты грамотно владеешь фш.
Ответить
Виталий Камелин
Рассказ яблодрочера, онанирующего на Маки и все, что с ними связано.
Ответить
Sketchapp
Сообщетсво UI\UX дизайнеров
Anton Oleynik
Вы свои комплексы оставьте при себе. Прочитайте статью, а потом пишите всякую ересь.
Ответить
Perecel
автоматический отбор целевой аудитории (реклама в соц сетях)
Дмитрий Кубитский
а какая проблема с тем чтоб ананировать на маки?
у вас от этого бомбит?
Ответить
Николаев Лалай
>При таком подходе, файлы весили по несколько гигабайт и не всегда открывались на слабых машинах.
...
>Sketch работает только под Mac OS
>Как мне кажется, это огромный плюс программы.
Ответить
nikolaenkov
с появлением https://zeplin.io/, вряд ли что-то может потягаться со скетчем. мы недавно всем отделом перешли на маки только ради скетча. потому что вы не представляете, насколько это невероятно здорово, когда тебе не нужно готовить спеки на мобильные девайсы. если сравнивать конкретно фотошоп для отрисовки интерфейсов и скетч, то скетч даст фору в сутки на выполнение аналогичной задачи фотошопу. про то, что скетч только под мак еще раз: прекрасно работает на виртуалке, вообще гладко.
Ответить
Gordon Shamway
Охотно верю, в свое время даже простой Keynot совсем на другой уровень поднял работу с презентациями. Хорошо, что он сейчас из облака работает.
Ответить
Sergey Zadyraka
я в свое время тоже мак купил для работы с Modul8 и до сих пор считаю, что нет ничего лучше чем мак. Выход Sketch только подтвердил это. Винда с постоянными обновлениями, мусором и прочей шнягой - не от добра.
Ответить
Женя Семиряков
Есть ощущение, что скоро все будут переходить с фотошопа на проект комету, включая пользователей скетч, так как адоби сначала выпустит её на мак.
Ответить
Gordon Shamway
будет знатный срач, при взгляде на который по щекам старцев стечет скупая слеза: «А ведь были и мы молоды когда то, и мы когда то рамсили этих самых из Корела »
Ответить
Александр Мосолов
"Sketch работает только под Mac OS"

Тоже считаю это плюсом, но только для тех кто работает на маке, конечно. Значит, что разработчики интегрировали по максимум в ОС, чего конечно не скажешь про Адобе - это просто кошмар..
Ответить
Galhina Kalhugaena
Это религиозные войны, как Nikon против Canon. Я UX дизайнер, но раз в неделю-другую мне нужно обработать какую-нибудь фотку или сверстать пару страниц текста, и я не хочу платить за две лицензии, если все, что мне нужно, можно сделать по цене одной. Для тех, для кого входной барьер играет роль, скорость освоения — аргумент, для тех, кто уже хорошо знает основные программы пакета Adobe — не то, чтобы прямо сильный.

Из реальных преимуществ в статье указаны только работа с операционной системой и вес файлов, при этом работа с осью описана очень туманно, и люди, которые не пробовали, могут и не понять, о чем речь вообще.
Ответить
Показать следующие
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать