Как сделать бесшовный текстуру в Иллюстраторе

В этом уроке мы будем создавать бесшовный кирпичный фон в Иллюстраторе.

Из этого урока вы узнаете, как создать бесшовный кирпичный фон в Adobe Illustrator, используя функцию редактирование узоров (Pattern Editing), которая доступна пользователем версий Adobe Illustrator CS6 и CC. Для придания большей реалистичности мы создадим некоторые элементы текстуры вручную.

 

Пример HTML-страницы

Шаг 1.

Работаем с изображением

Создайте новый документ в Adobe Illustrator (Ctrl + N). В диалоговом окне выставьте параметры: ширина (Width) 960 пунктов, высота (Height) 560 пунктов, Цветовой режим (Color mode) RGB, Растровые эффекты (Raster effects): Экранное (Screen (72ppi), снимите галочку в окошке Выровнять новые объекты по пиксельной сетке (Align New Objects to Pixel Grid).

Шаг 2.

Работаем с изображением

Возьмите Инструмент Прямоугольник — Rectangle Tool (M)

и кликните левой кнопкой мыши по монтажной области. В открывшемся окне введите значения ширина (Width) 150 пикселей и высота (Height) 100 пикселей и нажмите ОК. Затем измените заливку объекта на темно-оранжевый цвет (R = 179; G = 89; B = 36).

Шаг 3.

Работаем с изображением

При выделенном прямоугольнике перейдите в меню Эффект > Исказить и трансформировать > Трансформировать (Effect > Distort & Transform > Transform) и выставьте такие настройки:

Масштабирование: — По горизонтали (Scale — Horizontal) 100%; По горизонтали (Scale — Vertical) 100%

Перемещение: — По горизонтали (Move- Horizontal) 155 пикселей; По вертикали (Move-Vertical) 0 пикселей. Поставьте галочку в окошке Трансформировать объекты (Transform Objects), в поле Копии (Copies) введите 4. Затем нажмите ОК.

Шаг 4.

Работаем с изображением

Повторите действия, но уже с другими настройками: Масштабирование: — По горизонтали (Scale — Horizontal) 100%; По горизонтали (Scale — Vertical) 100%

Перемещение: — По горизонтали (Move- Horizontal) 75 пикселей; По вертикали (Move-Vertical) 55 пикселей. Поставьте галочку в окошках Отразить зеркально по оси Х (Reflect X) и Трансформировать объекты (Transform Objects), в поле Копии (Copies) введите 8. Нажмите ОК.

Шаг 5.

Работаем с изображением

Далее, чтобы иметь возможность работать с каждым прямоугольником отдельно, перейдите в меню Объект > Разобрать оформление (Object > Expand Appearance).

Шаг 6.

Работаем с изображением

Измените цвет некоторых прямоугольников на более темный или более светлый оттенок, по сравнению с изначальным. Чтобы быстро изменить оттенки можете переключиться в цветовой режим HSB в панели Цвет (Color) и изменять цвет, двигая ползунки Насыщенность (Saturation) и Яркость (Brightness).

Шаг 7.

Работаем с изображением

В итоге должно получиться что-то вроде этого:

Шаг 8.

Работаем с изображением

Выделите все кирпичи, затем перейдите в меню Эффект > Стилизация > Скругленные углы (Effect > Stylize > Round Corners), введите значение Радиус (Radius) 5 пикселей. Нажмите ОК.

Шаг 9.

Работаем с изображением

Теперь выберите в меню Объект > Разобрать оформление (Object > Expand Appearance).

Шаг 10.

Работаем с изображением

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

Шаг 11.

Работаем с изображением

Выделите все объекты, затем перейдите в меню Объект > Узор > Создать (Object > Pattern > Make) – мы автоматически перейдем в режим

Редактирования узора (Pattern Editing modе).

Шаг 12.

Работаем с изображением

Установите новые значения для ширины (Width) и высоты (Height) узора: 775 х 440 пикселей. Это действие удалит лишнее пространство по краям и преобразует кирпичи в бесшовный узор. В выпадающем меню Копий (Copies) поставьте 3х3, также поставьте галочки в окошках: Затенение копий на (Dim Copies to): 100%; Показать край элемента (Show Tile Edge) и Показать границы образцов (Show Swatch Bounds).

Шаг 13.

Работаем с изображением

Создайте прямоугольник любого размера темно-коричневого цвета.

Шаг 14.

Работаем с изображением

Поместите этот прямоугольник на задний план, нажав комбинацию клавиш Shift + Ctrl + [ .

Шаг 15.

Работаем с изображением

Теперь измените размер темно-коричневого прямоугольника так, чтобы он заполнил пробелы между кирпичами.

Шаг 16.

Работаем с изображением

Далее мы добавим немного деталей, чтобы наша стен выглядела более реалистичной. Уменьшите размеры некоторых из кирпичей, для этого возьмите Инструмент Прямое выделение — Direct Selection Tool (А), выделите точки на одной из сторон кирпича и переместите их с помощью стрелок на клавиатуре.

Шаг 17.

Работаем с изображением

Сделаем края некоторых кирпичей неровными. Чтобы изменить форму кирпичей, используйте Инструмент Карандаш — Pencil Tool (N).

Шаг 18.

Работаем с изображением

Итак, после изменения кирпичей, создания трещин и разломов, мои кирпичи выглядят вот так:

Шаг 19.

Работаем с изображением

В областях больших надломов вы можете добавить осколки кирпича, используя Инструмент Карандаш — Pencil Tool (N).

Шаг 20.

Работаем с изображением

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

Инструмента Карандаш — Pencil Tool (N). Цвет тени выбирайте темнее, чем цвет самого кирпича.

Шаг 21.

Работаем с изображением

Далее нам нужно удалить лишнюю часть, выступающую за контур кирпича. Поскольку Инструмент Создание фигур — Shape Builder Tool (Shift + M) не работает в режиме редактирования узора, мы будем использовать панель Обработка контуров (Pathfinder).

Шаг 22.

Работаем с изображением

Скопируйте на передний план фигуру кирпича (Ctrl + C > Ctrl + F). Выделите копию кирпича и тень, затем кликните Пересечение (Intersect) на панели Обработка контуров (Pathfinder).

Шаг 23.

Работаем с изображением

Используя ту же технику, создайте тени и для нескольких других кирпичей.

Шаг 24.

Работаем с изображением

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

Шаг 25.

Работаем с изображением

Обычно кирпичи отличаются грубой фактурой, которую мы можем создать используя векторную текстуру. Для создания текстуры я использовал растровую текстуру высокого разрешения из набора, который есть в материалах к уроку.
Создайте новый документ, а затем поместите текстуру, перейдя в меню Файл > Поместить (File > Place).

Шаг 26.

Работаем с изображением

Откройте панель Трассировка изображения (Live Trace) – Окно > Трассировка изображения (Window > Live Trace), выберите в меню Режим (Mode): Черно-белое (Black and White), уменьшите параметр Изогелия (Threshold) до 75, откройте дополнительные опции и поставьте галочку в окошке Игнорировать белый цвет (Ignore White).

Шаг 27.

Работаем с изображением

Теперь нажмите кнопку Разобрать (Expand) на верхней панели управления.

Шаг 28.

Работаем с изображением

Используя Инструмент Лассо — Lasso Tool (Q) выделите часть векторной текстуры, которая вам больше нравится.

Шаг 29.

Работаем с изображением

Скопируйте эти объекты (Ctrl + C) и затем вставьте их (Ctrl + V) в документ с нашей кирпичной стеной. Чтобы получить темную фактуру, залейте объекты серым цветом и измените режим наложения на Умножение (Multiply) на панели Прозрачность (Transparency). Вы также можете корректировать интенсивность текстуры изменяя оттенок серого на панели Цвет (Color) и/или уменьшая Непрозрачность (Opacity) на панели Прозрачность (Transparency).

Шаг 30.

Работаем с изображением

Чтобы получить светлую фактуру, примените режим наложения

Рассеянный свет (Soft Light) к объектам текстуры.

Шаг 31.

Работаем с изображением

Итак, наш бесшовный кирпичный фон готов, чтобы сохранить его на панели Образцы (Swatches) нажмите на кнопку Готово (Done) в верхней части рабочей области.

Шаг 32.

Работаем с изображением

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

Шаг 33.

Финальное изображение

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

Ссылка на источник

Пример HTML-страницы

в Photoshop, в Gimp и вручную – DIY и мастер-классы

Создавать сложные паттерны, оказывается, очень просто. Показываем, как это делать.

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

Бесшовные паттерны — это узоры, состоящие из повторяющихся элементов, граница между которыми не очевидна. Конечно, это весьма условное определение: даже на принтах, которые называют бесшовными, найти границу может быть проще или сложнее. Посмотрите на примеры ниже. В первом мы легко находим «элементарную частицу» и понимаем, что это просто нарисованные на квадратном холсте четыре арбузные дольки. А вот как сделать паттерн наподобие второго, не настолько очевидно. Что ж, этим мы сегодня и займемся!

^Фото 

Вручную

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

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

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

2.Теперь лист нужно очень аккуратно разрезать на четыре части. Сдвиньте фрагменты по диагонали (так, чтобы левый нижний оказался вверху справа, левый верхний — внизу справа и т.д.) и очень аккуратно соедините с изнанки скотчем. Чем незаметнее будут швы, тем меньше времени придется тратить потом на доработку изображения. 

3.Заполните изображением образовавшуюся пустоту. 

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

 

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

5. Все готово к тому, чтобы использовать ваш рисунок для создания паттерна. Переходите к пункту № 5 в инструкциях ниже!

 

Photoshop

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

1. Создайте пустой документ небольшого размера с длиной сторон, пропорциональной двум. 

Файл → Создать

2. Заполните любым узором пространство в центре листа. Важно оставить пространство по краям листа; в любом случае нужно следить, чтобы узор не касался его краев.

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

Фильтры → Другое → Сдвиг

Go to Filter → Other → Offset

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

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

5. Сохраните изображение как паттерн.

Редактирование → Определить узор. 

Edit → Define Pattern

6. Теперь паттерном можно заполнять любую выбранную область, просто используйте инструмент Заливка (G) и в его настройках вместо «Основной цвет» выберите «Узор». 

Заливка, Узор

Paint Bucket Tool, Pattern

 

Gimp

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

1. Создайте новое изображение. Мы уже знаем, что длина и ширина его должны быть пропорциональны двум. 

 

2. Создайте в центре листа рисунок. 

 

3. Для того, чтобы разрезать и склеить изображение, воспользуемся инструментом Смещение. 

Слои → Преобразования → Сместить

Layer → Transform → Offset

В отличие от Photoshop, здесь не обязательно в уме делить размеры изображения на два, достаточно нажать на кнопку под полями ввода значений. Не забудьте отметить пункт «Залить изображением»/Wrap around. 

 

4. Дорисуйте недостающие фрагменты паттерна. 

5. Сохраните изображение как паттерн.

Правка → Вставить как → Новая текстура

Edit → Paste as → New pattern

6. Заполните паттерном лист любого размера, используя инструмент Плоская заливка/Busket fill (Shift + B) и выбрав в меню Цвет заливки/Fill type опцию Текстурой/Pattern fill. 

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

DIY, программы, мастер-класс, принты

Создание бесшовной заливки Pattern для фонов

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

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

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

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

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

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

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

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:

Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным – это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент “Прямоугольная область” в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.

Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

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

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

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

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

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

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

Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.

Заливаем его цветом #80ac4b.

Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.

Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.

Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.

Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.

Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.

Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.

Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.

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

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

Stripe Generator

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

BG Patterns

BG Patterns представляет собой современный инструмент для создания красочных узоров , используя различные встроенные фигуры или пользовательские . Инструмент предлагает для различных тем, такие как цветы, вечеринки, животные и геометрические фигуры. Вы можете выбрать множество цветов для фона и фигур. Он также подразумевает вращение и масштабирование пользовательских изображений, настройку перекрытия для использования нескольких фигур. BG Patterns позволяет использовать картинки с разрешением, выше чем 300 × 300 точек в формате PNG и SVG.

Noise Texture Generator

Noise Texture Generator позволяет создать простую текстуру фона с использованием различных цветов и оттенков. Сервис позволяет устанавливать размеры текстуры, а также непрозрачность и плотность. Есть предпросмотр плитки и возможность загрузить её мгновенно.

Repper Patterns

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

Colour Lovers

Colour Lovers — современное приложение, которое позволяет создавать различные узоры , используя пользовательские палитры, изображения и встроенные стили. Сервис также предлагает Seamless Lite — инструмент на Flash для дизайна новых узоров, используя различные настройки для создания и редактирования, например, добавление фигур и текста, поворот и трансформирование фигур и многое другое.

Patternizer

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

Texture Generator

Texture Generator является инструментом для быстрой генерации текстур , используя различные цветовые оттенки и встроенные стили текстур. Инструмент позволяет использовать различные стили текстур, вроде земли, облаков, дерева и клеточек. В нем вы можете редактировать стили текстур, используя настройки, генерировать картинки в формате JPG и PNG.

Trianglify Generator

Бесплатныйгенератор low poly фонов . Есть возможность настройки цвета и градиентов . После настройки можно скачать изображение в векторном формате SVG или растровый вариант в формате PNG.

Trianglify Background Generator

Еще один low poly генератор фонов , но в отличие от предыдущего, этот имеет другую текстуру и более интересные вариации переходов цветов.

Background Image Generator

Отличный сервис для генерации фонов для сайта . Имеет множество вариантов текстур, которые раскрашиваются в нужный нам цвет.

Plaid Maker

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

На беоне заметно распространены так называемые бесшовные дизайны.
В интернете можно найти множество бесшовных фонов, а вот как сделать бесшовный фон из собственной картинки?
Это я предложу Вам сделать первым уроком.

1. открываем изображение в фотошопе. Пусть оно называется слой 1
Я выбрала вот это:
—
—
2. Нажимаем J+ctrl (создаем дубликат слоя). называем его слой 2
3. Идем: фильтр-другие-сдвиг.
Ставим свои настройки.
Для каждого изображения настройки индивидуальны, для своего я выбрала такие:
—
—
4. Находясь на слое два идем: фильтр-размытие-размытие по Гауссу.
Я поставила такие настройки:
—
—
5. Далее берем ластик (большой, ок. 300 пикс). Стираем немного по бокам слоя 2
Примерно так:
—
— .
6. Создаем копию слоя 1(слой 3). Перетаскиваем его так, чтобы он находился над слоем 2. Идем: редактирование-свободное трансформирование. Немного уменьшаем слой 3:
—
— .
7. Ластиком немного подтираем края слоя 3, что они слились с фоном.
Можно дублировать слой и добавить немного размытия в движении.
Итог:
—
—

II способ.

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

—
—

Открываем фильтр. Выглядит он так:

—
—

Я поставила такие настройки.
Итог:
—
—
На этом все.
Буду рада увидеть ваши работы.

скачать фильтр здесь.

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

Html код фоновое изображение. Установка бесшовного фона в HTML

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

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

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

Как сделать фон для сайта онлайн

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

О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: « » и « ».

Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта» , а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

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

1) PatternCooler

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

Посмотрите, что у меня получилось выбрать для себя:

2) Stripegenerator

Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

