{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блоги: заметки с тегом affinity publisher", "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": false, "_itunes_explicit": "no", "home_page_url": "https:\/\/blogengine.me\/blogs\/tags\/affinity-publisher\/", "feed_url": "https:\/\/blogengine.me\/blogs\/tags\/affinity-publisher\/json\/", "icon": false, "authors": [ { "name": "Илья Бирман", "url": "https:\/\/blogengine.me\/blogs\/", "avatar": false } ], "items": [ { "id": "136353", "url": "http:\/\/nodeus.ru\/blog\/all\/glassmorfizm-v-affinity\/", "title": "Глассморфизм в Affinity", "content_html": "

\n $\"\"$ \n<\/div>\n

Продолжим тему глассморфизма и рассмотрим самое интересное, как этот оформительский приём сделать и где. На самом деле больше всего я буду говорить об Affinity т. к. работаю практически только в нём, но приёмы общие очень похожи во всех программах.<\/p>\n

Самое простое — это Figma. Там даже выдумывать ничего не надо, просто размываем задник и всё. Работает «из коробки». Ну, это круто конечно. С фигмой я не работаю вообще. Вот совершенно ничего не делал в фигме и, честно сказать, с небольшим скепсисом отношусь ко всему, что работает в вебе, хотя фигма крутая конечно.<\/p>\n

Меня больше интересует, то чем пользуюсь постоянно, что знаю и что всегда под рукой — Affinity Designer, Affinity Publisher и Affinity Photo.<\/p>\n

Давайте разберём подробно как выглядит эффект глассморфизма и из каких элементов он состоит. Как я уже упоминал, глассморфизм — это эффект послойный. Это значит несколько объектов взаимодействуют друг с другом и при этом находятся на разных слоях т. е. находятся на разной высоте. Таким образом можно сказать, что такой приём даёт нам ощущение псевдо-трёхмерности, позволяет почувствовать разделение по сути плоских объектов, даже не придавая им трёхмерности.<\/p>\n

Если представить наши слои, то они будут выглядеть и располагаться вот в таком порядке:<\/p>\n

3 слой — текст или векторный объект на стекле
\n2 слой — объект, который будет непосредственно стеклом
\n1 слой — яркая подложка с рисунком или паттерном<\/p>\n

Так вот, основная отличительная особенность глассморфизма в том, что в границах нашего объекта-стекла (на 2 слое) нижний (1 слой) будет размыт и станет более светлым, как будто мы смотрим на нижний слой через матовое полупрозрачное стекло. Хотя, стекло не обязательно должно быть матовым, но прозрачным в какой-то степени оно быть конечно же должно. Иначе это будет не объект похожий на стекло, а просто подложка какого-то цвета.<\/p>\n

Думаю, что вы уже уловили как самым простым способом имитировать матовое стекло — нужно взять копию 1 слоя, размыть его по гауссу, обтравить маской объекта на 2 слое (наше стекло) и поместить его между первым и 2 слоем.<\/p>\n

Стек слоёв теперь будет таким:<\/p>\n

3 слой — текст или векторный объект на стекле
\n2 слой — объект, который будет непосредственно стеклом
\n1.1 слой — подложка в границах объекта на слое 2 (т. е. подложка отмаскированная формой стекла)
\n1 слой — яркая подложка с рисунком или паттерном<\/p>\n

В общем случае получится примерно то что нам нужно и этот способ применим, я думаю, во всех векторных и растровых редакторах.<\/p>\n

С теорией разобрались, теперь переходим к практике. К практике в аффинити.<\/p>\n

Скажу сразу, что я нашел как минимум 4 способа сделать этот эффект в аффинити. Первый классический, ещё два — частные случаи первого, а четвёртый — настолько неочевидный, но максимально мощный и универсальный в плане использования, что я сам был весьма удивлён как результатом, так и в принципе неочевидностью его получения. И да, четвёртый вариант будет работать только в аффинити т. к. использует фирменную кросс-прозрачность графических файлов и объектов во всех трёх приложениях аффинити (Designer, Photo, Publisher).<\/p>\n

Способ 1<\/h3>\n
\n
Начнём с яркой подложки, слой background. Это может быть простой битмап или векторная иллюстрация, нет никакой разницы. Лишь бы на фоне были достаточно контрастные области, как по яркости, так и по цветности, чтобы эффект был наиболее заметен.<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Сразу же сделаем копию подложки<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Сделаем форму нашего стекла<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Размываем копию подложки (применяем эффект размытия по Гауссу)<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Лёгким движением руки отсекаем наш размытый объект «background copy» объектом «Rounded Rectangle»<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
В панели слоёв видно, что наш размытый фон поместился внутрь скруглённого прямоугольника. Именно поместился внутрь, а не отмаскировался. В аффинити есть возможность и отсечения объекта объектом и классическая маскировка. Реализуются они немного по разному и ведут себя чуть по разному, но суть одна.<\/p>\n
Сейчас уже практически похоже на стекло, осталось немного осветлить, добавить контур, шум и тень.<\/p>\n
\n
Для осветления просто добавим внутрь нашего объекта стекла поверх размытого фона белый прямоугольник и уменьшим у него непрозрачность до 25%. У объекта стекла добавим через эффекты тонкий абрис коническим градиентом в режиме наложения lighter color с непрозрачностью 70-75%, там же в эффектах нашего основного объекта добавим и небольшую тень.<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Добавим сверху надпись на наше стекло. И её тоже можно сделать стеклянной, поигравшись эффектами слоя.<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
Теперь будем рассматривать частности и задаваться вопросами.<\/p>\n
Что произойдёт, если нам нужно будет сместить наше стекло?<\/b><\/p>\n
Очевидно, что вместе со стеклом сдвинется всё, что находится внутри нашего объекта «Rounded Rectangle» — это размытый фон и наш осветляющий прямоугольник. Прямоугольник размером с видимую область артборда и сдвиг довольно большого объекта стекла нам никак не помешает, а вот сдвиг размытого фона сломает нам весь эффект. Вернее, эффект останется, но станет кривой и неправдоподобный.<\/p>\n
\n $\"\"$ \n<\/div>\n
Тут видно, что внутри стекла размыта совсем не та часть, которая лежит на фоне. К счастью, в аффинити есть галочка, которая позволяет нам при сдвиге родительского объекта не двигать все дочерние т. е. те, которые находятся внутри этого объекта. Выбираем наш родительский объект «Rounded Rectangle» и активируем галочку «Lock children».<\/p>\n
\n $\"\"$ \n<\/div>\n
Теперь при сдвиге все наши дочерние объекты будут оставаться на месте.<\/p>\n
\n $\"\"$ \n<\/div>\n
Что произойдёт, если нам нужно поместить какой-то объект между фоном и стеклом?<\/b><\/p>\n
\n $\"\"$ \n<\/div>\n
Как и ожидалось, на наш новый объект не действует наше волшебное стекло. Чтобы эффект проявился, нужно поместить размытую копию объекта «Star» в объект «background copy».<\/p>\n
\n $\"\"$ \n<\/div>\n
Получилось довольно неплохо и достаточно правдоподобно. Самое интересное, что меняя режим наложения объекта «Star copy» можно определить как будет фильтровать стекло наше изображение и таким образом получать интересные визуальные эффекты.<\/p>\n
\n $\"\"$ \n<\/div>\n
Вероятно, что данный способ добавления объектов между фоном и стеклом довольно расточительный и если объектов уже с десяток, а вы не привыкли давать названия в панели слоёв, то определить какая копия объекта к какому оригинальному объекту относится, бывает уже затруднительно. К тому же, если хотите передвинуть эти объекты, то нужно двигать как оригиналы, так и их копии. Это очень неудобно. Решается это всё в четвёртом способе.<\/p>\n
Способы 2 и 3<\/h3>\n
Второй способ — очень похож на первый. Отличается только тем, что копии объектов не помещаются в объект размытого фона, а размываются отдельно и помещаются в главный родительский объект, но там нужно будет изменить иерархию объектов и их влияние друг на друга. Иногда это тоже бывает нужно, когда наш стеклянный объект должен быть составным из нескольких частей с разным влиянием на подложку и на объекты между фоном и стеклом (частичное размытие или непрозрачность). Например, вот такой сложный объект, где должно быть размытие только относящихся к объекту форм, а сам объект должен быть полупрозрачный, без размытия фона.<\/p>\n
\n $\"\"$ \n<\/div>\n
Третий способ — вместо отсечения родительским объектом можно воспользоваться маскированием. Т. е. размытый фон будет маскироваться формой стекла. Иногда это бывает сделать проще, а еще позволит показать стекло с изменяющимся эффектом матовости \\ размытости \\ непрозрачности.<\/p>\n
Рассматривать второй и третий способы я не буду, можно попробовать это самостоятельно. Т. к. суть у этих способов одна, алгоритм известен.<\/p>\n
Немного остановлюсь только на частном случае и потом перейдём к рассмотрению четвёртого, самого прорывного способа.<\/p>\n
А что если нам нужно изменить форму нашего стекла?<\/b><\/p>\n
Изменить форму не проблема. Изменения формы нашего стекла никак не повлияет на всё, что находится внутри. Просто преобразуем наш объект «Rounded Rectangle» в кривую и изменим форму.<\/p>\n
\n $\"\"$ \n<\/div>\n
Как видно, форма объекта изменилась, эффект остался.<\/p>\n
Способ 4 «Хитрый»<\/h3>\n
В основе этого способа лежит различие в рендеринге эффектов в Affinity Photo и Affinity Designer\\Publisher. В Affinity Photo есть такое понятие, как Live Filters — фильтры в реальном времени, не разрушающие сам объект. Это немного похоже на смарт объекты в фотошопе. Суть в том, что простые эффекты слоя в Affinity Designer и Affinity publisher не могут существовать без объекта, а вот live filters в Affinity Photo могут, более того, такие фильтры можно и маскировать и отсекать.<\/p>\n
\n
Подготовить наш фильтр в Affinity Photo.<\/li>\n
Копируем и вставляем наш фильтр в Affinity Designer \\ Affinity Publisher (или остаёмся работать в Affinity Photo)<\/li>\n
Делаем форму нашего стекла и дублируем<\/li>\n
Маскируем фильтр формой, а к дублю будем применять цвет стекла, непрозрачность, шероховатость, абрис, можно даже добавить толщины через эффект слоя 3d и т. п. Как только настроим внешний вид стекла, группируем наш смарт фильтр и форму стекла, чтобы одновременно можно было их двигать по макету.<\/li>\n<\/ol>\n
Теперь чтобы добавить какие-то объекты между стеклом и фоном никаких дополнительных действий не требуется, просто добавляем объекты и если они попадают под стекло, то они совершенно чудесным образом будут размываться. Это могут быть геометрические объекты, текст, растровые изображения, что угодно.<\/p>\n
Плюс этого метода в том, что у нас не копятся дубли объектов. Эффект размытия только один и влияет на все объекты разом. Эффект размытия можно сделать не только по Гауссу, но и, например, размытие по движению или размытие, имитирующее диафрагму фотоаппарата, т. е. любой эффект размытия, который доступен в Live Filters в Affinity Photo (и как можно догадаться, можно экспериментировать не только с размытием, но и например с перспективой или полутонового растра).<\/p>\n
Давайте быстро пробежимся по шагам четвертого способа и увидим насколько он эффективен и гибок, хоть и требует предварительной подготовки в Affinity Photo.<\/p>\n
\n
Сначала добавляем любой объект на холст, например прямоугольник.<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n
Применяем к нему Live Filter (Gaussian Blur)<\/li>\n<\/ol>\n
\n $\"\"$ \n<\/div>\n
\n $\"\"$ \n<\/div>\n
\n
Выносим этот фильтр за пределы объекта и делаем самостоятельным объектом.<\/li>\n<\/ol>\n
Ctrl+C Ctrl+V — копируем и вставляем в документ Affinity Designer поверх фона.<\/p>\n
\n $\"\"$ \n<\/div>\n
Делаем форму стекла и дублируем её. Копию переносим на эффект таким образом, чтобы создать маску. Чтобы убедиться, что маска работает, можно отключить объект Glass.<\/p>\n
\n $\"\"$ \n<\/div>\n
Мы получили стекло с размытием, теперь настроим объект Glass. Сделаем его полупрозрачным, добавим контур, можно добавить шероховатость, свечение краёв и т. п. (хорошо работает режим наложения Soft light и непрозрачность 75-85%). Далее сгруппируем два объекта: Glass и Gaussian Blur, сверху на наше стекло наложим текст.<\/p>\n
\n $\"\"$ \n<\/div>\n
Всё, наша универсальная заготовка стекла готова. Осталось подложить объекты над фоном и убедиться, что без лишних копий объектов наше стекло прекрасно работает.<\/p>\n
\n $\"\"$ \n<\/div>\n
А еще можно сделать вот так:<\/p>\n
\n $\"\"$ \n<\/div>\n
Т. е. фильтры могут также перекрывать друг друга и оказывать влияние на нижележащие.<\/p>\n
\n $\"\"$ \n<\/div>\n
В том числе и эффект линзы влияет на все нижележащие объекты. Естественно, всё это работает в реальном времени и позволяет быстро поменять и фон и объекты. И самое полезное — такое настроенное стёклышко можно добавить в ассеты и не настраивать каждый раз, а просто добавлять на артборд\\страницу из сохраненной библиотеки.<\/p>\n
А если нам нужна для эффекта какая-то необычная форма да еще с возможностью её менять по ходу дела, то тут на помощь составные объекты «Compound». Просто вместо простого объекта маскируем составным (ну и настройку цвета тоже в составном объекте делаем).<\/p>\n
\n $\"\"$ \n<\/div>\n
\n $\"\"$ \n<\/div>\n
Надеюсь, статья поможет вам освоить модный эффект стеклянной подложки в Affinity.<\/p>\n", "date_published": "2025-06-20T22:13:20+05:00", "date_modified": "2025-06-20T22:33:50+05:00", "tags": [ "2025", "affinity designer", "affinity photo", "affinity publisher", "design", "Программы" ], "author": { "name": "nd", "url": "http:\/\/nodeus.ru\/blog\/", "avatar": "http:\/\/nodeus.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1670224539" }, "_date_published_rfc2822": "Fri, 20 Jun 2025 22:13:20 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "136353", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } } ], "_e2_version": 4079, "_e2_ua_string": "Aegea 11.0 (v4079e)" }