Меню
ГлавнаяОшибки

Полное руководство по началу работы в Sketch (с бесплатной шпаргалкой). Sketch с материальным дизайном

Приложение Adobe Photoshop Sketch можно скачать бесплатно как на iPhone, так и на Android-смартфоны.

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

Итак, начнем.

1. Открываем приложение и видим следующую страницу:

Тут уже видно проекты, которые я создавала ранее. Для создания нового проекта нажимаем на "плюсик" внизу экрана.

2. Выбираем вариант полотна для нашего будущего проекта:

Тут ориентируемся на фото, которое хотим украсить рисунком. Я обычно выбираю "квадрат".

3. Видим перед собой чистый лист для нашего будущего шедевра:

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

Выбираем вариант "слой изображения".

Выбираем "на iPhone", если фото уже есть в галерее и вставляем его, или же делаем новый снимок.

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

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

5. Выбираем кисть, которая нам по душе.

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

Если нажать на "плюсик", вам откроется полный список кистей. Там сможете найти любую на ваш вкус 😊

Как видим, у моей кисти есть три характеристики: размер, прозрачность и цвет. Цвет можем изменить на любой другой.

Я выбрала нежно розовый.

6. Ну и теперь, собственно рисуем что душе угодно. Я нарисовала такое вот сердечко.

В последнее время вопрос инструментария 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. Самым ярким доказательством тому – появление множества арт-бордов и возможность отображения превью на мобильном устройстве. Действительно: конкуренция – двигатель прогрса.

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

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

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

1. Почему Sketch?

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

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

  • Ресайз фигур с помощью горячих клавиш
  • Дублирование элементов
  • Смарт-выделение
  • Группировка и разгруппировка элементов
  • Прямое выделение в группах
  • Настройка 100% масштаба
  • Показать все артборды
  • Перенос объектов на передний или задний план
  • Переименование
  • Измерение расстояния между элементами
  • Настройка непрозрачности с помощью числовой клавиатуры
  • Изменение радиуса каждого угла отдельно
  • Настройка нестандартных горячих клавиш
  • Использование математических операций внутри полей ввода
  • Составные фигуры
  • Команда для поворотного копирования
  • Слайсы
  • Экспортируемые элементы и артборды
  • Экспорт исходников для экранов retina
  • Позиционирование объектов “за гранью”
  • Комбинирование света и тени для задания глубины
  • Имитация складчатой поверхности
  • Создание резких теней
  • Расстояние между объектом и его тенью
  • Множественные источники света
  • Линия горизонта
  • Наложение объектов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давайте сделаем приложение для заметок!

В этой статье, мы вместе сделаем очень простое приложение - Заметки. К счастью для нас, все необходимые компоненты доступны в последнем Sketch. Вот экраны, которые мы будем создавать:

Вы также можете скачать файлы Sketch (ZIP), которые использовались при создании прототипа этого приложения; это может помочь вам в процессе данного тьюториала.

Шаблон

В нашем шаблоне - Файл → Создать из шаблона → Материальный дизайн - вы увидите широкий набор элементов, иконок и макетов. Сама страница была разработана командой материального дизайна в Google и была бережно адаптирована Amar Sagoo и мной. Группы и объекты названы, оформлены и организованы специально для Sketch.

Все начинается с монтажной области

Когда ваш новый документ открыт - Файл → Создать (или Ctrl + N) - нажмите клавишу A (горячая клавиша для инструмента монтажной области). Вы можете нарисовать монтажную область как если бы вы хотели нарисовать любую фигуру или любой другой объект. Это сделано потому, как Sketch располагает простым набором объектов, которые работают аналогичным образом (подробнее об этом позже). Когда инструмент создания монтажной области выбран, справа вы увидите список возможных размеров, включая, как вы уже успели догадаться, все размеры специально для материального дизайна. Кликните на размер ” Портретная ориентация для мобильных” и у вас появится белая квадратная область.

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

Потрясающая функция Sketch # 1: Возможность инвариантного к масштабу экспорта

Примечание: Материальный дизайн определяется используя пиксели, независимые от плотности. Как это объясняют на сайте Android разработчиков, объект состоящий из пикселей, независимых от плотности (DP) соответствует физическому размеру пикселя в 160 dpi. Но, в данном тьюториале, мы будем использовать пиксельные объекты, потому что вы можете их масштабировать вверх или вниз Хотя мы будем использовать пиксельных блоков (ПВ) в этом уроке Sketch, это действительно плотность-независимый пикселей, потому что вы можете масштабировать их вверх или вниз при экспорте.

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

