Маскируем Маска

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

1. Делаем круглый шейп: O.

2. Поверх него кладём Маска. Сделал его на 50% прозрачным, чтобы было нагляднее.

3. Выделяем шейп и переводим его в режим Use as Mask. Стандартная клавиша: Ctrl + Cmd + M, я назначил удобную Ctrl + M.

4. Теперь важно: Все слои в списке выше маскирующего тоже маскируются, поэтому пару из шейпа и фото нужно сгруппировать: Cmd + G, либо символизировать: Cmd + Y.

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

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

#GIF #горячие_клавиши

#классные_люди №5: Екатерина Соломеина

Екатерина — основатель образовательной площадки Future London Academy. Выступает с лекциями, в том числе на TEDx. В рамках FLA она проводит лекции и курсы с участием известных дизайнеров из таких компаний как IDEO, Twitter, British Airways, Marvel, Pentagram и Mail ru.

В лекции для @bangbangeducation Екатерина рассказала много интересного. Я сделал текстовую версию.

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

Как относятся к кириллице британцы
Пищат, как русские от иероглифов.

Как влияет среда на дизайнера
Меняет дизайн, потому что дизайнеры как губки, впитывают то что видят.

Рассказала о творческом опыте
Нужно смотреть на дизайн прошлого и гордиться дизайн-предками вроде авангардистов.

Как стать гениальным дизайнером
Нужно найти дизайнера из прошлого, который максимально близок по духу и продолжить его дело.

Как связаны дизайн и еда
И кулинария и дизайн — творческие процессы. Через еду можно понять качество дизайна, развивая вкус.

Нужна ли в наше время специализация
Нужна, но не слишком узкая. Нужно вариться в нескольких творческих сферах.

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

Текстовая версия: medium.com/sketchdesigner/solomeina-e52d98c772ce

Видео беседы: bangbangeducation.ru/talk/dizain-bez-granits

Бесплатный ежемесячный Дайджест продуктового дизайна Юрия Ветрова обзавёлся телеграм-каналом @pdigest.

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

Юрий Ветров — руководитель дизайн-команды в Mail ru, подробнее о нём можно узнать в jvetrau.com/about.
___
Я же готовлю новый большой пост про Фреймер-анимацию бесшовного перехода.

Зеплин обновился: завезли новую пару клавиш, чтобы раскрывать и скрывать секции

Я писал об этом им в поддержку и неожиданно достучался. В версии 1.22.1 появились новые пункты меню:

Ctrl + Cmd + ↑ – Collapse All Sections (свернуть все секции)
Ctrl + Cmd + ↓ – Expand All Sections (развернуть)

Ужасно не хватало.

Также появилась функция Show Screen Grid (Alt + Cmd + G), но её использовать не получилось: всегда неактивна. Если в Зеплине появится нормальная сетка-восьмёрка, будет здорово.

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

#фреймер_кейс №1: Бесшовный переход между экранами

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

Мегапост: medium.com/sketchdesigner/framer-case-1-e46e3c073d60

Получившийся проект: https://framer.cloud/vPUBb/

Это готовое решение, которое можно разобрать и интегрировать в твой дизайн.

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

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

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

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

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

#лучшее #фреймер #UI_анимация

Как и всегда выкладываю фреймер-проекты примеров и скетч-проект для самостоятельного импорта. Желаю продуктивного изучения и вдохновения.

Все вопросы и комментарии по этому кейсу пиши в @framerchat.


Внутри framer-case-1-examples.zip:

prototype.sketch – скетч-проект, подготовленный к импорту в Фреймер

framer-case-1.framer – исходник проекта

01_shadowBug – Пример глюка координат из-за тени

02_animationQueue – Реализация очереди анимаций

03_states – Состояния слоя

04_avatarZoom – изолированный зум-аватар

05_position – Состояния с изменением позиции

06_piechart – Проект с анимацией круговой диаграммы

Что ты думаешь о Фреймере?
anonymous poll

Я уже использую Фреймер или планирую ему учиться. Фреймер-кейс был полезен и открыл что-то новое. Спасибо! – 104
👍👍👍👍👍👍👍 54%

Я не использую Фреймер, и не хочу. Мне неинтересно делать бесшовные переходы и сложные прототипы. Посты спокойно пролистываю. – 42
👍👍👍 22%

Фреймер интересен, но у меня Windows XP, Photoshop CS2 и Nokia 3310. – 34
👍👍 18%

Любые посты про Фреймер навевают на меня тоску и раздражение. Код это слишком больно. Ненавижу. – 14
👍 7%

👥 194 people voted so far.

Насколько был понятен разбор в Фреймер-кейсе?

Я не читал кейс, кинул в закладки и открою его в 2023 году. Фреймер устареет, а интерфейсы будут анимировать силой мысли. – 63
👍👍👍👍👍👍👍 51%

Я плохо воспринимаю текст, тем более, про код. Было бы здорово посмотреть этот кейс в формате ютюб-урока. – 33
👍👍👍👍 27%

