Фон бесшовный для сайта: Бесшовный фон для сайта скачать бесшовные фоны и текстуры

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Стиль работы Тематика Ятаквижу

Стиль работы:

#{{tag.label}}

Тематика:

#{{tag.label}}

Ятаквижу:

#{{tag.label}}

Не более десяти тэгов на одну работу

Работа 18+

Отключить комментарии

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:

Автоматически перейти в портфолио
Остаться на текущей странице

Запланировать публикацию

{{pub_dates[pub_date] || pub_dates[0]}}

Отменить планирование

Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее

Как создать бесшовный фон при помощи Photoshop? | Техника и Интернет

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

На рисунке изображены крупные предметы. Чем больше предмет, тем сложнее будет с ним работать!

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

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

Открываем картинку в Photoshop’е (у меня версия CS4). Внимание! Далее я буду давать инструкции на английском и русском языке (для оригинальной и русифицированной версий), однако перевод может не совпадать с тем, что есть у вас — это зависит от версии русификатора! Щелкаем меню Image/Mode (Изображение/Режим) и убеждаемся, что у нас стоит галочка напротив RGB color (RGB цвет). Если нет, ставим ее.

Для своих работ я выбрала вот такую картинку (рис. 1, вверху). Как мы видим, она довольно абстрактна и — слава богу! — равномерно освещена. Однако на ней изображены крупные предметы, имеющие очень четкие линии. А как выглядит ваша картинка? Если у нее один край темнее противоположного, то начать нужно с освещения. Освещение можно подкорректировать несколькими способами.

Первый способ. Выбираем Filter/Render/Lights Effects (Фильтр/Освещение/Эффекты освещения) (рис. 2). Дальше настройки индивидуальны и зависят только от вашего рисунка. Покрутите овальчик слева, подергайте ползунки. Совет: если края картинки получаются темными (не хватает света), а при растягивании овала центр получается слишком ярким, увеличьте значение параметра Focus (Фокус). Смотрим на мой пример (рис. 3).

Второй способ. Если светлых (темных) мест совсем немного или же изменение незначительно, то можем воспользоваться кисточками с панели инструментов — Dodge или Burn (Осветление или Затемнение). Совет: кисточка для таких работ должна быть достаточно мягкой: уменьшаем параметр Жесткость (Hardness). Параметр Exposure (Экспозиция) отвечает за интенсивность, им вы можете регулировать для плавных переходов света.

Теперь, когда изображение равномерно освещено, идем Filter/Other/Offset (Фильтр/Другие/Сдвиг) и выбираем опцию Wrap around (Вращать вокруг, в некоторых версиях — Обернуть).

Ставим значения обоих ползунков примерно (точность несущественна) вполовину изображения (например, у меня исходная картинка разрешением 400×300 пикселей, значит, я выставляю значения 200 по горизонтали и 150 по вертикали). Итак, теперь наши швы аккурат посередине (рис. 1, внизу). Наша задача — сделать их как можно менее заметными.

Масштабируем изображение и берем инструмент Clone Stamp (Штамп клонирования). Теперь работа творческая. Зажимаем клавишу ALT и мышкой щелкаем по тому кусочку, который мы хотим клонировать. Отпускаем клавишу и начинаем ретушировать нужную нам область. Обратите внимание, что область штампа (ту, которую вы обозначили с помощью клавиши ALT) будет двигаться за курсором, пока вы не отпустите кнопку мыши.

Кстати, если ваша картинка не содержит никаких геометрических фигур и вообще достаточно однородна, можно попробовать другой способ. Открываем исходное изображение (до сдвига швов) и добавляем в текстуры Edit/Define Pattern (Редактирование/Задать текстуру). Теперь вновь сдвигаем швы (Offset) и берем инструмент Pattern Stamp (Текстурный штамп). Не перепутайте с другим штампом! В верхней панельке выбираем только что сделанную нами текстуру. Теперь молниеобразными движениями закрашиваем наши стыки. Если получается плохо и неаккуратно, то этот способ вам не подходит!

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

Когда наш бесшовный фон будет готов, добавляем его в текстуры (как я описывала ранее). Создаем новый документ в Photoshop, ставим ему размер намного больше нашей картинки, далее идем Layer/New fill layer/Pattern (Слой/Новое заполнение слоя/Текстура) и выбираем нашу новую текстуру. Смотрим, что получилось!

