Программа sketch для дизайна: Sketch — Download Sketch — Независимое театральное объединение "Зрительские симпатии"

Содержание

что выбрать для разработки интерфейсов? / Хабр

В последнее время вопрос инструментария 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.

Конкуренция – двигатель прогресса

Существует масса других параметров и характеристик Photoshop и Sketch, охватить их все достаточно сложно, но вывод однозначен: каждый из рассмотренных мною графических редакторов хорош для решения конкретной задачи. Если рассматривать разработку интерфейсов, то мы в компании для себя сделали однозначный выбор в пользу Sketch. Этому способствовал комплекс факторов, перечисленных в данной статье. Photoshop по прежнему является лидером в работе с растровой графикой, но нельзя игнорировать тот факт, что появление Sketch дало сильный толчок в развитии Photoshop. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

от знакомства с интерфейсом до экспорта — руководства на Skillbox

Sketch — универсальный графический редактор для macOS, в котором легко нарисовать сайт с нуля и создать макет мобильного приложения. Чем пользоваться, чтобы рисовать:

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

Рабочая область с артбордами.

Инспектор, который отвечает за свойства выделенного артборда или элемента: размеры, параметры наложения, тени, выравнивание и положение.

Функции Sketch легко расширить с помощью бесплатных плагинов, которые встраиваются в интерфейс и помогают уменьшить рутину и ускорить рабочий процесс.

На скриншоте с интерфейсом Sketch я показал плагин Craft от Invision, который помогает работать с контентом: моментально вставлять изображения в макет и делать копии элементов.

Есть специальные менеджеры, которые помогают контролировать и выбирать нужные плагины.

Где искать плагины

Удобные плагины в гайдлайнах СКБ Контур,

Большой список плагинов на GitHub.

В прошлых статья мы рисовали скетч и прототип для сайта строительной тематики. А сейчас сделаем макет этого сайта в Sketch.

Прототип и скетч сайта для строительных блоков

Создаем новый артборд: нажимаем кнопку Insert и в раскрывшемся меню выбираем Artboard. Справа задаем нужный размер.

Для планшетов подойдет ширина в 768 или 960px, а для компьютера лучше выбрать1024 и 1440px. Для этого макета я выбираю предустановленный размер Desktop HD.

Создать артборд можно с помощью горячей клавиши A на клавиатуре.

Весь контент на сайте строится по сетке. Сетку подбирают под каждый проект. С помощью Show Layout в View можно скрыть или показать на артборде уже настроенную сетку. Чтобы задать новую: View → Layout Settings.

В появившемся окне задаем ширину сетки, отступы и количество колонок.

Выбираем ОК, смотрим на результат.

Чтобы ответить на вопрос, как нарисовать шапку сайта, нужно понять ее типичную структуру. Обычно в шапке размещают логотип и название компании, элементы меню, телефонные номера и другие контактные данные. Импортируем PNG-файл с логотипом: для этого можно перетянуть его прямо на артборд или выбрать Insert → Image.

Элементы меню и номер телефона создаем с помощью обычного текста: Insert → Text или клавиша T на клавиатуре.

Для кнопки «Перезвоните мне» используем инструмент Text и прямоугольник: Insert → Shape → Rectangle. Рисуем контур нужного размера, а затем устанавливаем радиус углов и цвет обводки.

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

Кажется, что дом висит в воздухе и не согласуется с окружающим миром. Чтобы вернуть его на землю и задать тон для следующего экрана сайта, нарисуем серую подложку. Для этого: Insert → Vector и создаем контур около изображения дома.

Заполняем контур серым цветом и передвигаем его за слой с домом.

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

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

Чтобы показать дома, сделанные из блоков, используем слайдер с фотографиями. Каждая страница слайдера — это шесть квадратных фотографий домов. Все исходные изображения — разные по длине и ширине. Чтобы быстро привести их к одному размеру, будем пользоваться масками.

Для этого нарисуем прямоугольник нужного размера (Insert → Rectangle) и разместим фотографию над ним. Затем выберем слой с этим прямоугольником и нажимаем кнопку Mask.

Проводим эту операцию для остальных фотографий и рисуем элементы управления слайдером.

