Как создать эффект двухслойной фоновой прокрутки с Divi

Если вы ищете способ выделить свой сайт среди других, возможно, вы захотите узнать, как создавать двухслойные фоны. Создание двухслойного фона поможет оживить ваше фоновое изображение за счет движения. В сегодняшнем уроке мы покажем вам, как создать двухслойный фон с Divi. Это руководство состоит из трех частей:

1. Подготовка двух файлов изображений в Adobe Photoshop
2. Создание дизайна внутри Divi
3. Применение эффектов прокрутки для анимации фона

Вы также сможете бесплатно скачать файлы JSON и изображений!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Создание файлов изображений в Photoshop.

Выберите изображение продукта с чистым фоном и откройте в Photoshop

В первой части этого урока мы собираемся создать файлы изображений, которые мы будем использовать в уроке Divi. Для их создания мы будем использовать Adobe Photoshop, но не стесняйтесь использовать любое другое программное обеспечение для редактирования изображений по вашему выбору. Эффект двухслойного фонового изображения будет работать лучше всего, если изображение, с которым вы работаете, имеет:

1. Четкий фокус на объекте внутри изображения
2. Чистый фон

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

Дублировать слой

После того, как вы открыли изображение в Photoshop, один раз клонируйте исходный слой. Мы будем работать над дублирующим слоем.

Скрыть исходный слой

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

Создать PNG из выделенного объекта в изображении

Используйте инструмент быстрого выбора на пластине

Всего для учебника нам понадобятся два файла изображений:

1. PNG объекта, в данном случае пластина
2. JPEG фона без объекта

Мы отделяем объект от его фона, чтобы мы могли манипулировать ими по отдельности внутри среды Divi.

Чтобы начать выделение объекта, выберите «Инструмент быстрого выбора» на панели инструментов и попытайтесь охватить как можно большую часть объекта.

Выделение + выделение маски

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

Создать маску слоя из выделения

Несмотря на то, что мы создали плавное выделение, внутри объекта все еще есть части, которые еще не выделены. Мы вручную добавим эти части к нашему выбору, нажав кнопку маски слоя, которую вы видите на экране печати ниже:

Finetune Selection Inside Mask с кистями

После того, как маска слоя создана, вы можете начать использовать кисть для изменения маски слоя. Убедитесь, что маска слоя выбрана.