Если вы попытались сделать так, как я рекомендовала, но у вас что-то не получилось — не расстраивайтесь! Существует плагин для Photoshop под названием Tiler, который можно легко найти и скачать в Сети. С его помощью за один клик мыши можно сделать все, что мы с вами пытались сделать!

Только не надо сейчас произносить все слова, которые пришли вам на ум! Плагин этот не идеален, поэтому подойдет лишь для картинок туманов, облаков, шерсти и прочих подобных вещей. Посмотрите что получится, если применить его к моему рисунку (рис. 5)! Правда, у меня красивей?

Теги: компьютеры, создание сайта, фототехника, рисунки, программы

Более 40 генераторов фоновых шаблонов и ресурсов для веб-дизайнеров

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

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

Крупномасштабные, тяжелые фоновые изображения и фоновые изображения разделов могут негативно повлиять на скорость загрузки страницы и, в свою очередь, на основные веб-жизненные показатели Google.

Это означает, что дизайнеры и разработчики должны изучить другие возможности для создания визуального интереса и улучшения визуального дизайна страницы без его замедления. Ответ — красивые фоновые узоры, которые соответствуют рекомендациям по дизайну бренда и визуальному дизайну веб-сайта.

• Бесшовные, повторяющиеся узоры и фоновые узоры, особенно когда они созданы исключительно в CSS или небольших SVG, могут усилить дизайн без нагрузки на тяжелое изображение.
• Пользовательские шаблоны создают потрясающий и уникальный внешний вид для бренда — лучший вариант, чем повторное использование той же старой стоковой фотографии, которую используют все остальные (и, возможно, конкуренты клиента).
• Шаблоны на основе кода отлично смотрятся в любом браузере (даже в браузере с высоким разрешением) независимо от размера.

Кроме того, создавать собственные узоры и играть с цветами и настройками для создания чего-то удивительного — это просто весело.

Ознакомьтесь с этой коллекцией генераторов шаблонов:

Paaatterns — это бесплатная коллекция легко настраиваемых векторных шаблонов для инструментов дизайна Sketch, Figma, XD и Illustrator в форматах PNG и SVG.

От хот-догов и приправ до киви и геометрических узоров — в библиотеке узоров есть множество бесплатных загружаемых узоров — и вы можете отправить свои собственные!

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

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

Looney Patterns предлагает 45 бесшовных, нарисованных от руки, полностью редактируемых векторных узоров, которые вы можете использовать бесплатно даже в коммерческих проектах.

Генератор шаблонов Adobe Creative Cloud помогает создавать уникальные бесшовные повторяющиеся шаблоны дизайна из любой загруженной фотографии.

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

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

Subtle Patterns — это коллекция бесплатных мозаичных узоров, созданных и представленных дизайнерским сообществом Toptal и доступных для скачивания в формате PNG.

Прозрачные текстуры, основанные на Subtle Patterns, помогают создавать различные текстуры из любого указанного вами цвета и загружать текстуры в формате PNG.

Bbburst генерирует взрывы SVG разноцветных форм. Отрегулируйте непрозрачность, количество фигур, какие фигуры использовать, положение источника взрыва и цвета фигур, затем загрузите окончательный файл SVG или скопируйте разметку SVG.

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

Sssquiggly — это генератор SVG, который создает узоры волнистых линий с легкой случайностью. Настройте параметры, такие как количество волнистых линий, количество точек в волнистой линии и амплитуду линий, а затем получите SVG.

Bansal — это библиотека только для CSS, которую вы можете использовать для заполнения пустых фонов красивыми узорами в виде клетки, точек, линий, треугольников и зигзагов и просмотра узоров, используемых в качестве фона, разделителя, заливки шрифта и акцентов изображения.

Ccchaos — это инструмент для создания волнистых, хаотичных фоновых узоров и экспорта их в файлы SVG. Измените настройки, нажмите кнопку рандомизации, чтобы найти правильный дизайн, и сохраните или скопируйте SVG.

Dddoodle — это набор из более чем 120 бесплатных рисованных иллюстраций в формате SVG. Используйте линию, стрелку, круг, звезду и другие забавные каракули в любом разрешении и настраивайте их для своего следующего дизайнерского проекта.

