Как создавать и использовать текстурированные фоны с опциями дизайна Divi

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

Теперь мы собираемся начать с демонстрации двух типов текстур, которые мы воссоздадим с помощью Photoshop; текстуры, созданные с помощью форм, и текстуры, созданные с помощью кистей. Как только вы научитесь это делать, вы сможете проявить столько творчества, сколько захотите, и создать аутентичный текстурированный фон. После этого мы покажем вам, как можно добиться потрясающих результатов, комбинируя текстурированный фон и варианты дизайна Divi.

Результат изображения, созданный с помощью фигур

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

Результат с вариантами дизайна Divi

А после интеграции в Divi вы можете получить такие потрясающие результаты, как:

Результат изображения, созданный кистями

Второе изображение, которое мы создадим, будет выглядеть так:

Результат с вариантами дизайна Divi

И может обеспечить следующий прекрасный результат при использовании на своем веб-сайте:

Как создавать и использовать текстурированные фоны с опциями дизайна Divi

Подпишитесь на наш канал Youtube

Создать текстурированный фон в Photoshop

Сделано с формами

Первый текстурированный фон, который мы покажем вам, как воссоздать, имеет в основном формы, созданные с помощью инструментов Polygonal Lasso Tool и Eraser Tool. Мы шаг за шагом расскажем, как добиться следующего результата:

Новый файл

Откройте Photoshop и начните с добавления нового файла. Этому файлу потребуется ширина 1920 пикселей и высота 847 пикселей.

Добавить цвет фона

Затем добавьте цвет фона к только что созданному файлу. Убедитесь, что вы используете более темные серые цвета на протяжении всего процесса. Важно использовать более темный цвет, так как он поможет вам позже в этом посте при добавлении вариантов дизайна Divi. В этом примере мы использовали «# 626262» в качестве цвета фона и использовали инструмент «Заливка», чтобы добавить цвет к слою.

Добавить слой 2

Продолжите, добавив новый слой прямо над первым слоем.

Добавьте первую фигуру на слой 2

Затем выберите инструмент «Многоугольное лассо» и начните создавать форму, выбрав слой 2.

Когда закончите, выберите инструмент Paint Bucket Tool и используйте '# 747474', чтобы раскрасить выбранную часть.

Добавить слой 3

Затем добавьте еще один слой прямо над слоем 2.

Добавьте второй слой формы 3

Продолжите, создав еще одну форму, как на экране печати ниже, используя инструмент Polygonal Lasso Tool.

Выберите инструмент Paint Bucket Tool и на этот раз используйте '# 6a6a6a'.

Пока ваше изображение должно выглядеть так:

Используйте инструмент Eraser Tool на слое 3

Двигаясь дальше, выберите Eraser Tool, выбрав слой 3.

Используйте инструмент Eraser Tool вместе с кистью с жесткостью 0% и размером 338 пикселей.

Затем продолжайте и сотрите область, которую вы хотите пропустить. Мы намеренно оставили только небольшую часть уровня 3, где вы можете видеть переход между слоем 2 и слоем 3.

Дублировать, преобразовывать, вращать и размещать слои на противоположной стороне

Теперь, когда мы создали левую сторону, другая сторона будет работать намного быстрее. Мы хотим, чтобы это было точно так же, поэтому мы собираемся выбрать и Layer 2, и Layer 3. Затем мы собираемся продублировать слои.

После копирования вы увидите, что они появятся в вашем списке слоев.

Выделив оба дублированных слоя, перейдите в Edit> Transform> Rotate 180 ° и перетащите слои на другую сторону изображения.

Сохранить для Интернета

Осталось только сохранить изображение. Для этого щелкните Файл> Экспорт> Сохранить для Интернета .

Наконец, убедитесь, что это файл в формате JPG или PNG, и сохраните его.

Сделано с помощью кистей

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

Новый файл

Начните снова с создания нового документа с шириной 1920 пикселей и высотой 847 пикселей.

Добавить цвет фона

Как только это будет сделано, добавьте фон к первому слою с цветовым кодом '# 8f8f8f'.

Найдите подходящую кисть в Интернете

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

Загрузить кисть

Найдите файл ABR на своем компьютере и перейдите в Photoshop, чтобы загрузить кисти. Выберите Edit> Presets> Preset Manager> Brushes> Load и выберите файл ABR, который вы сохранили на своем компьютере.

Добавить слой 2

После этого добавьте еще один слой прямо над слоем 1.

Используйте кисть самого светлого цвета

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

Выберите нужную кисть размером 600 пикселей и непрозрачностью 60%.

'

Первый цвет, который мы будем использовать, - это '# a0a0a0'. Сделайте первый слой кисти на вашем изображении.

Используйте ту же кисть с более темным цветом

Затем замените предыдущий цвет на «#ababab» и сделайте то же самое.

Используйте ту же кисть с самым темным цветом

Наконец, вам нужно использовать цвет # 686868, чтобы закончить текстурированный фон.

Сохранить для Интернета

Теперь, когда ваш текстурированный фон готов, остается только сохранить изображение. Для этого выберите «Файл»> «Экспорт»> «Сохранить для Интернета» .

Еще раз выберите, хотите ли вы сохранить изображение в формате JPG или PNG.

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

Текстурированный фон с фигурами

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

Градиентный фон

Используйте следующий градиентный фон для своего раздела:

• Первый цвет: # 474ab6
• Второй цвет: # 9271f6
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 41%
• Конечное положение: 100%

Параметры наложения изображений

Затем загрузите изображение и используйте следующие настройки:

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Наложение фонового изображения: наложение

Текстурированный фон с кистями

Градиентный фон, который мы собираемся использовать для текстурированного фона, созданного с помощью кистей, является линейным. Мы сделаем тонкий переход, который по-прежнему немного отделит цвет, который используется в гармонии с фоновым изображением.

Градиентный фон

Откройте настройки раздела и используйте следующие настройки для подкатегории Фон:

• Первый цвет: # 474ab6
• Второй цвет: # 9271f6
• Тип градиента: линейный
• Направление градиента: 270 градусов
• Стартовая позиция: 70%
• Конечное положение: 100%

Параметры наложения изображений

Затем загрузите фоновое изображение и используйте вместе с ним следующие настройки:

• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Наложение фонового изображения: наложение

Результат

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

Результат изображения, созданный с помощью фигур

Результат с вариантами дизайна Divi

Результат изображения, созданный кистями

Результат с вариантами дизайна Divi

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от WEB-DESIGN / shutterstock.com