• Используя черную кисть (# 000), удалите части маски слоя.
• Используя белую кисть (#fff), добавьте заднюю часть маски слоя.

Используйте кисть не слишком жесткой, поэтому вам не нужно быть сверхточным.

Двойная проверка маски с цветным слоем

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

Сохранить выделение PNG как отдельный файл изображения

Создать новый файл

Теперь, когда у вас есть выбор PNG для вашего объекта, вы можете клонировать весь слой, чтобы вы всегда могли вернуться к нему. В следующей части мы будем использовать дублированный слой для создания фонового изображения без объекта.

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

Подогнать выделение в новый файл

Скопируйте и вставьте слой с его маской слоя в новый файл, который вы создали.

Экспорт для Интернета

И экспортируйте его для Интернета как PNG.

Сжать файл изображения

PNG с прозрачным фоном обычно имеют больший размер, поэтому рекомендуется сжать файл с помощью любого инструмента.

Удалить объект в исходном изображении

Выбрать маску слоя

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

Инвертировать маску

Затем перейдите в свойства этого слоя и нажмите «Инвертировать».

Применить маску слоя

Теперь вы заметите, что объект прозрачен внутри начального слоя. Мы собираемся применить маску слоя к нашему слою, щелкнув правой кнопкой мыши и выбрав «Применить маску слоя».

Заполните пустое пространство с помощью инструмента клонирования

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

Сохранить изображение без объекта

Экспорт для Интернета

После того, как вы завершили фоновое изображение без объекта, вы можете сохранить его как файл JPEG с качеством 70%.

Сжать файл изображения

Не забудьте также сжать это изображение.

2. Создайте двухслойный фоновый эффект в Divi.

Добавить новый раздел

Загрузить фоновое изображение

Когда оба файла изображений окажутся в пределах досягаемости, пора переключиться на Divi! Откройте новую страницу и добавьте новый раздел. Загрузите фоновое изображение, которое вы создали в первой части урока.

Интервал

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

• Нижняя маржа: 100vh
• Верхняя обивка:
  • Рабочий стол: 100 пикселей
  • Планшет и телефон: 50 пикселей
• Нижняя обивка:
  • Рабочий стол: 100 пикселей
  • Таблетка: 600 пикселей
  • Телефон: 500px

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Еще не добавляя модули, откройте настройки строки и измените ширину и максимальную ширину. Эти настройки позволят строке постоянно касаться левой и правой сторон контейнера раздела. Таким образом, мы можем убедиться, что PNG и фоновые изображения имеют одинаковый баланс для всех размеров экрана.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем перейдите к настройкам интервала между рядами и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Позиция

Затем переместите всю строку.

• Позиция: Абсолютная
• Место нахождения:
  • Рабочий стол: по центру
  • Планшет и телефон: по центру внизу
• Вертикальное смещение:
  • Рабочий стол: /
  • Планшет и телефон: 30vh

Добавить модуль изображения в строку

Загрузить изображение PNG

Завершив настройку строки, добавьте в нее модуль изображения и загрузите файл PNG, который вы создали в первой части руководства.

Выравнивание

Перейдите на вкладку дизайна и измените выравнивание изображения.

• Выравнивание изображения: по центру

Размеры

Затем измените настройки размера.

• Ширина:
  • ПК: 36%
  • Планшет и телефон: 60%

Добавить строку №2

Структура столбца

Затем добавьте в раздел еще одну строку, используя следующую структуру столбцов:

Фоновый цвет

Откройте настройки строки и измените цвет фона.

• Цвет фона: #ffffff

Размеры

Затем измените настройки размера.

• Ширина: 90%
• Максимальная ширина: 550 пикселей
• Выравнивание строк:
  • Рабочий стол: левый
  • Планшет и телефон: Центр

Интервал

Затем примените некоторые пользовательские значения заполнения.

• Верхняя набивка: 11%
• Нижняя обивка: 11%
• Левый отступ: 5%
• Правое заполнение: 5%

Горизонтальное смещение

Мы также добавляем горизонтальное смещение в настройки положения.

• Горизонтальное смещение:
  • ПК: 5%
  • Планшет и телефон: 0%

Добавить текстовый модуль №1 в столбец 1

Добавить контент H2

Пора добавить модули, начиная с первого текстового модуля, содержащего некоторый контент H2.

Настройки текста H2

Оформите текст H2 следующим образом:

• Шрифт заголовка 2: Kumbh Sans
• Размер текста заголовка 2:
  • Рабочий стол: 90 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 45 пикселей

Добавить текстовый модуль №2 в столбец 1

Добавить описание содержимого

Добавьте еще один текстовый модуль прямо под предыдущим и вставьте какое-нибудь описание по вашему выбору.

Настройки текста

Соответственно измените текстовые настройки модуля:

• Шрифт текста: Kumbh Sans
• Высота текстовой строки: 2em

Добавить модуль кнопок в столбец 1

Добавить копию

Последний модуль, который нам нужен в этом столбце, - это кнопочный модуль. Добавьте какую-нибудь копию по вашему выбору.

Настройки кнопок

Создайте соответствующий стиль для кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: # 6b6443
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Kumbh Sans
• Толщина шрифта кнопок: полужирный
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Коробка Тень

Включите также тень блока.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Цвет тени: # 6b6443

3. Добавьте эффекты прокрутки

Вертикальное движение изображения

В последней части этого руководства мы сосредоточимся на добавлении эффектов прокрутки в модуль изображения, содержащий файл изображения PNG. Откройте настройки модуля, перейдите на вкладку «Дополнительно» и примените следующие настройки вертикального движения:

• Включить вертикальное движение: Да
• Начальное смещение:
  • Рабочий стол: 0
  • Планшет и телефон: 4 (при 0%)
• Среднее смещение:
  • Рабочий стол: 0
  • Планшет и телефон: 0 (97%)
• Конечное смещение:
  • Рабочий стол: 0
  • Планшет и телефон: -2 (при 100%)

Горизонтальное движение изображения

Мы завершаем наш дизайн, используя следующие настройки горизонтального движения:

• Включить горизонтальное движение: Да
• Начальное смещение:
  • Рабочий стол: 0 (при 0%)
  • Планшет и телефон: 0
• Среднее смещение:
  • Рабочий стол: 0 (при 65%)
  • Планшет и телефон: 0 (97%)
• Конечное смещение:
  • Рабочий стол: -10 (при 100%)
  • Планшет и телефон: 0

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как создать двухслойный фон и анимировать его с помощью встроенных эффектов прокрутки Divi. В первой части урока мы подготовили файлы изображений в Adobe Photoshop. Во второй части руководства мы сосредоточились на использовании файлов изображений внутри Divi для создания адаптивного дизайна. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.