Работайте в 1x пикселях, а затем просто экспортируйте в необходимые масштабы. Sketch позволяет сделать это легко, с помощью простого перетаскивания. Вы увидите панель в нижней левом углу, которая покажет вам размеры сегментированные для экспорта, более того, вы даже можете добавить свои собственные индексы значений для имен файлов. Когда вы задаете операцию “Экспортировать все” (Ctrl + Shift + E), вы увидите эту монтажную область, а Sketch в свою очередь, экспортирует все версии битовой матрицы.

Всегда работайте на 1 × пикселях. Вы можете легко масштабировать вверх или вниз на панели “Экспорт”.

Теперь, обратитесь к шаблону из набора стикера и выберете “общепринятые мобильные элементы” монтажной области. Здесь представлены на выбор только важные вещи, так что просто нажмите на эту монтажную область, скопировуйте-вставьте в документ. Теперь у вас есть основной макет материального дизайна для мобильного приложения. Как вы можете видеть на панели Layers, у вас есть группа, называющаяся “Экран”. Вы будет необходим содержимое только ее, так что следующим действием выберете разгруппировать (Ctrl + Shift + G). Теперь вы увидите четыре слоя:

В данном стикере, вы найдете несколько готовых монтажных областей, которые вы можете копировать и вставить непосредственно в ваш Sketch файл.

  • панель навигации
  • Это символ (символы на панели Layers отмечены фиолетовым цветом), который означает, что будет везде одинаков, и если вы измените содержимое символа, оно будет меняться везде в файле.
  • панель состояния
  • Это верхняя панель на экране с информацией о Wi-Fi, времени и т.п.
  • панель приложения
  • Это ваш основной хэдер навигации, который отражает название текущей страницы, а также кнопку вверх или кнопку открыть.
  • фоновый цвет экрана
  • Это цвет фона, но это также и маска. Вы можете удалить его, поскольку ваша монтажная область будет действовать в качестве маски для вашего экрана.

Маски в Sketch работают … сверху!

В Sketch, маски работают сверху, это означает, что слои выше маскирующего объекта обрезаются по этому объекту. В Adobe Illustrator, например, вам нужно размещать объект поверх других слоев, чтобы создать оберточную маску; это в начале сбивало меня с толку. Для того, чтобы подробнее узнать о масках, почитайте Bohemian Coding’s documentation.

Если вы переместите эти слои внутри монтажной области, вы увидите, что они ею маскируются. Это единственный случай, когда объект, который располагается наверху в панели Layers маскирует объект, расположенный ниже. Монтажные области всегда маскируют свое содержимое, а также скрывают пространство координат; так, значение 0 на Х и значение 0 на У будет означать, верхний левый угол.

Карты представляют собой стандартный паттерн и отлично работают с разнородной информацией.

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

Потрясающая функция Sketch # 2: Руководство по наведению

Одина из самых полезных функций Sketch имеет дело со спейсингом: Выберите объект, удерживая клавишу Alt, а затем поводите вокруг него мышью, чтобы увидеть расстояния от вашего выбранного объекта до всех остальных. А удерживание Ctrl + Alt и наведение мыши рядом с объектом, покажет размеры объектов, в зависимости от их соотношения величины с другими объектами, содержащимися в группе.

Кнопка, включающая плавающий режим, представляет собой уникальный компонент материального дизайна
Наконец, давайте выберем кнопку плавающего действия, из нашего набора, и добавим ее. Она должна быть в 16 пикселях от навигационной панели и в 16 пикселях от правой стороны. Отлично! Итак, мы получили композицию для нашего первого приложения, созданного согласно материальному дизайну. Это карта скроллингового просмотра страницы.

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

Чтобы перемещаться по различным разделам нашего приложения, мы будем использовать инструмент создания панели навигации. Давайте скопируем нашу первую монтажную область: нажмите на монтажную область в списке панели Layers или на название монтажной области на странице, а затем нажмите Ctrl + D. Это скопирует монтажную область и переместите ее на 100 пикселей вправо. Вы можете продолжить продолжить просто копируя и изменяя, это как раз, что мы сейчас сделаем.

Выберите панель навигации на мобильной монтажной области - слой называется “side nav.” Вставьте его в вашу новую монтажную область. Вы можете изменить категории в навигации, но тем не менее, верхняя область по умолчанию зарезервирована для переключения учетных записей пользователей.

Формы материального дизайна


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

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

Повторное использование монтажных областей