Чтобы верстальщику было легче разобраться в проекте, необходимо разобраться в слоях: сгруппировать и осмысленно назвать элементы.

Сейчас все слои перемешаны, нет иерархии.

Чтобы сгруппировать элементы, достаточно их выделить и использовать сочетание клавиш Cmd+G. Переименовать слой можно с помощью комбинации Cmd+R.

Теперь порядок.

Получить изображения для верстки можно как стандартными возможностями Sketch, так и с помощью сторонних решений — сервиса Zeplin или плагина Sketch Measure. В этом макете мало элементов и они не требуют сложной нарезки, поэтому используем обычным экспортом: выделяем нужные слои и в правом углу выбираем Export Layers.

Sketch — удобный редактор для дизайна сайтов и приложений, возможности которого легко расширяются с помощью плагинов. Разобраться с возможностями Sketch не составит труда, даже если до этого вы не пользовались графическими редакторами. Но Sketch — это всего лишь инструмент. Чтобы рисовать современные макеты сайтов, дизайнер должен разбираться также и в композиции, типографике и работе с цветом. Эти знания и навыки работы в графических редакторах можно получить на курсе «Веб-дизайн с 0 до PRO» от Skillbox.

Курс «Веб-дизайн с 0 до PRO»

Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.

Живая обратная связь с преподавателями
Неограниченный доступ к материалам курса
Стажировка в компаниях-партнёрах
Дипломный проект от реального заказчика
Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Полное руководство по началу работы в Sketch

Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, – это статья для вас.

Во-первых, мы немного познакомимся со Sketch – что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых, изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих, мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).

И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?

. . .

1. Почему Sketch?

Некоторое время после релиза в 2010 году Sketch расценивался как легковесный инструмент для редактирования графики, с помощью которого дизайнеры UI и UX могли быстренько прототипировать дизайн приложений.

Но за последние годы Sketch значительно развился – и его возможности сейчас выходят далеко за рамки создания макетов экранов. Как молодой продукт, созданный специально под нужды сегодняшнего дня, в нем нет всего этого ненужного мусора, как в наборе продуктов Adobe Creative Cloud.

Сейчас Sketch гордо продается как визуальным, мобильным, иконочным, веб и продуктовым дизайнерам – и я думаю, это всего лишь вопрос времени, пока его разработчики, Bohemian Coding, с уверенностью не начнут ориентировать свой продукт и на иллюстраторов и художников.

Что такое Sketch?

Sketch – одна программа из группы под названием “векторные графические редакторы”. Другие представители этой категории – Adobe Illustrator, CorelDRAW и OpenOffice Draw.

Векторный редактор отличается от пиксельных (растровых) редакторов. В пиксельном графическом редакторе (например, Adobe Photoshop, GIMP или Microsoft Paint), когда вы рисуете фигуру, сохраняется масса данных о каждом пикселе, что со стороны выглядит как круг:

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

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

Все хорошее – компактно

Sketch за последние 12 месяцев возмужал, стал гораздо более стабильным продуктом. Для приложения весом менее 50 мегабайт Sketch располагает более чем обширными возможностями, и сейчас есть четкое ощущение, что его стоимость гораздо более чем оправдана (полная стоимость $99, для студентов – $49). Для сравнения, Adobe Illustrator CC сейчас занимает более 1000 МБ на моем жестком диске.

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

Официальный соперник Sketch, Adobe Illustrator, существует на рынке с 1987 года (!) и остается стандартом в индустрии традиционных дизайн-студий. Но для дизайнеров новой генерации Sketch дает огромную возможность изучить основы и достичь отличных результатов.

Учиться дизайну в Sketch быстро, окупаемо, и весело!

2. Начало работы в Sketch

Сначала скачайте Sketch

Если вы совсем новичок, посетите страничку Getting Started на официальном сайте Sketch. Sketch будет работать на любом Mac-е с OS X El Capitan (10.11) или выше, и вы можете скачать бесплатную 30-дневную триал-версию.

Постарайтесь не заблудиться в интерфейсе

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

Вот более детальное объяснение функционала каждого раздела:

