#GIF Как красить иконки через маску, задавая цвет в оверрайде

Этот метод рассказал Пабло Стэнли с канала Sketch Together. Метод вполне годный, может сэкономить уйму времени и сделать библиотеку иконок гораздо компактнее.

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

Есть и минус: если ты экспортируешь SVG для Андроид-разработчиков, придётся подчищать код и следить, чтобы на Android 5 иконку не разорвало. О том, как это делать я расскажу в другой раз.

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

colors / 01 default
colors / 02 blue
colors / 03 magenta

2. Делаем форму иконки
Заключаем форму иконки в символ. Если используешь сетку 8px, артборд символа должен быть кратен восьми: 16x16, 24x24 или 32х32. Это позволит группировать иконки в инспекторе и удобно менять одну на другую, не меняя сущность символа. Шейп (форма иконки) должен быть по центру артборда.

3. Вставляем символ цвета в иконку с шейпом
Шейп переводим в режим маски (рекомендую для этого Ctrl + M). Квадрат с цветом обрезается по шейпу.

4. Меняем форму и цвет иконки
Вставляем экземпляр символа с шейпом. Самый прикол в том, что можно отдельно менять и форму и цвет. Чтобы поменять форму, нужно поменять символ на другой такого же размера. Цвет можно менять через оверрайд символа.

#первые_шаги #GIF #идеология_символов

10. Как решать конфликты горячих клавиш?

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

Способ 1. Через Keys
Плагин Sketch Keys позволяет назначить мешающей команде другую клавишу. Увы, он не видит, какие клавиши вшиты в сторонние плагины.
sketchdesigner.ru/sketchapp/plugins/sketch-keys/

Способ 2. Через редактирование манифеста плагина
Второй, более хардкорный способ: залезть в код плагина и в нужном месте удалить значение горячей клавиши. Если по какой-то причине вариант с Keys не подходит, придётся немного повозиться с кодом.

Я написал инструкцию о том, как это делать:
sketchdesigner.ru/sketchapp/answers/10-hotkey-conflicts/

#для_профи #горячие_клавиши #плагины

—
Задать новый вопрос: @sketchchat

Живые фото-иллюстрации: о стоках и шершавости

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

medium.com/sketchdesigner/stock-vs-authentic-e15473906209

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

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

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

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

Эффект звезды
Кроме того, если пользователь видел этого юриста на сайте, а потом общается с ним вживую, возникнет эффект звезды: «о, я её на сайте видел, значит она известная и крутая». И при этом живая. Это ещё больше усиливает доверие.

В посте больше примеров.

#первые_шаги

Sketch Isometric

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

Как использовать
sketchdesigner.ru/sketchapp/plugins/sketch-isometric/

Отлично работает в связке с плагином Magic Mirror, позволяя раскладывать макеты в изометрии. Это популярный способ демонстрировать дизайн в портфолио.

#плагины #для_профи

Magic Mirror (4$ / мес.)

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

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

Как использовать
sketchdesigner.ru/sketchapp/plugins/magic-mirror/

Мэйджик Миррор следует отключать, когда он не нужен, иначе он будет замедлять Скетч.

#плагины #для_профи

Встреча: Новый FontLab VI из первых рук
Москва, 25 февраля 2018 (воскресенье) 14:00

Вход бесплатный, по регистрации
Зарегистрироваться: paratype.timepad.ru/event/662276/

Адрес: Москва, м. Проспект Мира, Протопоповский пер., 9

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

- Александра Королькова
Арт-директор в Paratype, автор книги «Живая Типографика», которую я выкладывал недавно

- Юрий Гордон
Художник, гендиректор и дизайнер в Letterhead, автор «Книги про буквы от Аа до Яя»

- Юрий Ярмола
Ведущий разработчик FontLab VI, fontlab.com

Предыдущая версия FontLab Studio 5 вышла в конце 2005 года. Новый Фонтлаб был написан с нуля, имеет набор инструментов от улучшения контура в один клик до создания вариативных шрифтов. Существенно меняет процесс создания шрифта. Юрий Гордон и Александра Королькова перешли на новый редактор и внесли существенный вклад в его создание.

Организаторы: Paratype, FontLab и Институт бизнеса и дизайна

Буду там.

Использованы фото:
1. Кскения Плотникова (журнал Шрифт, typejournal.ru)
2. dompetra.ru
3. Диана Парасухина (Журнал Шрифт)

dribbble.com/shots/3680344--Microinteractions-Sidebar-Indicators

В шоте есть ссылка на исходник в Флинто

#тебе_слово №1: Пуш-индикаторы

Один из шотов Антона Лапкó (того, который победил в конкурсе по Фреймеру) показывает это занятное микровзаимодействие.