SVGeez — программа для создания фоновых шаблонов SVG. Выберите шаблон, настройте цвета и масштаб и получите код CSS для своего индивидуального шаблона.

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

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

Vvvortex использует тонкую случайность для создания фона SVG из повторяющихся кругов. Отрегулируйте цвета и параметры, такие как постепенное появление и исчезновение, частоту и интервал, чтобы получить уникальный узор на основе круга.

Визуальный редактор SVG Grid позволяет создавать пользовательские двухмерные геометрические композиции с различными значками.

Генератор градиентных волн SVG создает волнистые фоны. Настройте цвета, насыщенность, амплитуду, смещение, количество линий и многое другое.

Галерея шаблонов CSS3 содержит более 40 бесплатных шаблонов CSS3, созданных с помощью градиентов. Просмотрите галерею и щелкните шаблон, чтобы получить код.

Галерея шаблонов SVG содержит более 20 бесплатных шаблонов дизайна SVG. Щелкните шаблон, чтобы заполнить окно браузера или получить SVG и код.

Ffflurry — это генератор фона SVG, который создает случайные футуристические узоры из линий. Установите цвета, плотность, угол, вес линии, длину линии и непрозрачность, а затем загрузите или скопируйте SVG.

Генератор шаблонов Doodad помогает создавать бесшовные шаблоны SVG, CSS и PNG. Нажмите «Перемешать», чтобы увидеть возможные узоры, или выберите базовый стиль и настройте цвета, фильтры и преобразования по своему вкусу.

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

Wild Textures содержит изображения текстур, «найденных в дикой природе», и шаблоны дизайна, которые вы можете использовать бесплатно в личных или коммерческих целях.

SVG Wave — это генератор волн SVG. Настройте такие параметры, как количество волн и слоев, высоту волны, цвет или градиент и многое другое, а затем предложите возможность создавать и экспортировать PNG и SVG ваших дизайнов волн.

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

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

Pattern Cooler предоставляет коллекцию бесшовных фоновых узоров для настройки. Бесплатно для небольших изображений, за большие загрузки взимается плата.

Nnneon создает светящиеся футуристические формы SVG. Выберите фигуру, настройте параметры градиента/цвета заливки, размытия свечения, непрозрачности и расстояния размытия. Когда вы закончите, экспортируйте свой дизайн в формате SVG.

MagicPattern Toolbox — это генератор бесшовных фоновых узоров, который позволяет вам управлять основными и фоновыми цветами, непрозрачностью и расстоянием между узорами, предварительно просматривать узор в фоновом режиме, а затем копировать CSS.

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

Repper Pattern Maker — это бесплатный инструмент, который превращает изображения (существующие рисунки) в коллекцию новых красивых бесшовных геометрических узоров, которые хорошо сочетаются друг с другом.

Mmmotif — это генератор SVG, который упрощает создание шаблонов с использованием фигур, которые выглядят и воспринимаются как трехмерные и следуют изометрическому шаблону проектирования. Изометрический дизайн позволяет легко оставаться в сфере векторов и SVG, при этом придавая элементам ощущение глубины.

Uuundulate — это генератор SVG, который создает фон из волнистых органических форм и волнистых узоров. Отрегулируйте интервал, частоту, ширину обводки и непрозрачность, а также выберите сплошной цвет или градиент. Затем создавайте варианты, пока не найдете свой любимый.

В Visiwig есть бесплатный генератор векторных шаблонов, который позволяет настраивать бесшовные шаблоны дизайна (масштаб, угол, обводку и цвет) и экспортировать SVG или CSS.

DinPattern предоставляет библиотеку бесшовных шаблонов проектирования (изображения GIF, PNG и JPG), которые можно бесплатно использовать в цифровых проектах. (За использование в печати взимается плата.)

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

Шаблоны героев — это коллекция бесшовных повторяющихся фоновых шаблонов SVG. Просмотрите готовые шаблоны, измените цвет переднего плана, цвет фона и прозрачность, а затем получите код или SVG.

Фоны SVG — это библиотека бесплатных и премиальных фоновых шаблонов SVG, которые можно настраивать, просматривать и загружать.

Cool Backgrounds — это набор настраиваемых шаблонов, графики и изображений, которые можно настраивать и использовать в качестве фона дизайна.