Панель инструментов: предоставляет доступ к часто используемым командам. Большую часть команд можно использовать через горячие клавиши, что быстрее. (У нас есть подробная шпаргалка по горячим клавишам в Sketch – вы можете скачать ее внизу поста).
Список слоев: эта панель показывает список всего, что было нарисовано в Sketch. Все элементы в Sketch представлены как слои – так что фигура вроде круга значится в этом списке как отдельный слой, и его положение показывает, какой слой находится спереди или позади круга. Вы также можете задать для каждого слоя название.
Инспектор: Инспектор отображает подробную информацию о выделенном слое, и позволяет делать точные настройки. Например, вы можете вручную задать X/Y-координаты точки, или изменить пиксельную ширину фигуры. Инспектор также позволяет вам настраивать непрозрачность, заливку и границы, выравнивать слой, задавать тени, размытие и параметры экспорта.
Артборд: Sketch организует вашу работу с помощью страниц и артбордов. Артборды позволяют создавать различные композиции на одной странице. Это может быть особенно полезным для налаживания эффективного рабочего процесса. Например, вам бы хотелось записывать каждую итерацию при разработке лого, или необходимо создать макеты экранов для разных устройств на одном холсте. Каждый документ Sketch может содержать различные страницы (страница – это, по сути, чистый новый холст), и каждая страница может содержать множество артбордов. Думайте об артборде как о фрейме, который вы можете вставить в любое место дизайна.

Далее, ознакомьтесь с некоторыми важными командами

a. Создание артбордов

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

Чтобы создать новый артборд, нажмите “Insert” на панели инструментов, затем выделите “Artboard”, кликните на прямоугольник и перетяните мышкой на холст. Или же можете просто нажать “A” на клавиатуре, а затем кликнуть и потянуть.

b. Рисование фигур

Проще всего начать рисовать фигуры посредством горячих клавиш. (Не забудьте, впереди вас ждет шпаргалка из 100+ горячих клавиш!)

O = овал
R = прямоугольник
U = прямоугольник с закругленными углами
L = линия

С помощью кнопки “Insert” в панели инструментов вы можете получить доступ к большему набору разных фигур типа звезды, многоугольника, треугольника и т.д. Вот тут я рисую звезду:

с. Выравнивание и распределение объектов

Когда я только начал работать в Sketch, я влюбился в их кнопки выравнивания и распределения, которые живут вверху панели Инспектора. Вот что они делают:

Распределить по горизонтали
Уравнивает горизонтальные отступы между выделением из 3 или более объектов.

Распределить по вертикали
Уравнивает вертикальные отступы между выделением из 3 или более объектов.

Выравнивание по левому краю
Выравнивает левые края 2 или более выделенных объектов.

Выравнивание по горизонтали
Выравнивает горизонтальные центры выделения из 2 или более объектов.

Выравнивание по правому краю
Выравнивает правые края 2 или более выделенных объектов.

Выравнивание по верху
Выравнивает верхние края 2 или более выделенных объектов.

Выравнивание по вертикали
Выравнивает вертикальные центры выделения 2 или более объектов.

Выравнивание по низу
Выравнивает нижние края 2 или более выделенных объектов

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

Вот пример, как я использую выравнивание по левому краю (кнопка “Align left”):

d. Дублирование слоев и артбордов

В Sketch очень легко дублировать слои и артборды. Кликните правой кнопкой мышкой на любом объекте, выберите опцию “Duplicate”, чтобы создать копию поверх оригинала. Как вариант, просто выделите объект и нажмите команду + D, или просто удерживайте alt, а затем перетяните объект, который хотите скопировать. Вот я дублирую свою звезду:

Дублирование артбордов также важно в налаживании продуктивного дизайн-процесса. Дублируя артборд после каждого важного изменения, вы всегда можете легко вернуться на более раннюю версию без необходимости пользоваться опцией “Undo” сотни раз:

e. Еще несколько подсказок по главным опциям в Sketch

Эта серия советов по Sketch поможет освоить программу и улучшить свою продуктивность:

Часть 1 – Начало работы в Sketch

