Веб-дизайн + Mac OS − Adobe = Sketch. Чем новый инструмент лучше всех старых

Программы Адоби я очень сильно не люблю. Они большие, несуразные, прожорливые, и с ними приходится мириться, потому что за неимением сильных конкурентов Фотошоп с Иллюстратором стали уже стандартными инструментами в профессии.

Начинал я рисовать сайты, как и все, в Фотошопе. Но чем сложнее становились задания, тем сильнее ощущалась его неприспособленность для проектирования интерфейсов. Оно и понятно: Адоби никогда не говорили, что он предназначен для интерфейсных дизайнеров, это дизайнеры как-то сами себе придумали. Всегда хотелось иметь инструмент с двумя кнопками и тремя ползунками — все равно я больше не использовал ни в Фотошопе, ни в Фаерворксе ни в ИнДизайне. Сейчас у меня из «адобовского» набора есть только доставшийся бесплатно (в нагрузку к планшету) Фотошоп Элементс, установленный из принципа (халява же), а все остальное я уже давно заменил другими приложениями. И вот одно из.



Скетч — сейчас мой основной инструмент. Он полностью векторный (ретина, блин) и, в общем, похож на урезанный вариант Иллюстратора. Получилось, будто у Иллюстратора убрали как раз все лишнее, а осталось как раз все самое нужное. Почти все. Дальше распишу самые заметные плюсы и минусы.

Куда мы попали


Программа до предела простая, что дает возможность концентрироваться на том, что ты рисуешь, а не на том, как ты это рисуешь. Выглядит вот так:


Слои слева (сначала непривычно, через пару дней проходит), свойства выбранного объекта справа. Естественно, еще есть системные панели цвета и шрифтов.

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



Или сохранить весь документ как шаблон:



Есть встроенная сетка, которая может быть или колонками, или, собственно, сеткой. Настраивается легко.



Инструменты


Инструменты простые: фигуры, перо и карандаш (рисовать кривые), текст и вставка картинки — что-то типа «поместить» в Фотошопе, но без возможности растрового редактирования. Еще операции с контурами и искажения фигуры. Можно, естественно, подобрать набор по своим нуждам.



Для стилей объектов и текста работает принцип «связывания». Можно скопировать стиль, например, кнопки, и поставить на все другие кнопки. Но вы не сможете, отредактировав стиль одной, поправить одним махом и все остальные. Для этого нужно: нарисовать первую кнопку → добавить ее стиль в панельку «линк» → нарисовать вторую кнопку и выбрать стиль из этой панельки (не скопировать с первой и вставить в другую, а именно выбрать с панельки). И так для всех остальных. Немного через жопу, но, как ни странно, иногда удобнее оставить одинаковые стили «порознь», чтобы редактирование одного объекта не влияло на другие такие же. С текстами такой же принцип, но в другой панельке.



Еще из примечательного: можно красить объекты в несколько слоев. Например, на эту кнопку я наложил линейный градиент, потом радиальный в режиме «overlay» (свет сверху) и текстуру тоже в «overlay». Текстур есть чуть-чуть встроенных, можно засунуть свои.



Слои можно группировать. Еще в слоях работают маски, но, как и стили, тоже немного по-своему: если вам нужно наложить один слой поверх другого, то сначала нужно их объединить в группу, а потом нижнему сказать «ты будешь маской». Если не сгруппируете, то вообще все слои, которые идут дальше сверху, тоже наложатся на маску, что нехорошо. В Фотошопе вы говорите верхнему слою, что он накладывается на тот, который снизу. А в Скетче вы говорите нижнему слою, что на него щас попрут сверху.

Сохранение и экспорт


Скетч экспортирует в png, jpeg, tiff, pdf, eps (пока плохо получается) и svg. Открывает только sketch и svg. У разработчиков, правда, работа кипит, так что скоро, может, научится и другим форматам, но поддержка psd точно не появится в обозримом будущем.

Если вы идеальный дизайнер и сами верстаете свои макеты, то Скетч вам и тут поможет: он умеет копировать стиль объекта в цсс, а еще при экспорте дает возможность сохранить только нужный слой, автоматом обрезав всю лишнюю прозрачность по краям (не нужно рисовать точный «слайс» вокруг иконки, например). И еще работает автоматическое сохранение «ретинистой» версии, если галочку поставить.

Если нужно отдать верстальщикам psd, то будут небольшие проблемы. Я нашел два пути. Первый: сохранить в pdf → открыть pdf в Иллюстраторе → пересохранить в psd, открыть в Фотошопе, навести порядок в слоях. Я использую второй: сделать в Пиксельматоре файл нужного размера → подложить снизу слой с картинкой страницы → поверх вставлять по одному запчасти из Скетча (все копируется в буфер обмена в png, тексты — сразу со стилем). Процесс несложный, просто нужно много раз нажать Cmd+C/Cmd+V. Потом из Пиксельматора экспорт в psd. Тут момент: psd получается несжатый и весит в несколько раз больше, чем такой же макет после Фотошопа, поэтому перед отправкой лучше сжать в zip — файл сильно «худеет».

