Присоединяйтесь к широкому международному сообществу креативных людей, пользующихся Cliparto каждый день. чтобы покупать или продавать изображения.
| ◢ Мой Cliparto › ЛайтБокс (0)
Не помните пароль / логин? ◢ Впервые у нас? Зарегистрируйтесь ◢ Есть аккаунт на Vector-Images. com?Не нужно регистрироваться заново. Просто используйте свой логин и на Cliparto. › Недавно просмотрено
|
Сезонные, органические и абстрактные текстуры
Уточнить
ОчиститьКатегории
Фоны
12,361
Текстуры
5,416
Социальные
8,171
Паттерны
7,203
Значки
35,766
Объекты
33,129
иллюстрации
65,360
Поддерживаемые приложения
Adobe Photoshop
4,499
Adobe Illustrator
3,694
Figma
1,295
Sketch
2,321
Affinity Designer
2,498
Типы файлов
JPG
4,444
PNG
1,624
Свойства
Векторный
1,366
Многослойный
1,704
Черепичный
1,173
Уточнить
ОчиститьКатегории
Фоны
12,361
Текстуры
5,416
Социальные
8,171
Паттерны
7,203
Значки
35,766
Объекты
33,129
иллюстрации
65,360
Поддерживаемые приложения
Adobe Photoshop
4,499
Adobe Illustrator
3,694
Figma
1,295
Sketch
2,321
Affinity Designer
2,498
Типы файлов
JPG
4,444
PNG
1,624
Свойства
Векторный
1,366
Многослойный
1,704
Черепичный
1,173
Коллекция геометрических волн
От codetoform
Добавить в коллекциюСкачатьВектор Фоны диаграммы Вороного
От Vackground
Добавить в коллекциюСкачать50 Абстрактный фон сетки
От micromove
Добавить в коллекциюСкачатьМанки Гига
От the-sastra
Добавить в коллекциюСкачать100 снежных Наложения
От M-e-f
Добавить в коллекциюСкачатьНабор «Весна и вороны»
От MikiBith
Добавить в коллекциюСкачатьТекстуры винтажной бумаги, том 1
От MJGDesigns
Добавить в коллекциюСкачатьС Рождеством и Новым годом бесшовные
От masastarus
Добавить в коллекциюСкачатьВинтажные текстуры
От ghostlypixels
Добавить в коллекциюСкачатьСолнечная мраморная текстура Vol. 1
От Digital_infusion
Добавить в коллекциюСкачатьОрганические узоры — 2 цветовые Палитры
От Youandigraphics
Добавить в коллекциюСкачатьПростой шик
От hellomartco
Добавить в коллекциюСкачатьАкварельные бесшовные узоры набор
От switzergirl
Добавить в коллекциюСкачатьСупер Привет Рес текстуры — A0
От CollectiveOffset
Добавить в коллекциюСкачатьСтаринные эффекты для фотографий или конструкций
От cruzine
Добавить в коллекциюСкачатьАкварельные текстуры + БОНУС
От ivanrosenberg
Добавить в коллекциюСкачатьКосмическая туманность Фоны
От themefire
Добавить в коллекциюСкачать« Счастливый День Благодарения 2″ цифровых документов
От designloverstudio
Добавить в коллекциюСкачать30 текстур бесшовного трикотажа
От helga_helga
Добавить в коллекцию
Как создавать и использовать текстурированные фоны с помощью параметров дизайна Divi
В сегодняшнем уроке Divi мы собираемся показать вам, как можно создавать простые текстурированные фоны и использовать их в качестве фона для своих разделов, чтобы ваш веб-сайт выглядел немного более аутентично. Если вы посмотрите наш недавний бесплатный макет управления обучением, вы увидите, что мы также использовали текстурированный фон на всех страницах.
Теперь мы собираемся начать с демонстрации двух типов текстур, которые мы воссоздадим в Photoshop; текстуры, созданные с помощью фигур, и текстуры, созданные с помощью кистей. Как только вы узнаете, как это сделать, вы сможете проявить творческий подход и создать аутентичные текстурированные фоны. После этого мы покажем вам, как добиться потрясающих результатов, комбинируя текстурированные фоны и варианты дизайна Divi.
- 1 Результат изображения, созданный с помощью фигур
- 2 Результат изображения, сделанный с помощью кистей
- 3 Как создавать и использовать текстурированные фоны с помощью параметров дизайна Divi
- 4
Создаем текстурированный фон с помощью Photoshop
- 4.1 Сделано с фигурами
- 4.2 Сделано с помощью кистей
- 5
Добавьте текстурированный фон в разделы
- 5. 1 Текстурированный фон с фигурами
- 5.2 Текстурированный фон с кистями
- 6
Результат
- 6.1 Результат изображения, созданный с помощью фигур
- 6.2 Результат изображения, сделанный с помощью кистей
- 7 Последние мысли
Результат изображения, созданный с использованием фигур
Первое изображение, которое мы покажем вам, как создать в Photoshop, выглядит так:
Результат с вариантами дизайна Divi
И после интеграции в Divi вы можете получить потрясающие результаты, такие как это:
Результат изображения, сделанный с помощью кистей
Второе изображение, которое мы будем делать, выглядит так:
Результат с вариантами дизайна Divi
И может дать следующий прекрасный результат при использовании его на вашем сайте:
Как создавать и использовать текстурированные фоны с помощью параметров дизайна Divi
youtube.com/embed/q2m6QosyuO8?feature=oembed» frameborder=»0″ gesture=»media» allowfullscreen=»»>Подпишитесь на наш канал Youtube
Создание текстурированного фона с помощью Photoshop
Сделано из фигур
Первый текстурированный фон, который мы покажем вам, как воссоздать, состоит в основном из фигур, созданных с помощью инструментов «Многоугольное лассо» и «Ластик». Мы шаг за шагом расскажем вам, как создать следующий результат:
Новый файл
Откройте Photoshop и начните с добавления нового файла. Для этого файла потребуется ширина 1920 пикселей и высота 847 пикселей.
Добавить цвет фона
Затем добавьте цвет фона в только что созданный файл. Убедитесь, что вы используете немного более темные серые цвета на протяжении всего процесса. Очень важно использовать цвет немного темнее, так как он поможет вам позже в этом посте при добавлении параметров дизайна Divi. В этом примере мы использовали «# 626262» в качестве цвета фона и использовали инструмент «Заливка», чтобы добавить цвет к слою.
Добавить слой 2
Продолжайте, добавляя новый слой прямо над первым слоем.
Добавьте первую фигуру на слой 2
Затем выберите инструмент Polygonal Lasso Tool и начните создавать фигуру, выбрав Layer 2.
После этого выберите инструмент Paint Bucket Tool и используйте #747474, чтобы раскрасить выбранную часть.
Добавить слой 3
Затем добавьте еще один слой прямо над слоем 2.
Добавьте второй слой формы 3
Продолжите, создав другую фигуру, как на принт-скрине ниже, с помощью инструмента «Многоугольное лассо».
Выберите инструмент Paint Bucket Tool и на этот раз используйте #6a6a6a.
На данный момент ваше изображение должно выглядеть так:
Используйте инструмент «Ластик» на слое 3
Двигаясь дальше, выберите инструмент Eraser Tool, выбрав Layer 3.
Используйте инструмент «Ластик» вместе с кистью с жесткостью 0% и размером 338 пикселей.
Затем сотрите область, которую вы хотите удалить. Мы намеренно оставили только небольшую часть слоя 3, где можно увидеть переход между слоями 2 и 3.
Дублирование, преобразование, поворот и размещение слоев на противоположной стороне
Теперь, когда мы создали левую сторону, другая сторона будет работать намного быстрее. Мы хотим, чтобы это было точно так же, поэтому мы собираемся выбрать и Слой 2, и Слой 3. Затем мы собираемся продублировать слои.
После дублирования вы увидите их в списке слоев.
Выделив оба дублированных слоя, перейдите к Edit > Transform > Rotate 180° и перетащите слои на другую сторону изображения.
Сохранить для Интернета
Осталось только сохранить изображение. Для этого нажмите Файл > Экспорт > Сохранить для Интернета .
Наконец, убедитесь, что файл имеет формат JPG или PNG, и сохраните его.
Изготовлено с помощью кистей
Далее мы покажем вам, как создавать текстурированные фоны с помощью кистей. Текстурированный фон, который мы покажем вам, как воссоздать, выглядит в этом случае так:
Новый файл
Начните снова, создав новый документ шириной 1920 пикселей и высотой 847 пикселей.
Добавить цвет фона
После этого добавьте фон к первому слою с цветовым кодом #8f8f8f.
Поиск подходящей кисти в Интернете
Следующий шаг — найти кисть, которая соответствует стилю раздела героя. Существует множество бесплатных кистей для Photoshop, которые потрясающие и бесплатные. Вы можете найти и загрузить тот, который мы будем использовать в этом руководстве, перейдя на следующую страницу.
Кисть для загрузки
Найдите файл ABR на своем компьютере и перейдите в Photoshop, чтобы загрузить кисти. Выберите «Правка» > «Стили» > «Менеджер шаблонов» > «Кисти» > «Загрузить» и выберите файл 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
Текстурные фотографии [HD]: скачать текстурные фоны без лицензионных отчислений
Перейти к содержимомуПоследние Популярные
Начните свой бизнес
Почти все, что вам нужно для начала — фотографии, поставщики и многое другое
Просмотреть все бизнес-идеи
Просмотреть все бизнес-идеи
Дерево, металл, бетон — просмотрите бесплатные изображения текстур с высоким разрешением для дизайнеров
текстуру, которую вы используете, и то, что вы хотите передать через свои изображения. Более естественные текстуры, такие как волнистая поверхность березы или бесшовное ощущение тонкого пляжного песка, могут оказать успокаивающее воздействие на зрителя. В то же время некоторые художественные текстуры, такие как гладкий холст и мокрые масляные краски, могут вдохновлять на творчество. Другие текстуры имеют более индустриальную эстетику и помогают создать у зрителей ощущение грубости. Эти текстуры могут включать полированную кожу, стекло, бетон, мятую бумагу и металл.
Визуальные текстуры и тактильные текстуры
Также следует различать визуальную текстуру и тактильную текстуру. Тактильные текстуры, такие как дерево, металл, песок, стекло, холст или кожа, содержат физические текстуры, которые различаются на ощупь. Использование этих текстур может повлиять на плавность изображения и ощущение, которое передает изображение. Например, гладкая бесшовная поверхность, такая как холст, может быть визуально спокойной, в то время как более грубая поверхность, такая как зазубренный утес, может придать изображению более активное ощущение.
Визуальные текстуры работают немного по-другому. Это текстуры, которые либо создают иллюзию физической текстуры (например, трехмерное изображение), либо не имеют физической текстуры, воспринимаемой человеческим осязанием (например, облака или дым).
Использование текстур в дизайне
При использовании в маркетинге и дизайне текстурированные изображения могут передавать ряд эмоций и эстетику, которые помогают создать персонажа для вашего проекта. Например, если вы хотите изобразить свой объект как более экологически ориентированный, лучше всего использовать естественные текстуры, такие как трава, кора дерева и дерево.
Если вы хотите придать своему объекту более гладкий, футуристический вид, подумайте о гладком хроме или глянцевом пластике. Не стесняйтесь экспериментировать с искусственными текстурами и визуализированной 3D-графикой, если хотите — более абстрактные текстуры могут придать вашим продуктам ощущение творчества.
Возможно, вы хотите, чтобы ваши модели выглядели винтажно — попробуйте более приглушенные текстуры, такие как рваная джинсовая ткань или выстиранная ткань.