Ресайз фигур с помощью горячих клавиш
Дублирование элементов
Смарт-выделение
Группировка и разгруппировка элементов
Прямое выделение в группах
Настройка 100% масштаба
Показать все артборды
Перенос объектов на передний или задний план
Переименование

Часть 2 – Редактирование и экспорт в Sketch

Измерение расстояния между элементами
Настройка непрозрачности с помощью числовой клавиатуры
Изменение радиуса каждого угла отдельно
Настройка нестандартных горячих клавиш
Использование математических операций внутри полей ввода
Составные фигуры
Команда для поворотного копирования
Слайсы
Экспортируемые элементы и артборды
Экспорт исходников для экранов retina

Часть 3 – Композиция, свет и тени

Позиционирование объектов “за гранью”
Комбинирование света и тени для задания глубины
Имитация складчатой поверхности
Создание резких теней
Расстояние между объектом и его тенью
Множественные источники света
Линия горизонта
Наложение объектов

И, наконец… проработайте эти уроки по Sketch. Они на русском языке

Серия уроков от Marc Andrew

Создание мобильных приложений в Sketch от Marc Andrew

Если вам нужны еще уроки и советы по началу работы в Sketch, вы найдете их в разделе “Дополнительные ресурсы” в конце этого поста.

3. Более продвинутые приемы работы в Sketch

Как только вы справитесь с основами, настанет время перейти к более продвинутым возможностям, доступным Sketch-пользователям!

Освоение кривых Безье

Как я упоминал ранее, Sketch – это векторный графический редактор, а это значит, что все объекты в Sketch состоят из точек и кривых. Чтобы ощутить всю ценность Sketch, вам нужно научиться управлять этими точками и кривыми. Это позволит вам рисовать сложные фигуры, например, орнаментированные буквы, с нуля.

Питер Новел написал шикарную статью о работе с кривыми Безье. Он описывает важные принципы работы с этим видом объектов, поясняет разницу между разными элементами управления, дает практические советы по работе с этим векторным инструментом в Sketch. Ознакомьтесь!

Создание символов

Sketch позволяет создавать собственные “символы”. Это означает, что вы можете сохранить слой или группу слоев как символ, и затем вставлять его в документ, как если бы это была простая фигура.

Особенными символы делает то, что вы можете кликнуть дважды на “сущности” символа, отредактировать “главный” символ, и все сущности этого символа в документе будут автоматически обновлены. На этой GIF-ке я создаю символ в форме листочка, вставляю еще две его сущности, и затем меняю непрозрачность родительского символа. Посмотрите, как остальные меняются:

Продвинутые опции ресайза

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

Вот возможные опции:

Stretch (растянуть): объект будет отресайзен пропорционально общим размерам группы. Это метод по умолчанию, обычно именно такого эффекта вы и ждете от ресайза.
Pin to corner (прикрепить к углу): размер объекта будет изменен, но его положение не изменится (по отношению к ближайшему углу)
Resize object (ресайз объекта): размер объекта будет изменен на то же пиксельное значение, на которое ресайзится группа. Если группа становится на 50px шире, то и объект станет на 50px шире.
Float in place: объект не будет отресайзен при ресайзе группы, но он изменит свое положение пропорционально общим габаритам группы.

Здесь вы найдете больше информации о ресайзе групп и символов

Детальнее о режимах блендинга

Режим блендинга (смешивания) определяет, как цвета одного слоя взаимодействуют со слоями под ним. Сейчас Sketch предлагает 15 разных режимов смешивания. Если вы – пользователь Photoshop, возможно, вы уже знакомы с некоторыми из них. В этой отлично иллюстрированной статье Маурицию Уехара описан каждый режим, а также приемы по созданию потрясающих эффектов с их помощью.

Использование Sketch для печатного дизайна!

Для тех, кто быстрее и более продуктивно работает в Sketch, имеет смысл подготавливать и печатные документы в этой программе вместо какого-то специализированного пакета вроде Adobe InDesign. В этой потрясающей статье Питер Новелл поясняет, как использовать Illustrator для подготовки PDF, который был создан в Sketch для печати.

Испытайте свои навыки в этих мини-проектах

