Идея
Если вы когда нибудь занимались созданием сайтов, постеров, постов в социальные сети или даже презентаций, то вы знаете, как тяжело найти подходящую картинку на фон под текст. Она должна быть неконтрастная, без мелких деталей, быть хорошего качества и подходящего размера.
На самом деле существует масса способов сделать классный и интересный экран без фоновой иллюстрации. Расскажу о них в рубрике «Когда фон не нужен». В этой статье разберем прием, когда картинка есть, но заключена в форму слова. Для примера нашла референсы с Пинтерест.
Работа с текстом
Что бы повторить этот прем, мы сделаем первый экран сайта. Для этого необходимо открыть Figma, создать фрейм 1440*1024 или любого Desktop формата и загрузить фотографию.
Далее переходим к созданию маски. Му будем именно вырезать окно в форме букв и накладывать его сверху на изображение. Для того, чтобы слово хорошо читалось, выбираем какой-то жирный шрифт. Если вы выбрали красивый атмосферный шрифт, но с узкими штрихами, то попробуйте изменить начертание с regular на более жирное.
Мне хочется сделать дизайн на тему свадьбы в славянском стиле, поэтому я выбрала шрифт Ruslan Display. Регулируем все остальные настройки слова, у меня это:
- Межбуквенное расстояние: -5%
- Кегль: 530
- Межстрочное расстояние: 80%
Переход в вектор
Далее нам необходимо перевести наше слово в вектор, для этого зажимаем сommand+E на macbook или ctrl+E на windows. Теперь мы можем работать со словом как с вектором, мне хочется растянуть слово на половину экрана, поэтому я щелкаю по нему 2 раза, выбираю точки из нижней половины и тяну их вниз. Таже я растягиваю вектор по горизонтали на всю ширину экрана.
Создание маски
Для того, чтобы создать нашу маску, мы будем использовать буллевые операции или Boolean operations. Для них всегда необходимо 2 объекта, поэтому создаем обычный прямоугольник нужного размера, в моем случае 1440*1024, такого же размера, как и фрейм.
Далее расставляем наши объекты и выделаем их. В правом верхнем углу находим булевые операции и выбираем Exclude.
Докручиваем детали и композицию
У нас получилась маска, меняем цвет Fill, накладываем ее сверху на изображение (на фрейм) и добавляем остальные детали композиции. Я для примера использовала 2 свадебные поговорки и кнопку.
Такой шуточный первый экран у меня получился. Пробуйте менять шрифты, изображения, масштаб, сочетайте с другими идеями и не бойтесь экспериментов. Смотрите, как делают другие дизайнеры, берите лучшее и переосмысливайте по-своему — именно так рождаются самые интересные решения.