Мой результат работы:

3) BgPatterns

Очень интересный сервис по созданию онлайн фона. Вы можете выбрать различные рисунки (сердечки, звездочки, кружочки) и цветовую гамму создаваемого фона.

Посмотрите, что я подобрал себе:

4) Tartanmaker

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

Как поменять фон на сайтах HTML и PHP

Если вы работаете с сайтом разработанным исключительно на HTML, тогда вам понадобиться вставить фон в открывающий тег

… Должно получиться примерно следующее:

Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

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

Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

/ httpdocs/ wp- content/ themes/ Prosumer/ images

/httpdocs/wp-content/themes/Prosumer/images

background: #FFFFFF url(images/fon-1.png) repeat;

background: #FFFFFF url(images/fon-1.png) repeat;

Основные настройки:

• — repeat — изображение будет повторяться как по вертикали, так и по горизонтали;
• — repeat-x — повторение только по горизонтали;
• — repeat-y — повторение только по вертикали;
• — no-repeat – запрет на повторение.

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

Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

Влад Мержевич

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

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега

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

В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background , его и будем использовать в дальнейшем.

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое слово url . Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY , как показано в примере 1.

Пример 1. Фоновый рисунок

Фоновое изображение

В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.

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

Пример 2. Повторение фона по вертикали