Визуальный редактор Circle Packing — это генератор SVG, который создает настраиваемые фоновые узоры на основе кругов. Вы устанавливаете размер, количество кругов, цвета и многое другое.

Rrreflection — это генератор SVG, который воспроизводит отражения и повторяющиеся круги. Настройте цвета или градиент, интервал, частоту, обводку и непрозрачность, а затем получите SVG.

В Haikei есть 15 различных генераторов для создания пользовательских фигур, волн, капель, градиентов и кругов, а также фонов и узоров, которые можно экспортировать в форматы SVG и PNG.

Wow Patterns — это бесплатный рынок шаблонов с коллекцией из более чем 3000 векторных и бесшовных шаблонов и фонов, которые каждый может скачать и использовать.

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

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

• CSS-инструменты и генераторы кода для ускорения процесса веб-разработки
• Инструменты для работы с цветом, создания градиентов и обеспечения специальных возможностей
• Библиотеки иконок и иллюстрации для вашего следующего проекта дизайна или разработки
• Инструменты графического дизайна и дизайна веб-сайтов для профессиональных дизайнеров и дизайнеров-любителей
• Ресурсы по стоковым фотографиям, иллюстрациям и стоковым изображениям
• Ресурсы стоковых видеоклипов и аудиодорожек для создателей контента

И, конечно же, следите за новостями, чтобы не пропустить такие публикации!

Обладая 23-летним опытом, Дженнифер Борн использует свой опыт графического дизайна, веб-дизайна и копирайтинга, чтобы помочь малым предприятиям создавать бренды, создавать контент и развивать прибыльные онлайн-платформы.

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

Современный взгляд на узорчатые фоны в веб-дизайне

Поделиться

• Доля
• Твитнуть
• Поделиться
• Приколи

Примеры сайтов Натали Берч • 03 сентября 2018 г. • 5 минут ПРОЧИТАТЬ

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

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

Фоновое оформление используется традиционно – как декоративное полотно. Его роль жизненно важна: без него мы не почувствуем той рождественской атмосферы, которая лежит в основе проекта. Epic Life Creative и Состояние UX дизайна используют один и тот же вариант.

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

Если эти двое вызвали волну ностальгии, то обратите внимание на  Инженер недели . Классический подход соответствует тенденциям. Бесшовное геометрическое полотно приятно пахнет. Однако масса разноцветных коротких диагональных линий, аккуратно разбросанных по всему экрану с соответствующей цветовой палитрой, придает дизайну современный вид.

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

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

Традиционные подходы, улучшенные с помощью модных штрихов, представляют собой интеллектуальные решения, практически не связанные с риском. Однако иногда они могут быть немного скучными, потому что все так делают; и вы теряете это желаемое ощущение уникальности. Чтобы этого избежать, попробуйте нестандартные способы применения техники. Например, нет необходимости везде использовать узоры в качестве фона; использовать его в качестве декоративной детали. Рассмотрим Glam Ink , Hannenorak , S**t Kingz и Hideout Lodge ; все эти веб-сайты выигрывают от частичного использования шаблонов.

Давайте подробнее рассмотрим каждый из них.

Glam Ink придерживается минималистского скандинавского стиля. С его чистой и аккуратной эстетикой сайт просто захватывает дух. В невероятно просторной и воздушной среде отдельные треугольники из точек идеально завершают дизайн.

Hannenorak использует геометрические узоры в нескольких местах. Например, горизонтальный волнообразный узор выделяет заголовок, помещая привязку фокуса в середину содержимого. Огромный логотип на втором экране акцентирует внимание на фирменном стиле. А кружок внизу страницы делает два призыва к действию слева не такими одинокими. Все эти детали умело обогащают проект.

Команда разработчиков S**t Kingz использует набор точек в качестве декора для верхнего заголовка. Такой же орнамент использован в загрузчике и в одном из внутренних отделов. Сайт кажется немного странным, но в хорошем смысле.

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

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

Например, вы можете:

• Использовать геометрический узор с эффектом параллакса, чтобы улучшить взаимодействие с пользователем, например RLAH
• Используйте пятнистый геометрический рисунок в технологичной среде, такой как Состояние европейских технологий
• Используйте различные геометрические узоры с ярким сходством в качестве фона, например, TerraLeads

