Онлайн сделать бесшовный фон: Сделать бесшовную текстуру онлайн — IMG online

Создание бесшовной заливки 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

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

Шаг 2

Используйте инструмент Dodge (осветление) для осветления тёмных областей.

Вот наш фрагмент.

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

Выберите инструмент Dodge (O) и большой мягкой кистью немного пройдитесь возле левого и правого краёв, чтобы немного осветлить тень. Не переборщите, иначе трава будет выглядеть слишком размытой.

Шаг 3

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

Patch (Заплатка) (J) и обведите вокруг листа мышкой, захватите эту область и перетащите. (Обратите внимание: инструмент Patch должен быть установлен на Source (Источник), а не на Destination (Назначение),

иначе разница будет несущественная).

Шаг 4

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

Шаг 5

Я оставил промежуток в 1 px, чтобы вы могли увидеть, как соединяются края.

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

Шаг 9

Теперь мы готовы к мощению!

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

Шаг 10

Нажмите CTRL+A , чтобы выделить всё и выберите Edit > Define Pattern.

Шаг 11

Дадим паттерну имя.

Шаг 12

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

Конечно, вы должны также сохранить изображение паттерна как PSD или JPG, т. к. вам может понадобиться использовать отдельное изображение. Например, если вы будете использовать его как фоновую картинку в HTML-документе, вам понадобится отдельная картинка в формате JPG image, а не «Pattern» для Фотошопа.

Готово!

Вот и наша мощёная травка.

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

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

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

Создаем документ 4500х4500 пикселей, с разрешением 300.

Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).

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

Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.

Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.

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

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

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

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

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

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон — калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)

2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)

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

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

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

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

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

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

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

И получаем результат:

Урок №2 .

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

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

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

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

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

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

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

2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

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

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

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

4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

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

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя —

С основным слоем —

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным —

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон — калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

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

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

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

Подготовительные работы закончены.

5. Начнем «склеивать» фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

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

Приятного вам творчества !

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

Лучшее «спасибо» за урок — ваш комментарий! 🙂

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

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

Регистрация и оплата не требуются. Хотя предлагают пожертвовать если вам этого хочется. Сейчас я покажу вам как тут можно работать. Переходим по ссылочке https://patterncooler.com/ . Выбираем и кликаем по нему левой кнопкой мыши

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

Если же мы хотим выбрать случайные цвета, то жмём на чикбокс Случайные

Чтобы отредактировать цвет, жмём на него либо на экране, либо на квадратики внизу

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

Изображению можно задать текстуру, для это кликаем на кнопку textur

И выбираем подходящую

А ещё здесь же можно изменить масштаб элементов дизайна (обведено зелёным)

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

Если мы всё сделали так, как нам нужно, то нажимаем на кнопку Скачать

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

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

Бесшовные фоны как сделать online.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Топ сайтов с бесплатными бесшовными фонами

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

1. “toptal.com/designers/subtlepatterns/”

Здесь представлены более 400 бесшовных узорчатых фонов для сайта в формате PNG.

Для чего нужна email рассылка?
1. Проинформировать подписчика с помощью рассылки о появлении новых товаров, услуг, обучающих программ, публикаций на сайте.
2. Наладить обратную связь с клиентом посредством «живого» общения.
3. Сформировать целевую аудиторию, так как ваш Интернет-ресурс будут посещать только заинтересованные пользователи.
4. Ненавязчиво прорекламировать рассылкой свой товар или услугу.
5. Увеличить объем продаж.
6. Повысить количество повторных и предварительных заказов.

Минимальные затраты на подобную рекламу (email рассылку), позволят Вам ощутить отклик, который можно сравнить лишь с рекламной по радио или ТВ!

Хотите узнать какова цена email рассылки от качественного и проверенного сервиса, тогда заходите на fast-mail.ru. Более 13 лет работы в сфере email рассылок!

2. “heropatterns.com/”

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

3. “thepatternlibrary.com/”

Этот проект собрал для Вас шаблоны талантливых дизайнеров.

4. “svgbackgrounds.com/”

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

5. “lea.verou.me/css3patterns/”

Проект CSS3 Patterns Gallery использует градиенты для создания фоновых шаблонов. На сайте есть 41 бесплатный CSS3 паттерн и Вы можете легко получить соответствующий код CSS для них.

6. “philiprogers.com/svgpatterns/”

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

7. “colourlovers.com/patterns”

ColorLovers является популярным ресурсом для поиска цветовых схем для сайта.
Но он также предлагает галерею бесплатных бесшовных шаблонов.

8. “patterncooler.com/”

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

9. “freepik.com/free-photos-vectors/patterns”

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

10. “backgroundlabs.com/”

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

11. “dinpattern.com/”

DinPattern также предлагает большое количество бесплатных бесшовных шаблонов.

Генераторы фона:

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

1. “bgpatterns.com/”

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

2. “patterninja.com/”

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

3. “patternizer.com/”