Вы дочитали аж до этого места, так почему бы не опробовать ваши новые навыки, пытаясь воспроизвести парочку мини-проектов в Sketch? Начните с простого – воссоздания иконки Google Docs. Затем попробуйте нечто более сложное.

Создание иконок в Sketch

Создание иллюстраций в Sketch

4. Дополнительные ресурсы

Обязательно для изучения

Скачайте шпаргалку из 99 горячих клавиш для Sketch!

Если эта статья показалась вам полезной, почему бы не скачать эту шпаргалку? Сохраните эту PDF-ку на компьютере для быстрых справок, или ее можно распечатать и прикрепить на стене у монитора.

Как вам Sketch? Как ваши успехи в работе с этой программой? Делитесь в комментариях!

Адаптивный дизайн в Sketch (детальный анализ)

Почему адаптивный дизайн именно в Sketch?

Если вы принадлежите к сообществу дизайнеров веб-интерфейсов, в последний год вы вряд ли избежали обсуждений Sketch, так как этот продукт у всех был на слуху. Запуск этого дизайнерского приложение встряхнул индустрию, в которой более 20 лет господствовал Adobe. Возникли длительные дебаты насчет того, что лучше – Sketch или Photoshop и Illustrator (и Fireworks), а также в чем лучше создавать адптивный дизайн.

Пользователь Photoshop со стажем, я сам перешел на Sketch в начале 2014 года и даже не оглянулся назад. Мне очень нравятся некоторые особенности программы – простой интерфейс, автосохранение файлов и бесконечная рабочая область. Тем не менее, множество других программ предлагают аналогичные возможности, и до последнего обновления (Sketch 3.2), пользователи приложения бились со множеством багов.

Так почему же я продолжаю работать в Sketch? С багами или без, он стал лучшим инструментом для дизайна интерфейсов, включая и адаптивный дизайн в Sketch.

Кейс-стади: Fleet Feet Sports

Посмотрим на недавно запущенный дизайн сайта, над которым я работал для Fleet Feet, магазин для бегунов с более 80 франшиз по США. В отличие от их старого сайта, новый Fleet Feet оснащен ecommerce-компонентом для продажи продуктов онлайн, и он стал адаптивным. С более 15 шаблонов дизайна для множества устройств и несколькими этапами ревизий, проект разросся до огромных размеров.

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

Основы работы в Sketch

Впервые запустив Sketch, вы сразу же заметите чистый, незахламленный интерфейс. Да, набор инструментов Sketch максимально упрощен по сравнению с другими программами для дизайна. Тем не менее, он включает только то, что можно воссоздать в HTML и CSS3. Таким образом, там нет ненужных фото-фильтров, 3D-инструментов и прочих примочек, которые могли бы замедлить процесс разработки. Приложение располагает только тем, что нужно для веб- и UI-разработки, что способствует максимально быстрому процессу создания дизайна.

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

Первое, что я бы порекомендовал скачать для Sketch, – плагин Sketch Toolbox. Этот менеджер плагинов позволяет напрямую искать и устанавливать нужные плагины, и отслеживать, чем вы уже пользуетесь.

Sketch Toolbox.

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

Отличием Sketch от других векторных редакторов является возможность работы в пикселях. Фигуры, которые вы рисуете, всегда приводятся к ближайшему пикселю, так что не нужно париться по поводу полупикселей и размытых контуров. Это делает программу идеальной для дизайна скринов приложения или веб-ресурса, а также адаптивный дизайн.

Начало работы

Теперь пройдемся по тому, как я использовал Sketch для дизайна нового сайта Fleet Feet. В век адаптивной верстки, работа напрямую над дизайном макета сайта – это своего рода редкость.
Так как Fleet Feet собирались добавить новые компоненты на их сайт, на первый план выдвинулась стратегия по контенту. Я поучаствовал в нескольких встречах для обсуждения будущего макета сайта. Мне нравится использовать удобный плагин AEFlowchart для Sketch, который позволяет создать дерево сайта. Для Fleet Feet в особенности было полезно фиксировать нововведения в организации сайта в виде, которым можно было поделиться с командой. Это была отличная помощь в процессе создания дизайна, и я бы ни за что не занялся подобным в другой программе просто потому, что это бы отняло слишком много времени.

