Объединение нескольких изображений может быть полезно для создания профессиональных фонов для ваших фотографий. Веб-сайт. Идея состоит в том, чтобы взять два или три отдельных изображения и наложить их друг на друга. Затем используйте режим наложения, чтобы смешать слои вместе, чтобы создать бесшовный, унифицированный дизайн.
Каждый элемент в Divi Builder имеет встроенный режим слияния и параметры фильтрации, которые упрощают слияние элементов в Divi Builder. Конечно, вы можете смешивать изображения в Photoshop (или другом фоторедакторе), но тем, кто ищет практичное решение Divi, этот урок должен помочь вам, потому что с Divi это довольно просто. Если у вас есть изображения в нужном месте, вы можете смешивать их всего за несколько кликов. И, конечно же, у вас есть целый арсенал опций Divi, чтобы внести последние штрихи и придать дизайну новое творческое измерение.
Давайте начнем.
обследование
Вот обзор дизайна, который мы собираемся построить вместе.
Что нужно для начала
Для начала вам нужно будет сделать следующее:
- Если вы еще этого не сделали, установите и активируйте Диви тема установлен (или плагин Divi Builder, если вы не используете Диви тема).
- Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы в интерфейсе (визуальный конструктор).
- Загрузите несколько фиктивных изображений в медиатеку, чтобы использовать их в учебнике. Я использую изображения из Eye Doctor Layout Pack .
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Как смешать несколько изображений для создания индивидуального дизайна фона в Divi
Давайте начнем с раздела и линии
Чтобы добиться цели, добавьте строку столбца в обычный раздел.
Добавление изображений с помощью модуля изображений
Изображение № 1
Как только строка и столбец определены, добавьте модуль изображения в линию.
Загрузите изображение размером примерно 500 на 700 пикселей. Я использую один из набора макетов глазного доктора.
После загрузки изображения установите максимальную ширину изображения, используя единицу длины vw, чтобы оно хорошо соответствовало другим изображениям, которые мы собираемся объединить, а затем выровняйте по левому краю следующим образом :
- Максимальная ширина: 33vw
- Выравнивание модуля: слева
Мы хотим, чтобы следующее изображение, которое мы добавляем, выровнялось по правому краю этого изображения. Поэтому нам нужно переместить это изображение влево. Для этого добавьте к основному элементу следующий CSS:
плавать: слева;
Изображение № 2
Затем добавьте новый модуль изображения под текущее изображение.
После этого загрузите новое изображение, размеры которого близки к пикселям 1000 по пикселям 667.
Затем придайте изображению новую ширину и новое максимальное выравнивание.
- Максимальная ширина: 40vw
- Выравнивание модуля: справа
Поскольку первое изображение плавает влево, второе изображение теперь должно быть смежным справа.
Мы еще вернемся, чтобы добавить несколько штрихов к этим изображениям, а пока перейдем к настройкам в разделе.
Настройки раздела
Откройте раздел настроек и добавьте фоновое изображение и градиент следующим образом:
- Левый градиент фона Цвет: rgba (1,16,63,0.64)
- Правый градиент фона Цвет: rgba (12,113,195,0.82)
- Поместите градиент над фоновым изображением: ДА
Затем немного отрегулируйте отступы.
- Обивка (офис): 0px вверху, 0px внизу
- Обивка (телефон): 0px вверху, 10vw внизу
Настройки линии
По завершении раздела откройте настройки линии и обновите следующие элементы:
- Ширина: 100%;
- Максимальная ширина: 100%;
- Обивка: 0px вверху, 0px внизу
Добавьте режим слияния в строку
Теперь линия должна покрывать всю нижнюю часть секции. Это позволит нам добавить к строке режим слияния, чтобы объединить два изображения с фоном раздела. Для этого добавим следующий режим наложения.
- Режим Fusion: умножение
Зачем умножать?
В режиме наложения «Умножение» текущий слой / строка (включая любые изображения в нем) умножается на слой под ним (фон раздела). Легкий способ представить себе эффект - это представить два слайда в слайд-проекторе, расположенные один за другим. Если вы спроецируете два изображения на экран, вы получите их немного более темную смесь.
Центрировать изображения по вертикали
В этом нет необходимости, но если вы хотите, чтобы оба изображения в строке оставались центрированными по вертикали, вы можете добавить в столбец фрагмент CSS. Для этого откройте настройки строки, а затем щелкните настройки столбца. Затем добавьте следующий код CSS к основному элементу.
дисплей: гибкий; align-items: center;
Последний штрих к двум лучшим картинкам
Прямо сейчас два наших лучших изображения хорошо сочетаются, но они могут использовать несколько изменений дизайна, чтобы сделать его более профессиональным. Мы можем использовать тень белого прямоугольника, чтобы смягчить края изображений, и использовать команду «Трансформировать», чтобы расположить их именно там, где мы хотим, чтобы они оставались.
Image # 1 Final Keys
Откройте настройки модуля изображения слева и обновите следующее:
- Box Shadow: см. Снимок экрана
- Box Shadow Blur Force: 6vw
- Толщина тени коробки: 6vw
- Цвет тени: #ffffff
- Transformer Translate: 5vw (ось X), 11vw (ось Y)
Image # 2 Final Keys
Когда вы закончите манипулировать изображением №1 слева, откройте настройки изображения №2 справа и внесите следующие изменения:
- Box Shadow: см. Снимок экрана
- Box Shadow Blur Force: 3vw
- Сила распространения тени от ящика: 3vw
- Цвет тени: #ffffff
Мы даже можем добавить несколько фильтров, чтобы сделать изображение более четким.
- Насыщенность: 30%
- Непрозрачность: 60%
Добавить текстовое содержание
Теперь, когда наш раздел дополнен тремя хорошо смешанными изображениями, мы можем добавить наши содержание в верхней части раздела. Для этого добавьте новый раздел ниже текущего раздела.
Затем добавьте строку столбца в обычный раздел.
Затем добавьте текстовый модуль в строку.
Содержание тела
Обновите содержание текстового модуля с содержание следующего органа:
Запишитесь на глазной экзамен Ваш контент идет сюда. Отредактируйте или удалите этот текст в строке или в настройках содержимого модуля. Вы также можете стилизовать каждый аспект этого контента в настройках дизайна модуля и даже применить собственный CSS к этому тексту в расширенных настройках модуля.
Форматирование текста
Как только содержимое тела будет на месте, обновите параметры проекта следующим образом:
- Цвет текста текста: #ffffff
- Шрифт: Поппинс
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 5vw
- Ширина: 60vw (рабочий стол), 100% (телефон)
- Маржа (на рабочем столе): -35% вверх, 35% вниз
- Маржа (телефон): -70% вверх, 70% вниз
Окончательный дизайн
Вот окончательный дизайн.
Заключительные мысли
Режим наложения и параметры фильтра Divi предоставляют все необходимое для смешивания изображений для создания профессиональных фонов. Хитрость заключается в том, чтобы расположить изображения с использованием единиц длины vw, чтобы дизайн фона также реагировал на мобильные устройства. Но как только изображения будут размещены, мы можем экспериментировать со всеми видами режимов наложения и бесчисленным множеством других вариантов дизайна для создания чрезвычайно гармоничных дизайнов.
Надеюсь, что эта статья вдохновила вас, и надеюсь услышать от вас в комментариях.
За ваше здоровье!
очень плохо адаптируется к другим изображениям, сложно реализовать, но все равно спасибо
Спасибо !! 🙂