Пользователь
0,0
рейтинг
11 июня 2014 в 18:04

Дизайн → Switch to Sketch. Часть 1 tutorial



О программе Sketch я узнал еще год назад. Скачал демо тогда еще 2-й версии. Признаться, она меня совершенно не впечатлила. Какой-то слишком простой показалась. Я привык к навороченным интерфейсам софта от Adobe, а расположение панелей в стиле Apple iWork (Pages, Numbers, Keynote) мне по какой-то причине не нравится. К тому же мне оказалось комфортнее работать с темным интерфейсом, каковой нынче есть в Photoshop CC. Плюс Sketch 2 был достаточно кривоватый, содержал немало досадных багов, да и вообще впечатления не оказывал скоростью работы. В общем, поигрался с демкой и благополучно забыл. Впрочем, оказалось, что зря…



Но со временем стал все чаще и чаще встречать лестные отзывы в адрес программы (например, здесь и здесь). Особенно много их стало появляться весной 2014 года, когда Bohemian Coding выпустили 3-ю версию своего продукта. Создатели уверяли, что, будучи сами дизайнерами, они сосредоточились на изготовлении продукта, максимально заточенного под нужды именно дизайнеров. В первую очередь — дизайнеров интерфейсов и сайтов. Ну, то есть, вроде как для меня.

Я снова скачал демо уже новой версии, потыкал, покрутил. Что-то понравилось, что-то нет. И снова у меня не сложилось впечатление, что программа эта мне подходит. Вернулся к привычному фотошопу.

И так случилось, что мне пришлось делать очень сложный и крайне интересный проект, где потребовалось рисовать интерфейсные элементы для iPad с разрешением Retina. Там было много тулбаров, панелей, всплывающих окон. Все это решено было сделать с эффектом матовой полупрозрачности как в iOS7 (transcluent frosted glass). В фотошопе это сделать непросто, особенно, если требуются динамические объекты, при перемещении сохраняющие размытие расположенных ниже слоев. Такой метод, впрочем, имеется. Но он таит в себе ряд недостатков. Во-первых, нужно постоянно создавать новые смарт-объекты, если меняется структура фона. Во-вторых, на каждую панель нужно выделять копию смарт-объекта с размывкой, чтобы сделать необходимую маску. В общем, из-за этого макет очень быстро раздулся.

Однажды я обнаружил, что он едва помещается в оперативной памяти, сильно замедляет все процессы, а на жестком диске занимает уже около 700 мегабайт! Я попробовал разделить макет на логические составляющие и разбил его на несколько меньших частей. И все равно, каждый PSD занимал как минимум 100-200 мегабайт. К тому же временами приходилось одновременно открывать два-три этих макета, чтобы перенести какие-то слои из одного в другой. При этом фотошоп жутко тормозил, что дико нервировало, ведь у меня далеко не самый шустрый мак. Моему старичку уже пять лет, на его борту всего лишь двухъядерный Core2Duo и простенькая видеокарта с 256мб видеопамяти. На момент покупки он более-менее справлялся с возложенными задачами, тогда ведь фотошоп был версии CS5, а она была не настолько прожорливой, как нынешний CC. Увы, Adobe из года в год наращивает свои продукты всевозможными плюшками и функциями, которые в девяти случаях из десяти оказываются бесполезными и только ухудшают производительность пакета, раздувшегося до безобразного состояния.

В общем, морока и головная боль.

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

Скачал актуальную на данный момент версию 3.0.3 (которая, кстати, по заверениям разработчиков и многочисленным отзывам пользователей, наконец-то, лишилась большинства багов и недоразумений). И стал пробовать. Ибо твердо решил свитчнуться из фотошопа во что-то более подходящее, несмотря на то, что продукту от Adobe я был верен целых 15 лет.

Вот как выглядит мой вариант расположения панелей в Photoshop CC (кликабельно):

01b-photoshop-thumb.jpg

А вот так выглядит окошко запущенного Sketch с небольшой доводкой верхнего тулбара под мои нужды:

02b-sketch-small.jpg

Ну что ж, настала пора опробовать программу в работе.

Для начала я решил имплантировать в макет основу, которая у меня имелась в формате EPS. Это простенькая векторная иллюстрация мультяшного характера.