Плагин AEFlowchart в работе.

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

Пройдемся по ранней версии стилей Fleet Feet (вы можете скачать удобный шаблон Sketch с ними). Возможность создавать типографические инструменты очень полезна, так как можно создавать текстовые стили для использования в различных документах, чтобы соблюсти общую стилистику проекта. Если клиент решает, что ему не нравится семейство шрифтов h2, вам придется обновить всего лишь одну сущность стиля, и он будет обновлен во всех файлах проекта. Приложение также использует родной рендеринг текстов (сглаживание), так что текст в браузере отображается точно также, как и в исходниках дизайна.

Стили текста в приложении Sketch

Работа с цветами также упрощена в Sketch. Создайте цветовую палитру на вашем мудборде, и самые используемые цвета появятся впереди всех других свотчей оттенков, чтобы быть всегда под рукой. Вдобавок к обычным цветам, начиная с версии 3.1, вы можете добавлять собственные оттенки в свотчи документа (а согласно анонсу в бета-версии 3.3, вскоре будут доступны и пользовательские палитры).

Наконец, помимо легкого перемещения по файлам в одном документе, вы можете также копировать и вставлять объекты и стили объектов (вроде градиентов или цветовых заливок) из одного файла в другой. Этой возможности нет в Photoshop, хотя она чрезвычайно полезна. Возможность копировать и вставлять элементы из мудборда в свой первый макет, и даже копирование объектов из одного макета в другой – это просто здорово.

Дизайн домашней страницы

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

Домашняя страница Fleet Feet.

Одной из моих любимых возможностей Sketch является встроенная сетка макета. В Photoshop мне приходилось использовать плагин, несколько направляющих линий или отдельные слои с импровизированной сеткой. В Sketch вы можете при необходимости активировать прозрачную решетку, и быстро изменить размеры колонок или интервалами. Для настройки параметров сетки перейдите в меню “View” → “Layout Settings.” Я создал сетку по умолчанию размером 1080 пикселей, 12 колонок с 30-пиксельными интервалами. При необходимости я менял настройки от проекта к проекту. Если мне нужно отобразить или спрятать сетку, я просто нажимал Control + L.

Работа с сеткой в Sketch: все просто!

Как я уже говорил, все, что реализуемо средствами CSS, возможно и в Sketch. Создание закругленных углов на кнопке просто требует кликнуть на объекте и настроить размер радиуса в сайдбаре. Градиентный оверлей на изображении можно добавить в один клик, можно не привязываться только к доступным цветам в палитре, моделировать реальную картину, которая будет отображаться в браузере.

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

Вдобавок к созданию и копированию CSS-стилей, дизайн дублированного контента также упрощается. Sketch позволяет превратить группу объектов в символ, который можно копировать и вставлять в другое место. Любые изменения в этом объекте автоматически подтянутся ко всем его копиям!

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

Символы могут упростить работу и сэкономить ваше время.

Пока я использую символы для таких вещей, как посты блога или листинги продуктов, мне также нравится использовать плагин Dynamic Button для создания кнопок на странице. Плагин создает символ кнопки, но автоматически настраивает отступ по бокам кнопки, в зависимости от длины текстовой надписи на ней. Это также экономит время на страницах с несколькими кнопками, как и эта домашняя страница. Просто создаете текстовый слой для текста кнопки, выделяете плагин, редактируете название слоя, чтобы он отражал желаемые отступы на фоне кнопки (например, 10:20:10:20), нажимаете Command и все! У вас получилась динамическая кнопка, которую можно копировать-вставлять по всему дизайн-проекту, всего лишь редактируя текст.

Динамические кнопки в Sketch.

Создание страницы листингов продукта и команды

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

Добавление контента на 20+ элементов в макете может вызвать определенные трудности. Вдобавок, клиенты редко могут предоставить живой контент до того, как утвержден дизайн. Слава Богу, в Sketch есть несколько плагинов, которые генерируют контент автоматически прямо в дизайне.