Patternizer – ещё один онлайн-инструмент, который облегчит Вам создание собственного паттерна. Выберите цвет, угол поворота, прозрачность, ширину, глубину и смещение, чтобы создать свой собственный узор.

4. “patternico.com/”

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

Бесшовный фон двумя способами. Как сделать бесшовный фон

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

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop»е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка , но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

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

Убираем стыки на будущем бесшовном фоне

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

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

У меня получилось вот так:

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

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон — калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File — Open…» — «Файл — Открыть…»)

2. Создаем новый чистый документ («File — New…» — «Файл — Новый документ…»)

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

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

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

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image — Rotate canvas — Vertical (Изображение — Повернуть — Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

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

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение — Повернуть — Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

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

И получаем результат:

Урок №2 .

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

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File — open… (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

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

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду «Edit — Free transform (Редактировать — свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

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

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть — кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом «Crop tool» (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

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

2. Установите направляющие линии View — Rulers (Просмотр — Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр — Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

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

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

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

4. Копируем выделение на отдельный слой, нажимая на клавиатуре «ctrl + j»

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

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

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя —

С основным слоем —

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным —

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон — калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

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

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

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

Подготовительные работы закончены.

5. Начнем «склеивать» фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем «бантик»:

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию «бантика» на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

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

Приятного вам творчества !

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

Лучшее «спасибо» за урок — ваш комментарий! 🙂

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

Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать?

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

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

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

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

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

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

Как вы можете видеть на рисунке выше такую текстуру не стоит использовать для затайливания ландшафта или любого другого 3D объекта, да и просто для заливка фона сайта или холста в Фотошопе. И для создания паттерна для Фотошопа она не подойдет. Чтобы наложить текстуру на 3D модели без стыков (или залить фон сайта или холста), заметных пользователю, необходимо воспользоваться инструментами редакторов изображений.

Как сделать бесшовную текстуру в Фотошопе. Подготовка изображения в Фотошопе

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

На рисунке показана текстура кирпича, которая будет превращена в бесшовную текстуру.

Если вы не нашли текстуру размером 512 на 512 пикселей (1024 х 1024, 2048 х 2048 или 4048 х 4048 пикселей), а нашли, например, текстуру размером 1300 на 700, то обрежьте изображение в Фотошопе до размера в 512 х 512 пикселей при помощи инструмента Рамки/Crop (в панели инструментов слева) или использовав инструмент изменения размера холста «Canvas Size», который вы можете найти во вкладке «Image» главного меню.

На рисунке показаны инструменты, позволяющие обрезать изображение Canvas Size (A) и Crop (B).

Также вы можете использовать инструмент свободного трансформирования (Ctrl + T ) либо инструмент Scale , который вы найдете в меню Transform вкладки Edit главного меню.

На рисунке показан инструмент Scale для изменения масштаба изображения (в данном случае, подгонки изображения) в Photoshop.

Если вы применяли инструмент масштабирования или перемещения текстуры, необходимо выделить все видимое изображение на холсте (Ctrl + A ) и скопировать его на новый слой (Ctrl + C и затем Ctrl + V ). Если этого не сделать, то выступающее за холст изображение нам помешает. Альтернативой копипасту может послужить упоминавшийся ранее инструмент обрезки изображения Crop. Далее мы будем работать с новым созданным слоем: выделите его в панели справа, щелкнув на нем Левой Кнопкой Мыши.

Смещаем изображение в Фотошопе, используя фильтр Смещение («Offset»)

Итак, как сделать бесшовную текстуру в Фотошопе… Фотошоп предоставляет вам отличный инструмент, который подойдет для создания бесшовной текстуры. Данный инструмент представляет собой фильтр в Фотошоп и называется Смещение или «Offset «. Я уже рассказывал про смещение текстур на поверхности 3D моделей (а на самом деле в uv пространстве), в частности, использующихся в компьютерных играх, в статье . Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.

Чтобы сместить изображение текстуры, выберите вкладку фильтров «Filter » в главном меню и в открывшемся выпадающем меню выберите вкладку «Other «, в которой, в свою очередь, выберите вкладку «Offset …».

На рисунке показано окно настроек фильтра Смещения («Offset»).

В окне фильтра «Смещение » выставьте значение для смещения по горизонтали равным 256 пикселям (Horizontal 256 pixels right ) и смещение по вертикали равным также 256 пикселям (Vertical 256 pixels down ), чтобы сместить изображение текстуры на 256 пикселей по горизонтали и вертикали. Нажмите кнопку «OK «, чтобы применить фильтр и сместить текстуру. Как вы можете видеть (и себя на холсте или на рисунке выше) в центре изображения появились швы, поскольку края изображения не совпадают друг с другом.
Для текстуры 1024 на 1024 смещение по вертикали и горизонтали можно выставить в 512 пикселей, для 2048 – 1024 пикселей, хотя и не обязательно.
Данные значения смещения служат лишь рекомендательными и могут для изображения 512 на 512 пикселей (а также для 1024х1024, 2048×2048) составлять 128 пикселей, 256 пикселей и так далее.

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

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

Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении

Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп » («Clone Stamp Tool «), иногда еще называемый кистью клонирования или клонирующей кистью.

На рисунке показан инструмент Штамп в Фотошопе.

Инструмент «Штамп » в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.

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

На рисунке показана результирующая бесшовная текстура кирпичной кладки.

А вот так выглядит получившаяся текстура в Unity3D.

На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.

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

Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool

Возвращаем текстуру на место

Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в , поскольку оставляет по краям затайленной 3D модели половинки текстур.

Проверка бесшовности текстуры и коррекция швов текстуры

Чтобы проверить, насколько «бесшовной» получилась ваша текстура, вы можете, если сместить текстуру не на 256 пикселей по вертикали и горизонтали, а например на +128 и +128 пикселей, или на -128 и +128 пикселей, или на +128 и 0 пикселей и так далее. Только не забывайте (а лучше записывайте) на сколько пикселей и в какую сторону каждый раз смещали текстуру, чтобы иметь возможность вернуть ей изначальное нулевое смещение. Если подобное смещение выявило нарушение бесшовности, то подредактируйте стыки текстур, как было описано выше, чтобы избавиться от швов на текстуре (смещенной). Не забывайте, что не стоит залезать на края изображения, чтобы опять не пришлось править несовпадения краев текстур.

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

Используем инструмент Осветлитель (Dodge Tool) и Затемнитель (Burn Tool) для осветления изображения в Фотошопе

Если текстура неоднородно освещена, то при затайливании текстуры, например, в игровом движке Unity3d, Unreal Engine, Amazon Lumberyard, Cryengine и других, или в 3D редакторах 3ds MAX, Cinema4D, Blender и т.д., такие затенения образуют повторяющийся узор. На небольших расстояниях камеры или точки наблюдения такой эффект не особо заметен. Чем больше камера будет удаляться от поверхности с такой затайленной текстурой, тем сильнее будет заметен эффект паттерна.

Чтобы избежать подобного эффекта, необходимо, чтобы все участки текстуры были одинаково осветлены/затемнены. Для осветления текстуры (отдельных ее участков) вы можете воспользоваться инструментом «Dodge Tool «, работа с которым более подробно описана в ///уроке про осветление карты высот для создания ландшафта.

На рисунке показаны инструменты осветления и затемнения изображения Dodge Tool и Burn Tool.

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

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

Получившуюся бесшовную текстуру можно использовать для раскрашивания ландшафтов или 3D моделей в Unity3d.

На рисунке показан 3D ландшафт, созданный в Unity3D в одном из уроков по созданию террейнов в Unity3D.

Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.

На рисунке показан процесс создания паттерна для Фотошопа из изображения.

В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.

[email protected]

Post Views: 31 327

Отличный урок от 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) можно добавить новый узор и использовать его для заливки фона.

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

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

Создаем документ 4500х4500 пикселей, с разрешением 300.

Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).

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

Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в «Reference point location». Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.

Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.

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

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

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

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

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

20 генераторов паттернов и цветовых схем

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

SUBTLE PATTERNS

Бесплатный сервис Subtle Patterns позволяет бесплатно выбрать для своего проекта множество качественных паттернов, созданных профессиональными дизайнеры. Коллекция, представленная на сайте toptal.com является одной из самых больших в сети, на данный момент в ней более 400 узоров и список постоянно пополняется. Некоторые из фоновых изображений можно скачать не только в графическом формате, но и создать фон с помощью CSS.

PATTERNINJA

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

PATTERN COOLER

Инструмент Pattern Cooler предназначен для создания бесшовных фоновых изображений. Возможности данного веб-сервиса очень велики, с его помощью можно создать тысячи уникальных фонов. Каждое изображение можно редактировать, менять цвет и характер узоров, добиваясь идеального сочетания фона и других элементов дизайна. С помощью Pattern Cooler можно быстро создать красивый фон для Twitter, Tumblr или блога на WordPress. Бесшовные паттерны небольшого размера можно скачать бесплатно, если же требуются большие фоны для использования в коммерческих проектах, придется оплатить подписку.

PATTERNIZER

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

NOISE TEXTURE GENERATOR

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

TARTAN MAKER

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

 

STRIPED BACKGROUNDS

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

 

PATTERNIFY

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

 

TRIANGLIFY GENERATOR

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

 

SEAMLESS BACKGROUND GENERATOR

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

Генераторы цветовых схем

 

DESIGNSPIRATION

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

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

 

COLOR PALETTE GENERATOR BY CANVA

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

 

COLRD

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

 

COLOR HUNTER

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

 

PALETTON

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

 

PICTACUOLOUS

Несложный в использовании инструмент Pictacuolous позволяет создать цветовую схему на основе загруженного изображения. От других подобных сервисов данный инструмент отличается тем, что позволяет загружать цветовую палитру как файл Adobe Swatch, который затем можно использовать в графических редакторах Photoshop и Illustrator.

 

FLAT COLORS PALETTES

На сайте Flat Colors Palette можно найти огромное количество цветовых схем, которые идеально подойдут для проектов, созданных в стиле Flat. Всего представлено свыше 2000 готовых цветовых палитр, которые можно скачать в формате Adobe.ACO. Очень удобный сайт для быстрого поиска гармоничной цветовой схемы.

 

PALETTE GENERATOR

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

BIG HUGE LABS

Генератор цветовых схем Big Huge Labs автоматически создает цветовые схемы на основе загруженных фотографий. Для удобства пользователей в данном инструменте реализована возможность импорта понравившихся изображений из Facebook, Instagram, Flickr и Dropbox. Очень удобный сервис для быстрого создания красивых цветовых палитр.

 

COHESIVE COLORS

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

Источник

Статьи по теме

Узнать больше интересного:

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка…

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

Как сделать прозрачный фон у картинки в Pixlr . Обсуждение …

Как сделать прозрачный фон онлайн?

Как сделать прозрачный фон у картинки в Pixlr . Обсуждение …

Как сделать прозрачный фон в (фотошопе онлайн?)

Сделать прозрачный фон онлайн \u2014 Rusadmin

Онлайн редактор. Как сделать прозрачный фон (формат png)

Сделать У Картинки Прозрачный Фон Онлайн

Как сделать прозрачный фон онлайн? — Совместные покупки …

Как У Картинки Сделать Прозрачный Фон Онлайн

как из картинки сделать прозрачный png

Как сделать прозрачный фон онлайн?

Как убрать белый фон с картинки онлайн

Как сделать хороший фон на фотографиях товаров, не используя …

Как убрать белый фон с картинки онлайн

Как размыть задний фон на фото онлайн

Photoshop Online Как сделать размытый фон

Сделать разноцветный размытый фон онлайн — IMG online

Сделать разноцветный размытый фон онлайн — IMG online

Сделать У Картинки Прозрачный Фон Онлайн

Как сделать БЕЛЫЙ ФОН на фото в Avatan и Фотошоп онлайн

Фото Фон Онлайн

Сделать случайный пиксельный фон из разноцветных квадратов …

Как Сделать Прозрачный Фон У Картинки Онлайн.

Как убрать белый фон с картинки онлайн

Создание прозрачного изображения онлайн. Как в фотошопе …

Как сделать белый или прозрачный фон онлайн

Как сделать прозрачный фон у картинки онлайн

красивые-надписи-с-прозрачным-фоном-онлайн

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

Сделать На Фото Черный Фон Онлайн

Как размыть фон онлайн любой фотографии? — DelPC.ru

Сделать разноцветный размытый фон онлайн — IMG online

Сделать случайный пиксельный фон из разноцветных квадратов …

Создать и скачать картинку с прозрачным фоном онлайн \u2014 Canva

Сделать случайный пиксельный фон из разноцветных квадратов …

Как сделать БЕЛЫЙ ФОН на фото. Осветление серого фона на …

Фотошоп онлайн экспресс — фильтры инстаграм и надписи для фото!

Сделать На Фото Черный Фон Онлайн

Сделать Картинку Без Фона Онлайн

Фото На Белый Фон

Сделать У Картинки Прозрачный Фон Онлайн

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

Онлайн Сделать Фон На Фото Белым

Сделать разноцветный размытый фон онлайн — IMG online

Как Сделать У Картинки Прозрачный Фон Фотошоп

Добавить Фото На Фон. Онлайн

Онлайн Сделать Фон На Фото Белым

Как заменить фон в «Фотошопе»

Онлайн Сделать Картинку Без Фона

Сделать На Фото Черный Фон Онлайн

Как сделать прозрачный фон онлайн?

графические паттерны для сайта создать

Сделать Онлайн Прозрачный Фон У Картинки

Бесшовный фон. Как сделать онлайн.

Сделать разноцветный размытый фон онлайн — IMG online

Обрезать фон онлайн \u2013 Remove Background from Image \u2013 remove.bg

Как сделать фон для сайта и как его поменять

Фотошоп онлайн — фоторедактор 2019!

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

Сделать На Фото Черный Фон Онлайн

Как Сделать У Картинки Прозрачный Фон Фотошоп

как из картинки сделать прозрачный png

Сделать Картинку Без Фона Онлайн

Как сделать прозрачный фон на картинке. Фотошоп онлайн

Услуга: Поменять фон фотографии онлайн , замена фона на …

Сделать прозрачный фон онлайн \u2014 Rusadmin

Урок: Как сделать клипарт или картинку без фона? — Модные …

Как сделать прозрачный фон у картинки онлайн

Как сделать фон на фото в фотошопе или онлайн самому?

Редактор Фона Фотографий Онлайн

Сделать Деньги Онлайн Концепции Цифровой Двоичные Данные …

Как сделать фон картинки прозрачным | Revate.ru

Картинки Прозрачный Фон Онлайн

🥇 ▷ Как изменить цвет фона изображения на белый с помощью …

Сделать Свадебный Фон Онлайн | Сделать Свадебный Фон Онлайн …

Онлайн Программа Для Замены Фона На Фотографиях

фш-фон-онлайн

Сделать разноцветный размытый фон онлайн — IMG online

Как Сделать Белый Или Прозрачный Фон Онлайн — Скачать mp3 …

Размытие заднего фона на фото онлайн бесплатно (фоторедактор …

Как сделать прозрачный фон у картинки онлайн. | Обрети …

Сделать На Фото Черный Фон Онлайн

🥇 ▷ Как изменить цвет фона изображения на белый с помощью …

Сделать Свадебный Фон Онлайн | Сделать Свадебный Фон Онлайн …

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

Услуга: Поменять фон фотографии онлайн , замена фона на …

Как Сделать Черный Фон На Фото Онлайн

Фото Онлайн Размытие

Картинки Прозрачный Фон Онлайн

Как На Фотке Сделать Другой Фон

Сделать Картинку Без Фона Онлайн

Как обрезать фон на фотографии без мощного графического …

Создаем бесшовный узор «Чайная вечеринка» в Adobe Illustrator

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

1. Превратите вашу зарисовку в вектор

Шаг №1

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

Шаг №2

Как только вы подготовили эскиз, в шапке AdobeIllustratorсоздайте NewFile размером 600 х 600 рх, и вставьте свою зарисовку File > Place. Вы увидите панель управления изображением (Image), содержащуюинформацию о перемещении изображения вместе с кнопкой ImageTrace. Нажмите на нее для векторизации изображения.

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

Шаг №3

На панели нажмите на значок ImageTrace, который вы можете найти на той же панели, рядом с Presets, чтобы показать окно настроек ImageTrace. Теперь, давайте изменим режим на черно-белый и установим Thresholdдо 150. Все остальные параметры оставляем по умолчанию. Таким образом, мы сделали линии толще и мягче.

Шаг №4

Если вы довольны результатом, идите дальше и нажмите кнопку Expand. Превращая линии в отдельные векторные объекты.

Шаг №5

Щелкните правой кнопкой мыши и разгруппируйте объекты (Ungroup). Вы можете выбрать чистый лист бумаги кликнув инструментом DirectSelectionTool (A) на пустом месте где-то между объектами и удалить его.

2.Подготовка изображения к раскраске

Шаг №1

Давайте возьмем RectangleTool (M) и добавим желтый квадрат размером 600х600 рх и отправим (Send— Back (Control—Shift-[)) поместив его позади всех остальных объектов. Таким образом, мы можем отделить объекты от белого фона, чтобы видеть их более четко.

Шаг №2

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

Нам нужно их видоизменить, но давайте сначала их сгруппируем каждый из них. Теперь вы можете просто выделить части и сгруппировать их с помощью DirectSelectionTool (A), а затем изменить цвет заливки по своему вкусу. Тем не менее, давайте попробуем другой способ.

Шаг №3

Нам нужно превратить объект в контур(Object > CompoundPath > Make).Таким образом, мы переводим группу элементов в единый объект с черным контуром.

Шаг №4

Переведите остальные предметы в единый объект. Это можно сделать быстрее, просто выбрав объект правой кнопкой мыши и применив MakeCompoundPathв контекстном меню.

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

 Шаг №5

После того как вы сделаете составной контур, могут появиться некоторые ненужные детали. Например, черные элементы, показанные на скриншоте ниже. Избавляемся от них с помощьюEraserTool (Shift—E), стирая часть, соединяющую ненужные формы с контуром. После этого, выберете ненужную деталь с помощьюDirectSelectionTool (A)и удалите.

3.При раскраске использовать живые цвета

Шаг №1

Давайте оживим наши предметы, добавив цвета! Выберите форму и выберете Object > LivePaint > Make.

Шаг №2

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

Шаг №3

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

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

Шаг №4

Переходим к следующему объекту – кексу. Сделаем его вкусным и привлекательным. Используйте белый контур чтобы увеличить яркость.

Залейте другие предметы цветами из нашей палитры.

Вот что мы имеем на этом этапе – все наши рисунки превращаются в масштабируемые цветные векторные объекты.

4.Объедините свои объекты в бесшовный фон

Шаг №1

Давайте начнем формировать рисунок, поместив чашку в левый верхний угол нашего рисунка.

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

Выберете чашку и нажмите клавишу Enter, чтобы вызвать всплывающее окно Move. Установите Horizontal Position на600 px(что составляет ширину нашего фона) и нажмите кнопку Copy, чтобы копировать чашку и переместить ее в правый верхний угол рабочей области.

Выделите чашку еще раз, нажмите Enter, и а этот раз установите VerticalPositionна 600 px, тем самым перемещая копию к нижнему левому углу. Повторите эти действия еще раз с нижней чашкой, чтобы создать еще одну копию в правом нижнем углу. В итоге должно быть 4 чашечки, пересекающие все края области рисунка.

Шаг №2

Расположите чайник в центре холста и повращайте его немного. Вам не нужно его копировать и перемещать, так как он не пересекает границ рисунка.

Шаг №3

Добавьте больше объектов, пересекая края рисунка и создавая соответствующие копии.

Шаг №4

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

 Шаг №5

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

Шаг №6

Теперь, когда нас устраивает расположение объектов, давайте выясним, как сделать нашу картину в образце и применят ее к различным формам. Прежде всего мы должны установить границы нашего рисунка. Для того чтобы сделать это, скопируйте квадратный фон и поместите его над всеми остальными объектами, нажав Control—Shift-[. Установите Fillи Strokeодинаковыми, создавая пустую рамку. Теперь ненужные элементами оказались за пределами рамки и будут невидимыми, когда вы включите его в образец.

Выделите все (Control—A)и перетащите объекты на панельSwatches(Window > Swatches).

Теперь мы можем создать любую форму, например прямоугольник с помощью RectangleTool (M) – и применить к нему наш шаблон, выбрав его на панелиSwatches. Используйте ScaleTool (S)чтобы изменить масштаб вашей модели, и не забудьте поставить галочкуTransformPatternи снять пометки на другихOptions.

Тада! Наш шаблон «Чайная Вечеринка» готов!

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

Оригинал статьи: Create a Tea Party Seamless Pattern From a Sketch

Создание бесшовных текстур, даже не выходя из браузера

Школа искусств Йельского университета
использует несколько устаревший подход к плиточному фону

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

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

Хорошо, это могло быть концептуальной натяжкой, но я много смотрю канал Discovery.

Забегая вперед, мы, скорее всего, увидим больше мозаичных фонов. Теперь, когда все текущие браузеры (IE9, Chrome, Firefox, Opera и Safari) наконец-то поддерживают использование нескольких фонов в одном элементе, кажется, есть отличные возможности для объединения плиток разного размера новыми и интересными способами.Однако в большинстве случаев вам нужно, чтобы образец изображения был мозаикой без видимых краев или швов.

Итак, как нам это сделать?

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

Есть несколько отличных коммерческих инструментов для бесшовной мозаики, которые в первую очередь предназначены для разработчиков игр и разработчиков 3D-моделей (хорошие примеры — Genetica, Pattern Studio и PhotoSEAM).

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

1. Образец текстуры обоев из Lost & Taken

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

2. Я собираюсь начать со старой текстуры обоев из потрясающей и постоянно растущей коллекции Калеба Кимбро в Lost & Taken.Когда вы найдете понравившуюся текстуру, используйте расширение Aviary, чтобы сделать снимок экрана в окне браузера. Он должен загружаться прямо в редактор разметки изображений Aviary (также известный как Talon), где вы можете использовать инструмент кадрирования, чтобы обрезать изображение до красивого участка текстуры. Вам не нужно слишком заботиться о том, где именно вы обрезаете свои узоры — мы можем исправить это позже, — но постарайтесь выбрать область, которая относительно ровно освещена.

   Обрежьте изображение до приемлемого размера и затем перенесите его в редактор эффектов

   Затем нажмите зеленую кнопку «Image Effects» в правом верхнем углу, чтобы перенести наше изображение в редактор эффектов Aviary (он же Peacock) — здесь и происходят интересные вещи.Когда он загружен, в рабочем пространстве должен отображаться фрагмент вашей текстуры (помеченный как «Ресурс») с выходным холстом под ним. Соединительный рычаг автоматически присоединяет наш образец текстуры к холсту.

3. Теперь откройте вкладку «Эффекты» на левом краю, и вы найдете ящик, содержащий около 40 типов эффектов. Покопайтесь, пока не найдете эффект «Бесшовные», и перетащите его между плиткой текстуры (Ресурс) и холстом.

4. Соедините свой ресурс, эффект и холст вместе

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

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

5. Выберите эффект «Бесшовные», и вы увидите его свойства, отображаемые на панели справа.Честно говоря, настройки по умолчанию не очень полезны, поэтому сбросьте горизонтальное и вертикальное смешение до нуля, а горизонтальное и вертикальное смещение на 50%. Это переместит швы с жесткими краями в центр холста, что упростит работу с ними.
6. Теперь по волшебству. Начните постепенно сдвигать настройки горизонтального перехода, и вертикальный шов с жесткими краями должен начать испаряться у вас на глазах. Если исходная текстура образца представляет собой органическую текстуру (бумага, трава, мрамор и т. Д.), Подойдет почти любая смесь около 10%.Искусственные повторяющиеся узоры, такие как обои и ткань, потребуют от вас более точной настройки, но это не так уж сложно.

   Сдвиньте настройки горизонтального перехода, и вертикальный шов должен начать испаряться

7. Вы, наверное, догадались, что следующий шаг. Используйте ползунок вертикального перехода, чтобы удалить горизонтальное соединение.
8. Когда результат вас устраивает, щелкните элемент холста и установите флажок « Adapt Display Size to Input Bitmap » на панели свойств.Это автоматически обрежет для вас любую пустую область изображения. Вуаля ! Теперь вы должны смотреть на идеальную бесшовную плитку.
9. Теперь вам просто нужно его скачать. В меню «Файл» вверху вы можете использовать опцию «Экспортировать холст как растровое изображение», чтобы загрузить копию. Вы также можете сохранить копию в своей учетной записи Aviary, если она у вас есть.

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

Плитка бесшовная готовая

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

Сводка

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

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

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

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

Удачи.

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

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

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

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

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

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

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

После размещения элементов вам понадобятся их копии на противоположных сторонах, чтобы создать повторяющийся узор. Выделите все элементы и нажмите Ctrl + C — Ctrl + V или перейдите в меню Правка> Копировать , а затем Правка> Вставить .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создавать бесшовные узоры и текстуры для фотографий

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

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

1. Создайте наложение

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

Выберите цветовые палитры переднего плана и фона, которые вы хотите применить к вашей новой текстуре. Откройте галерею фильтров , чтобы увидеть инструменты, доступные для вашего творческого процесса. Такие фильтры, как Render — Clouds или Fibers , будут создавать узоры с использованием вашей цветовой палитры.Или используйте фильтр Noise — Add Noise , чтобы добавить текстуру, и фильтры Brush Strokes , чтобы изменить результат. Поскольку мы используем смарт-объекты, эффекты фильтров можно включать и выключать, складывать или изменять, чтобы создать именно тот вид, который вам нужен.

2. Создание узора дерева

В качестве примера используйте эти шаги для создания простой текстуры дерева. Откройте новый документ, задав ему квадратную пропорцию (например, 512 x 512). Задайте цвета переднего и заднего плана в тонах светлого и темного дерева.

Выберите Filter — Render — Fibers и настройте значения Variance и Strength для достижения желаемого вида.

3. Сохраните новый узор

Новую текстуру можно перетащить в изображение для использования в качестве наложения, или ее можно сохранить как узор с помощью диалогового окна Edit — Define Pattern , чтобы придать ей уникальный название. Посмотрите, как работает ваш новый узор, создав новый документ и добавив из списка Layer — New Fill Layer — Pattern .

4. Используйте фотографию

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

Начните с обрезки изображения до квадратных размеров.При необходимости воспользуйтесь этой возможностью, чтобы вырезать любые потенциальные проблемные места, подобные упомянутым выше. Создайте повторяющийся узор, используя Filter — Other — Offset и отрегулировав значения Horizontal и Vertical , чтобы они соответствовали размеру изображения. Теперь у вас будет текстура в сетке из 4 штук, которая создаст бесшовный узор при укладке плитки.

Но вы также, скорее всего, увидите видимые швы на стыке четырех частей. У вас есть выбор способов исправить это.Используйте инструмент Clone Tool, Patch Tool или Content Aware Fill , чтобы выбрать области стыка и заполнить подходящим содержимым. Я предпочитаю инструмент Clone Tool , поскольку он обеспечивает наибольший контроль, но он также может быть самым утомительным в зависимости от того, насколько явно выделяется область шва на окончательном изображении.

Сохраните и повторно используйте свой узор с помощью диалогового окна Edit — Define Pattern .

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

Фотографии: Ганна Потапова, Лиза Маккаун.

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

Как создать бесшовную ткань, повторить урок из рисования

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

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

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

Откройте дизайн в Adobe Photoshop. Именно на этом этапе вы можете редактировать свое произведение, если оно требует каких-либо доработок, таких как изменение цвета или удаление / очистка элементов.Когда вы будете довольны своим изображением, используйте инструмент кадрирования, чтобы обрезать дизайн до прямоугольной плитки.

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

Сохраните плитку в формате JPEG, чтобы она была совместима с онлайн-загрузчиком.

Далее зайдите на наш сайт! Онлайн-загрузчик доступен либо щелкнув здесь, либо скопировав и вставив эту ссылку: www.digitalfabrics.com.au/custom-fabric в свой браузер. Используйте онлайн-загрузчик, чтобы загрузить свой дизайн. После загрузки файла вы должны увидеть его в окне предварительного просмотра ткани.

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

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

8 бесплатных генераторов шаблонов для создания повторяющихся фоновых рисунков

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

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

Рекомендуемая литература: Простое создание эффекта длинной тени с помощью генератора длинных теней

1. Patternify

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

2. Герстнеризатор

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

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

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

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

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

5. Цветочные бесшовные модели

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

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

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

7. GeoPattern

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

8. PlaidMaker

PlaidMaker — это инструмент для создания красивого клетчатого узора. Выберите цвет для использования на палитре, затем сделайте горизонтальные и вертикальные узоры отдельно. Вы также можете использовать зеркальные изображения для обеих ориентаций. Если вы не хотите работать с нуля, нажмите «Обзор пледов», чтобы увидеть готовые дизайны, и вы можете загрузить его в формате PNG для различных мобильных размеров и размеров обложек Facebook.

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

Прекрасно наносить собственное искусство на ткани и изделия.Особенно, если у вас есть изделие, которое идеально подходит для рассматриваемого предмета. Но как насчет тех мелких деталей, которые у вас есть? Эти маленькие каракули, упрощенные, но такие же потрясающие. Часто идеальное место для них — в шаблоне. Узнайте, как создать повторяющийся узор с помощью Photoshop и инструмента онлайн-дизайна Contrado.

Photoshop

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

Подготовка изображения из бумаги

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

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

После того, как вы закрыли окно с правильными настройками, вам нужно нажать на свой фон. Это приведет к тому, что фоновый оттенок появится в поле с меткой для цвета. У вас должен быть ползунок «Легкость».Просто перетащите этот ползунок до конца, и вы увидите, как предварительный просмотр и изображение изменится, чтобы отобразить ярко-белое изображение. Как только это будет сделано, нажмите «ОК».

Вырезание компонентов

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

Как создать повторяющийся узор

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

Создайте свой холст

Создайте новый холст в Photoshop, просто выбрав «Создать» в меню «Файл». Этот холст будет представлять одну плитку или одно «повторение» вашего узора. Например, если ваш узор повторяется с пчелой, то на этой плитке будет пчела. Или, если это пчела, а также горшок и соты, на ней будет это.

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

Вам нужно знать, где находится центр вашего холста.Вы можете сделать это, сделав пометку при создании холста. (Для холста размером 100 x 100 пикселей средняя точка будет 50 x 50 пикселей). Или вы можете заставить Photoshop показать вам это. На вкладке «Просмотр» вы должны найти параметр «Новое руководство». Если вы выберете это, вы получите всплывающую форму, где вы можете выбрать «Горизонтально» или «Вертикально» с положением. Настройте это как для горизонтального, так и для вертикального (отдельно) и установите положение на 50%.

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

Как сделать плитку с повторяющимся узором

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

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

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

Теперь выберите новый слой — дублированный — так, чтобы мы могли начать фактически создавать повторяющийся узор. Для нового слоя нам нужно выбрать «Фильтр», затем «Другой», а затем выбрать опцию «Смещение». Здесь нужна центральная точка вашего изображения, которую вы отметили при создании холста. Добавьте центральную точку в горизонтальное и вертикальное поля. Вы можете установить флажок предварительного просмотра, и результаты будут отображаться на вашем холсте, прежде чем вы подтвердите и нажмете «ОК». Убедитесь, что в разделе «Неопределенные области» выбрано «Обтекание».

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

Как сделать повторяющийся узор для использования в Photoshop

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

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

Здесь вы обычно выбираете цвет, которым хотите заполнить область, однако в этом меню вы также можете выбрать «Pattern». После этого откроется раскрывающееся меню под ним с надписью «Custom Pattern».

Щелкните по миниатюре изображения / предварительного просмотра, которое вы видите там, и откроется «Выбор узора».Это покажет вам все варианты узора, из которых вы можете выбрать. Просто выберите оттуда новую плитку с узором, и Photoshop заполнит область повторяющимся узором, который вы только что научились создавать. Он будет автоматически дублировать его столько раз, сколько потребуется, чтобы заполнить область.

Как сделать повторяющийся узор для использования на сайте Contrado

Чтобы использовать повторяющийся узор на веб-сайте Contrado, все, что вам нужно сделать, это сохранить плитку.Мы рекомендуем сделать это в формате PNG, так как это позволит сохранить его на прозрачном фоне (если вы хотите использовать инструмент дизайна Contrado для выбора цвета фона). Возможно, вы захотите определить цвет фона в Photoshop, если это так, тогда можно будет сохранить как стандартный JPEG. Используйте параметр «Сохранить как» на вкладке «Файл» и выберите тип файла в раскрывающемся меню формы. Опять же, здесь вы можете определить, что вы хотите назвать плиткой с узором, но мы дадим те же рекомендации, что и раньше.

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

Pattern Design — Бесшовные векторные узоры без лицензионных отчислений

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

Рето Кнехт

Менеджер проектов в balleristo.eu

«Нам нравится большое разнообразие дизайнов в Pattern Design. Более того, техническое качество дизайнов безупречно… что экономит нам много времени».

Josefine

Менеджер по продукции в Cissi och Selma

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

Элой Паласиос

Владелец Magnacrom Digital

«Для нашего сайта www.teppich-printer.de мы долгое время искали современные, стильные и повторяемые дизайны.
Pattern Design обеспечивает как выбор дизайнов, так и безупречную техническую реализацию, к нашему полному удовлетворению.«

Питер Саппер

Владелец PhotoFabrics GmbH

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