Фоновое изображение

Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Фоновое изображение

Lorem ipsum…

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

Добавление рисунка к тексту

С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background , которое применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

Фоновое изображение

Заголовок

Основной текст

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

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

Основные теги HTML для создания фона

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

1. Написать атрибутом тега.
2. Через CSS стиль в HTML коде.
3. Написать CSS стиль в отдельном файле.

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

1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body../Images/Picture.jpg»)»).
3. И третий способ записи производится в двух файлах. В документе с названием index.htm в записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg»)}.

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

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

background: url(Images/Picture.jpg»)

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

Как сделать фиксированный фон

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg») fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

Работа с таблицей в HTML

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

Таблицы с картинкой вместо фона: HTML примеры

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture. jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

Кроссбраузерность сайта

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

В HTML изображения вставляются с помощью тега img .
Тег img — пустой, он содержит атрибуты и у него нет закрывающего тега.

Для отображения изображения на странице используется атрибут src . Src появилось от source, что означает Источник. Значением атрибута src является url-адрес изображения.

Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html , в которой содержится index.html с указанным выше кодом и само изображение с названием image.jpg .

В таком случае при открытии index.html в браузере Вы увидите данное изображение. Если же оно у Вас где-либо в другом месте (на папку выше или ниже), то вместо этого у Вас отобразится либо белое поле, либо небольшой прямоугольник с красным крестиком (не удалось загрузить изображение).

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

Атрибуты тега img

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

src — адрес изображения
width — ширина изображения
height — высота изображения
title — подпись, которая высвечивается при наведении на изображение
alt — альтернативный текст. Нужен для поискового робота и индексации изображений
border — толщина границы изображения. 0 — нет границы, 1 — самая тонкая граница и тд

Адрес вставленного изображения (примеры)

Как правило, изображения хранятся не в той же папке, что и сам html-файл . Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес

Если файл лежит на папку выше, то так

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

Фоновое изображение в HTML

В качестве фонового изображения могут выступать файлы с расширениями gif , jpg , jpeg и png . В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background , в котором прописываем путь к изображению

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

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

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

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

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега

. Например:

Фон сайта #55D52B

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Фон сайта rgb(23,113,44)

Фон сайта green

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

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

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

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

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

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

• repeat-x – повторение фонового изображения по горизонтали;
• repeat-y – по вертикали;
• repeat – по обеим осям;
• no-repeat – повторение запрещено.

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

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