Для странички листингов продуктов и подобного нам не нужно тратить часы для поиска изображений туфель с белым фоном и заниматься прочей ерундой такого плана. Вместо этого нужно изображение-заглушка. Плагин Day Player отлично заполняет заглушки с помощью различных графических сервисов. Мне нравится Placehold.it, потому что его используют разработчики, с которыми я сотрудничаю, и я также использую Lorem Pixel, чтобы получить конкретные изображения. Выберите плагин и графический сервис, который вам нравится, отредактируйте опции заглушки, включая размер и цвет, и вставьте в группу объекта продукта. Это гораздо проще, чем искать картинки в Google и подгонять их под свои параметры!

Плагин Day Player в действии.

Для макетов с более сложным и разнообразным контентом я люблю использовать плагин Content Generator. Страница членов команды, например, нуждалась в фотографиях мужчин и женщин, именах, должностях и контактных данных. Используя плагин, мне нужно было всего лишь выбрать блоки графических заглушек для каждого члена команды, в опциях плагина задать пол аватарки. Заполнение имен, номеров телефона, почтовых адресов было также просто.

Функции Sketch не только полезны для макетов и повторяющегося контента, но и для обычных веб-страниц. Скажем, нужно добавить какой-то текст вниз страницы команды. Для такого текста-заглушки, как внизу странички команды Fleet Feet, можно снова воспользоваться плагином Content Generator, который зальет lorem ipsum текст, вместо поиска онлайн-сервиса для генерации текста. Вы заметили в тексте список тезисов? Это еще одна возможность Sketch – встроенная генерация нумерованных или маркированных списков – ее всегда не хватало в других дизайнерских программах (включая всемогущий Photoshop и ориентированный на дизайн скринов Fireworks). Возможность форматировать текст точно в таком же виде, как он отображается в браузере, действительно полезна, и Sketch предоставляет такую возможность!

Маркированные списки в Sketch? Легко!

Дизайн макетов под мобильные устройства и планшеты

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

Одной из моих любимых возможностей Sketch является возможность создания множества артбордов на одном холсте. Photoshop заставляет вас создавать множество PSD-файлов, а затем переключаться между окнами для работы с разными макетами. Этот процесс сильно напрягал, так что я создавал версии для мобильных и планшета только для проектов с большим бюджетом.

В Sketch вы можете видеть десктопную, мобильную и планшетную версии все на одном экране, что позволяет редактировать все макеты одновременно. Для Fleet Feet в особенности возможность работать с множеством артбордов пригодилась из-за большого количества шаблонов. При редактировании символов текстовых стилей и цветов, я мог сразу же видеть, как мои изменения отражались на дизайне. Это также помогает дизайнеру соблюдать постоянство между оформлением десктопной и мобильной версий.

Множество артбордов в одном окне Sketch позволяет легко работать над различными версиями дизайна одновременно.

Создание всех этих артбордов (десктопная, мобильная и планшетная версии) в Sketch также не представляет сложностей. Просто нажмите А, чтобы создать артборд, и Sketch выдаст список с 28 различными разрешениями экрана и размерами иконок на выбор, включая размеры Retina. Это особенно полезная опция для адаптивного дизайна, так как не нужно париться по поводу правильности размеров при создании макетов.

Еще одна отличная функция Sketch – возможность предварительного просмотра дизайнов на устройстве, для которого он создается. Хотя это не встроенная опция, приложение Sketch Mirror позволяет синхронизироваться с открытым документов и протестировать, как выглядит дизайн на iPhone или iPad. Программа также подтягивает изменения из Sketch в реальном времени. Приложение действительно оказалось незаменимым при финальной подгонке дизайна и демонстрации результатов заказчику. Поэтому адаптивный дизайн в Sketch стал еще доступнее.

При создании статических макетов в Sketch будет полезно предоставить заказчику или разработчику максимально реалистичный превью того, как должен выглядеть адаптивный дизайн в реальности. Так что интерактивное прототипирование – действительно необходимость для веб-дизайнеров. Пока в Sketch нет встроенного функционала для прототипирования, другие программы охотно интегрируют Sketch в свои модели работы. Хорошо известные инструменты для прототипирования, такие как InVision, UXPin и Marvel могут напрямую работать с файлами Sketch. Возможно, скоро в обиход войдут и плагины для прототипирования. Sketch Framer использует FramerJS для создания интерактивных прототипов прямо с холста, и сейчас он работает с последней бета-версией Sketch (3.3).

