Крутость этого приема еще в том, что его не надо специально включать для шумных фонов и выключать для однородных. На изображениях без пестрых деталей эффект самоустраняется просто из-за того, что размытая версия фона мало чем отличается от оригинальной. Эффект применен, но он незаметен (в отличие от всяких тенюшек и подложек):
Окай, теперь про практическую часть. Мне удалось воссоздать эффект в фотошопе, иллюстраторе и фигме. Файлы в аттаче, плюс фигмовский залил в комьюнити: https://www.figma.com/community/file/1181361545566721990.
Что касается реализуемости на вебе, то я смог слепить такой хрупкий прототип на background-clip: https://jsfiddle.net/yjc3haeL/1/.
Еще есть реализация на backdrop-filter, но она у меня завелась только в файерфоксе: https://jsfiddle.net/vwmapxjb/3/.
Что касается реализуемости на вебе, то я смог слепить такой хрупкий прототип на background-clip: https://jsfiddle.net/yjc3haeL/1/.
Еще есть реализация на backdrop-filter, но она у меня завелась только в файерфоксе: https://jsfiddle.net/vwmapxjb/3/.
Конечно же, сила размытия фона и размер тени в файлах-примерах выставлены довольно случайно, тюните под себя.
Ну и Размывающая Тень®™ помогает бороться с пестротой фона, но если фон в целом неконтрастен к тексту, имеет смысл поменять цвет текста или всё же дополнительно подмешать какой-нибудь слабенький затеняющий эффект.
Что же, а теперь обещанная антиграфоманская версия этого рассказа:
Ну и Размывающая Тень®™ помогает бороться с пестротой фона, но если фон в целом неконтрастен к тексту, имеет смысл поменять цвет текста или всё же дополнительно подмешать какой-нибудь слабенький затеняющий эффект.
Что же, а теперь обещанная антиграфоманская версия этого рассказа:
Чтобы текст на пестром фоне лучше читался, вместо черной тени кладите под текст тень из разблюренной версии фона.
Примеры реализации в графических редакторах и на вебе — парой сообщений выше.
Примеры реализации в графических редакторах и на вебе — парой сообщений выше.
Media is too big
VIEW IN TELEGRAM
Я всё о том же. Удалось оформить создание размывающей тени в фотошопе в виде экшена.
Файлик в аттаче, добавляется в фотошопе через пункт Load Actions в меню панели Actions.
При запуске должны быть выделены два слоя: фоновое изображение и текст.
Так как параметры размера и размытия тени в экшене зафиксированы, вероятно, понадобится скорректировать их под ваши размеры изображения и текста.
Файлик в аттаче, добавляется в фотошопе через пункт Load Actions в меню панели Actions.
При запуске должны быть выделены два слоя: фоновое изображение и текст.
Так как параметры размера и размытия тени в экшене зафиксированы, вероятно, понадобится скорректировать их под ваши размеры изображения и текста.
Сначала я хотел просто написать, что дочитал книгу «Сложный дизайнер» и она мне понравилась. Потом я вспомнил, что другие рекламировали эту книгу за деньги, а я тут советую ее забесплатно, так что решил еще и о других книгах что-нибудь сказать.
Про дизайн с точки зрения цельной трудовой деятельности я читал три книги:
«Дизайн — это работа» Майка Монтейро. Читал давно и уже мало чего помню, но это был первый взгляд на дизайн как на бизнес-рутину с бюджетами, дедлайнами, ресурсами, переговорами и т.д.
«Принципы и парадоксы» студии. Здесь уже не цельная история, а набор отдельных мыслей-статей, такое продолжение Ководства, только коллективного авторства. Даже я на трех страничках поделился своими принципами. Должна быть интересна как источник быстрорастворимых прозрений, но это явно не цельный учебник.
И вот «Сложный дизайнер» Жени Арутюнова. В отличие от попурри-«Принципов», которые под предлогом пользы развлекают как «интересные факты» в википедии (даже я не смог оторваться), эту книгу я читал из-под палки, долго и понемногу, прямо в список дел на день заносил «осилить еще одну главу сложного дизайнера», а в конце дня переносил задачу на следующий день.
Потому что эта книжка провоцирует рефлексию, сложные вопросы к самому себе о сути своей работы дизайнером, внутренней мотивации и внешней (в книге она называется стимуляцией), самореализации и денежках. Ну и мозг сопротивляется и предлагает срочно закрыть эти буквы и вместо этого открыть в пятьдесят шестой раз за день тот сайт, может че-то новое появилось.
В общем, эта книга как лекарство, неприятное и очень полезное, особенно для фрилансеров и управляющих студиями, которые не просто как в детском саду играются с тем, что принесли няньки-менеджеры, а действуют на более взрослом уровне ответственности.
Еще в конце книги говорится, что по промокоду «читатель читателя» можно получить скидку 90₽. Я с этого ничего не получу, Женя с этого получит на 90₽ меньше, ну или сколько там с учетом всех комиссий и налогов. Тут уж вам решать, кто эти 90₽ заслужил больше — читатель или автор.
Про дизайн с точки зрения цельной трудовой деятельности я читал три книги:
«Дизайн — это работа» Майка Монтейро. Читал давно и уже мало чего помню, но это был первый взгляд на дизайн как на бизнес-рутину с бюджетами, дедлайнами, ресурсами, переговорами и т.д.
«Принципы и парадоксы» студии. Здесь уже не цельная история, а набор отдельных мыслей-статей, такое продолжение Ководства, только коллективного авторства. Даже я на трех страничках поделился своими принципами. Должна быть интересна как источник быстрорастворимых прозрений, но это явно не цельный учебник.
И вот «Сложный дизайнер» Жени Арутюнова. В отличие от попурри-«Принципов», которые под предлогом пользы развлекают как «интересные факты» в википедии (даже я не смог оторваться), эту книгу я читал из-под палки, долго и понемногу, прямо в список дел на день заносил «осилить еще одну главу сложного дизайнера», а в конце дня переносил задачу на следующий день.
Потому что эта книжка провоцирует рефлексию, сложные вопросы к самому себе о сути своей работы дизайнером, внутренней мотивации и внешней (в книге она называется стимуляцией), самореализации и денежках. Ну и мозг сопротивляется и предлагает срочно закрыть эти буквы и вместо этого открыть в пятьдесят шестой раз за день тот сайт, может че-то новое появилось.
В общем, эта книга как лекарство, неприятное и очень полезное, особенно для фрилансеров и управляющих студиями, которые не просто как в детском саду играются с тем, что принесли няньки-менеджеры, а действуют на более взрослом уровне ответственности.
Еще в конце книги говорится, что по промокоду «читатель читателя» можно получить скидку 90₽. Я с этого ничего не получу, Женя с этого получит на 90₽ меньше, ну или сколько там с учетом всех комиссий и налогов. Тут уж вам решать, кто эти 90₽ заслужил больше — читатель или автор.
Однажды во время совместной работы отделов графдизайна и промдизайна над упаковкой генетического теста Генотек я подсмотрел у Тимура Бурбаева методику конструирования пользователького опыта emotional journey (эмоциональное путешествие? путь? опыт?). Это когда сценарии взаимодействия человека с продуктом раскладываются на график эмоционального состояния (любопытство, сомнение, гнев, скука, замешательство, воодушевление, радость и т.д.), и потом вся коммуникация с ним подстраивается под состояние в конкретный момент.
В случае генетического теста это было особенно кстати из-за новизны опыта для большинства пользователей (сдать генетический тест — это не пылесос купить) и большого количества этапов: выбор теста, оформление заказа, ожидание курьера и общение с ним, распаковка теста, регистрация пробирки, сбор слюны по инструкции, запаковка пробирки для транспортировки, снова вызов курьера, ожидание результатов...
Например, во время ожидания результатов генетического теста пользователь оказывается в эмоциональной яме сомнения, нетерпения и тревоги. В этот момент можно прислать ему письмо с доступом в личный кабинет, где пусть еще не готовы сами результаты, но можно оценить структуру отчета или даже изучить его демо-пример, развлечься научпоп-объяснялкой процесса расшифровки, заполнить профиль и пройти опросник об образе жизни и другой инфе, которая не выявляется явно из генетического кода, но поможет вместе с ним в трактовке результатов и составлении рекомендаций. В общем, такой ход поможет скрасить томительное тревожное ожидание процессом «обустраивания гнездышка» личного кабинета под результаты, сгладить провал на графике эмоционального состояния.
Не обязательно точно следовать этой методике и рисовать дурацкие графики из смайликов, которые выдаются гуглом на запрос emotional journey. Но всё же полезно понимать текущее эмоциональное состояние пользователя, учитывать «статус отношений» с ним, чтобы не наломать дров при взаимодействии с ним.
Например, пока у клиента есть незакрытый тикет с жалобой, маркетинговые материалы могут вызывать у него особо желчные приступы ярости. Когда пользователь строчит в чат поддержки «Какого хрена вы не можете доставить заказ уже вторую неделю?», присылать ему пуш «Спешите поучаствовать в новой распродаже» — только провоцировать его на гневную язвительную порку в соцсетях. Так что хотя бы на время разборок стоит деликатно убрать его из адресатов писем счастья.
В общем, компаниям тоже полезно развивать свой коллективный эмоциональный интеллект.
В случае генетического теста это было особенно кстати из-за новизны опыта для большинства пользователей (сдать генетический тест — это не пылесос купить) и большого количества этапов: выбор теста, оформление заказа, ожидание курьера и общение с ним, распаковка теста, регистрация пробирки, сбор слюны по инструкции, запаковка пробирки для транспортировки, снова вызов курьера, ожидание результатов...
Например, во время ожидания результатов генетического теста пользователь оказывается в эмоциональной яме сомнения, нетерпения и тревоги. В этот момент можно прислать ему письмо с доступом в личный кабинет, где пусть еще не готовы сами результаты, но можно оценить структуру отчета или даже изучить его демо-пример, развлечься научпоп-объяснялкой процесса расшифровки, заполнить профиль и пройти опросник об образе жизни и другой инфе, которая не выявляется явно из генетического кода, но поможет вместе с ним в трактовке результатов и составлении рекомендаций. В общем, такой ход поможет скрасить томительное тревожное ожидание процессом «обустраивания гнездышка» личного кабинета под результаты, сгладить провал на графике эмоционального состояния.
Не обязательно точно следовать этой методике и рисовать дурацкие графики из смайликов, которые выдаются гуглом на запрос emotional journey. Но всё же полезно понимать текущее эмоциональное состояние пользователя, учитывать «статус отношений» с ним, чтобы не наломать дров при взаимодействии с ним.
Например, пока у клиента есть незакрытый тикет с жалобой, маркетинговые материалы могут вызывать у него особо желчные приступы ярости. Когда пользователь строчит в чат поддержки «Какого хрена вы не можете доставить заказ уже вторую неделю?», присылать ему пуш «Спешите поучаствовать в новой распродаже» — только провоцировать его на гневную язвительную порку в соцсетях. Так что хотя бы на время разборок стоит деликатно убрать его из адресатов писем счастья.
В общем, компаниям тоже полезно развивать свой коллективный эмоциональный интеллект.
Спойлер для брезгливых: мы тут сейчас будем смотреть на фотографии б/у-шного туалетного ершика и обсуждать всякое такое. У вас еще есть возможность не скролить дальше и сбежать, следуйте по зеленым стрелочкам до аварийного выхода, заглядывайте в следующий раз!