• Ключевым словом (top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения (пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких «метров » займет много времени?

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

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

Средства CSS

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

ГДЕ ИСПОЛЬЗОВАТЬ БЕСШОВНЫЕ ФОНЫ И КАК ИХ СОЗДАВАТЬ ?: mangiana_irina — LiveJournal

ГДЕ ИСПОЛЬЗОВАТЬ БЕСШОВНЫЕ ФОНЫ ?

Во-первых, бесшовные фоны можно использовать для создания общего фона блога, например в twitter, blogspot, mail.ru, privet.ru и т.д.

Во-вторых, если вы создаете текстовые рамочки, то вам известно, что для этого необходимы фоны именно бесшовные.

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

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

После этого открываем нужное изображение. Если нужно поменять фон, то выделяем объект любым инструментом выделения, инвертируем выделение (Выделение – Инверсия) и в палитре слоев находим значок , нажимаем на него. Появится следующее окно, в котором выбираем узор…

В появившемся окне выбираем фон и нажимаем на кнопку “Да”:

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

источник: blogodizayn.blogspot.com/2011/02/blog-post_847.html

****************************************************

СОЗДАНИЕ БЕСШОВНОГО ФОНА ДЛЯ САЙТОВ, БЛОГОВ И КОМПЬЮТЕРОВ

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

Для этого можно воспользоваться программой Paint, которая есть в каждом компьютере.

Выбираем любую картинку, из которой вы хотите сделать фон.

Размер картинки 800х565, этого недостаточно для фона.

Идем в ПУСК — ВСЕ ПРОГРАММЫ — СТАНДАРТНЫЕ — Paint

Открыли программу. Нажимаем ФАЙЛ-ОТКРЫТЬ.

Перед нами картинка. Мы видим, что она не закрывает весь экран по горизонтали примерно на 100%от самой картинки, а по вертикали примерно 30% от картинки.

После того, как нажмем ОК, наш фон увеличится во весь экран. Жмем ФАЙЛ — СОХРАНИТЬ КАК… и получаем готовый фон во весь экран.

Как видите, ничего сложного нет. Так можно сделать фон абсолютно из любой картинки. Удачи вам!

для вас Лариса Гурьянова

**********************************************

СОЗДАНИЕ В PHOTOSHOP БОРДЮРНОГО ФОНА

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

Открываем в фотошопе новый файл, параметры — где-то 1100х300 пикселей. Выбираем пипеткой нужный цвет в палитре, а далее с помощью инструмента «заливка» закрашиваем его. Далее открываем нужный нам клипарт (клипарт — это одиночная картинка в формате PNG, с прозрачным фоном вокруг нее, большой выбор клипарта есть, например, на сайте lenagold.ru.

Выделяем эту картинку, можно с помощью инструмента выделение (находится сверху слева на левой панели инструментов), либо с помощью инструмента «Лассо» — как кому удобнее.

Затем идем в раздел «Редактирование» и нажимаем «Копировать».

Закрываем файл с клипартом, в нашем исходном файле-бордюре нажимаем «Вставить».

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

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

Готово! Вот что получилось у меня:

источник: www. liveinternet.ru/users/2670115/post126746050/

ДЕЛАЕМ БЕСШОВНЫЙ ФОН

По этой схеме можно очень быстро и легко сделать бесшовный фон.
Открываем картинку-исходник в фотошопе.
Идем в меню «Фильтр», а там — «Другое-Смешение».
Ставим галочку рядом с «Wrap Around». Видим, что появилось две строчки: горизонтальное смешение и вертикальное. Начинаем менять их значения так, чтобы квадратики, на которые разбилась картинка, были более менее одинаковыми.

Например: вот мой исходник:

А вот что получилось в результате указанных манипуляций:

Теперь нажимаем ОК, и выбираем Кисть истории (она находится под обычной кистью). С помощью кисти истории начинаем аккуратненько затирать середину картинки и часть краев, но так, чтобы не задеть самые поля картинки — иначе фон не получится бесшовным.
Если где-то вы видите, что края не совпадают, можно воспользоваться инструментом «штамп».
Готово!

источник: www.liveinternet.ru/users/2670115/post127346317/

***********************************************

КАК СДЕЛАТЬ ФОН БЕЗ ШВОВ

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

1) В первую очередь, естественно, нам потребуется картинка!

2) теперь копируем картинку, нажимая на Ctrl+j

3) временно скрываем верхний слой, нажимая на глазик, выделенный на рисунке ниже красным цветом,

4)потом нажимаем на нижний слой, он выделен синеньким!

5) дальше делаем всё как на фотке снизу Фильтр=> другие=>сдвиг

6) а вот дальше уже у каждой картинки свои парраметры! но у вас должно получиться примерно так, как получилось у меня!

7) потом берём инструмент «размытие», и размываем стыки !

8) Теперь возвращаем к жизни бесцеремонно убитый нами слой, и делаем всё как на картинке снизу: сперва жмём туда, где выделено красным, а потом туда, где синим!

9) теперь берём ластик, выделяем круглую мягкую кисть,

10) и стираем углы. Стараемся максимально приблизиться к стыкам, но всё же не обнажать их! вот что получилось у меня

всё, осталось только сохранить картинку и вставить в настройки дизайна.

Объясняла как для самых — самых начиниающих фотошопперов, так что не понять НЕВОЗМОЖНО. Удачных работ вам!

найдено здесь: www.liveinternet.ru/community/lolas_style/post67244757/

**********************************************

Беcшовный фон средствами Фотошопа, без специальных фильтров.

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

1. Открываем картинку в фотошоп (Файл / Открыть).

Запомните размер Вашего изображения(его можно узнать в фотошопе — Изображение/Размер изображения)

Размер выбранного мною изображения 600х480.

2. Снимем замочек, преобразуя фоновый слой в обычный.(Нажмите на замочек левой кнопкой мыши и перетащите его в корзину)

3. Теперь зажмите клавишу Ctrl на клавиатуре и кликните по клавише J — Вы сделали дубликат слоя:

4. На верхней панели во вкладке «Фильтр» выберите «Другое — Сдвиг»
Здесь нужно проставить значения равные половине размеров выбранного нами изображения
600х480 : 2 = 300х240

Сейчас картинка выглядит так:

6. Активируйте инструмент «Ластик», выберите «Круглую мягкую кисть»

7. Сотрите центральную часть картинки

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

8. Обратите внимание на стыки

9. Активируйте инструмент «Размытие» с такими настройками:

10. «Размойте» стыки:

11. Нажмите на любой из слоев в панели «Слои» и выберите «Объединить видимые» или «Выполнить сведение».

Сохраните, как Jpeg.
Вот результат на большой площади))

Надеюсь, я понятно объяснила!
Примечание:
на Лиру размер файла для фоновой картинки блога не должен превышать 70 КБ!!!
а моя картинка весит 120 КБ, для размещения на сайте ее нужно уменьшить, хотя бы уменьшив ее размер (но почти вдвое) или снизить качество при сохранении

источник: www. liveinternet.ru/users/lady_de/post258174251/

*****************************************

ОЧЕНЬ ЛЁГКИЙ УРОК ПО СОЗДАНИЮ ТЕКСТУРЫ

В этом уроке я покажу как быстренько за минуту создать вот такую стеклянную текстуру

Создаем новый документ размером 600 х 600 px любого цвета

Дальше смотрим по скринам

Параметры фильтра Стекло такие:

Теперь раскрасим нашу текстуру , можно с помощью Цветовой тон  / Насыщенность ( можно Цветовой баланс)

Или градиентом как я

Все, текстура готова, сохраняем ее.

DIZONA: diza-74.ucoz.ru/blog/ochen_legkij_urok_po_sozdaniju_tekstury/2011-12-15-10681

*******************************************************

СОЗДАЁМ БЕСШОВНЫЙ ФОН В GIMP (Урок от MANGIANA)

