Плагин: Keys

Позволяет настраивать горячие клавиши прямо в окне Settings (Cmd + ,) в Скетче, а не через System Preferences.

Это плагин-прорыв. Он имеет все шансы стать одним из самых нужных.

github.com/exevil/Keys-For-Sketch

Также доступен в менеджере плагинов Sketchpacks:
sketchpacks.com/exevil/Keys-For-Sketch/install

Все свои наблюдения про этот плагин я собрал в посте:

medium.com/sketchdesigner/keys-e60d1e3991df

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

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

#классные_люди №4: Массимо Виньелли

medium.com/sketchdesigner/massimo-vignelli-43640e48b8ea

Массимо — один из классиков графического и промышленного дизайна ХХ века, популяризатор шрифта Гельветика и минимализма в дизайне.

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

Запись прямой трансляции с Behance Portfolio Review

youtu.be/sXOz9EbgPeg?t=42m51s

ru.behance.moscow

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

Анализ UI-анимации №2: Бесшовный переход между экранами

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

medium.com/sketchdesigner/animation2-8997c9758e7f

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

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

К посту я прикладываю макеты в Скетче и шрифт Titillium.

#для_профи #UI_анимация #Фреймер

Внутри: 4 примера, макет и шрифт.

Что интересного в новой бете Скетча v.48

- Ресайзим символы при помощи Scale
- Меняем цвет по всему документу, наконец-то
- Скачиваем исходники проекта из Скетч Клауда
- Ловим стабильный крэш приложения при попытке показать сетку (Ctrl + G), давно не хватало

Ещё теперь можно работать с цветовым профилем sRGB, но как настраивать профиль мне не удалось найти.

Поковыряться: sketchapp.com/beta/

Как будет работать ресайз символов

#новая_функция: Ресайз символов при помощи Scale

В версиях вплоть до текущей использовать Scale (Cmd + K) на копиях символов было нельзя. Это всегда вызывало недоумение.

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

Теперь сами инстансы умеют в Cmd + K, и это очень здорово, потому что у иконки остаётся один мастер. Не нужно плодить дубликаты.

#новая_функция: Find and Replace Color

Команда будет в меню Edit и займёт горячую клавишу Alt + Cmd + F. Прикольно, что можно использовать пикер Ctrl + C при выборе цветов, которые надо найти и заменить. Функция органично вписывается в логику и стиль Скетча.

Интересная настройка Include all opacities of this color заменит цвет даже в тех объектах, где опасность цвета неполная.

Preserve original opacity сохранит исходную опасность заменяемого цвета. Если снять, заменит на первый цвет новым полностью опасным.

#новая_функция: Скачиваем проект из Скетч Клауда

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

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

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

Рамблер выкатил сайт-презентацию о своём визуальном стиле. Красивый и бесполезный

medium.com/sketchdesigner/rambler-f3eddee14f51

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

Выводы: Дизайнеры Рамблера не используют Скетч в полную силу. Генеративный паттерн бъёт по глазам, на бою описанные принципы применяются далеко не всегда. Главная страница перегружена контентом настолько, что дизайн уже не важен, а на разных сервисах используются свои старые палитры. Надеюсь, этот сайт — не пустышка, а первый шаг к наведению порядка в дизайне Рамблера и его сервисов.

#дизайн_системы  #Рамблер

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

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

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), но её использовать не получилось: всегда неактивна. Если в Зеплине появится нормальная сетка-восьмёрка, будет здорово.

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