Скетч
Всю интерфейсную и веб-графику я делаю в Фотошопе — я его прекрасно знаю и работаю в нём очень быстро. Я привык, что графический редактор даёт мне получить на экране вообще любое изображение, которое я захочу, если только у меня хватит умений его нарисовать. Я экспериментировал с Индизайном, потому что некоторые вещи в нём удобнее, но в целом это жесть, постоянно запинаешься о невозможность что-то сделать, и чувствуешь себя беспомощным. В итоге решил, что лучше пользоваться программой, в которой можно сделать всё, хотя что-то и не так удобно, чем пользоваться программой, в которой многого вообще не сделаешь.
Сейчас молодые дизайнеры фанатеют от Скетча. Я смотрю на него с недоумением. Ни разу не трогал. Он выглядит как программа для детей — треть экрана сверху занимает тулбар с огромными иконками. У меня всего лишь 27-дюймовый экран, я не понимаю, зачем тратить пиксели на мусор.
Разговоры со всеми любителями Скетча делятся на две категории.
Первая. У меня спрашивают:
— А ты используешь Скетч?
— Нет, у меня Фотошоп. А зачем Скетч?
— В отличие от Фотошопа, он умеет X!
— Так Фотошоп это тоже умеет.
— Да ладно!?
Вторая. Я спрашиваю:
— Это чё за говно?
— Да у меня Скетч, в нём это не сделать нормально.
Насколько я понял бизнес-модель Скетча, они взяли из Фотошопа несколько фич, которые особенно полезны для дизайнера интерфейсов, реализовали их, сделали для них большие кнопки на тулбаре, чтобы было видно, и этим купили тех, кто не знает Фотошоп и ленится разобраться. Да ещё и часть этих фич реализовали удобнее, чем в Фотошопе.
Проблема в том, что остальные фичи Фотошопа они не реализовали никак. И в результате эффект от дизайнера, работающего в Скетче, примерно тот же, что от дизайнера, работающего в Индизайне. У него хорошо и быстро получается то, что программа делает хорошо, а всё остальное он делает ужасно или вообще не делает.
Ладно, стоит признать, что Скетч придумал несколько полезных фич, которых в Фотошопе не было. Но Фотошоп-то их быстренько добавил.
Короче, мне было пофиг на Скетч.
И вот на днях мне попался видос про Крафт — какие-то плагины для автоматизации. А я обожаю автоматизацию всего. И поэтому мне теперь стало интересно разобраться, что с этим можно сделать.
Расскажите мне, пожалуйста, про Скетч. Особенно интересует мнение тех, кто хорошо знает Фотошоп, но тем не менее видит большую пользу в Скетче. Что вас обратило в новую веру? С чего начать изучение? Чего вам больше всего недостаёт, и как вы это переживаете? Как совмещать две программы в одном проекте? Работают комментарии.
Недавно рассказывал про скетч и недавно перешёл на него. Поэтому всё свежо и понятно. Могу на примерах.
Пиши в почту — и могу потом в скайпе всё рассказать.
Индизайн — программа для вёрстки. Её аналог и конкурент — Кварк. Область применения вообще с Фотошопом не должна пересекаться. Может быть, имеется в виду Иллюстратор?
Скетч более удобен пользователям почившего Adobe Fireworks, они очень похожи.
Это изначально векторный редактор, чтобы создавать и экспортировать дизайны под любые плотности экранов. В Фотошопе с экспортом до сих пор беда. Кстати, он совместим с ПСД вроде.
Символы имеют бесконечную вложенность. Их нужно использовать всегда и везде — компонентный подход.
Артборды и страницы. Появились в ФШ недавно, но с тяжеловесными ПСД не поиграешься особо.
Возможность посмотреть расстояния между объектами через Альт.
Но суть Скетча как раз в автоматизации и плагинах. Она появилась задолго до Крафта. Например:
Marketch делает архив для верстальщика со всеми метриками и ЦСС-характеристиками.
Fluid позволяет «резинить» дизайн и смотреть, как он выглядит на разных устройствах. В следующей версии Скетч будет уметь это без плагина.
i18n — импорт и экспорт файлов перевода для макета. Можно сразу готовить несколько языков.
Compo делает кнопки нужного размера под текст
И сотни этих плагинов.
А, ну и большие иконки на тулбаре настраиваются, конечно :-D Можно их вовсе убрать.
Использую Фотошоп пятнадцать лет. Скетч хорошо экономит время для рисования и экспорта векторных иконок. Плюс, накидать несколько экранов интерфейса с кнопками и текстом удобнее получается чем в Фотошопе. Для скетчей, короче. Всякие тонкости потом в Фотошопе задрачиваются по необходимости.
Я тоже думал, что Скетч — фуфло, но выяснилось, что он хорошо помогает согласно принципу 80-20: 80% результата за 20% от времени потраченного в Фотошопе. Остальные 20% там никак, так что Фотошоп нужно иметь всегда под рукой.
А, ну и ещё когда у тебя 20 экранов с кучей элементов, то такой ПСД будет тормозить что %^$#@$, а скетч летает.
Юзал ФШ в течении наверно лет 7, затем перешел на Скетч. Сейчас ни за что на свете не буду даже пытаться рисовать интерфейс в ФШ, потому что это ад.
Совет: попробуй поработать ТОЛЬКО в Скетче (не юзая ФШ для более сложных, якобы неразрешимых Скетчем задач задач) хотя бы неделю в купе с плагинами Крафт, который заменил собой все популярные плагины + Relabel Button (быстрая замена надписей в кнопках). Ну и потом посмотришь, захочется ли тебе обратно вернуться в ФШ :)
UPD: Единственная задача, которую Скетч не умеет — это обтравливать картинки. Только для этого держу ФШ под рукой.
Владимир Крапоткин, имеется в виду InDesign. И то, и другое используют для верстки веб-страниц. Заявление, что «область применения не должна пересекаться», категоричное и неверное.
Нравится в Скетче:
Написал на Медиуме небольшую статью о дизайне сайтов в Скетче, в частности, рекомендую прочитать последнюю часть про вёрстку из макетов: https://medium.com/miraiartstudio/дизайн-сайтов-в-программе-sketch-3-842aed71c866
Не хватет, пожалуй, только базовой обработки изображений — только для этого и держу Фотошоп.
Для изучения рекомендую видео Скота Толински, он кратко и ёмко рассказал основные особенности интерфейса и инструментов: https://www.youtube.com/watch?v=AV2OkzIGykA&list=PLLnpHn493BHE6UIsdKYlS5zu-ZYvx22CS.
К слову, дико не хватает версии под Windows.
Дизайнеры на винде ещё остались, да и разработчиков сложно пересадить.
http://www.georgyserov.ru/blog/all/sketch-ili-fotoshop/ — Написал почему я не врубаюсь в скетч, там мысли немного другие, но смысл тот же.
«Отсюда вытекает следующая, самая важная, проблема Скетча. Он накладывает сильный отпечаток на работу. Это как раньше можно было узнать сайты сделанные в Индизайне. Они выглядели как прототипы, которые кто-то случайно пустил в продакшн. Рекламный ролик Скетча пытается мне показать, как удобно тут делать стандартные контролы: кнопки, списки, выпадающие менюшки. Но когда мне нужны стандартные контролы, я иду в Xcode и вставляю стандартные контролы. И там это делать намного удобнее. Скетч слишком часто пытается мне сказать, как нужно делать мою работу. Фотошоп же дает полную свободу.»
Любую манипуляцию с пикселями можно сделать в Фотошопе, а в Cкетче нельзя.
Пересел на Скетч после того, как начал работать в составе большой команды надпроектом.
Самый большой кайф по сравнению с шопом образца 15-го года — в символах, которые поддерживают кастомизацию текстовых слоёв: http://take.ms/gLzgZ Ты просто добавляешь один символ (смарт-объект) и быстро кастомизируешь текст в нём. Так же кастомизируется, например, фоновая картинка. Не нужно под каждый чих содавать объект. Плюс все объекты хранятся в том же файле, не нужно папки с прилинкованными смартами тягать.
Про экспорт картинок выше уже писали.
В целом, именно для интерфейсной работы скетч полностью заменяет Шоп. Ни разу не испытал проблем, что что-то было в шопе проще.
Конечно, для растровых иллюстраций приходится пользоваться Шопом.
В скетче быстро собирать много интерфейсных страниц, а потом не мучаться с пиксель-перфектом — верстальщики сразу видят не интерлиньяж, а line-height и отступы (ну, и другие все параметры).
Иконки — в иллюстраторе
«Думать» — в фотошопе
Растр — в фотошопе.
На поддержке больших проектов лучше, кажется, фотошоп («скриншот и по нему нарисовал»)
Не понимаю как работать в команде (кажется, по-нормальному никак).
Главная ценность скетча в нашем проекте — в быстрой сборке макетов из блоков (которые на фронтенде уже сделаны) + пиксель-перфект без забот + пейджи/артборбы без тупаков
С моей точки зрения, для работы лучше всего подходит Пайнт.нэт.
Тот же Пхотосхоп, но куда удобнее сделанный. Да еще и бесплатный-опенсорсный. Для Линюкса ничего лучше не придумали. В Скетцхе работать доводилось, но, как мне кажется, по функционалу до Пхотосхопа он недотягивает. Хотя смарт-объекты — идея интересная.
Не понимаю, как вы хотите сравнивать Скетч и Фш. На Иллюстратор он больше похож. За многолетнюю практику рисования интерфейсов в Фш можно давать медаль за мужество, конечно, но дизайн интерфейсов сейчас — это давно уже не возня с пикселями.
ха! Axure наше все!)))
Добавлю свои 5 копеек. За счет использования встроеных инстурментов макоси, помимо скорости в нем есть дефолтная система контроля версий. Она очень удобная — даже если ты что-то удалил, ты можешь откатиться до нужной версии и просто перенести то, что нужно в текущую драгндропом. Ну и документ откатить полностью.
Еще они недавно переделали приложение мироринга на ios девайсы — теперь с ним удобно делать мобильные интерфейсы (раньше тупило сильно).
С битмапом не поработаешь. А в остальном я радуюсь что расстался с фотошопом после 8 лет.
От имени верстальщиков хочется сказать, что верстать по макету из фотошопа — то еще развлечение.
Для того чтобы заверстать, к примеру, кнопку из скетча мне нужно скопировать стили блока и текста и удалить лишнее (как правило шрифт).
Делается это за 30 секунд. И там же очень легко увидеть состояния hover/active. Отступы по нажатию на cmd — вообще прелесть.
Для фотошопа это превращается в увлекательный квест «пощупай пипеточкой 5 слоев, угадай размер шрифта, найди мой скрытый слой в котором ховер и померяй выделялкой размеры и отступы».
Отдельным абзацем хочется только обложить хуями Adobe и Bohemian Coding за то, что не продают лицензии разработчикам со скидками (можно с резаным функционалом). Меня жмет, что я должен покупать для разработки дорогие IDE-шки и прочие гитлабы, а еще и потом дизайнерские инструменты. Как-то совсем несправедливо выходит.
Сборник плагинов для скетча: https://github.com/sketchplugins/plugin-directory
Руководство для разработки плагинов: https://github.com/turbobabr/Sketch-Plugins-Cookbook
Специально для разработчиков и верстальщиков: для вёрстки макетов из Скетча не обязательно иметь ни МакОС, ни сам Скетч. Сервис «Цепелин» решает все проблемы (http://zeplin.io). Выше я постил ссылку на обзор Скетча на Медиуме где вёрстка из макетов тоже упоминается, но пусть будет здесь отлично.
Многие указывают, что Скетч умеет код и расстояния показывать. Так фотошоп это тоже умеет. Для расстояний: выбираем перемещалку(v), зажимает контрол. Для кода — правой кнопкой на слой и «копировать цсс».
Смрат-объекты да, удобнее реализованы. И крафт здорово экономит время.
Аналог зеплина для фотошопа тоже есть: https://avocode.com/
Я за фотошоп, потому что умеет все.
О… скажем так, тебе понравится скетч, когда ты начнешь запоминать горячие клавиши.
У меня все проходило слишком плавно: ФШ → Иллюстратор → Скетч.
Опыт работы такой: ФШ с 2007-14, ИЛ 2013-16, Скетч — 3 месяца. Во всех программах максимально использовал хоткеи. Можно назвать гиком)
Иллюстратор рвал ФШ по скорости работы за счет горячих клавиш и удобства работы с точками траспортировки. Плюс там была не такая вырви глаз сетка. ФШ после иллюстратора казался просто бревном (чес слово, не вру). Поэтому переход на скетч воспринимался больше как баловство. Сам посуди, ФШ не мог заменить нормально подвал в 10 артбордакх за минуту. А в иллюстраторе это было нормальным явлением. Или заменить шрифты за 5 минут, вместо ручной работы в полчаса и больще. Скетч манил бесконечным полотном артбордов и всякими другими фишечками, которые на первый взгляд кажутся слишком мелкими или вовсе не очевидны.
Оказалось что все дело в горячих клавишах.
ФШ и ИЛ не умеют вставлять на нужное место слой/объект. Скетч запросто. Где бы не находилась одна и та же кнопка, если у нее изменилась иконка ты можешь ее заменить комбинацией ⌘+shift+v
Копирование и вставка стилей (на тексты и объекты, включая тени, градиенты, обводку, заливку и проч.) ⌘+alt+c / v
Пипетка с лупой (думал нафиг нужна, ан нет, нужна) ctrl+c
Сохранить дропом картинку в нужную папку, а не гемороиться и показывать путь сохранения — сила.
Создать на основе одной «карточки» сетку — Make grid → показал число колонок и столбцов, а так же вертикальные и горизонтальные отступы → профит.
Нужно увеличить размер инпута-кнопки-формы? Легко: ⌘+стрелки = ± 1px в размерах. Если зажать шифт то ±10px.
Нужно проверить расстояние от одного объекта до другого, а объекты не соотвествуют 10рх сетке? Выделил один, зажал Альт, навел на другой.
Еще большая сила zeplin и подготовка к верстке.
Плюс всякие прочие плагины, всеми любимые в ФШ и скетче символы.
И это само собой не говоря о том что в нем можно включить и настроить под себя модульную сетку, и сетка может быть для каждого артборда своя.
В общем, фанатей не фанатей, тут или по старой школе страдаешь от не раскрытия своего потенцила с ФШ или эволюционируешь и добиваешься еще большей эффективности в работе.
Повторюсь — речь даже не о том, чтобы скетч умел больше чем фш.
Хотя и этим он очень успешно хвастается. Речь о скорости работы за счет хоткеев.
Но ФШ незаменим. Ретушить растр будешь именно в нем. И только. Потому что после нового опыта, возвращаться к ФШ не захочешь.
moqups.com
Подскажите похожие сайты для быстрого прототипирования?
Самое крутое отличие от ФШ — ты просто тыкаешь на объект мышкой, и он выделяется (невероятно, как до такого смогли додуматься)! А если серьезно, ФШ и Скетч — два абсолютно разных продукта для разных задач. Их не стоит ставить на одну полку и сравнивать. Так что все холивары на эту тему я считаю бессмысленными. Плагины, вектор, символы, быстрый доступ к слоям, нормальная копипаста, офигенно удобный и быстрый экспорт без заёбов — все это дает нереальный буст при работе в Скече. Это все связано с развитием платформ и устройств — нельзя всю жизнь сидеть и пыхтеть с одним и тем же инструментом, когда вокруг все меняется. Особенно разница чувствуется при разработке интерфейсов для мобильный приложений, когда у тебя куча состояний, артбордов и анимаций. А в ФШ надо фоточки редактировать и делать графику.
Отдельно хочу выделить работу с Zeplin и Avocode. Это очень и очень круто, разработчики просто счастливы. Я сам кайфую, когда верстаю свои же макеты. Авторский надзор превращается в веселую игру с записочками на макетах =) Данные сервисы работают и с ФШ, но я не пробывал как оно. Меня лично радует, что в Цеплине можно прям руками брать чуть ли не готовый код и собирать макеты — есть стайлгайды и переменные для Sass, Less, CSS. Сразу видны все свойств объектов, отступы, высота строки, шрифт, межбуквенное расстояние и прочее. Экспорт ассетов тоже сильно облегчает работу — теперь больше нет помойки с нарезками всякого мелкого гавна.
И отдельно про опыт с плюшками. Интеграция Цеплина со Слэком — круто, просто попробуйте на своих проектах. Интеграция Скеча с Инвиж (я делаю через дропбокс) для быстрого прототипа — тоже круто. Можно быстро запилить макеты и посмотреть на реальных устройствах, как оно. Скетч Миррор не пользуюсь (кто-нибудь рекомендует?). Про крафт уже писали....
А насчет экранного мусора Илья не прав — тут ФШ сильно проигрывает Скечу. Тем более тулбар можно спрятать/оставить только текст/иконки, ну вы поняли...
а меня вот в разговорах между фотошоперами и скетчерами удивляет вот что: ребят, а кто вам мешает работать и там и там? Такое чувство, что скетч/фотошоп это как женитьба — один раз и навсегда. Я с удовольствием работаю и в фотошопе и в скетче, и в илюстраторе и даже в новом адобэ ХД.
В контексте разговора о сопутсвтующих инструментах для передачи дизайна в разработку: мы делаем https://sympli.io, который работает со скетчем, фотошопом и скоро будет работать с XD.
Позволяет просматривать спецификации, скачивать ассеты и помимо этого интегрирована с Android Studio и Xcode, где разработчики могут в несколько кликов применять стили к существующему интерфейсу.
Только сегодня наткнулся на эту ссылку про Sketch vs Photoshop:
https://readymag.com/u91593485/guidetosketch/2/
Сам пользуюсь Sketch для быстрого наброса какого-нибудь макета под нужное устройство (см. пресеты артбордов).
Хорошо:
Скорость самого Скетча
Пусть в Фотошопе есть артборды, смарт-объекты, но мне так и не удалось добиться приемлемой производительности.
Организация файлов
А именно: сочетание страниц, артбордов. Всё можно держать в одном файле: мудборд, наброски, сам дизайн. Безумно ускоряет работу.
Символы и стили
Это есть и в Фотошопе, но в Скетче работает очевиднее, быстрее.
Расширяемость
Плохо :
Убогая работа с текстом
В Фотошопе она конечно чуть менее убогая, но обоим далеко до Индизайна.
Убогая работа с растром
Но, как отметили, никто не мешает использовать в паре с Фотошопом.
Не самая удобная работа с цветом, по крайней мере из коробки.
Сетки и гайды
Так и не привык к тому, как оно реализовано в Скетче, не пользуюсь.
Перманентные глюки
То файл не сохранится, то утечка памяти. Редко, но раздражает.
В камментариях выше ключевые слова: бысрее и удобнее.
Наверняка это не случайно.
Я Фотошопом пользовался с версии 2, то есть когда слоёв ещё не было.
Год назад почти полностью перешёл на Скетч для работы по дизайну.
Фотошоп по прежнему очень люблю и пользуюсь рисовать там картинки для души или обрабатывать фотографии.
Тонкую векторную иллюстрацию всё равно лучше делать в Иллюстраторе.
Скетч по сравнению с ФШ очень настроен на определённый тип работы и поэтому там нет лишнего.
Сейчас уже невозможно отказаться от символов, с их бесконечной вложенностью, удобностью редактирования и горячими подменами в вариациях.
Стили для всего, текстов, объектов и прочего.
Заливка объектов картинками, цветами или узорами конечно есть и не только в ФШ, просто в Скетче это значительно удобней и сильно экономит время.
Экспорт файлов просто прелесть, фотошопу до этого далеко, да и вообще файлы в Скетче это чудо, когда я переходил во время одного проекта у меня было несколько Фотошопных файлов с сотнями объектов, слоёв и стилей.
Даже самый быстрый Аймак еле дюжис со всем этим. А Скетч позволил всё засунуть в один файл, который всего-то 60 мб.
Чего в Скетче не хватает:
Трейсить битмапы в вектор, и я не люблю как у них редактирование кривых сделано. Но на конеференции Лейерс поговорил с главными разработчиками из Скетча и они обещали это исправить. У них кстати всего 15 человек в компании.
Адоби так сильно от них поднапряглись, что делают явного конкурента XD, штука хорошая, но пока ещё очень сырая.
И кстати, на заметку, появился ещё один претендент — аффинити. очень классно двигаются вперёд, через пол годика думаю будут не уступать обоим.
В крафте все настолько просто, что даже нечего рассказать. Его просто нужно поставить и пользоваться
Крафт на пару с Контент дженерейтором отчасти решает проблему набивки «рыбой», но тот же джейсон или нормальные данные нужно ещё взять где-то. Не всегда это возможно.
Прототипирование в Крафте — мертворожденная история, к гадалке не ходи. Экс-ди тут уже намного впереди.
Бесит у Скетча тайм-лаг при попытке таскания артборда через зажатие пробела.
Бесит, что нету сквозного перемещения слоя по списку слоёв через клавиатуру.
Вообще не предсказуемое какое-то объединение векторных фигур.
Да, если сделал стиль текста абзац и хочешь покрасить в середине ссылку синим — фиг.
И да, привет отдельным слоям с линиями для подчёркивания этих ссылок.
Главное отличие, это использование родного графического движка и всех остальных средств Макоси, что делает работу в нем нереально быстрой. Плюс к этому, Скетч сделан в соответствии с принципами дизайна интерфейсов самой Макоси, что сильно упрощает жизнь тем же новичкам в этой программе.
И главное, Скетч создан для компиляции того, что уже готово, т. е. работа с материалом, который уже есть. Это важный момент, так как после осознания этого отпадает половина вопросов, связанных с работой этой программы и требований к ней.
Nikita Golodenko, в фотошопе уже все это есть о чем ты пишешь и давно, просто плохо его знаешь.
Вспомнилось: «А вот в наше время...». Стареете :)
А кроме шуток, по сути соглашусь. Надо работать там, где удобно.
Всем привет
[Далее может быть мат. Кого смущает, не читать!]
Фотошоп знаю, был верен ему всегда. Без него и со скетчём никуда. Всё же баннеры в фотошопе лучше гифные делать.
В Скетче есть переменные блоки. Символы. Удобная штука, когда нужно подправить что-то сразу на 20 шаблонах одного проекта. Например икотип по ходу допилил.
В Скетче есть стили для текстов. Забиваешь сразу теги html: H1, H2 ... p, ul, li, a (пуля). Поменял в стилях, применил ко всему проекту.
В Скетче туповато с типографикой. Приведу 2 загадки для меня:
1) есть стиль для тега <p>. У нас там интерлиньяж 12 px. Есть 2 строки внутри всего текста, между которыми нужно сменить интерлиньяж, чтобы это не отразилось на всём стиле тега <p>. Как?
2) Опять же с тегом <p>. Мне нужно в срередине абзаца выделить 2 слова как гиперлинк и перекрасить например в синий. Как?
Но импорт у Скетча просто шикарен. Драгать шаблоны в папки, оч удобно.
Короче, Скетч это хорошее дополнение для интерфейсов, крупных веб-проектов, адаптивных сайтов. В арсенал нужно заносить обязательно. Нужно понимать, что времена меняются. Но без Фотошопа никуда. Для графики он незаменим.
Стареешь, Илья.