Открываем картинку из которой будем делать бесшовный фон, затем в настройках жмём на «Фильтры». В открывшемся окошке выбираем строчку «Карта», наводим на неё курсор и в появившемся подменю жмём на слово «Без швов».

Всё. Бесшовный фон готов. Остаётся лишь «Сохранить как».

А чтобы не спутать новую картинку с исходником, добавляем в конце кода закачки какой-нибудь символ. Я, например, обычно ставлю или единицу, или английское «А».

И ещё: при сохранении файла нажмите на плюс и самостоятельно выберите тип файла. Я в таких случаях выбираю формат JPEG image

*******************************************************

Делаем с помощью Paint эксклюзивный фон для шапки блога

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

Итак для начала прежде чем приступить к работе вы должны проделать подготовительную работу : загрузить к себе на компьютер различные фоны и картинки . Теперь выбираем картинку которую хотим видеть в фоне дневника поворачиваем картинку верх * ногами* как показано на картинке, и открываем её в Paint. Я выбрала вот такую картинку

Теперь:

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

Я выбрала черный фон под стать розочке  , ну а Вы выберете под стать своему вкусу…Самое интересное→ когда производиться вставка→ то Вставка подстраивается под ширину вашего экрана дело остаётся за малым..подобрать высоту фона ну тут  я определяю только на глаз где то 3-4 см(ну не разбираюсь я в этих пикселях). Должно получиться вот так

Hе забываем сохранить сделанные изменения и повернуть картинку в исходное положение→прямо . Всё фон для шапки дневника готов  !!! Ну а Вы друзья мои можете таким же способом вставлять до нескольких картинок чтобы Ваш фон для шапки был ещё красочнее вообщем всё зависит от вашей фантазии , Удачи Вам в украшательстве ваших Дневов

источник: интернет *

Создаем четкий, иллюстрированный бесшовный паттерн в Adobe Photoshop

Над чем сегодня работаем

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

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

Развивайте идею паттерна. Пусть это будет грубая черновая работа, она вовсе не должна быть красивой, так как лишь помогает вам задать «ритм». Можно сделать один крупный фрагмент или множество мелких, и потом скомпоновать их так, как захочется:

Как только эскиз станет хоть немного похожим на иллюстрацию, из него нужно будет создать фрагмент бесшовного паттерна. Если вы работали на бумаге, то отсканируйте рисунок при 300dpi.

Создайте новый Photoshop-документ достаточного размера. Я рекомендую использовать размер не менее 5000 на 5000 пикселей. При необходимости его всегда можно уменьшить, а вот увеличить изображение маленького размера без потери качества уже не получится:

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

Это легче всего сделать при помощи меню Изображение > Коррекция > Уровни (Image > Adjustments > Levels). Передвиньте левый ползунок внутрь окна, чтобы сделать черные элементы еще темнее, а затем передвиньте правый ползунок левее, чтобы сделать белые фрагменты еще светлее. Затем поэкспериментируйте со средним ползунком до тех пор, пока не найдете подходящий баланс.

Затем выделите белые фрагменты инструментом «Волшебная палочка» (Magic Wand) и нажмите Delete. Если вам не удалось добиться четкости на эскизе или хорошо отсканировать документ, то можно воспользоваться иллюстрацией для создания нового изображения на отдельном слое. Разместите слой с эскизом на самый верх в панели слоев, немного уменьшите уровень его непрозрачности. После этого продублируйте его кистью или другим инструментом на новом слое:

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

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

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

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

Когда фрагмент будет готов, сделайте копию слоя с шаблоном (Ctrl+J), и переместите копию в одну из сторон по прямой линии (для этого можно зажать клавишу Shift).

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

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

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

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

Помните, что нам важны только края контрольного слоя (слоя с копией), но если вам не хватает места для работы, можно увеличить размер холста через меню Изображение > Размер холста (Image > Canvas Size):

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

После этого этапа ваш бесшовный паттерн будет практически завершен. Снова удалите копию, и приступим к тестированию:

Скопируйте получившийся фрагмент в новый файл (Ctrl-A > Ctrl -C > Ctrl -N > Ctrl-V).

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

Активируйте инструмент «Прямоугольная область» (Rectangular Marquee Tool), и протяните квадрат, отступив примерно 1/5 от краев фрагмента.

Не снимайте выделение до тех пор, пока не останетесь довольны результатом (выбранным фрагментом). Можно воспользоваться стрелками на клавиатуре для точного перемещения выделенной области.

Снимите выделение (Ctrl-D), и проделайте то же самое с верхним и нижним краями. У нас получился красивый фрагмент мозаики:

Теперь выделите полностью весь фрагмент. Здесь нужно быть предельно точным, поэтому лучше воспользоваться направляющими (Guides). Затем перейдите в меню Редактирование > Определить узор (Edit > Define Pattern). Укажите название нового узора и затем сохраните его:

Создайте новый пустой файл, по размеру раза в три больше вашего паттерна, и залейте его только что созданным узором при помощи инструмента «Заливка» (Paint Bucket Tool), предварительно изменив стандартную опцию «Основной цвет» (Foreground) на «Узор» (Regular) с указанием нашего нового узора. Новые узоры всегда показываются в самом конце перечня. Теперь внимательно рассмотрите все «швы»:

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

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

Теперь пришло время раскрасить нашу иллюстрацию. Легче всего это делается при помощи «Наложения цвета» (Color Overlay).

Для каждого цвета, который вы хотите добавить, создайте новый слой, и выставите наложение необходимого цвета. Для этого можно нажать кнопку Fx в самом низу панели слоев, а затем выбрав «Наложение цвета» из меню. Работая таким образом, вы всегда будете видеть, с каким цветом имеете дело.

В узоре можно использовать сколько угодно цветов, но следует учесть, что если шаблон предназначается для печати, то лучше всего использовать не более 4-8 цветов.

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

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

Конечно, такой метод сработает только в том случае, если ваш узор состоит из цельных фигур, а не из контуров. Если вы работаете с контурами, как показано ниже, то можно для начала залить их (для создания копии слоя с контурами нажмите Ctrl-J). Это позволит создать заготовку, и затем использовать ее для нанесения цветов на другие элементы паттерна:

Теперь нужно проверить, не заходит ли фоновый цвет на передний план. Это просто исправляется: нужно выбрать фрагменты иллюстрации, вокруг которых виден небольшой контур базового цвета при помощи зажатия клавиши Ctrl на клавиатуре и клика левой кнопкой мыши по миниатюре этого изображения на нужном слое. Затем нужно перейти в меню Выделение > Модификация > Сжать (Select > Modify > Contract) и ввести значение 1, после чего нажимаем ОК.