Переход к разработке

Как только дизайн Fleet Feet был готов для разработки, настало время экспорта исходников. Когда я только начал использовать Sketch, никто из разработчиков в моей команде не имел этого приложения, и я не собирался заставлять их покупать программу, которую я только начал тестировать. Тем не менее, мне предстояло нарезать все исходники для проекта.

К счастью, Sketch делает процесс экспорта всех файлов суперпростым. Возьмем, к примеру, иконки мобильной навигации. Просто кликнув на группу слоев и нажав кнопку Export в правом нижнем углу, я могу сохранить иконки для веб в формате SVG или PNG, или в PNG @2x для экранов Retina. Так можно подготовить исходники под любые устройства и под адаптивный дизайн.

Экспорт исходников в Sketch.

Я предоставил разработчикам все нужные исходники, но как именно они начнут работу, не зная всех цветов, шрифтов и их размеров? Sketch и тут все максимально упрощает. Используя плагин Sketch Style Inventory, вы можете создать список всех свотчей и HEX-кодов цветов, используемых на странице. Шрифты можно передать разработчикам в таком же виде. Мне нравится использовать этот плагин для создания списка текстовых стилей в качестве справочника для разработчиков. Также, помните, я упоминал, что вы можете скопировать CSS-стили для каждого элемента в документе? Чтобы получить эти текстовые стили в форме, перевариваемой программистами, вам нужно просто выделить все слои, скопировать CSS-стили и вставить их в список стилей. Используя Sketch, вы можете предоставить разработчикам все исходники и стили, так что у них будет все необходимое для работы, даже без необходимости открыть приложение!

Чего не хватает?

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

Еще один недостаток Sketch – его плагины. Хоть я и хвалил многие из них в этом посте, я бы предпочел, чтобы большинство их возможностей были интегрированы непосредственно в Sketch. Так как эти плагины созданы сторонними разработчиками, банальное обновление Sketch или самого плагина может привести к сбою в работе. Это означает, что вы не сможете полностью положиться на них в своей работе.
И, наконец, эта программа все еще ограничена совместимостью только с Mac OS X. И это не только проблема для тех, кто работает в Windows, это также делает почти невозможной задачей поделиться родным файлом приложения с разработчиком, проект-менеджером или клиентом, не имеющим этого ПО.

Заключение

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

Вы уже попробовали Sketch? Стал ли он вашим выбором среди инструментов для создания адаптивного веб-дизайна? Может, у вас есть свои трюки и советы по оптимизации подобной работы? Делитесь своими находками и мнениями в комментариях!

Полное руководство по началу работы в Sketch с бесплатной шпаргалкой

Неважно, полный ли вы новичок, дизайнер на обучении, опытный профи, который переключается на новый продукт, — это статья для вас.

Во-первых, мы немного познакомимся со Sketch — что это такое, чем он завоевал свою популярность, как получить бесплатную триал-версию и установить приложение на Mac. Во-вторых, изучим интерфейс Sketch, я поясню основы и покажу некоторые фишки и приемы. В-третьих, мы коснемся более продвинутых функций приложения (кривые Безье, блендинг особенно впечатляют).

И, наконец, я поделюсь качественными ресурсами по Sketch, включая бесплатную шпаргалку на 99 пунктов, с которой очень удобно учиться работе в приложении. Звучит неплохо?

1. Почему Sketch

Но за последние годы Sketch значительно развился — и его возможности сейчас выходят далеко за рамки создания макетов экранов. Как молодой продукт, созданный специально под нужды сегодняшнего дня, в нем нет всего этого ненужного мусора, как в наборе продуктов Adobe Creative Cloud.

Сейчас Sketch гордо продается как визуальным, мобильным, иконочным, веб и продуктовым дизайнерам, и я думаю, это всего лишь вопрос времени, пока его разработчики, Bohemian Coding, с уверенностью не начнут ориентировать свой продукт и на иллюстраторов и художников.