Конечно, после того как вы создали заметку, вы должны увидеть, что она добавлена к списку. Давайте скопируем первый экран и добавим в него нашу новую заметку. Просто нажмите на название монтажной области прямо над ней самой. Теперь, когда монтажная область выбрана, нажмите Ctrl + D. Таким образом вы скопируете монтажную область и переместит ее на 100 пикселей вправо, это идеально подойдет для макетирования вашей работы.

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

Потрясающая функция Sketch # 3: Выбор цвета

Sketch обладает потрясающим инструментом выбора цвета. Просто нажмите Ctrl + C, чтобы выбрать цвет в любом месте на экране. Сочетая это с Ctrl + нажатие на любой элемент, вы сможете легко перекрасить любой объект в считанные секунды.

Инструмент выбор цвета быстрый и точный, а также может быть применен к любому элементу на экране

Добавление вкладок

Вкладки позволяют по-разному представить одни и те же типы контента.

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

Создание списка

Вы будете использовать списки часто. Они представляют собой фундаментальную компоненту любого приложения, а материальный дизайн дает нам несколько опций. Мы сделаем нашу вкладку “публичные заметки” в виде списка.
Скопируйте список “из трех строк” из набора стикеров и вставьте его в новую монтажную область. Разгруппируйте список, а затем просто кликнете Alt + перетаскивание объекта, для набора элементов или группы. Повторяйте это, пока у вас не будет страница, состоящая полностью из строк.

Списки - это распространенный способ отображения данных.

Дополнительные действия - горячие клавиши

Вы заметите поле ввода в правой стороне списка. Это поле представляет собой дополнительное действие. Нажатие в любом месте справа от этого действия будет открывать элемент списка; но для быстрых действий (например, вызов контакта или открытие информации о документе) вы можете использовать дополнительные действия. Мы заменим это поле ввода данных иконкой сердца, для того, чтобы пользователь мог быстро сохранять заметки.
В наборе стикеров вы найдете небольшой сет иконок в верхней левом углу под “типографией.” Выберете иконку сердца и вставьте его там, где расположено серое поле.Иконка должна быть в группе, содержащей иконку сердца и прозрачное поле 24 × 24. Последнее позволит использовать выключку, поэтому убедитесь, что выбрали всю группу.

Символы позволяют нам быстро оперировать различными применениями одних и тех же иконок, элементами и т.п.

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

Используя эту функцию, давайте заменим сердце иконкой выбора. Она представляет собой три вертикально расположенные точки и означает, что доступно более чем одно действие. Все, что вам нужно сделать, это скопировать группу “иконка выбора” (вместе с отбивкой) из набора стикеров и вставьте ее рядом с иконкой сердца. Выровняйте ее с иконкой сердца, а затем удалите ее. Как только вы это сделаете, вы увидете, что другие ряды автоматически обновились. Ура символов!

Для символов в Sketch, нет режима редактирования. Символы ведут себя так же, как и группы и сразу обновляются.Поэтому их так легко изменять. Тем не менее, будьте внимательны: когда вы редактируете символ в одном месте, он измениться во всем документе.

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

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

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

Диалоговое окно, когда оно нужно

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

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

Быстрый старт с помощью ресурсов для Sketch

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

  • Набор стикеров материального дизайна. Это последний набор стикеров. Хороший набор элементов и стилей, которые легко копировать и вставлять в ваши новые композиции.
  • Набор иконок материального дизайна
  • Этот набор иконок из хранилища материального дизайна на GitHub.
  • Фреймы материального дизайна
  • Это набор цветов и иконок также хранилища материального дизайна на GitHub.

Вывод: Держите идеи в голове, а инструменты в руках

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

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

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

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

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

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

Как создать собственную кисть на основе фотографии, отснятой на iPhone, iPad или устройство на базе Android, и используйте ее в Adobe Photoshop CC, Illustrator CC и Photoshop Sketch. Легко и просто! Для этого теперь есть Adobe Capture .

Для Adobe этот год выдался довольно богатым на всяческие релизы. Корпорация выпустила довольно много различных дополнительных приложений для мобильных платформ и в добавок анонсировала ряд еще более крутых новшеств, таких как Project Comet , Project Faces , секретное приложение с Monument Mode , а также пообещала в этом и следующем году прикрутить много полезных фич к Adobe Stock . На этот раз героем нашего небольшого обзора станет программа для мобильных устройств под названием Adobe Capture .

Принцип работы

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