Это сожмет все выделение на 1 пиксель. Теперь инвертируйте выделение (Ctrl-Shift-I), а затем нажмите «Удалить» (Delete). Это приведет к удалению контура толщиной в 1 пиксель по всему фрагменту:

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

Это легче всего делается при помощи направляющих. Установите одну горизонтальную и одну вертикальную направляющую рядом с краями документа. Если вы не видите линейки по краям рабочей области, то нужно включить их при помощи меню Просмотр > Линейки (View > Rulers).

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

Когда выберете нужный фрагмент, воспользуйтесь инструментом «Масштаб» (Zoom), и сильно увеличьте документ. Установите следующую направляющую точно по краю выделения.

Теперь повторите эту операцию с каждым слоем цвета, и выделение всегда установлено в нужном месте.

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

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

Стоит отметить, что если вы планируете загружать этот файл на какие-нибудь сервисы, или отдавать на печать, то его нужно будет сохранить в форматах PNG, JPG или TIFF, но я рекомендую вам всегда сохранять оригинальный PSD-документ. Этот документ уже готов к модификациям и экспорту в любые форматы.

Надеюсь, вам понравилось это руководство, и теперь вы умеете создавать собственные качественные бесшовные паттерны в Photoshop!

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

Сергей Бензенкоавтор-переводчик статьи «Create a Detailed, Illustrative, Seamless Pattern in Adobe Photoshop»

Сделайте бесшовный фон для плинтуса для веб-страниц за десять секунд 📀

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

Смещение изображения

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

Разрыв Photoshop. Если вы пользователь GIMP, вы можете установить фильтр Offset, аналогичный тому, который мы будем использовать, и следовать за нами вместе с нами.

«Сложная» работа может быть выполнена в одно мгновение с помощью этого «офсетного» фильтра. Найдите его, перейдя в Filter> Other> Offset, как показано.

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

Бесшовные грани с размытием

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

Выбрав этот слой, выполните Gaussian Blur, перейдя в Filter> Blur> Gaussian Blur. Используйте любую настройку, которая имеет смысл для вас.

Создайте затемненную маску слоя, нажав

+ Левая кнопка мыши на

значок на панели слоев.

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

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

Компонент Aware Blending для AMAZING Результаты

В таких ситуациях инструменты для понимания контента выглядят так, как будто они творят чудеса. «Spot Healing Brush» может быстро выполнить работу по удалению жестких, очевидных линий в черепице и дать вам гораздо более бесшовный вид. Когда вы выбираете Щит для исцеления пятен, убедитесь, что вы используете мягкую обрезную кисть.

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

Тестирование в браузере

Сохраните изображение на рабочий стол, как repeat.jpg, затем загрузите этот файл на рабочий стол и откройте его в своем браузере по своему усмотрению. Это будет загружать все, что вы создали, в качестве повторяющегося фона, так же, как вы увидите его на удаленной веб-странице. Если вы знаете HTML (многие из вас, я уверен), вы можете отредактировать этот файл в блокноте, чтобы использовать другое имя файла, если хотите.

---

Мысли или критика по нашему методу сегодня? Есть некоторые трюки, которые работают даже лучше, чем это? Расскажите нам об этом в комментариях или просто напишите нам свои вопросы на странице [email protected], и мы можем показать их в будущей графической статье How To Geek.

Изображения Кредиты: Стена Книг benuski, Creative Commons.

Смещение изображения

Бесшовные грани с размытием

Компонент Aware Blending для AMAZING Результаты

Тестирование в браузере

Tweet

Share

Link

Plus

Send

Send

Pin

Как создать бесшовный узор в Adobe Illustrator

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

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

ПРЕДПРОСМОТР | СКАЧАТЬ

---

Illustrator — чрезвычайно мощный и интуитивно понятный инструмент для создания бесшовных узоров. Все, что вам нужно, это базовые навыки использования этой программы и зачатки художественного вкуса. Весь процесс занимает от 5 до 30 минут, а результат в большинстве случаев выглядит профессионально (Illustrator позаботится о технической стороне, оставив вам только художественную).

---

Создание базовых элементов

Откройте Illustrator и создайте новый документ.Мы пойдем. Имейте в виду, что если вы планируете распечатывать свои шаблоны, было бы разумно выбрать цветовой режим CMYK .

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

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

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

---

Построить выкройку

Теперь создадим бесшовный узор.

• Выберите все объекты, которые вы хотите включить;
• Перейти к объекту – Образец – Изготовить.

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

---

---

---

Окончательная регулировка

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

Раскрась их по своему вкусу.

Ваш шаблон готов. Вы можете получить к нему доступ, отредактировать и применить в любое время, щелкнув панель Swatches в правой части окна Adobe Illustrator.

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

---

Шаблон Создателя Мандалы Сакральной Геометрии

Скачать

---

Бесшовный узор Terazzo Natura

Скачать

---

Мороженое Doodle Бесшовный узор

Скачать

---

Спортивная графика Doodles бесшовный узор

Скачать

---

Cinema Graphics Doodles бесшовный узор

Скачать

---

Космическая графика Doodles бесшовный узор

Скачать

---

Летняя графика водных видов спорта Doodles Seamless Pattern

Скачать

---

300 бесшовных узоров, которые сделают всю работу за вас — всего 25 долларов

---

Подведение итогов

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

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

---

Не пропустите эти фавориты всех времен

1. Лучший хостинг для сайта WordPress. Нажмите на нашу ссылку, чтобы получить лучшую цену на рынке со скидкой 30%. Если Bluehost вас не впечатлил, попробуйте другие альтернативы.
2. Услуга по установке веб-сайта — чтобы ваш шаблон заработал всего за 6 часов без лишних хлопот. Ни минуты не теряется, работа идет.
3. ONE Membership — для загрузки неограниченного количества тем WordPress, плагинов, ppt и других продуктов в рамках одной лицензии. Так как больше всегда лучше.
Услуга «Готовый к использованию веб-сайт
4. » — это идеальное решение, которое включает в себя полную установку и настройку шаблона, интеграцию контента, внедрение обязательных плагинов, функции безопасности и расширенную SEO-оптимизацию на странице. Всю работу за вас сделает команда разработчиков.
5. обязательных плагинов WordPress — чтобы получить самые необходимые плагины для вашего сайта в одном комплекте. Все плагины будут установлены, активированы и проверены на работоспособность.
6. лучших стоковых изображений для веб-сайтов — для создания потрясающих визуальных эффектов. Вы получите доступ к Depositphotos.com, чтобы выбрать 15 изображений с неограниченным выбором темы и размера.
Услуга создания SSL-сертификата
7. — чтобы завоевать абсолютное доверие посетителей вашего сайта. Сертификат Comodo — это самый надежный https-протокол, обеспечивающий безопасность данных пользователей от кибератак.
8. Служба оптимизации скорости веб-сайта — чтобы улучшить UX вашего сайта и получить лучший показатель Google PageSpeed.