Всё было понятно и не вызвало вопросов. – 25
👍👍👍 20%

Кейс был непонятен из-за подачи. Объяснения непонятны, хотя я честно пытался сделать бесшовный переход. У меня есть вопросы. – 3
▫️ 2%

👥 124 people voted so far. Poll closed.

#GIF: Скругляем только нужные углы

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

1. Рисуем прямоугольник, R.

2. Задаём ему скругление в 2px в поле Radius, дважды ↑.

3. Выделяем прямоугольник снова, переходим в режим редактирования, Enter.

4. Зажимаем Shift и выбираем два верхних угла кликом.

5. Им настраиваем индивидуальное скругление. Или убираем его, если уже есть.

Читатели предлагают вводить значения скруглений через точку с запятой.

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


Значения вводятся по часовой:

1. Верхний левый;
2. Верхний правый;
3. Нижний правый;
4. Нижний левый

Копируем CSS-атрибуты скругления углов

Читатель Артём Фёдоров указал на глюк Скетча, связанный с углами. Если задавать угол способом из гифки и копировать его CSS-свойства, в нём не будет border-radius:

/* Rectangle */
background: #D8D8D8;

Если задать значения через запятую (например, 28; 0; 0; 0), тогда будет:

/* Rectangle */
background: #D8D8D8;
border-radius: 28px 0 0 0;

Наглядное видео:

#классные_люди №6: Дон Норман

Дональд — очень крутой 80-летний дедуля. Профессор психологии, когнитивных и компьютерных наук. Учёный в области пользовательского опыта, классик промышленного и интерфейсного дизайна, автор книги «Дизайн привычных вещей» и термина пользовательский опыт (User Experience).

medium.com/sketchdesigner/don-norman-b124b84ecec0

Посвятил свою жизнь изучению эргономичного дизайна. В 1993 устроился работать в Apple на должность «архитектор пользовательского опыта» и это было первое использование такого выражения в названии должности. Позже Норман стал вице-президентом в Apple. Сейчас возглавляет дизайн-лабораторию The Design Lab в университете Калифорнии.

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

Лекция Дона на TED youtube.com/watch?v=QYNiNv-5Im4

Забавный сюжет на VOX про Дверь Нормана (англ) youtube.com/watch?v=yY96hTb8WgI

Канал «Фреймер-ответы»

Я собрал лучшие вопросы, которые задавали участники @framerchat, добавил несколько хороших от себя и выложил в канал @framerfaq. В нём будут появляться высушенные ответы из Фреймер-чата.

Оглавление:

Вопрос 1 Что такое Фреймер?

Вопрос 2 Год лицензии Framer Studio стоит 144$. Смогу ли я работать в Framer Studio через год, или мне нужно будет покупать новую?

Вопрос 3 Нужно ли мне знать JavaScript, чтобы использовать Фреймер?

Вопрос 4 Будет ли Фреймер использовать КофеСкрипт всегда?

Вопрос 5 Фреймер заточен на создание именно сложных анимаций, или в нём можно быстро делать и что-то простое?

Вопрос 6 Какие плюсы использования Фреймера?

Вопрос 7 Какие возможности анимации даёт Фреймер?

Вопрос 8 Поможет ли фреймер-код программистам в дальнейшей разработке проекта?

Вопрос 9 Можно ли использовать Фреймер в VR?

Вопрос 10 С чего начинать изучение Фреймера?

Вопрос 11 Не будет ли правильным начать изучать Swift и делать анимацию в нативной среде разработки?

Вопрос 12 Подойдёт ли Фреймер, чтобы собрать простой кликабельный прототип приложения или сайта?

Вопрос 13 Как записать фреймер-прототип в формат видео?

Вопрос 14 Почему все макеты из Скетча нужно импортировать в двойном размере (2x) ?

Вопрос 15 Фреймер может осилить любую анимацию?

Вопрос 16 Как сделать слой кликабельным?

Вопрос 17 Как импортировать макет из Скетча в Фреймер?

Вопрос 18 В чём смотреть фреймер-прототипы?

Упорядочиваем слои автоматом

Пара отличных плагинов для ускорения работы и создания порядка в слоях. Rename It и Sort Me.

#плагины #автоматизация

Плагин: Rename It
Используется, когда нужно заменить или удалить фрагмент текста в названии слоёв.

rodi01.github.io/RenameIt/

Пример: Допустим, в макетах есть страница «Кредит». Все слои на ней начинаются с слова credit. При экспорте все они попадут в папку с таким названием.

credit/backgrounds/back-big.png
credit/backgrounds/back-small.png
credit/icons/credit-icon-big.png
credit/icons/credit-icon-small.png
credit/icons/credit-icon-transparent.png

Чтобы не заменять вручную слово credit, используем Rename It. Выделяем все слои, по которым будем искать, ищем credit и заменяем на deposit. Оно меняется во всех местах. Все картинки выгружаются в папку deposit.