Фотошоп позволяет открыть EPS в виде смарт-объекта, который возможно редактировать лишь в Adobe Illustrator, дважды кликнув по имени слоя в фотошопе. Мне такой вариант совершенно не годился, поскольку была потребность в определенные моменты скрывать какие-то объекты с иллюстрации, переносить их в другом место, вращать и делать полупрозрачными. Поэтом мне пришлось выбирать в иллюстраторе нужные объекты по отдельности, переносить их через Copy/Paste в фотошоп как смарт-объекты, пока я не получил нужный набор из 20 слоев необходимых мне компонентов. С одной стороны, это оказалось весьма утомительным занятием, а с другой стороны, макет только одной основы в формате PSD вырос до неприличных 40 мегабайт, хотя первоначальный EPS весил всего лишь 7 мегабайт. Вот такая «потрясающая» связка у продуктов одного пакета — Photoshop и Illustrator. Странно, что до сих пор Adobe не сделала адекватное и обоюдное понимание этими программами форматов PSD и AI.

Может возникнуть резонный вопрос, а почему я целиком и полностью не работаю в иллюстраторе? Ну вот как-то не сложилось у меня с ним. Что-то мне в нем сильно не нравится, никак не могу привыкнуть. Да и к тому же, он монстр не менее раздутый, чем фотошоп, и производительностью отнюдь не радует. Плюс там и вовсе невозможно сделать эффект матового стекла простыми методами. Иными словами, Adobe Illustrator мне нужен лишь как некий промежуточный инструмент, а в качестве основной среды для дизайна лично мне не годится.

И поэтому я использовал Illustrator как перевалочную базу. Дело в том, что хотя Sketch и понимает формат EPS, но импортирует его как-то криво, нередко перевирая заливки и обводки. Зато очень хорошо дружит с форматом Scalable Vector Graphics (SVG). Поэтому в иллюстраторе имеющийся EPS перезаписал в SVG и открыл в Sketch. Надо сказать, загрузка макета пролетела за считанные секунды, а все объекты сохранили свои характеристики. Скажу даже больше — все группировки векторных форм оказались верными, так что выбрать нужный объект и сделать что-либо с ним получилось проще просто. Собственно, то, что нужно. И файлик в формате .sketch в итоге оказался немногим больше исходного EPS — 7,5 мб. Против 40 с лишним мегабайт .psd!

Заодно я посмотрел размеры, которые обе программы занимают на диске и в памяти, а также измерил секундомером скорости запуска, открытия и записи документа, выхода из программ.

Вот какие получились результаты:

03-table.jpg

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

Большинство клавиатурных комбинаций оказались одинаковыми для обоих программ, но к некоторым пришлось привыкать в Sketch. что, в общем-то, не проблема. И даже по прошествии какого-то времени, возвращаясь в фотошоп, я уже по привычке несколько раз пытался использовать скетчевские шорткаты. Все они описаны на этом сайте: sketchshortcuts.com

Там же, кстати, описано, как добавить свои собственные шорткаты. Например, в Sketch не было клавиатурного сокращения для показа/сокрытия направляющих гайдов, так что я добавил привычную комбинацию Cmd-;

04-sketchkb.png

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

Следующим этапом стала необходимость создания того самого полупрозрачного окна с эффектом матового стекла в стиле iOS7. Как я уже писал выше, в фотошопе приходилось использовать хитрость с копией смарт-объекта, которая подвергалась гауссовой размывке (Gaussian Blur на 20 пикселей) с добавлением шума (Add Noise со значением 1%).

Вот как выглядела расстановка слоев в фотошопе. Для примера я взял простую фоновую фотографию и добавил белый прямоугольник со скругленными углами, который имитировал всплывающее окно с эффектом матового стекла:

05-pspanel.png

Размер этого PSD — 5,5 Мб

То же самое я сделал в Sketch с помощью встроенных эффектов Background Blur и Noise. получилось вот что:

06-spanel.png

А размер этого файла .sketch — 643 Кб. Почти в десять раз меньше! При этом всего лишь три слоя (собственно, для основы попапа нужен всего один слой, а не три, как в фотошопе).

Надо ли говорить, что аргументов в защиту фотошопа, с которым я проработал долгих 15 лет начиная с версии 3.0, попросту не находится.

Дальше я взял изображение побольше, уже под iPad Retina и стал создавать полупрозрачные окошки, нашпиговывая их иконками и текстом. И обнаружилось, что моя слабенькая видеокарта не выдерживает такой нагрузки, и при попытке переместить все это добро с обилием блура начинаются весьма ощутимые тормоза.

Но, как оказалось, это легко решаемая проблема. Потому как в Sketch есть такая удивительная штука, как линкованные стили.

Достаточно выбрать один из объектов, на котором имеются все необходимые эффекты прозрачности, размытия, заливка и шум и добавить линкованный стиль:

07-saddlinkedstyle.png

Затем применить этот стиль ко всем нужным объектам.

И если требуется как-то перетасовать все эти объекты на экране, можно временно убрать эффекты размытия и шума, нажав на соответствующие чекбоксы, и эти эффекты отключатся у всех объектов с данным стилем. Тогда перемещение и трансформация всех слоев будет максимально быстрой. Ну а перед тем, как экспортировать изображение, нужно точно так же легко парой кликов включить эффекты:

08-snoblur.png

Когда я создал 10 таких попапов в фотошопе, размер файла увеличился до 19,1 мб, тогда как аналогичный .sketch вырос лишь до 672 Кб!!!

В Sketch напрочь отсутствуют какие-либо кнопки для выравнивания объектов друг относительно друга, хотя есть такие пункты в меню Arrange (Align и Distribute). Поначалу это меня обескуражило, ведь я привык в фотошопе использовать такие кнопки на тулбаре. Но, как оказалось, они совершенно не нужны. Ведь в Sketch прекрасно реализованы смарт-гайды, и при перемещении объекта можно легко распознать, когда она прилипает к краям другого объекта или находится в центре:

09-salign.png

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

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

10-pstext.png

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

11-stext.png

Кстати, еще немного о тексте. Разработчикам сайтов и интерфейсов будет приятно узнать, что Sketch использует системный антиалиасинг, причем можно как включить, так и отключить субпиксельный рендеринг, что позволяет получить максимальное соответствие тому, что будет отображаться на сайте или в программе. А что там у нас в Photoshop? В версии CC в дополнение к уже имеющимся пяти типам сглаживания (None, Sharp, Crisp, Smooth и Strong) добавили еще два (Mac и Mac LCD). Но ни один из них не повторяет антиалиасинг, используемый, например, в браузерах. Что делает всю эту охапку методов сглаживания практически бесполезной (хотя None в крайне редких случаях может оказаться полезным).

Вот как для сравнения выглядят типы сглаживания в Photoshop, Sketch и в браузере Safari:

12-alias.png

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

Очень удобным является подсвечивание объекта голубой обводкой при наведении мышки. Причем подсвечивается также рамка вокруг имени данного объекта в палитре слоев:

13-highlight.png

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

И вот тут нередко начинались мучения. Поскольку каждый объект приходилось уменьшать вручную, постоянно контролируя точность экстраполяции. При этом нужно было обращаться к верхней панели, где размеры по умолчанию указывались в процентах, а для ввода точного значения в пикселах нужно было дописывать «px», и очень порой раздражало, если вовремя не переключил раскладку и ввел «зч», на что фотошоп ругался, ибо таких единиц измерения он не понимает. К тому же символ цепочки, отвечающий за пропорциональное изменение масштаба, как назло, по умолчанию всегда отключен, и приходилось всякий раз напоминать себе его включить. Конечно, и к таким мучениям можно привыкнуть, но надо ли оно?

В большинстве случаев фотоошоп справлялся с масштабированием корректно, но иногда попадались экземпляры, у которых высота была то 99, то 101 пиксель. В реальности там просто добвлялась едва заметная полупрозрачная полоска на одной из сторон.

В Sketch же если вы масштабируете объекты (особенно это важно в отношении растровых объектов), то они принимают исключительно целочисленные значение, такие, как вы указали в окне инспектора. И никаких «пушистых» краев.

И при этом никаких дополнительных символов вроде «px» вводить не требуется, поскольку Sketch изначально заточен под работу с пикселями. Впрочем, можно ввести и проценты, он нормально распознает и смасштабирует объект. Помимо этого, можно использовать арифметически операции вроде 300*2 или 256+128.

Очень полезной оказалась вариативность клавиатурной комбинации Cmd-D. Если слой не был перемещен с копированием, этот шорткап просто дублирует слой. А вот если производилось перемещение слоя с одновременным копированием (при зажатой клавише Alt), вызов Cmd-D продублирует объект с соответствующим смещением относительно оригинала. Так что можно быстро раскидать копии на одинаковое расстояние.

Есть и другой, более любопытный способ распределения объектов — создание сетки из объектов. Для начала нужно выделить требуемые объекты:

14a-grid-selected.png

Затем необходимо выбрать команду меню Arrange > Make Grid…

14b-grid-nobox.png

И объекты распределятся с указанными отступами:

14c-grid-nobox-result.png

А если включить чекбокс Boxed, то будут учитываться не линейные размеры самих объектов, а одинакового размера боксы, внутри которых размещаются выбранные объекты:

14d-grid-box.png

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

14e-grid-box-result.png

Имеется, кстати, любопытная опция для треугольников. Если вы отредактировали нарисованный треугольник так, что он стал с разными углами и сторонами, можно легко превратить его в равнобедренный, нажав на инспекторе чекбокс Equilateral:

15-equilateral.png