В нём пуш-индикаторы на иконках изначально не содержат цифру счётчика, а содержат только цветной кружок — пуш-признак.

При ховере он увеличивается и превращается в пуш-счётчик с цифрой.

#UI_анимация #проектирование

Тебе слово:

Улучшает ли это решение пользовательский опыт?
anonymous poll

Нет. Пользователю важно показывать цифру пушей сразу. Это решение скрывает нужный контент. Ховер-анимация вносит жужжание. – 134
👍👍👍👍👍👍👍 40%

ХЗ. На глаз не определить, зависит от ЦА, надо тестировать на пользователях. – 100
👍👍👍👍👍 30%

Да. Пользователю не важен счётчик пушей, достаточно показать, что есть непросмотренное. Пуш-признаки выглядят аккуратнее. – 98
👍👍👍👍👍 30%

👥 332 people voted so far.

Текстовая трансляция со встречи:

https://t.me/joinchat/AAAAAE7i18AayTEgWQ1xzQ

Количество купленных устройств #цифры

Вышел Скетч 49: появилась функция переходов между экранами

Сегодня большой день. Мы ждали этого уже года два: Скетч наконец научился делать интерактивные прототипы из коробки, без внешних сервисов. Функция доступна в версии 49, которая вышла сегодня.

Как это работает
Механика полностью идентична той, что была в Invision’s Prototype, и это хорошо: делать прототипы, перетаскивая стрелочку на нужный экран — это самый интуитивный метод из возможных.

1. Выбираем слой, который будет выполнять функцию хотспота (области нажатия), нажимаем новую кнопку Link или горячую клавишу W.

2. Тянем оранжевую стрелочку на нужный артборд. Объект, выступающий в качестве хотспота, получает новый значок в списке слоёв. Также хотспоты можно вставлять как отдельные объекты. Появился новый тип Hotspot.

3. Выбираем анимацию перехода из 4 вариантов сдвигов. Всё пока очень примитивно.

4. Тестируем прототип, нажимая новую кнопку Preview. Открывается окно, похожее на браузер, в нём можно покликать или сразу перейти на нужные экраны через меню. Анимация в окне Preview мерзко моргает и движется дёргано. В плане настройки анимаций Марвел пока значительно превосходит Скетч.

5. Если жёлтые стрелочки мешают, их можно скрыть тогл-режимом Ctrl + F. Глеб Кушедов из чата предлагает называть функцию «Fucking Arrows». Тоже хороший вариант мнемоники. Я же переназначил на Alt + Cmd + P(rototyping).

6. Огонь-фича: Прототип можно шерить в виде ссылки на Скетч Клауд.

Хотспоты на Скетч Клауде работают, только если зайти на экран и нажать маленькую незаметную иконку Play в верхнем правом углу. Лишнее действие, хотспоты должны работать сразу, а Play можно превратить в полноэкранный режим.

Вот мой тестовый пример: sketch.cloud/s/dgbaL
Можно скачать исходник.

Я обновился и не наблюдаю никаких проблем.

Начали выходить апдейты для плагинов. Апдейт для Раннера уже вышел.

[обновлено] Ребята в @sketchchat жалуются, что Скетч крэшится при входе. Причиной этому некорректно работающие плагины. У кого-то крэшится Midnight, у кого-то Paddy. Оба плагина проверил, работают корректно. Paddy пока не рекомендуется использовать, потому что он плохо себя вёл даже на 48.2.

Anima Auto Layout после обновления гарантированно поломается.

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

Вердикт
Криво-косо, но нативные прототипы работают. Для первой версии очень даже неплохо. Шероховатости анимации и лишнюю кнопку Play в облаке наверняка скоро починят.

#новая_функция #для_профи

Апдейт: Ранее я писал, что плагин Midnight крэшит Скетч. Это оказалось не так. Техподдержка Скетча рекомендует отключать Paddy. Если ловишь стабильный крэш, пиши @okunev и я постараюсь помочь.

Следом за Скетчем обновился Зеплин

Теперь хотспоты есть и в нём. Чтобы они были кликабельными, в Зеплине нужно зажимать Shift.

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

Марвел окончательно отходит на второй план, даже если они внедрят хотспоты у себя. Раньше разработчики получали от меня две ссылки: на сценарий в Зеплине и на Марвел-прототип. Теперь всё уместится в одну ссылку на Зеплин.

Делать прототипы в Скетч Клауде, пока он не обладает всеми измерительными возможностями Зеплина и клёвой анимацией Марвела, я бы тоже не стал.

Это ещё не все классные новости последнего обновления. Про облачные библиотеки поговорим завтра.

#новая_функция #Зеплин #Марвел