500+ бесплатных фоновых шаблонов и генераторов бесшовных шаблонов для веб-сайтов

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

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

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

Содержание :

Сайты с бесплатными шаблонами

Найдите ниже некоторые из лучших и бесплатных повторяющихся фонов для веб-сайтов. Эти шаблоны можно легко использовать в качестве фона веб-сайта с помощью CSS и HTML. Некоторые из этих фоновых узоров доступны в виде изображений PNG/JPG, а некоторые из них представляют собой изображения SVG, обеспечивающие лучшую масштабируемость. Бесшовные шаблоны на основе градиента CSS3 также возможны и включены ниже:

Тонкие узоры

Subtle Patterns — одно из самых популярных мест для поиска более 400 повторяющихся узоров и текстур, которые можно использовать в качестве фона веб-сайта.Тонкие узорчатые фоны идеально подходят для добавления небольшого намека на узоры на заднем плане, не отвлекая слишком много внимания от основного содержимого. Узоры можно загрузить в формате PNG и совершенно бесплатно использовать в веб-проектах или в печати.

Шаблоны героев

Hero Patterns создан Стивом Шогером и предлагает набор повторяющихся фоновых шаблонов SVG, которые вы можете использовать в своих веб-проектах. Эти бесплатные шаблоны SVG можно легко настроить, изменив цвет переднего плана или фона в соответствии с цветовой темой вашего веб-сайта.

Библиотека шаблонов

Библиотека шаблонов — это проект, в котором собраны шаблоны, которыми поделились талантливые дизайнеры. Вы можете бесплатно скачать и использовать эти шаблоны в своих веб-проектах.

Фоны SVG

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

Галерея шаблонов CSS3

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

Галерея шаблонов SVG

Вдохновленный галереей шаблонов CSS3, этот веб-сайт предлагает 21 бесплатный шаблон SVG. В отличие от градиентов CSS3, изображения SVG поддерживаются в IE9, поэтому эти шаблоны будут работать и в более старых версиях IE. Вы можете получить полный код, включая SVG и CSS для этих фонов, на веб-сайте.

Шаблоны CSS MagicPattern

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

Узоры ColorLovers

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

Охладитель модели

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

Freepik шаблон векторов

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

Фоновые лаборатории

Background Labs содержит фоны и бесшовные узоры, доступные для бесплатной загрузки.Узоры доступны в виде файлов Illustrator (AI), а также в виде изображений PNG.

ДинШаблон

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

Генераторы фоновых рисунков веб-сайтов

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

PatternNinja

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

Генератор векторных шаблонов

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

Генератор рисунков Doodad

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

Шаблонная подушка

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

Шаблонизатор

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

Паттернико

Patternico позволяет создавать бесшовные шаблоны с использованием значков Font Awesome, а также значков линий.Вы даже можете создавать бесшовные шаблоны с помощью Emoji с помощью этого бесплатного веб-инструмента.

Бесплатные наборы шаблонов

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

Бесшовные джинсовые модели

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

Бесшовный текстурированный лимонный узор

Бесплатный файл шаблона Photoshop с плоским рисунком, таким как лимоны, ломтики лимона, цветы и листья.

Красочный рождественский узор

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

Бесплатные геометрические узоры

Этот набор геометрических узоров содержит 20 фрагментов узоров в формате PNG.

Шаблоны премиум-класса

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

Шаблоны креативного рынка

Creative Market предлагает множество профессионально созданных комплектов бесшовных узоров по привлекательным ценам. Вы можете просмотреть и узнать больше об этих пакетах на их веб-сайте.

Шаблоны GraphicRiver

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

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

Связанные

Как создать бесшовный фоновый узор в Photoshop

Бесшовные узоры

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

Что вам понадобится для выполнения миссии

1. Adobe Photoshop. Если вы наткнулись на этот учебник, велика вероятность, что у вас уже есть эта программа. Однако на всякий случай вот ссылка для скачивания бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение, содержащее множество значков и хорошо работающее с Photoshop.
3. Иконки или другие изображения, которые вы хотите использовать в своей выкройке. Для этого урока мы использовали наши значки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать для шаблона.

8 шагов по созданию узора в Photoshop

1. Сделайте основу для выкройки

Создайте новый файл любого размера с одинаковой шириной и высотой. В нашем случае каждая сторона равна 200px.

2. Добавьте значки

Перетащите значки из Icons8 для рабочего стола (или любые другие значки) в файл Photoshop.Мы выбрали краба, рыбу, рыбу-клоуна и морского конька.
Если вы используете монохромные значки, вам могут понадобиться разные цвета. Вот как можно перекрасить иконки PNG в Photoshop.

3. Разместите каждую иконку на отдельном слое

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

В итоге должно получиться так:

Теперь каждая иконка находится на отдельном слое в вашем файле.

4. Настройте первый слой

Выберите один слой на панели слоев и перейдите к Filter > Other > Offset :

Установите параметры Horizontal и Vertical равными половине длины стороны файла. Помните ширину и высоту вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла 200x200px, поэтому мы устанавливаем 100px для обоих параметров. Убедитесь, что вы отметили опцию Wrap Around в нижней части всплывающего окна.Нажмите «ОК». Первый слой готов:

5. Настройте второй уровень

Выберите другой слой на панели слоев. Теперь снова перейдите к Filter > Other > Offset .

Затем установите Horizontal на 0px и нажмите OK:

6.

Настройка третьего уровня

Выберите еще один слой и перейдите к Filter > Other > Offset . Теперь переверните значения по горизонтали и по вертикали . Для нашего случая по горизонтали будет 100px, а по вертикали 0px.Нажмите «ОК».

Теперь плитка с узором готова.

7. Объединить слои

Выберите все слои, кроме Background на панели слоев и используйте комбинацию горячих клавиш Ctrl+E . Выбранные слои будут объединены.

8. Создайте свой узор

Сначала используйте еще одну комбинацию горячих клавиш Ctrl+A (выбрать все).

Затем перейдите к Edit > Define Pattern :

Назовите его и нажмите OK.Та-да! Ваш узор готов!

Как применить шаблон

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

1. Создайте новый файл

Чтобы увидеть результат, увеличьте его размер. У нас 800x600px.

2. Выберите наложение узора

Дважды щелкните фон на панели слоев. Нажмите OK во всплывающем окне.

Перейдите к Слой > Стиль слоя > Наложение узора :

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

3. Наслаждайтесь своей выкройкой!

Исходники с текстурами для Photoshop

Дальнейшее чтение

Попробуйте бесплатные инструменты для авторов от команды Icons8

Photo Creator , бесплатное средство для создания коллажей с технологиями на основе искусственного интеллекта для создания пользовательских фотографий для вашей истории Pichon , настольное приложение для загрузки значков и картинок и их использования в автономном режиме