Конечно, даже в самой свежей версии имеются небольшие досадные баги. Например, манипуляции с объектами временами оставляют экранные артефакты. Но разработчики активно работают над устранением этой проблемы. В бета-версии 3.0.4 я уже не наблюдал таких нюансов. Очевидно, что программа от версии к версии будет становиться все лучше и стабильнее. Кроме того, отрадно, что разработчики внемлют пожеланиям дизайнеров. Я тоже предложил парочку идей, и мне ответили на следующий день, включив мои пожелания в wishlist на будущие версии.

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

Удачного фотошопинга скетчинга!





despoth @despoth
карма
32,9
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (69)

  • +2
    Недавно на Moscow Dribbble Meetup один из докладов был — «Sketch 3. Мастер-класс»
    Вполне себе вкусная программулина, напомнила мне чем-то древнюю Corel Xara.

    Лично для меня отвал башки будет тогда, когда в ней запилят базовую работу с таблицами, как это сейчас существует в InDesign.
    • +1
      Не древняя Corel Xara, а современный Xara Designer Pro. Жду когда Богемные кодеры перетянут основные киллерфичи из Зары (нормальные булевые операции, работа с заливками и т.п.) и главное — скорость рендера. По рендеру зара до сих пор уделывает все векторные редакторы вместе взятые.

      Думаю через тройку-четвёрку мажорных версий скетч станет очень крутым.
      • +1
        Булевые операции и теперь в Sketch достаточно крутые, уж круче некуда.
        Сравнивать Xara Pro и Sketch куда более сложно, нежели Photoshop и Sketch. Хотя и ксара и скетч — оба векторные редакторы, но заточка слишком разная. Ксара — скорее альтернатива корелу, ибо он властвует на компьютерах с Windows, и ведь ксара была под крылом корела. Скетч — абсолютно маковский продукт со всеми плюсами и минусами именно маковской среды. Но еще раз повторю — тут заточка под предельно пиксельную работу, чего у ксары никогда не было и не будет. Нынче топология такова, что на двух стульях не получится сидеть. Тем более на трех, четырех, пяти… Либо фото, либо полиграфия, либо веб, либо что-то еще. Время раздутых универсальных решений в прошлом. Дизайнерам нужны внятные и простые инструментарии под конкретные нужды. Скетч — для UIстов. Ксара — для не пойми чего.
        • +2
          Небольшая историческая справка про Зару и Корел. «Под крылом» — не совсем так. Даже совсем не так.

          Зара существует со времён первых компьютеров с 1981 года. Они разрабатывали софт для Atari и других платформ.

          Например, шестая версия Корела должна была выйти на одном диске с одной из первых версий Зары. Но даже партнерское соглашение было нарушено Корелом. Тогдашняя версия Зары весила всего десять мегабайт против 150 (!) у Корела. Мало того, Зара, работала в тысячи раз быстрее, и сами файлы сохранялись и открывались быстрее. А контекстный тулбар, где параметры изменяются в зависимости от выбранного инструмента — разработка Зары. Позже этот тулбал был благополучно украден Корелом и появился в седьмой версии. В результате Корел 6 вышел на диске без Зары.

          Изначально Зара была заточена под издательскую деятельность. Но они почему-то долгое время не могли договориться с компанией Pantone, может, как раз благодаря «партнерству» с Корел. Позже добавились стили для интерактивных элементов (кнопок, тулбаров и т.д.). То есть уже можно было делать графические кнопки для сайта, например. Или мокапы для сайта. При этом Зара сразу выдавала html-код и умела отлично оптимизировать графику для веб (jpg, gif, png). А реализация заливок и прозрачностей вообще вне конкуренции до сих пор. А какой быстрый там рендер с антиалиязингом!

          Последние версии уже умеют работать с pdf, пантонами, и ещё невероятным множеством всего. Появилась 64-битная версия. Самый последний Webdesigner умеет создавать адаптивные сайты, например.

          Единственный недостаток — это только Windows. Под мак её нет.
          • 0
            Единственный недостаток решается установкой parallels desktop ;)
            • 0
              Я с удовольствием продолжаю в ней работать даже после перехода на Sketch под маком.
              Две машинки рабочих — эйр и десктоп с W7.

              А ставить Parallels из-за одной единственной, пусть и любимой, программы не вижу смысла.
              • 0
                Я его увидел :)
        • 0
          Как в скетче сделать это? Пробовал, получается. Но не так быстро и не так чётко. Впечатление, что у него работа с безье и булевыми пока глючновата. Поправьте, если это не так.

          Мне кажется вы плохо знаете зару, потому так судите.

          Скетч, несмотря на его детские болезни, уже сейчас хорошо бодается с конкурентами. Особенно в секторе UI-дизайна. Осталось дождаться, когда кодеры и верстальщики будут принимать макеты не только в .psd, но и в .sketch. Для этого было бы неплохо портировать редактор под винду.
          • 0
            Да, я плохо знаю Xara. Немного работал с ней лет семь назад, когда еще был на платформе windows. Но потом перешел на мак и забыл о существовании CorelDRAW и Xara.

            В скетче основное преимщество вовсе не в мощных и удобных векторных инструментах, а в очень правильной поддержке работы с пикселями. Вот буквально все там заточено под такую работу, чтобы получать предельно четкие и ровные результаты. Оттого и оценили данную программу ui-дизайнеры. Будь в Xara такие же функции — возможно, был бы достойный продукт. Но, насколько я знаю, ничего такого в ней нет, и она просто в какой-то степени наверное более лучший вариант корела.
            • +1
              В xara привычный человек ориентируется по цифрам. Привязка к пиксельной сетке и, в случае нужды, примененный фильтр позволяют практически все.

              Касаемо иконок, очень занятно посмотреть видео «how it's made» Дениса Сажина:
              iconka.com/ru/blog/

              Странно, даже на его канале не могу найти, был еще speed drawing бокала пива.
              • 0
                Я посмотрел на ютубе ролики про новые возможности ксары про 7. Сдается мне, я не смог бы работать в такой программе. Слишком она перегружена интерфейсными элементами. Та же у нее болезнь, что у корела или адобовских продуктов. они стараются объять необъятное и предоставить пользователю как можно больше фич сразу, когда оно нафиг не надо, и в итоге разработчики сами загоняют себя в необходимость как-то компоновать, скрывать, привязывать друг к другу разные панели. Все это уже устаревшие тренды. Современное ПО предполагает предельную простоту и показ только тех опций, которые нужны именно на данном этапе, а не всей кучи имеющихся фич. В скетче подавляющее большинство возможностей так или иначе спрятано, и появляется по мере необходимости. Плюс в ксаре лично мне очень не понравилось оформление ui. Какие-то градиенты, какие-то несерьезные и скучные иконки, все эти старомодные бевелы у окошек воода значений и т.п. Выглядит вся эта окрошка довольно уныло. Лет 10 назад было бы круто, но не сегодня. Простой и лаконичный светлый интерфейс скетча как-то больше располагает.
                • 0
                  Интерфейсные элементы — не зло, если ты собираешься профессионально работать в программе. Да, они могут отпугнуть при первом знакомстве, но при частом использовании они нужны и полезны. Лично у меня вызывают неприязнь ribbon'ы новых офисов как раз тем, что множат на ноль моторную память. В старых же офисах бесило автоскрытие неупотребляемых пунктов меню, когда приходилось вчитываться каждый раз, когда это меню понадобилось.

                  Но это так, лирика. Не вижу чем в xara загроможден интерфейс — тулбокс, интерактивный тулбар текущего инструмента и файловые операции. Палитры же вытаскиваются по мере необходимости, могут плавать, могут стыковаться с краем окна, могут быть спрятанными и появляться при наведении мыши. Из скриншотов я не заметил каких-то особых находок интерфейса.

                  p.s. Кстати, интерактивный тулбар, в котором отображаются опции текущего инструмента я впервые увидел в xara, тогда еще corel xara, которая умещалась на 3 дискетах. Там же впервые появился инструмент интерактивной градиентной заливки и такой же прозрачности, это был как гром с ясного неба. Довольно быстро эти находки перекочевали в coreldraw и с огромным опозданием — в иллюстратор.
          • 0
            Для этого было бы неплохо портировать редактор под винду.

            Скетча не будет под винду. По крайней мере в ближайшие 5 лет, точно.
          • 0
            Насчет передчи макетов верстальщикам: вот эти ребята вроде бы собираются поддержку.скетч сделать.
        • +3
          Вступлюсь в защиту Xara и возможность пиксельной работы. Хоть у нее нет иллюстраторовского режима pixel preview, но есть инструментарий, чтобы этот самый пиксельный превью получить. Называется «живые фильтры», не мешает работать с вектором, но одновременно показывает пиксель.
          Растеризация же у xara выше всех похвал.

          Касаемо назначения xara… Для веб-дизайна я ничего более удобного не встречал. Заточка как раз идет под это — странице можно назначить хедеры и футеры, меню и ссылки. Клиенту можно спокойно показывать рабочий прототип в html, что очень подкупает.

          Очень хорошо в xara рисовать иконки в векторе, очень хорош автоматический экспорт в случае необходимости изменений. Опять-таки, не встречал лучше.

          Я по платформенным причинам не могу глянуть на sketch, но xara — это один из великолепнейших инструментов для веб-дизайна, рисования в векторе и для разработки пиктограмм.
          • 0
            Дело не совсем в пиксельной растеризации и прочих делах. У скетча есть много крутейших фишек, облегчающих работу с пикселями. Опция Round To Nexrest Pixel спасает уйму времени при выравнивании кривоватых иконок и логотипов. Зажатые Alt или Cmd дают возможность на лету оценить все отступы и расстояния до ближайших объектов. Функция Make Grid повзоляет быстро и очень качественно распределить объекты. Встроенные темплейты от Teehan+Lax дают возможность легко проектировать интерфейсы для iOS. Sketch Mirror позволяет тут же отследить макет на айпаде или айфоне. Автоматический экспорт слоев в PNG просто поражает своей простотой и эффективностью. Copy CSS и вовсе дает небывалую мощность для разработчиков интерфейсов. Ну и так далее. Все эти полезные свойства программы я постараюсь описать в следующих частях обзора. Ведь программ для создания графики нынче много (на маке те же Acorn, Pixelmator, Inkscape, Intaglio) — каждая по-своему хороша, но ни в одной из них нет такой уникальной и очень крутой заточки под пиксельную работу, как у скетча.
  • +1
    Спасибо за обзор! Похоже надо будет все-таки найти время на изучение данной программки.
    Кстати, сразу вопрос всплывает: а что у нее с совместимостью с упомянутым тут же фотошопом?
    • +1
      Прямой совместимости нет. Скетч не понимает формат .psd, равно как фотошоп не ведает о существовании .sketch
      Но возможно с определенной степенью достоверности портировать свои макеты из фотошопа в скечт, используя все тот же иллюстратор.
      Записывает в фотошопе в формат Photoshop EPS. Открываете в иллюстраторе и пересохраняете в .svg, отметив галочку Preserve Illustrator Editing Capabilities.
      Полученный .svg открываете в скетче и после недолгой подчистки некоторых косяков наслаждаетесь вполне работоспособным макетом.

      Впрочем, я думаю, появление онлайнового сервиса psd2sketch — дело времени, ибо, как показывает практика, такие сервисы появляются по мере распространенности искомых форматов.
    • +2
      В свое время тоже интересовался этим вопросом, и очень порадовал официальный ответ разработчиков: «Только Адоб понимает логику создаваемых файлов .psd, равно как и их чтение. Нам эта магия недоступна :(».
      • +1
        Тем не менее, ряд программ сторонних и довольно некрупных разработчиков понимает .psd. Тот же Pixelmator.
        • +1
          Есть тулза для Руби от LayerVault — PSD.rb
          • 0
            Да, спасибо. Пригодится.
        • 0
          Понимает, но не полностью, текстовые слои открывает не правильно

          • 0
            Скачал последний Pixelmator
            однако уже все гораздо лучше чем раньше с PSD, теперь с чистой совестью покупаю его и удаляю Фотошоп
      • +2
        По PSD есть официальная спецификация www.adobe.com/devnet-apps/photoshop/fileformatashtml/. Есть множество парсеров данного формата. Поэтому технически реализовать это в Sketch возможно — с помощью плагинов.
        • +1
          Полагаю, что со временем будет все это реализовано. Главное, чтобы Adobe не покупало Bohemian и не пыталось с ними судиться. потому как опыт показывает, что купленые адобой продукты либо помирают, либо превращаются со временем в очередной придаток фотошопа, что ничего хорошего за собой не влечет.
  • 0
    да, любопытно, надо попробовать. хотя если вот так сходу то отвращает светлый интерфейс, отвык от него. а я вот жду когда допилят бету Quasado gravit. планировали на май, но задержались с переработкой стилей. теперь клятвенно обещают к первому июля пустить в народ.
    • +2
      посмотрел небольшой ролик, где удалось увидеть хоть какой-то интерфейс этого Gravit: www.youtube.com/watch?v=CXBvSWBXofY
      на мой взгляд, совершенно несерьезная приблуда, годная для простых манипуляций. На поиграться, в общем. В ней нет и десятой доли тех фич, что реализованы в скетче. полагаю, что еще весьма долго данный продукт не будет пригодным для профессионалов.
      • 0
        надо смотреть и пробовать. но вообще хочется верить в чудо :) меня на gravit навели люди с фрихендфорума, они эту разработку как-бэ курируют и поддерживают. хотя Иллюстратор всем хорош (и эти поделия ему не конкурент, если честно), но его тяжеловесность часто достает нечеловечески. на данный момент для «вектор по быстрому» пользую iDraw, он удобный, но очень уж сиротский
  • +4
    И если в фотошопе после создания текстового объекта необходимо в панели инструментов выбрать что-то другое, например, инструмент перемещения объектов, а для того, чтобы вернуться к редактированию текста, выбрать инструмент текста...

    Здесь у меня возник вопрос: вы точно 15 лет работали в Photoshop? Я работаю в нем ровно в два раза меньше и предлагаю вашему вниманию другие способы применить изменения (или первоначальный ввод текста) без переключений на другие инструменты:
    1. Самый удобный, в случае если вы работаете на клавиатуре с полноценным цифровым блоком — нажать Enter на этот самом цифровом блоке.
    2. Нажать Ctrl+Enter (соответственно, быстрее всего нажать правый Ctrl+Enter).
    3. Кликнуть мышкой по редактируемому текстовому или любому другому слою в панели слоев (но это долго и сродни написанному вами).

    Войти в режим редактирования нужного текстового слоя, с одновременным выделением всего текста и переключением на Type Tool, можно дважды кликнув левой кнопкой мыши по области предпросмотра сего слоя в соответствующей панели.

    Можно выйти из режима редактирования текста, не применяя изменений (или отменить первоначальный ввод), нажав Esc.

    Это из тех, что знаю я. Возможно есть и другие варианты.
    • 0
      Это сугубо дело привычки. С самого начала в фотошопе ничего такого не было, и он приучил практически все делать из тулбаров, кликая мышкой по иконкам и кнопкам. Со временем появились вменяемые и главное — настраиваемые шорткаты, стало поудобнее. Но все равно, многие вещи приходится делать по старинке, по привычке.
      К тому же немаловажным здесь является фактор лернабельности. Исследуя скетч, я поставил себя в позицию начинающего дизайнера, который мало что знает. Так проще открывать интересные функции. Так вот лернабельность таких функций у скетча пока значительно лучше, чем у фотошопа. О том, как войти в редактирование текста и выйти из него, не прибегая к переключению инструментов на тулбаре (а это самый очевидный с точки зрения лернабельности путь), нужно откуда-то ЗНАТЬ. И это очень плохо. Ведь нужно изучить документацию, посмотреть туеву хучу туториалов, типсов-триксов и т.п., чтобы набрать себе в голову всю эту методику. В скетче же делаешь все интуитивно, и процесс того же входа и выхода в режим редактирования текста прост и понятен сразу.
      • +3
        Привычка привычкой, но изменять себя всё-таки нужно. Иначе я бы до сих пор использовал ластик вместо масок и рисовал выделениями, а не векторными фигурами. Для узнавания первого и третьего из описанных способов не не потребовалось никаких уроков. Мне кажется, ваших 15 лет более чем достаточно для узнавания тем же «методом тыка».

        Хотя, силу привычка трудно недооценивать. После изучения Illustrator я привык, что самый быстрый способ выйти из режима редактирования текста с сохранением всех изменения — это нажать Esc. Теперь, когда работаю в Photoshop, мне «доставляет» совсем обратный функционал программы. И, кстати, я считаю, что несколько глупо не использовать багаж полученных знаний для ускорения обучения новому. Мне, в том же изучении Illustrator, знания по Photoshop вполне пригодились и дополнительное постижение некоторых функций фактически не потребовалось. Но тут, несомненно, играют роль личностные возможности и видения.
  • 0
    Промахнулся веткой…
  • +2
    Время открытия фотошопа — это смешно, да. :)
    Почему-то у меня он открывается около секунды, вместо заявленных вами 27 :)
    • 0
      Достаточно долго у меня висит бар Initializing Type Tool. Полагаю по причине того, что у меня включено около 3000 шрифтов. Плюс какие-то плагины подгружаются. Когда я отключаю большинство из них, фотошоп грузится, конечно, быстрее. К тому же на более современном маке с процессором i5 и SSD-диском он загружается молниеносно. У меня, увы, устаревшая техника… Впрочем, CS5 грузился тоже весьма шустро, секунды две-три.
      • 0
        Suitcase Fusion не пробовали?
        • 0
          У меня Linotype FontExplorer.
        • 0
          Конечно, столько много шрифтов редко нужно, и большинство из них я отключаю в повседневной работе. Но я большой любитель больших шрифтовых наборов в пределах одной гарнитуры, потому у меня собраны по максимуму всякие Helvetica Neue, Univers, Avenir, Myriad Pro, Minion Pro, Proxima Nova, OpenSans, PT Sans, Frutiger, Futura, Times, Book Antiqua и т.п. В процессе я люблю поиграть с разными гарнитурами, подобрать подходящую. Вот и висит в памяти охапка этих шрифтов, заставляя фотошоп загружаться дольше обычного.
    • 0
      Пора, в общем, мак менять. Уж дождусь появления аймаков на ретине, тогда возьму. Явно будет помощнее и пошустрее…
  • +5
    Не знаю почему, но когда я вижу человека рисующего интерфейс в Фотошопе, я сразу вспоминаю эту сцену:

    image

    Еще заметил, что Скетч хвалят только люди, которые перешли на него с Фотошопа. Хотя согласен, после Фотошопа это просто праздник.
    У меня даже есть подозрение, что дизайнер Скетча тоже работал в Фотошопе.
    • +1
      Когда мне приходится экспортировать интерфейс в фотошоп, я вспоминаю эту сцену:
    • 0
      Ну так поделитесь, пожалуйста, хорошими тулзами для рисования интерфейса. Сам далеко не дизайнер, но чувствую может пригодиться :)
      • 0
        Fireworks
        Собственно Скетч после слития Адобом этого редактора и обрёл некоторую популярность и начал активнее разрабатываться.
        Но Скетчу до Файрворкса ещё пилить и пилить к сожалению.
    • 0
      У нас вон полна студия аниматоров которые рисуют в фотошопе, и не то что бы хотели переключатся на другой софт. А есть альтернативы для анимационного рисования?
      • 0
        Лично я для этих целей использую Adobe Edge Animate CC: html.adobe.com/edge/animate/
        • 0
          Аниматоры, это люди которые рисуют анимации… Мультики. Простейший пример — vimeo.com/93206523. Причем тут Edge?
        • 0
          Edge будет жить не долго. Это инсайдерская инфа.
      • 0
        Иногда еще After Effects CC
      • 0
        А что они анимируют?
        • 0
          Edge создает веб-анимацию на базе HTML5 + CSS3 + JavaScript.
          AfreEffects — программа для создания видеоанимации.
          • 0
            Спасибо, я в курсе.
            Я спрашиваю у человека, что они там анимируют, т. к. каждый софт под свои задачи.
            • 0
              Они анимации рисуют. Героев для игр… Я не знаю как мне поможет edge или after effects.
              • 0
                Если спрайты, то, конечно, в Фотошопе.
                Если персонажи плоские, то можно и в Иллюстраторе.
              • 0
                Еще есть Flash Professional. В СС 2015 версии много чего было добавлено. К нему сейчас повторно просыпается интерес у аниматоров для геймдева. Тем более, что это и рисование и тут же анимация.
      • +1
        TVPaint
        • 0
          Ну, да. Это самый заметный из конкурентов, но хотелось бы дешевле фотошопа.
          • 0
            Сейчас акция у них: фотошоп+лайтрум за 300 рублей в месяц, куда дешевле. Но для аниматора фотошоп гораздо менее удобен, как мне представляется. Я конечно больше аниматор в теории:)
            • 0
              В Фотошопе довольно удобные и развесистые анимационные тулзы. В основном его любят за очень крутую часть которая отвечает за рисование. TVPaint, это пожалуй единственный конкурент у которого рисовательные тулзы тоже неплохи. Хотя цена уж очень большая.
    • 0
      Я перешел на Скетч с Фаерворкса и Иллюстратора. Но тоже на все стороны хвалю. Дизайнер Скетча еще жив — значит, рисовал все-таки не в Фш.
      • 0
        Да, Скетч — это новый Фаерворкс.
        Может я чего-то не понимаю, но почти все, что можно было сделать в фаерворксе (и теперь можно в Скетче), можно сделать в Иллюстраторе или Индизайне. При чем, намного быстрее.
        • 0
          Позже я покажу несколько реальных примеров создания в Sketch интерфейсов. И уверяю вас, в иллюстраторе и тем более индизайне вы это будете делать в разы дольше и сложнее.
          • 0
            Интересно посмотреть.
            Я честно пробовал одно приложение сделать в Скетче, но, после двух дней мучений, бросил эту затею и сделал за час в Иллюстраторе.
            • 0
              Любопытно, в чем конкретно заключались эти мучения?
        • 0
          Это если забить на киллер-фичу фаерворкса — многостраничный кликабельный прототип с ховерами и попапами.
  • +2
    Панель выравнивания в Скетче давно есть.

    • 0
      Вот, точняк! А я ее там не приметил. Спасибо, буду знать.
  • 0
    При всех его плюсах — он остаётся игроком одной платформы.
  • 0
    Фотошоп — индустриальный стандарт. А Скетч что это?
    Табличка со скоростью запуска и потреблением памяти повеселила. Навесьте на скетч все то, что умеет фотошоп и мы упремся в +\- те же цифры.

    Вопрос по существу. В скетче есть управление редактором через скрипты? У фотошопа есть JSX, а у Скетча?
    • 0
      Именно так. На первых порах он быстрый, а когда придёт время — будет тот же тяжёлый монстр.

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