Предыдущие веб-сайты использовали технику усиления первого впечатления, но La Clairiere использует геометрический рисунок, чтобы обеспечить единообразие во всем дизайне. Здесь все начинается с привлекающего внимание шрифта, используемого для логотипа в области героя. Стиль линии задает ритм. Его можно увидеть везде — в иконке гамбургера, фоне, заголовках, изображении и т. д. Самое удивительное, что это переусердствование не подавляющее. Проект кажется завершенным, последовательным, сложным и продуманным.

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

Заключение

Классические векторные шаблоны кажутся немного устаревшими во времена, когда разработчики могут воспроизводить декорации с помощью ванильных CSS и JS. В традиционном использовании они почти утратили свою привлекательность, но не утратили своего потенциала.

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

Используете ли вы шаблоны в своих проектах? Вы улучшаете шаблоны с помощью современных трюков?

Учебное пособие: создание 5 тонких фоновых узоров

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

Конечно, выкройки такого типа легко найти в Интернете, поэтому все, что вам нужно сделать, это сохранить их и использовать, но разве вам не хотелось бы узнать, как сделать их с нуля, чтобы добавить немного индивидуальности ваш веб-дизайн? Итак, сегодня мы собрали 5 коротких уроков, которые помогут вам создать пять различных типов тонких фонов.

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

Первый узор

Для этого первого узора я хотел имитировать что-то немного шероховатое с небольшим количеством текстуры.

Шаг 1.

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

Шаг 2.

Создав документ, вы хотите выбрать цвет фона. Вы можете выбрать из образцов или открыть диалоговое окно «Палитра цветов». На этот раз я хотел пойти с красивым темно-синим цветом.

Шаг 3.

Первое, что мы собираемся сделать для создания фона, это добавить немного шума. Перейдите в меню «Фильтр» > «Шум» > «Добавить шум», чтобы открыть это диалоговое окно. Измените количество (шума) на 3% с распределением Гаусса и убедитесь, что установлен флажок «Монохроматический».

Шаг 4.

Далее мы собираемся применить фильтр, необходимый для создания остатка в стиле гранж. Перейдите в Фильтры > Мазки кисти > Акцентированные края. Появится диалоговое окно «Галерея фильтров», которое будет выглядеть следующим образом. Вы хотите поиграть с настройками, пока не найдете то, что вам нравится. Настройки, которые я использовал: Ширина края 6, Яркость края 18 и Гладкость 6.

Шаг 5.

Чтобы сделать этот узор бесшовным, мы собираемся завернуть пиксели по краям. Перейдя в Filter> Other> Offset, мы открываем диалоговое окно, которое готово помочь нам перемещать пиксели. То, что вы хотите сделать, это использовать количество, которое составляет половину размера вашей длины и / или ширины. Наша длина и ширина по 100 пикселей каждая, поэтому мы хотим обернуть его вокруг на 50 пикселей вот так.

Шаг 6.

Как вы можете видеть на шаге 5, когда вы выбираете Смещение пикселей, вы фактически можете видеть, где пиксели начинаются и заканчиваются. Чтобы убрать это, вам нужно взять Восстанавливающую кисть (J) на палитре, Alt+щелкнуть левой кнопкой мыши по месту на вашем фоне и закрасить его. После того, как вы сгладите его с помощью Восстанавливающей кисти, он должен выглядеть примерно так, как на картинке выше.

Шаг 7.

Последний шаг в создании шаблона — определение шаблона. Перейдите в меню «Правка» > «Определить шаблон», и появится диалоговое окно с просьбой назвать ваш шаблон. Назовите его как хотите. Чтобы получить шаблон, возьмите ведро с краской (G) и убедитесь, что он находится в режиме шаблона. Ваш самый новый шаблон, скорее всего, будет последним шаблоном. Выберите его и заполните свой холст узором.

Окончательное изображение

Второй шаблон

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

Шаг 1.