Бонус


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



UPD. В комментариях насобиралось немного ссылок на шаблоны .sketch с элементами интерфейсов и всякими объектами: sketch-templates на Гитхабе, Meng To, Антон Алейников, scetchmine (там, кстати, где-то есть моя «линза»).
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 59
  • –10
    От текста такое впечатление, будто в блог Лебедева попал
    • +3
      … когда вместо букваря блог Лебедева.
    • +2
      Жаль нету для Окон, а то позавчера увидел и захотел поковырять :(
      • +2
        Жаль нету под Linux. Несколько дней назад сокрушался в теме про рабочие столы.
        • 0
          Программа использует системные функции Mac OS, так что ни под Linux, ни под Windows не ожидается — чтобы это сделать, фактически, им придётся написать новую программу.
          • 0
            Что, кстати, вообще есть под Linux? Вы наверняка изучили пробелму, раз сокрушались?
            Мне часто надо немного изменить пару пикселей — Gimp для этих целей слишком мощный и нагруженный инструмент. В программах попроще не хватает слоёв (со стилями слоёв) и трансформации выделений (иммется ввиду не только трансформация, но и обводка, заливка).
            • 0
              Хоть и немного запоздало, но всё же скажу.
              Использую Inkscape. Хоть и использование в этих целях не совсем очевидно, но приловчиться можно. Слои тоже есть. Нет только экспорта в CSS, но вспоминая подобные экспорты в фотошопе и фаерворксе, смею заметить, что лучше уж без него.
              • 0
                Вы в нем прям интерфейсы делаете? Сайты?
                • 0
                  Да. А что вас так удивляет?
                  • 0
                    Не, я не удивлен, я просто спросил может неудачно. Пойду качать, интересно стало.
                    • 0
                      Уважаемый! Inkskape — это инструмент, не больше и не меньше. У него есть свои достоинства и недостатки. Как и любым инструментом им можно пользоваться для чего угодно. Я вот в нём сайты рисую периодически. И ещё много чего. Тут ведь главное понимать общие принципы и цели использования.
        • –1
          Английские названия на русском глаз страшно режут.
          • +6
            Это с непривычки. «Ксерокс» поначалу тоже странным словом было.
            • –1
              Это потому, что в русском языке (да и не только) не принято транслитировать имена собственные. Слово «ксерокс» уже давно стало нарицательным, в отличии от «Адобе», «ИнДизайн» и прочих странностей этой записи.
              Только «фотошоп» может претендовать на нарицательность, но и то только в значении «отредактированная фотография» (Например: «Да это всё фотошоп!»).
              • +2
                Да ладно вам, можно же транслитировать. Вы имеете в виду не русский, а рекламный язык, но на рекламном живые люди не разговаривают.
                • 0
                  Не давно уднал что на самом деле как мы называем его «ксерокс» не верно, оригинальное название вообще «Зиэрокс»… мир для меня перевернулся
                • 0
                  «Адобе» напомнило про этот ролик:
                  www.youtube.com/watch?v=S_vVUIYOmJM
            • 0
              Они большие, несуразные, прожорливые, и с ними приходится мириться, потому что за неимением сильных конкурентов Фотошоп с Иллюстратором стали уже стандартными инструментами в профессии

              Большие и прожорливые — согласен, это мощные инструменты с огромным функционалом, который редко используется в полном объеме. Но почему несуразные?
              • +3
                ну, вот из-за того, что то, что очень нужно, там реализовано как-то в обход здравого смысла. для меня несуразный — это «неуклюжий». ну, может надо было другими словами написать.
              • –5
                Первый абзац можно было не писать. who cares
                • +9
                  Этот комментарий тоже.
                  Да и мой в принципе.
                  • +3
                    Да и этот комментарий бессмысленный.
                    Жизнь — тлен.
                    • 0
                      Если автроту не нравится адобе, то лучше промолчать вообще, статья-то не об этом.
                      • +1
                        Если бы автору нравился Фотошоп, он бы в нем рисовал и не посматривал бы на сторону, не нашел бы Скетч и не написал бы про него статью.
                        • –1
                          Это к чему? Речь идет о первом абзаце.
                          • 0
                            Если я отредактирую и склею первые два абзаца в один, вы успокоитесь?
                            • –4
                              Та мне все равно, это так, совет.
                • 0
                  А как вы работаете с растром? В другой программе потом переносите результат?
                  • 0
                    Да. Рисую в Пиксельматоре, копирую слой/группу/все сразу и вставляю в Скетч (вставляется в png с прозрачностью). Быстрее, чем сохранять в файл и потом его импортировать.
                    • 0
                      а всякие плюшки типа режимов наложения?
                      • 0
                        Пиксельматор умеет, Скетч тоже умеет: со всеми слоями + со слоями «краски» на объекте.
                        • 0
                          ясно, спасибо, посмотрю, а пиксельматор совсем плох в векторной графике?
                          • 0
                            По мелочи можно, но вообще там этот процесс неудобно сделан.
                  • +1
                    А я для растра Pixelmator юзаю, бесконечно приятная вещь. С вектором там почти никак, но ему это и ни к чему. Рекомендую всем маководам вместо Фотошопа (я уверен, большинство из вас только картинки в нём обрезает).
                    • 0
                      Он щас уже и «Векторматор» тоже, но как-то иногда непонятно что делает с узлами.
                    • +3
                      Под новую iOS 7 самое то UI рисовать в нем. Люблю его, хотя пока не купил. Но куплю – цена радует.
                      • +2
                        Под новую надо еще и радужных таблеток прикупить.
                      • 0
                        У вас в арифметическом уравнении тире.
                        • 0
                          Это, похоже, у хабра тире, я ставил «-».
                          • 0
                            Вот ведь как автозамена может подвести :)

                            По теме… у вас есть примеры макетов сайтов в Sketch? Просто я не нашел ни одного примера. Иконки, UI (кнопки, скроллы, инпуты) и мобильные приложения. Этим веб-дизайн не ограничивается, поэтому Photoshop пока никто не отменял.
                            • 0
                              Ну, я вроде не про себя статью писал, поэтому ссылку на портфолио как-то неудобно. Ловите в сообщения.
                              • 0
                                Если не сложно, то и мне пожалуйста
                        • +1
                          Лучше Скетча может быть, разве что, только айДроу (http://www.indeeo.com/idraw/).

                          Хотя проблема всех альтернативных приложений в непонимании PSD и невозможности в него сохранить. Попробуйте верстальщику (который сидит на винде) передать файл с расширением .sketch… Ничего не выйдет к сожалению. Глобализация в действии.
                          • +2
                            Отнюдь не всем. Конечно, если мы подразумеваем ленивого быдловерстальщика, о котором пишут на форумах программистов то да.
                            Я, например, без проблем сверстаю из любого вменяемого формата. С учетом того, что за время освоения платит заказчик. А фотошоп вообще не люблю. Он совсем не для создания сайтов предназначен.
                            • +1
                              Забыл дописать, но это если клиент ищет адекватную цену и качество. А если хочет гугл за 100 баксов, то тут прямая дорога к лентяям, которые кроме винды ничего не видели, не знают и не хотят.
                          • –1
                            Как-то медленно рендер работает. При zoom и pan тормозит и антиальясинг говно. Надеюсь со временем улучшат. Но концепция мне нравится.
                            Но в данный момент Xara Designer Pro X уделывает этого редактора.
                            • 0
                              А вы старую версию с торрентов скачали или с сайта демку поставили? Раньше тормозил, но последние версии нормально работают. И если в настройках снять галочку, шрифты становятся как надо


                              А Ксара вроде не совсем для интерфейсов и только на Винду. Но тоже хорошая, да.
                              • 0
                                Зара для всего подходит. Проверено временем :)
                                • 0
                                  Скачал последнюю версию. Если это по вашему нормально работает, то как же тогда тормозит? :) Я просто привык что в заре рендер мгновенный.
                                  • 0
                                    Ну, рисуйте в Заре, кто ж вам не дает. У меня тормозов нет, поэтому тут ничем не помогу, извините. Скетч еще «молодой» — всякое может быть.
                                    • 0
                                      В последней версии стало комфортней, но контрол зума всё-ещё сильно дискретный и дёрганый. Думаю поправят.
                                  • 0
                                    ксара есть и для линукс www.xaralx.org/
                                    жаль что скетч только под мак…
                                    Сам в ксаре всё делаю, по сравнению с другими векторными редакторами, очень удобный и быстрый.
                                    • 0
                                      Обнадеживает, что макинтошная Xara все-таки в разработке. Хотелось бы покрутить.
                                • 0
                                  А есть там встроенные элементы HTML, Bootstrap, iOS, OS X, экран айфона? Я не дизайнер, рисовать каждую кнопку не хочу, но накидать стандартных элементов, подвигать их было бы очень удобно.
                                • +1
                                  Вот aleynikov.pro/articles/20130423/71.html делал больше для себя — подборку исходников для Sketch. Может кому пригодится…
                                  • 0
                                    И ещё один сайт с .sketch sketchmine.co
                                    • 0
                                      Пытался перейти на него с Fireworks, когда тот умер – не вышло. В основном по причинам, подобным изложенным в блоге sketchisbest.tumblr.com – дикие глюки постоянно, ограничения и прочие неудобства. Потом я хорошо изучил Illustrator, и уходить от него совсем не желаю – сравнивать его со Sketch просто нет смысла, это вообще разных уровней ПО.
                                      • 0
                                        Мне Иллюстратор тоже нравится, но Скетч просто чуть удобнее. В Иллюстраторе мне не хватает страниц (у меня щас в проекте больше сотни экранов, не представляю, как бы я ползал по холстам в Ai), а еще везде панельки-панельки-панельки. Скетч отдельно удобен тем, что практически все можно делать «горячими клавишами», а в Иллюстраторе постоянно нужно курсором тыкать. А в общем, согласен — переходить нет смысла, если у вас и так все хорошо.

                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.