Приложение скетч. Продвинутые опции ресайза
Всем привет, я Олейник Антон — дизайнер интерфейсов, поклонник Sketch и один из авторов тематического проекта sketchapp.me . В сегодняшнем гостевом посте детально расскажу про данный графический редактор для Mac OS.
Не смотря на то, что Sketch уже плотно осел во многих известных командах, я часто вижу дизайнеров (особенно со стажем), которые настолько жестко связаны многолетними привычками со своими старыми инструментами, что с негативом даже обсуждают альтернативные варианты (а о применении в рабочем процессе и речи нет). Если вы из таких сомневающихся, добро пожаловать.
Итак, несколько самых главных причин попробовать уже даже и не особо новый Sketch app
Sketch — графический редактор для Mac OS
Да, обычно это упоминают как большой минус. На самом деле это большой плюс приложения, потому что она вовсю использует системные средства OS X (автосохранение, отрисовку, рендер текста). На винде вам пришлось бы страдать со Sketch так же, как и с любой большой программой для графики.
Не работает с растром
Тоже все записывают в минусы. Конечно же, все совсем наоборот. Sketch - векторный и для дизайна интерфейсов. Это не программа для ретуши фотографий. Ну, а интерфейсы в растре, думаю, никто уже сто лет как не рисует.
Небольшие файлы
Документы в Sketch редакторе весят значительно меньше, чем файлы ai или psd (опять же, благодаря использованию системных программных ресурсов макинтоша).
Например, вот файл btn.sketch с одной кнопкой весит 33КБ, такой же btn.ai весит 194КБ, такой же btn.psd - 91КБ. Эти документы небольшие, но и так уже можно примерно оценить соотношение.
Простой интерфейс Sketch
На первый взгляд вам покажется, что вы открыли что-то вроде Keynote. Да, такой чистый внешний вид профессиональной (!) программы немного сбивает с толку ребят, привыкших долго целиться мышкой в чекбоксы на бесчисленных панельках софта от Adobe. Тем не менее, это как раз тот случай, когда меньше = больше. Такой простой интерфейс дает вам время думать головой о своей работе, а не об инструменте.
Немного по интерфейсу
Слева панель слоев. Немного непривычно после Фотошопа, но привыкаешь быстро. Сверху в этой панели есть список страниц. Его можно переключить в «раскрытое» состояние - удобно, если страниц в файле не много.
[Панель слоев Sketch app]
Наверху панель инструментов («тулбар»). Ее, как и в других программах на Маке, можно настроить по своему усмотрению. Инструментов не много, и большую часть из них вы запомните на клавиатуре.
Справа контекстная панель (назовем ее так). Очень похожая, только горизонтальная, была в покойном Фаерворксе. Панель меняется в зависимости от того, чем вы занимаетесь на холсте. Есть три режима - свойства группы, свойства фигуры, свойства текста.
Страницы и холсты
Документ в программе Sketch разделен на страницы. Страницы, в свою очередь, разделены на холсты. Это делает организацию экранов вашего приложения предельно удобной. Например, вы делаете страницу «Login», а внутри несколько холстов с разными состояниями экрана «Login».
В принципе, Фотошоп с Иллюстратором уже умеют сохранять по несколько холстов в одном документе, но им все еще не хватает дополнительного уровня (страниц т.е.)
Тотальная привязка к пикселям всего и вся
Sketch очень внимательно относится к тому, чтобы все у вас попадало в целые пиксели. Если что-то где-то размылось, есть простой способ все исправить.
Стили
В Sketch app, конечно, есть и стили графики, и стили текста. Работают, опять же, поначалу немного привычно: когда вы где-то обновляете стиль у объекта (меняете обводку, цвет, шрифт), стиль обновляется автоматически везде. Нет никаких кнопок типа «Update style».
Символы Sketch редактора очень похожи на символы Фотошопа и чуть-чуть на символы Иллюстратора. Символ здесь - это такая папка (только другого цвета), внутри которой может быть что угодно, но не другой символ. Работает так же, как и стили: обновили в одном месте - автоматически обновляется везде.
Есть чуть замороченный и формально не документированный прием, как вкладывать одни символы в другие, но об этом в другой раз .
Удобный экспорт
Экспорт графики реализован очень просто и удобно. У каждого элемента есть действие «Make Exportable», где вы сможете выбрать нужные форматы и размеры конечных файлов. Есть и всем знакомые фрагменты (slices), чтобы вручную выделять область для экспорта.
Очень удобный момент в экспорте - выбор сразу нескольких форматов и размеров.
Сетка
В графическом редакторе Sketch есть встроенная и гибкая сетка. Вам не нужно ни вручную, ни с помощью сторонних плагинов размечать макет. Все поддерживается из коробки и в любой момент может быть настроено под любые потребности.
Системный рендер текста
Благодаря тому, что Sketch использует системные ресурсы для отрисовки графики, текст в нем выглядит точно так же, как будет выглядеть в браузере в «живом» продукте.
Sketch плагины на все случаи
Как и для всех приличных приложений, для программы Sketch тоже есть расширения. Действия - от простых (расставить выбранные объекты с шагом в 10 пикселей) до замороченных (найти все текстовые слои в документе со словом «адоби» и заменить его на «Adobe», без учета регистра). Если программа не умеет что-то очень нужное, то скорее всего «there’s plugin for that».
Чтобы поставить плагин в Sketch, скачайте (обычно с Гитхаба разрабочика) и просто нажмите дважды или переместите в папку Plugins. Открыть папку: меню Plugins->Reveal Plugins Folder…
[Показать папку плагинов в Sketch]
Потом в меню Plugins у вас появится соответствующий свежему плагину пункт
Список расширений, с которых стоит начать:
- Sketch Commands - большая пачка расширений, пригодится во многих ситуациях;
- Rename It - для удобного и быстрого именования и переименования слоев;
- Content Generator - генератор фото, текстов, имен, географических названий.
Вам может пригодиться небольшое приложение Toolbox, которое упростит установку/удаление плагинов для Sketch.
Малый период обучения
По данному графическому редактору для Mac OS, конечно, cуществуют в сети курсы (вроде бы даже платные есть), но в принципе вам хватит всего пары часов, чтобы самостоятельно разобраться во всех самых важных деталях. Поначалу будет непривычно, но только потому, что вы будете его сравнивать с Фотошопом.
Послесловие
Что можно сказать в финале обзора Sketch? — конечно, он не идеален. Есть иногда тормоза, не хватает некоторых функций (нет растровых), но все же даже в таком состоянии он может сильно облегчить и ускорить вам разработку дизайна.
Скачать программу Sketch, а также узнать все о редакторе Sketch вы можете на сайте
Google SketchUp является простым в использовании приложением, которое поможет вам научиться создавать 3D-модели жилых зданий, ангаров, гаражей, крыш, различных пристроек к домам и даже космических кораблей.
С помощью SketchUp можно легко добавлять детали, менять текстуры, размеры ваших моделей, промышленных объектов с огромной точностью, а также размещать готовые модели на сервисе Google Earth, делиться ими с другими людьми, разместив на сайте 3D Warehouse или распечатав копии. Google SketchUp это отличный способ узнать, нравится ли вам 3D-моделирование.
SketchUp включает следующие инструменты:
- рисование и геометрическое моделирование: Polygon (Многоугольник), FollowMe (инструмент для создания простых и сложных форм – кругов, овалов, квадратов, Offset (инструмент для построения пропорциональных уменьшенных копий объекта) и Intersect with Model;
- конструирование: Dimension (Размеры), Tape Measure (Активизация измерительной рулетки), Protractor (Включение транспортира), Section Slice (Выбор частями), Layers (Слои), Area & Length Calculation (Расчет площади и длины).
Программа SketchUp позволяет:
- рисовать, редактировать, измерять, вращать и масштабировать геометрические фигуры;
- делить 3D-модель на секции для просмотра и отделки внутренних деталей;
- применять к модели готовые текстуры или создавать новые;
- добавлять к своей модели готовые компоненты, такие как деревья, автомобили, окна, двери, людей или создавать новые;
- ретушировать, смягчать черты лица;
- моделировать тени от объектов в реальном времени для любой точки земного шара;
- имитировать размещение видеокамер;
- совершать веб-экскурсии;
- создавать экскурсии – презентации;
- экспортировать двухмерные графические файлы (. JPG,. PNG,. TIF. TGA. BMP) в 3D-моделей (0,3 DS. Дем. DDF. DWG. DXF. СКП);
- экспортировать двухмерные изображения своих моделей (. JPG,. BMP,. PNG,. TIF);
- распечатывать изображения моделей;
- заниматься разработкой дополнительных приложений для программы с помощью языка Ruby.
SketchUp - инструмент 3D-моделирования для профессиональных дизайнеров: профессиональная версия SketchUp дает профессиональным дизайнерам возможности разработки и анализа сложнейших дизайнерских объектов.
SketchUp-пользователи могут:
- экспортировать модели в форматах 3DS, DWG, DXF, OBJ, XSI, VRML и FBX;
- экспортировать анимацию и пошаговые руководства в файлах MOV и AVI;
- использовать моделирование органических объектов (Sandbox) и инструменты Film & Stage;
- импортировать и экспортировать GIS-данные;
- распечатывать и экспортировать растровые изображения с разрешением выше, чем на дисплее;
- получать бесплатную техническую поддержку в течение двух лет после приобретения программы;
- использовать программное обеспечение в коммерческих целях (бесплатная версия – только для личного использования).
Моделируйте все, что только можете представить: ремонт в вашей гостиной, придумывайте новые предметы мебели, создавайте объемные модели городов для сервиса Google Earth. Возможности SketchUp безграничны.
SketchUp превращает 3D-моделирование в удовольствие: мощное, высококачественное программное обеспечение тоже может приносить удовольствие в использовании – секрет в том, что инструменты и возможности SketchUp интуитивно понятны, они работают так, как вы ожидаете. С этим согласятся миллионы наших пользователей.
Получайте модели онлайн абсолютно бесплатно: вы можете строить модели с нуля или скачать готовым то, что вам нужно. Люди со всего мира делятся своими моделями на сайте Google 3D Warehouse.
Начните прямо сейчас: десятки видео уроков, обширный справочный материал, пользователи по всему миру. Если вы хотите создавать трехмерные модели с SketchUp – просто сделайте это!
ПРИМЕЧАНИЕ: Google SketchUp является бесплатным ПО только для личного использования.
Ключевые особенности и функции
- Edges и Faces (Ребра и Грани): Каждая модель SketchUp состоит только из двух вещей: ребер и граней. Ребра представляют собой прямые линии, грани – простые двухмерные формы, которые получаются от пересечения линий. Например, прямоугольная грань имеет четыре ребра, которые соединены между собой под прямым углом. Для построения моделей в SketchUp имеются несколько простейших инструментов, с которыми вы познакомитесь за короткое время;
- Push / Pull: быстро перейти из 2D в 3D: При помощи инструмента Push / Pull можно быстро перенести любую плоскую поверхность в трехмерный образ. Это опция для создания объемных фигур и регулировки толщины объекта. Просто нажмите кнопку, наведите курсор мыши и нажмите кнопку для остановки. Таким образом можно, нарисовав всего лишь контур лестницы, перенести ее в 3D. Точно так же появится окно в стене. Push / Pull – причина того, что SketchUp считается программой, простой в использовании;
- точность измерений: Поскольку вы работаете на компьютере, то все, что вы создаете в SketchUp можно точно измерить. Для этого существуют инструменты конструирования. Кроме того, масштабные модели можно распечатывать на бумаге или экспортировать их в другие программы, например, AutoCAD и 3ds MAX;
- Follow Me: При помощи инструмента Follow Me 3D-формы создаются путем вытягивания 2D поверхности вдоль заданного пути. Можно создать трехмерное изображение бутылки по половине ее конструкции, можно округлять края на таких макетах, как поручни, мебель и электронные гаджеты;
- Paint Bucket: Создавая свои модели, вы можете использовать необходимые цвета для заливки отдельных деталей или всего макета, рисовать модели при помощи необходимых цветов и текстур;
- Groups и Components (Группы и Компоненты): Для того чтобы уточнять вид отдельных частей объемных объектов, при помощи инструмента Groups можно создавать суб-объекты, которые легче перемещать, копировать и прятать. Components (Компоненты) во многом похожи на Groups, но с одной особенностью: скопированные элементы связаны между собой, поэтому изменения, которые вы вносите в один компонент, отображаются на всех остальных. Окна, двери, стулья и миллионы других компонентов вашей модели можно изменять, изменяя всего один;
- Shadow (Тени): Рисование теней в SketchUp можно стало простым и точным: теперь ваши объекты будут отбрасывать правильные тени в режиме реального времени в любой точке земного шара при помощи Shadow Engine;
- Sections (Секции): Инструмент Sections (Секции) позволяет временно «отрезать» части вашего проекта и «заглядывать» внутрь. Данную функцию можно использовать для создания чертежей, экспортирования форм в CAD-программы, использующие SketchUp Pro или для более полного представления о вашей модели в процессе работы над ней. Функция Section Planes дает возможность перемещать, вращать и даже анимировать созданные проекты;
- Scenes (Эпизоды): Мы создали Scenes (Эпизоды) для того, чтобы вы могли легко сохранить точный вид вашей модели, позволяющий вернуться к ней позже. Есть неоходимость в создании анимации? Просто создайте несколько таких эпизодов и нажмите на кнопку;
- Look Around и Walk: В SketchUp имеется набор простых инструментов навигации, призванный дать вам вид от первого лица. Кликните положение камеры, чтобы «стать» в любое место вашей модели. Использование инструмента Look Around позволяет вам «вертеть головой». Функция Walk дает возможность изучить ваше творение во время «пешей прогулки», даже спускаясь и поднимаясь по лестницам, пандусам и прочим элементам архитектуры также, как в видеоиграх;
- Dimensions и Labels (Размеры и Пометки): Вы можете использовать интуитивно понятные инструменты для добавления размеров, аннотаций и различных пометок на вашей модели;
- Instructor (Инструктор): Instructor – это диалоговое окно, в котором вы можете получить помощь в контексте вашей работы;
- Layers и Outliner: При строительстве большой и сложной модели можно легко запутаться. SketchUp предоставляет два простых способа сохранить контроль над ходом работ – Слои и Вкладыши;
- Google Earth: SketchUp и Google Earth являются частями одного и того же семейства продуктов, что позволяет обмениваться между ними информацией. Необходима строительная площадка для вашего проекта? Импортируйте масштабируемую аэрофотосъемку, в том числе и топографию непосредственно из Google Earth в SketchUp, нажав всего одну кнопку. Хотите увидеть свои SketchUp модели в контексте в Google Earth? Просто нажмите другую кнопку. Каждый может использовать SketchUp для создания моделей, которые затем все увидят в Google Earth;
- инструменты Sandbox: Инструменты Sandbox позволяют создавать, оптимизировать и изменить 3D местность. Вы можете создавать гладкие пейзажи из множества контурных линий, добавлять насыпи, долины, создавать площадки для зданий и дорог;
- сайт 3D Warehouse: Сайт 3D Warehouse – это огромное онлайн хранилище 3D-моделей. Зачем строить что-то, когда вы можете скачать его бесплатно;
- импорт 3DS: Вы можете импортировать файлы 3DS непосредственно в модели SketchUp. Если есть образец в 3DS формате, который вы хотели бы использовать, то нужно просто импортировать его, а затем сохранить;
- импорт изображений: Со SketchUp можно импортировать файлы изображений в форматах JPG, TIFF, PNG и PDF. Вы можете использовать их сами по себе или наложить их на поверхность для создания фотореалистичных моделей зданий, конструкций упаковок и многого другого;
- экспорт TIFF, JPEG и PNG: SketchUp позволяет экспортировать растровые изображения до 10000 квадратных пикселей, генерировать изображения для отправки по электронной почте, публиковать в документах и других проектах.
Для лейбла Digital Om Productions меня просили рассказать, что это за странный графический редактор на скриншотах, в котором мы делали макеты. Рассказываю.
Последние лет десять я работал в Фотошопе. Безусловно, это лидер индустрии, проверенный временем. Но меня всегда не покидало чувство, что это как-то неправильно. Дизайнить сайт в Фотошопе это как резать хлеб швейцарским ножом: вроде с задачей справляется, но много лишнего мешается.
Фотошоп - как швейцарский нож
Несколько месяцев назад я задумался об альтернативном решении и нашел его: программа «Sketch 3». Ниже я расскажу об особенностях программы на личном опыте.
Что такое Скетч
Скетч - векторный графический редактор. В отличии от многофункционального Фотошопа, Скетч задуман как узкое нишевое решение для дизайна интерфейсов, сайтов, приложений и иконок. Программа доступна только для платформы Mac OS X и стоит 99$.
Разработчики - компания с интересным названием «Bohemian Coding». В команде работают всего десять человек, а офис находится в Гаагах. На мой взгляд это хорошо: небольшая команда проще адаптируется к изменениям в индустрии и больше прислушивается к нуждам пользователей, чем огромные корпорации.
Интерфейс
У Скетча минималистичный интерфейс. Даже слишком - после других программ-собратьев он выглядит как минимум непривычно, а пустота даже немного пугает. Когда открыл программу в первый раз, подумал: «текстовый редактор, что ли? ».
Потом понял, что это офигительно - рабочее пространство не перекрывается инструментами, окошками, менюшками и другими элементами, ставшими классикой оформления графических программ.
В Скетче слои находятся слева, панель инстурментов - сверху, а инспектор с параметрами - справа. Классно, что инспектор контекстный: доступные параметры меняются в зависимости от выделенного объекта. Верхняя панель инструментов настраивается: туда можно вынести часто используемые объекты и поменять их местами. Хотя я этим практически не пользуясь, привык работать хоткеями.
Минималистичный интерфейс
Организация проектов
Больше всего я тащусь от внутренней организации проектов. Для этого в Скетче придуманы страницы («Pages ») и доски («Artboards »). Последнее я называю просто артбордами, без перевода.
Артборды - это контейнеры для помещения внутрь слоёв, папок, форм и других объектов. Внутри страниц можно создать сколько угодно таких артбордов.
Я делаю так: на страницах располагаю действительные страницы сайта - например, «главная», «каталог», «контакты». А внутри каждой страницы делаю артборды под разные разрешения экранов и состояния элементов.
В данный момент я не могу показать сайты, над которыми работаю, поэтому приведу пример на новом проекте. Вот как это выглядит:
Это просто восхитительно при работе над адаптивными сайтами. А самый кайф, что на выходе получается один файл на весь проект. Представьте сайт из двадцати страниц под три разных разрешения, плюс страницы ошибок и состояний элементов - и всё это в одном структурированном файле.
Символы
Одна и лучших функций, которая еще и шикарно реализована. Символы - это группы объектов, которые можно использовать сколько угодно раз, но при этом у слоёв внутри группы общие стили - изменили в одном месте, изменилось везде. Типа смарт-объектов, только круче и удобнее.
Представьте дизайн сайта или мобильного приложения с сотней различных экранов, но общими элементами, типа меню. И нужно чуть-чуть изменить что-нибудь в этом общем элементе - изменить цвет фона или добавить подчеркивание текста. С помощью символов это делается в несколько кликов:
- Если изменить выравнивание текстового слоя, то текст не съезжает, а остаётся на месте. Мелочь, но в Фотошопе иногда бесила:-)
- Скетч быстрый. То ли сказывается нативность приложения под OS X, то ли отсутствие тяжелого обвеса функций, не знаю. Но факт - приложение работает на порядок быстрее и плавнее Фотошопа.
Помимо этого в программе еще полно мелких приятных плюшек, но описывать всё-всё не буду - оставлю на радость исследователям, которые захотят попробовать Скетч сами.
Вёрстка из макетов
Первый сайт я нарисовал в Скетче буквально на одном дыхании, не переставая удивляться: «ух ты, здесь всё такое классное!». Но дизайн - лишь один этап в создании сайтов, впереди еще вёрстка и разработка.
Когда дошла очередь до экспорта проекта, я наконец-то увидел форматы файлов: JPG, GIF, TIFF, PDF, EPS, SVG. Формата PSD-то нет. Скетч - программа только для Мака, а наш разработчик Максим- на Виндоусе. Понимаете, да? :-) «Упс!»
В итоге ему пришлось верстать сайт из макетов JPG - не самое большое удовольствие. Я расстроился и даже с неохотой думал вернуться к привычному Фотошопу, но потом нашел замечательный сервис - Цепелин.
25 лет назад, 19 февраля 1990 года, братья Джон и Томас Нолл запустили небольшую программу, которая соединила компьютер со сканером. Проект назвали Photoshop. На протяжении двух десятилетий он был монополистом на рынке графических программ, а слово «фотошоп» стало нарицательным.
Однако, вероятно, первенство Photoshop пошатнулось. Сейчас многие веб-дизайнеры переходят на Sketch - продукт, созданный специально для UI-специалистов. Шеф-редактор сайт пообщался с разработчиками интерфейсов и выяснил, готова ли индустрия сменить поставщика программного обеспечения.
«Для меня переход с Photoshop на Sketch был крайне болезненным, - рассказывает Артур Касимов, продуктовый дизайнер "Яндекса". - Я, что называется, человек старой закалки. Помню ещё ранние версии Photoshop». За 25 лет Photoshop стал стандартом для индустрии веб-дизайна, несмотря на «вес» (программа занимает больше 1 Гб дискового пространства), невостребованные функции в интерфейсе и чрезвычайно запутанную процедуру покупки, на которую даже жаловался создатель соцсети «ВКонтакте» Павел Дуров.
Adobe также выпускает векторный Illustrator, из-за чего разработчикам интерфейсов часто приходилось постоянно держать открытыми сразу два редактора. «Кто-то выходит из этой ситуации выбором в пользу Illustrator, но в силу сформировавшихся привычек было жалко время на это», - рассказывает UI-специалист Антон Фролов.
«Photoshop cоздавался и развивался, как софт для фотографов. Потом его напичкали всем, что только в голову пришло. От этого редактор стал похож на неповоротливого бегемота», - считает продуктовый дизайнер «Яндекса» Артур Касимов. Сложности возникали и со скоростью работы и с производительностью. Например, макеты, содержащие большое количество слоев, заметно замедляли процессы в Photoshop. Особо ощущались «тормоза» при одновременной работе над несколькими макетами.
Кроме того, для создания стандартных интерфейсных элементов - таких как кнопка Mac OS, выпадающий список в браузере или прямоугольник с закругленными краями - приходилось проделывать иногда с десяток действий. Все это отражалось на скорости работы дизайнера. «Photoshop и Illustrator не заточены под веб-дизайн. Поэтому проектирование интерфейсов и любые попытки сделать что-то внятное иначе как костылями не назовешь», - считает UI-специалист компании MacPaw Дмитрий Новиков.
Впрочем, на рынке появлялись альтернативы Photoshop: GIMP, Krita, Paint.NET и другие. Однако они не могли предоставить даже близко необходимый набор инструментов для проектирования интерфейсов, считают UI-специалисты.
Появление Sketch
Несколько лет назад разработчики компании Bohemian Coding выпустили программу для Mac OS под названием Sketch . Первое отличие, сразу бросавшееся в глаза - приложение являлось альтернативой Photoshop, однако его интерфейс был больше похож на программу из пакета iWork - нативные иконки из Cocoa, минимальное количество инструментов на панели, единственный блок настроек, подстраивающийся под действия пользователя.
В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента - эти функции возложены на встроенные инструменты Mac OS X: QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Благодаря этому даже последняя версия программы занимает всего 42 Мб на диске.
Однако с первыми версиями оказалось не всё так гладко. Многие дизайнеры заметили новинку, но побоялись отказаться от Photoshop. Тогда еще разработчики Sketch не могли определиться, для кого они выпустили продукт - поэтому часть функций напоминала графический редактор, другая часть - приложение для создания сайтов. Sketch 2 расставил нужные акценты - программа была ориентирована на UI-специалистов. Но её бедой было большое количество багов.
«Мы пробовали переходить на Sketch еще в конце 2013. Но это была его вторая версия - очень глючная. Мы убили кучу времени и тогда пришлось вернуться обратно в Photoshop», - рассказал руководитель отдела проектирования и дизайна интерфейсов Mail.Ru Group Юрий Ветров.
Появление отлаженной третьей версии Sketch привело к началу популяризации программы среди специалистов.
Sketch
«Sketch очень оптимизирован - в одном документе могут быть отрисованы десятки экранов приложения, доступные для редактирования без лишних действий, и никакой просадки в производительности, - рассказывает Антон Фролов, - Кроме того, очень продуманный интерфейс, ощущение, что это софт от тех, кто в нем же и нуждается - быстрое отображение отступов, удобная работа с символам и стилями, параметрами элементов, интуитивные шорткаты и так далее».
Например, в Photoshop дизайнерам приходилось постоянно подстраиваться под пиксельную сетку, чтобы избавиться от размытых краев объектов. Разработчики Sketch добавили автоматическую привязку контента к сетке, благодаря чему удается избегать размытых краев и других неровностей.
Другой пример - скругленные края у прямоугольных объектов. В Photoshop задать скругление можно было только перед отрисовкой объекта - в случае необходимости дизайнерам приходилось менять положение кривых вручную по пикселам. В Sketch предусмотрели возможность настройки скруглений слоя в любой момент через панель настройки.
В последней версии Sketch появилась еще более глубокая интеграция с нативными средствами Mac OS X: поддержка iCloud, Time Machine, автосохранения, нативный рендер шрифтов, трансляция макетов на мобильное устройство.
«Cамое главное, на мой взгляд - продуманный интерфейс нарезки графики, который парой кликов позволяет указать, в какие папки, с какими именами и размерами нарезать графику. По умолчанию поддерживается нарезка для iOS и Android, но можно добавить и свои форматы», - делится своим опытом Антон Фролов.
Кроме того, часть работы в Sketch можно автоматизировать при помощи плагинов. Например, Measure и InVision, которые позволяют быстро и удобно подготавливать спецификацию для разработчиков. «Со Sketch я стал больше заботиться об автоматизации работы. Многие вещи, которым раньше уделял много времени и внимания, сейчас делаю с помощью плагинов, стараюсь найти более простой и быстрый способ решения задачи», - рассказывает Артур Касимов.
Переход на Sketch
«Преимущество Sketch - низкий порог вхождения, буквально любой может научиться работать в нем за пару дней», - считает UI-специалист компании MacPaw Дмитрий Новиков. - Важно, что здесь вы занимаетесь непосредственно дизайном, а не работой в редакторе - то есть сама программа становится незаметной, и вы можете сосредоточиться на создаваемом продукте».
Переход с Photoshop на Sketch, однако, может оказаться непривычным. «Я настолько привык к Photoshop, что от одной мысли о других графических редакторах мне становилось как-то не по себе, - рассказывает Касимов. - Ситуация осложнялась тем, что мои коллеги-дизайнеры, с которыми я тогда работал, уже перешли на Sketch и всячески его хвалили. Они подкалывали меня, смеялись. Но я продолжал придумывать отмазки (в первую очередь, для самого себя). Сначала я говорил, что перейду, когда сделают "зум" колёсиком мышки, потом уверял себя, что по окончанию проекта с Photoshop будет покончено. Я и сам видел, что скорость работы в Sketch у моих коллег возросла».
Новиков рассказывает, что ему удалось быстро перейти на новый инструмент благодаря радикальному решению - он удалил всё со своего Mac и оставил только Sketch: «Всего неделя и как будто всю жизнь в нем работал».
Одна из трудностей, по мнению продуктового дизайнера «Яндекса» Артура Касимова, заключалась в непривычных «шорткатах» Photoshop - в Sketch они по умолчанию были другими: «Я не сразу догадался вручную подстроить всё под себя. Но когда сделал это, скорость работы заметно возросла».
Также пользователям Photoshop будет непривычен принцип работы с векторными объектами - в Sketch он больше похож на Illustrator: «К этому я привыкал довольно долго. Но сейчас понимаю, что этот принцип лучше. Значительно лучше», - считает Касимов.
Отказ от Photoshop
Sketch - не идеальный продукт, считают многие опрошенные ЦП UI-специалисты. В программе все еще много багов. В интернете есть даже отдельные ресурсы, которые собирают ошибки и мониторят их исправление.
«Не хватает инструментов для командной работы, что очень актуально для студий и компаний с отдельными командами дизайнеров», - жалуется Фролов. Кроме того, в Sketch практически отсутствует работа с растром, что в некоторых задачах пока не позволяет полностью отказаться от продуктов Adobe.
«Я считаю, что не нужно отказываться от хорошего инструмента, - отвечает Дмитрий Новиков на вопрос об отказе от Photoshop. - Sketch не заменяет Photoshop полностью, он отлично подходит для создания сайтов и интерфейсов, но это не значит что я не могу пользоваться продуктом Adobe для подготовки фотографий или 3D-редактором для моделирования и рендера».
Однако учитывая низкую, по сравнению с Photoshop, стоимость приобретения Sketch ($99,99), Adobe может потерять большой кусок постоянных клиентов в лице UI-специалистов, считают дизайнеры.
В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.
Последние лет двадцать самым популярным графическим редактором для дизайнеров оставался Adobe Photoshop . Однако, недавно первенство компании Adobe
на рынке инструментария для digital дизайнеров пошатнулось, в 2012 году компания Bohemian Coding
выпустила Sketch . Sketch
– это профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих. На данный момент актуальной версией является Sketch 3. За эти 3,5 года компания Bohemian Coding проделала огромную работу по улучшению своего продукта, зафиксило множество багов, наростило функциональность и собственно выростила серъезного конкурента Photoshop. Сразу хочу внести важную ремарку: я не рассматриваю Sketch как непосредственного конкурента Photoshop
. Однозначно, назначение этих программ изначально разное, соответственно, то, что для одного будет преимуществом, для другого может быть серъезным недостатком. Поэтому правильно было бы сделать не сравнительный обзор, как это делают многие, а осветить основные преимущества и свойства каждого из редакторов для конкретного кейса.
Назначение
Именно поэтому считаю корректным первым пунктом показать назначение каждой из программ.
Photoshop в основном работает с растровыми изображениями
, однако имеет некоторые векторные инструменты. Он незаменим для ретуши фото, обработки изображений. Но функционал предназначенный для работы с векторной графикой в нем достаточно условный. Многие поклонники Adobe возразят мне, но тогда возникает логичный вопрос: зачем в арсенале Adobe есть отдельный векторный редактор Illustrator, если Photoshop умеет все? Именно наличие двух интерфейсов усложняет работу и требует дополнительного времени при решении задач по работе с векторной графикой.
Sketch же изначально заточен на работу с вектором
, поскольку разработка интерфейсов подразумевает создание прототипов, фреймворков, иконок, UI-элементов, а зачастую эти элементы должны быть векторными.
Таким образом, чтобы выбрать каким из редакторов пользоваться, нужно понять, какие задачи придется решать с помощью данного инструментария.
Стоимость
Вторым по счету, но не по значимости, параметром для выбора того или иного редактора является стоимость и способ оплаты данного программного обеспечения. Приобрести Photoshop можно исключительно по подписке! Стоимость ежемесячного использования редактора составляет 20$ , и для разных регионов эта цифра может изменяться. Но суть остается та же. В отличии от Adobe компания Bohemian Coding пошла по обратному пути: Sketch продается за 99$ , это единоразовый платеж и все обновления пользователь получает бесплатно. Возможно в дальнейшем финансовая стратегия компании изменится, но пока они завоевывают рынок таким образом. Именно этот фактор, наверняка, сыграет роль в масштабах компании. Хотя и для фрилансеров немалозначимым является финансовое планирование своих ресурсов.
Мультиплатформенность
Еще одним значимым аргументом в выборе инструментария для дизайнеров станет платформа, на которой работает тот или иной софт. В нашей компании дизайнеры работают исключительно на Mac устройствах и большинство front-end разработчиков тоже. Поэтому тот факт, что Sketch существует исключительно для OS X , не стал для нас проблемой. А вот для дизайнеров, в распоряжении которых Windows устройства, это явно не решабельный вопрос. Конечно, можно заморочиться и поставить эмулятор OS X на винде, однако ничего путнего из этого может не получиться, максимум вы загрузите свой процессор и операционную систему обработкой ненужных процессов. В отличии от Sketch, Photoshop имеет отдельные версии для Windows и OS X . Поэтому в вопросе мультиплатформенности неизменным лидером остается Adobe Photoshop. Но, опять-таки, то, что на первый взгляд кажется недостатком, является сильным преимуществом в конкретных условиях. Поскольку Sketch существует только под Mac, в нем весь создаваемый контент отрисовывается с помощью средств маковской оси, используется стандартный графический движок от Apple. Именно этим разработчики добились максимальной продуктивности и быстроты работы.
Быстродействие и объем загрузочного файла
Являясь нативным Cocoa приложением, Sketch по минимуму использует нестандартные интерфейсные элементы, поэтому он имеет маленький объем. Загрузочный файл весит всего около 22 Мб . Он достаточно хорошо оптимизирован, в отличии от Photoshop, объем установочного файла которого составляет около 1 Гб .
Интеграция
Важным моментом для любого инструментария является его способность интеграции с другим софтом. Например, после того, как макет сайта полностью проработан и готов к передаче в отдел front-end разработки, становится вопрос непосредственно самой передачи исходников для дальнейшего развития проекта. На сегодняшний день и Sketch, и Photoshop имеют серьезные средства интеграции. Оба редактора могут экспортировать материалы в софт для коммуникации между разработчиками и дизайнерами, такие как Avocode , Zeplin и прочие. Если рассматривать этот кейс для компании, то данное решение крайне важно, оно помогает сэкономить деньги на дополнительные экземпляры графических редакторов для front-end разработчиков.
Обучение
Если вы решили освоить Photoshop или расширить свои знания о данном графическом редакторе, то в вашем распоряжении масса образовательных источников . Существуют обучающие ресурсы как платные, так и бесплатные. Качество материалов также очень сильно разнится: от примитивных статей неавторитетных авторов до идеально структурированных последовательных видеоуроков квалифицированных профессиональных тренеров. В силу того, что Sketch относительно молодой софт, то и количество обучающих ресурсов не сравнимо меньше , чем у Photoshop. И, как правило, это платные материалы. Например, на известном образовательном ресурсе Udemi менее 40 курсов по Sketch. Однако, уже существуют и обзор от практиков Sketch . Надеюсь, со временем количество обучающих метриалов в сети будет увеличиваться прапорционально с ростом популярности графического редактора Sketch.