Итак, какие возможности вы получите работая с Adobe Capture:

  • Создавать высококачественные кисти в любом стиле — фотореалистичные, натуральные, графические кисти или кисти для живописи. Любой отснятый объект можно превратить в кисть.
  • Источник вдохновения всегда рядом — создавать собственные кисти в любом месте, в любое время, используя фотографии с камеры, из каталога снимков или Adobe Creative Cloud.
  • Интерактивный просмотр — посмотреть, как будет выглядеть кисть, прямо в процессе ее создания. Задать для нее дополнительные параметры (нажим, скорость и текстура).
  • Свободу творчества — добейтесь нужного вида изображения с помощью масштабирования, обрезки и масок. Мазки кистей могут быть непрерывными или прерывистыми.
  • Creative Cloud Libraries — вы можете сохранять кисти в Creative Cloud Libraries, а затем использовать их в приложениях Photoshop, Illustrator и Sketch. Кроме того, вы можете предоставлять доступ коллегам к своим ресурсам в Libraries прямо из приложения, в котором работаете.
  • Легко создавать профессиональные проекты — создавайте кисти, произвольно задавая параметры или используя элементы управления точной настройкой, а затем используйте их в Photoshop и Illustrator.
  • Поддержка цифрового пера iPad — Творите в Brush с помощью Adobe Ink. Посматривайте эффект настроек чувствительности к нажиму и скорости прямо в процессе создания кисти.
  • Поддержка Creative Cloud Market для iPad и iPhone — создавайте кисти на основе шаблонов и изображений, импортированных из Creative Cloud Market.
  • Собственные кисти на мобильных устройствах или на настольном ПК — воплощайте свои идеи, создавая кисти профессионального качества, и используйте их в настольных версиях Photoshop и Illustrator. Или импортируйте кисти в Photoshop Sketch, приложение Adobe для рисования на iPad или устройстве на базе Android и создавайте проекты, где бы вы ни находились.
  • Тесная интеграция с Creative Cloud — вы можете систематизировать и сохранять кисти в Creative Cloud Libraries, а затем использовать их в приложениях Photoshop, Illustrator и Sketch, а также предоставлять к ним доступ своим коллегам.

В состав пакета Creative Cloud входят дизайнерские приложения для настольных компьютеров и мобильных устройств, которые отвечают мировому уровню качества, а также усовершенствованные инструменты для обмена ресурсами и совместной работы над творческими проектами.

FAQ

Вопрос: Доступна ли программа на русском языке?
Ответ: Да, программа помимо русского поддерживает также 17 самых распространённых языков.

Вопрос: Как и где я могу скачать Adobe Capture?
Ответ: Adobe Capture CC доступна для бесплатной загрузки в App Store и Google Play .

Вопрос: Нужен ли аккаунт в Creative Cloud чтобы пользоваться Adobe Capture?
Ответ: Да, вам необходимо быть зарегистрированным пользователем Adobe CC с платной подпиской или без неё.

Вопрос: Как создать, редактировать или удалить цветовую схему в Adobe Capture?
Ответ: Откройте приложение и кликните на иконку + внизу экрана. Приложение автоматически выберет 5 цветов из кадра, после чего вы сможете их изменить.

Вопрос: Как создать, редактировать или удалить Shapes в Adobe Capture?
Ответ: Откройте приложение и нажмите на Shapes, после чего на + внизу экрана. С помощью направляющих выделите интересующую вас область кадра. Сделайте фото. Нажмите Keep in Shape или Remove from Shape для управления областью. Нажмите (->) в верхнем правом углу, после чего введите подходящее название и сохраните в своей библиотеке.

Вопрос: Как создать, редактировать или удалить кастомную кисть в Adobe Capture?
Ответ: Откройте приложение и нажмите на Brushes, после чего на + внизу экрана. Сделайте фото или выберите подходящий снимок из галереи мобильного устройства, после чего следуя инструкциям обрежьте фотографию до той области, из которой вы хотите сделать кисть. После проведенных манипуляций введите название кисти и сохраните в свою библиотеку.

Вопрос: Всё что я сделал в Adobe Capture будет доступно для использования во всех программах Adobe?
Ответ: Нет. Вот таблица совместимости:

Вопрос: Как мне использовать контент, созданный с помощью Adobe Capture?
Ответ: Весь созданный вами контент вы можете вставить из Creative Cloud Libraries.

Вопрос: Как я могу поменять настройки приложения?
Ответ: Для этого на главном экране приложения необходимо нажать на гамбургер-меню и перейти во вкладку Settings.

Вопрос: Где я могу дать обратную связь по пользованию продуктом?
Ответ: Запустите приложение и кликните по иконке Capture, после чего на Give Us Feedback.