Опять же, конечно, мы собираемся создать наш новый документ, следуя шагам из предыдущего краткого руководства. Мы также используем тот же размер холста 100 на 100 пикселей. На этот раз мы выберем два разных серых цвета. В качестве первого цвета мы выбираем светло-серый (#d7d7d7). Залейте холст более светлым цветом.

Для второго цвета мы выбираем более темный серый (#c2c1c1). Позже мы будем использовать этот цвет для линий.

Шаг 2.

Выберите инструмент «Линия» (U), убедитесь, что вы находитесь в режиме формы, и измените толщину линии примерно на 2 пикселя.

Шаг 3.

Создайте новый слой (Ctrl/Cmd + Shift + N). Щелкните левой кнопкой мыши и перетащите инструмент линии по диагонали из угла в угол (удерживайте Shift, чтобы сделать свет точным).

Шаг 4.

Создайте еще один новый слой. Сделайте то же самое с помощью инструмента линии для другой стороны. Как только я закончил свои линии и разместил их правильно, мне показалось, что проще всего объединить эти два слоя. Если вы находитесь в режиме формы, это должно быть так же просто, как выделить самый последний (верхний) слой и нажать Ctrl / Cmd + E, чтобы объединить его со слоем под ним.

Шаг 5.

Чтобы упростить задачу, я предпочитаю использовать параметр «Обрезка», чтобы удалить все лишнее, что вы не видите. Для этого перейдите в «Изображение»> «Обрезать», и обычно вы должны нажать «ОК», и все, что вы не видите, будет удалено.

Шаг 6.

Когда ваши линии объединены, вы хотите уменьшить их масштаб, чтобы между «X» и краями оставалось немного места. Для этого вам нужно нажать Control/Cmd + T и удерживать клавиши Shift и Alt, чтобы сохранить пропорции и уменьшить масштаб от центра. Уменьшите его, как вам угодно.

Шаг 7.

Я хотел, чтобы мой «X» выглядел немного рельефным, поэтому я продублировал слой (Control + J) и решил сделать его светлее, перейдя в «Изображение»> «Настройки изображения»> «Яркость/контрастность». Я полностью увеличил яркость, пока не стал приятного светло-серого/белого цвета. Когда у вас есть цвет, который вы одобряете, нажмите OK.

Шаг 8.

Затем вы хотите настроить светлый слой так, как вам нравится. Возьмите инструмент со стрелкой (V) и перемещайте слои, нажимая кнопки со стрелками. Я также переместил свои слои, чтобы изменить внешний вид. Играйте с ним, пока не получите то, что вам нравится. (В итоге я поместил свой более светлый слой «X» под другой и подтолкнул его вниз только один раз).

Шаг 9.

Когда вы закончите выяснять, как вы хотите расположить более светлый и более темный «X», добавьте шум на серый фон. Это слишком тонко, поэтому перейдите в Filter> Noise> Add Noise и добавьте только 1% Noise. Сохраняйте распределение по Гауссу и убедитесь, что установлен флажок Монохроматический.

Шаг 10.

После этого вам нужно будет изменить размер изображения. Перейдите в «Настройки»> «Размер изображения» и уменьшите его до нужного размера. Я установил свой на 75px на 75px. И снова вы захотите определить свой шаблон, выбрав «Правка»> «Определить шаблон», назовите свой шаблон и нажмите «ОК». Ниже показано, каким должно быть окончательное изображение.

Окончательное изображение

Третий паттерн

Этот паттерн по-прежнему немного геометрический с менее заметными вариациями.

Шаг 1.

Для этого шаблона я начал с большего размера холста 150 x 150 пикселей, потому что здесь мы будем более точными. Начните с выбора темно-серого цвета для заполнения холста.

Шаг 2.

Как и в предыдущем шаблоне, мы будем использовать инструмент Line Tool (U). Выберите светло-серый цвет для создания линий. Он не должен быть идеальным. Что-то вроде вышеприведенного подойдет.

Шаг 3.

Затем возьмите инструмент «Кисть» (B) и с помощью мягкой кисти нарисуйте мягкую большую линию поверх второй светло-серой линии. Здесь я использовал более темный цвет (черный) для своей линии. Не стесняйтесь экспериментировать с разными типами цветов.

Шаг 4.

Теперь мы собираемся уменьшить размер этого шаблона, выбрав Изображение > Размер изображения; Я изменил его на 10px на 10px. После того, как вы изменили размер, вы хотите перейти в «Правка»> «Определить шаблон»> назовите свой шаблон и затем нажмите «ОК».

Шаг 5.

Создайте новый документ. На этот раз я выбрал размер 615 х 450 пикселей, хотя ваш размер не обязательно должен быть таким большим. Все, что больше 200 пикселей с каждой стороны, должно работать. Возьмите ведро с краской (G), убедитесь, что оно находится в режиме узора (появится раскрывающееся меню с параметрами «Передний план» и «Узор») и возьмите только что созданный узор. Заполните свой холст этим узором, как показано на изображении выше.

Шаг 6.

Теперь мы обычно закончили, но мы хотим внести некоторые изменения во внешний вид линий. Перейдите в Filter > Brush Strokes > Angled Strokes, чтобы получить нужный нам эффект. Опять же, я призываю вас поиграть, пока вы не найдете то, что вам нравится, но вот настройки, которые я использовал: Баланс направления 73, Длина штриха 6 и Резкость 4. Нажмите OK, чтобы подтвердить изменения.

Шаг 7.

Это окончательный результат, но для того, чтобы сделать бесшовный узор, я взял инструмент «Кадрирование» (C) и выделил квадратную область (Shift + щелчок левой кнопкой мыши), которая выглядела довольно похожей на мне. Такие вещи легко увидеть на глаз – вам просто нужно убедиться, что ваша левая сторона начинается там, где заканчивается ваша правая сторона, а ваш верх начинается там, где заканчивается ваш низ. Опять же, когда вы нашли подходящую область, выберите «Правка» > «Определить шаблон» и попробуйте.

Окончательное изображение

Четвертый шаблон

Еще немного грязи с последовательной повторяющейся, но тонкой ценностью.

Шаг 1.

Для нашего четвертого шаблона мы будем использовать другой тип основы. Мы снова собираемся начать с Нового документа размером 100 на 100 пикселей. Для цвета у меня обычный белый фон, а цвет линии я выбрал очень светло-серый. Мы возьмем Line Tool (U) и нарисуем горизонтальную линию в самом верху, а также линию посередине.

Шаг 2.

Теперь этот будет немного более «грязным», чем остальные, поэтому мы хотим добавить к нему немного шума. Выбрав белый фоновый слой, перейдите в меню «Фильтр» > «Шум» > «Добавить шум» и измените значение параметра «Количество» на 15%, «Распределение» на «Гауссово» и установите флажок «Монохроматический».

Шаг 3.

Для этого снова мы собираемся сделать размер немного меньше, поэтому мы перейдем в Изображение> Размер изображения, и для этого я изменил размер на 15 пикселей на 15 пикселей. После того, как вы это сделаете, создайте свой шаблон, выбрав «Правка»> «Определить шаблон»> назовите свой шаблон и отправьте изменения. Используйте как хотите! Имейте в виду, однако, что если вы хотите, чтобы ваш узор выглядел менее повторяющимся, попробуйте увеличить размер холста, чтобы вы могли увеличить свою вариацию.

Окончательное изображение

Пятый паттерн

Для этого последнего паттерна я хотел попробовать что-то темное, с небольшим количеством текстуры.

Шаг 1.

Я снова создал новый документ с размером холста 100 на 100 пикселей. Для этого последнего шаблона мы выберем очень темно-серый цвет фона.

Шаг 2.

Чтобы сразу перейти к делу, мы добавим очень полезный шум, выбрав Фильтры > Шум > Добавить шум: количество 5%, равномерное распределение, с включенным монохроматическим режимом.

Шаг 3.

Чтобы создать здесь желаемый эффект, мы собираемся перейти в Фильтры > Эскиз > Полутоновый рисунок. Не стесняйтесь играть здесь, но я использовал следующие значения: Размер 1, Контрастность 0, Тип узора точек.

Шаг 4.

Ранее мы использовали эту функцию смещения, чтобы помочь нам создать бесшовный узор. Мы собираемся сделать то же самое снова. Перейдите в «Фильтр» > «Другое» > «Смещение» и введите половину значения высоты и ширины. Убедитесь, что для ваших неопределенных областей установлено значение «Обтекание», и нажмите «ОК». Как только это произойдет, вам нужно снова использовать Восстанавливающую кисть (J), чтобы попытаться сгладить области, которые менее бесшовные. Как только вы переместите его в нужное вам место, перейдите в «Правка»> «Определить шаблон»> назовите свой шаблон, нажмите «ОК» и используйте новый шаблон.

Окончательное изображение

Имейте в виду…

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