программное обеспечение для редактирования фотографий.

 

Как создать бесшовный узор

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

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

Начните с создания пользовательского размера документа на экране приветствия Gravit Designer. Легче создать плитку узора, используя идеально квадратный размер холста, поэтому давайте возьмем 400x400px . Заполните настраиваемые поля в верхней части экрана приветствия и нажмите « Создать! ».

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

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

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

После размещения элементов вам потребуются их копии на противоположных сторонах для создания повторяющегося узора. Выделите все элементы и нажмите Ctrl+C – Ctrl+V или перейдите в меню Edit > Copy и затем Edit > Paste .

Для каждой копии элементов, размещенных на левом краю, вам нужно добавить 400 пикселей (ширина вашего холста) по оси X, используя поля «Позиция» на панели «Инспектор».

Для элементов, расположенных на верхнем краю, вы сделаете то же самое, но добавите 400 пикселей по оси Y в поле «Позиция».

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

Вы также можете определить цвет фона, используя Color Picker на панели Inspector. Давайте используем цвет #FBF5D8 для этого урока.

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

Теперь вы можете экспортировать файл, чтобы получить окончательное изображение, которое можно использовать в качестве шаблона.Перейдите в меню Файл > Экспорт > Изображение PNG (.png) .

Совет. Если вы используете Gravit PRO, используйте Advanced Export для экспорта с разрешением 300 dpi.

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

После размещения изображения скопируйте его и выберите «Заливка текстурой» в палитре цветов для цвета фона.

При выбранной текстурной заливке и скопированном изображении нажмите «Вставить» в настройках «Заливка», чтобы использовать скопированное изображение в качестве текстуры.

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

Аналогичную технику можно использовать для создания других типов узоров, например геометрических.

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

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

Выберите инструмент Прямоугольник (R) и создайте прямоугольник, ориентируясь на вершины кубов. Как и раньше с другим узором, половинки фигур на краю прямоугольника должны совпадать друг с другом.

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

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

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

Более 10 онлайн-конструкторов фоновых узоров

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

Создание шаблона

Стриптиз

StripeMania — это простой и бесплатный инструмент Web 2.0 для создания бесшовных диагональных полос для ваших дизайнов. Вы можете выбрать размер полос и расстояние между ними. Вы даже можете добавить эффект цветового градиента для всех ваших полос.

Программное обеспечение для создания бесшовных шаблонов ColourLovers

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

Охладитель шаблонов

Добавьте свои собственные цвета к сотням крутых БЕСПЛАТНЫХ рисунков или просмотрите из 10 000 предварительно раскрашенных узоров с помощью нового редактора бесшовных фоновых рисунков. Все изображения на этом сайте можно свободно использовать для фонов Blogger и Twitter, веб-проектов и проектов графического дизайна, а также веб-сайтов.

Шаблонизатор

С Patternizer легко сделать что-то удивительное всего за несколько минут. Он берет на себя всю работу по созданию сложных узоров, позволяя вам сосредоточиться на творчестве и игре.

BGPatterns

BgPatterns — крошечное веб-приложение для создания фоновых узоров в несколько кликов.

источник

Средство для создания точечного фона Pixelknete

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

источник

Дзен БГ

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

Генератор полос

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

Генератор фоновых изображений SiteOrigin

Генератор шумовых текстур

Изготовитель тартана

BGMaker

Полосатый фон

secretGeek’s Gradient Maker

Создание бесшовных веб-фоновых текстур за считанные минуты

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

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

Легкий путь или трудный путь

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

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

Потеряно и взято

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

Король текстур

Если вы хотите что-то более уникальное, откройте Photoshop и следуйте инструкциям.

Шаг 1: Новый холст

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

В Photoshop создайте новый документ размером 800 на 800 пикселей с разрешением 72 DPI и RGB.

Теперь залейте холст сплошным цветом от среднего до темного. Вы можете выбрать что угодно, но я выбрал #80ac4b.

Шаг 2. Создайте пользовательскую кисть

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

Для начала создайте новый документ, возьмите жесткую круглую кисть и щелкните один раз в центре холста, чтобы получилась черная точка. Я придал своему снимку легкое черное внешнее свечение, чтобы немного добавить эффект боке. Теперь перейдите в Edit>Define Brush Preset.

Назовите свою кисть, сохраните ее и вернитесь к другому холсту.

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

Шаг 3: Раскрась

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

Вот шаблон, который я придумал:

Шаг 4: Смещение

Это та часть, где Photoshop берет верх и делает ловкий трюк, который экономит нам много времени. Сначала убедитесь, что ваши слои объединены в плоский документ.Теперь перейдите в меню и выберите «Фильтр»> «Другое»> «Смещение».

Установите смещение по горизонтали и вертикали равным половине размера холста в пикселях и выберите параметр обтекания.

Вуаля! Бесшовная текстура фона. Хорошо, может быть, нет. Тем не менее, большая часть работы была сделана за нас, и нам просто нужно немного почистить, чтобы все заработало.

Шаг 5. Зачистка швов

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

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

Шаг 6. Добавляем боке

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

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

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

Шаг 7. Добавьте его на веб-страницу

Лучший способ протестировать текстуру — просто создать быструю веб-страницу. Создайте пустой HTML-документ и настройте тело с помощью следующего CSS:

.

body { background-image: url(yourFilenameHere.jpg); фоновый повтор: повтор; }

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

Органические текстуры

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

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

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

Когда вы это сделаете, сохраните его и загрузите в браузере, как и раньше, чтобы увидеть, есть ли у вас некрасивые области.

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

Заключение

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

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

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

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

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

Узоры Галереи:

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

• Norform — инструмент для генеративного проектирования на основе сетки

  Norform — это инструмент для создания векторных узоров, вдохновленный модернистским и швейцарским дизайном.

• Паттерны

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

• SVGeez — Фоновые узоры

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

• ДинШаблон

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

• Узоры Луни

  Простые в использовании, бесплатные бесшовные векторные шаблоны, нарисованные вручную.

• Фоны SVG

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

• Крутые фоны

  Коллекция шаблонов, графики и изображений для вашего фона, которые вы можете настроить, изменив цвет.

Генераторы шаблонов:

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

• Волшебный узор

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

• Паттернико

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

• Шаблонная подушка

  Генератор шаблонов. Выберите шаблон из их библиотеки и настройте его или создайте свой собственный с другими формами.

• Полосатый рисунок

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

• Шаблон иконок — Flaticon

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

• Trianglify — Генератор низкополигональных моделей

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

• Устройство для изготовления выкройки реппера

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

• Генератор шаблонов Adobe Creative Cloud

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

Примеры веб-сайтов с шаблонами:

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

.