Бесшовный паттерн — это небольшое изображение, которое можно повторять по горизонтали и вертикали без видимых стыков, получая бесконечную текстуру. Такие паттерны — основа веб-дизайна: ими заливают фоны сайтов, шапки, боковые панели и кнопки, тратя при этом считанные килобайты трафика. Вместо огромной картинки на весь экран браузер загружает крошечный тайл и размножает его средствами CSS.
В этом уроке мы разберём весь путь: от подготовки холста и рисования элементов до ключевого фильтра Offset, определения узора через Define Pattern и грамотного экспорта для веба. Я покажу и геометрические, и текстурные варианты, а в конце дам таблицу с реальными размерами и советы по оптимизации. Урок рассчитан на Photoshop CS5 и новее, но принципы работают в любой версии.
Что такое бесшовный паттерн и где он применяется
Суть бесшовности в том, что правый край изображения идеально совпадает с левым, а нижний — с верхним. Когда браузер ставит копии тайла вплотную, глаз не видит границ, и создаётся ощущение цельного полотна. Именно поэтому такие паттерны называют tileable или repeatable.
Применений масса. В вебе это фоны блоков через свойство background-repeat, текстуры бумаги и ткани под контент, тонкие сетки и полоски для секций. В полиграфии — заливки для упаковки и обоев. В цифровой иллюстрации — фоны для баннеров и презентаций. Один удачный паттерн размером 100×100 пикселей способен закрыть монитор любого разрешения.
Главное преимущество — вес. Тайл 80×80 пикселей в формате PNG-8 весит около 2–4 КБ, тогда как полноэкранная картинка легко перевалит за сотни килобайт. Для скорости загрузки сайта это критично, особенно с учётом мобильного трафика и требований поисковых систем к производительности.
Подготовка холста и настройка сетки
Начинаем с нового документа. Создайте квадрат со стороной, кратной степени двойки: 64, 100 или 128 пикселей — так тайл красивее ложится и легче масштабируется. Разрешение для веба ставьте 72 ppi, цветовой режим RGB. Прозрачный фон удобен, если паттерн должен просвечивать, белый — для плотных заливок.
Включите линейки клавишами Ctrl+R и вытяните направляющие точно по центру холста — по горизонтали и вертикали. Для точности используйте View → New Guide и впишите значение 50%. Эти направляющие станут ориентиром, когда мы будем смещать изображение и дорисовывать стыки. Обязательно включите привязку View → Snap, чтобы элементы прилипали к сетке.
Если планируете геометрический паттерн, заранее продумайте модульную сетку. Разбейте квадрат на 4 или 9 равных ячеек с помощью направляющих. Такой каркас дисциплинирует рисунок и гарантирует, что повторяющиеся элементы будут расположены равномерно, без визуальных провалов и скоплений.
Ключевой приём: фильтр Offset
Фильтр Offset (Filter → Other → Offset) — сердце всей техники. Он сдвигает изображение на заданное число пикселей, а то, что уходит за край, появляется с противоположной стороны. Установите смещение по горизонтали и вертикали ровно на половину размера холста: для тайла 100×100 это будет 50 и 50 пикселей. В поле Undefined Areas обязательно выберите Wrap Around.
После применения Offset все стыки, которые раньше были на краях, окажутся в центре холста. Именно здесь вы увидите некрасивые швы и разрывы рисунка. Теперь ваша задача — аккуратно дорисовать и соединить элементы в центре штампом (Clone Stamp) или кистью, не трогая при этом края холста.
Когда центр приведён в порядок, можно снова применить Offset с теми же значениями, чтобы вернуть картинку в исходное положение и проверить края. Этот цикл «сместил — подрисовал — вернул» повторяют, пока паттерн не станет идеально бесшовным по всем четырём сторонам.
Создаём геометрический паттерн шаг за шагом
Возьмём простой пример — паттерн из наклонных полос. Создайте холст 40×40 пикселей, инструментом Line или Pencil проведите диагональ из левого нижнего угла в правый верхний. Затем примените Offset на 20 пикселей по обеим осям — вы увидите, что линия разорвалась. Дорисуйте недостающие сегменты, и диагональ станет непрерывной при повторении.
Для более сложных узоров — горошка, ромбов, треугольников — работайте на отдельных слоях. Разместите основной мотив в центре, а по углам холста продублируйте его на четверть, чтобы при стыковке четвертинки собрались в целый элемент. Это классический приём для равномерного «в шахматку» распределения.
Не забывайте про цвет и контраст. Для фоновых паттернов берите приглушённые, близкие по тону оттенки — яркий рисунок будет отвлекать от контента. Хорошее правило: разница по яркости между фоном и мотивом не больше 10–15%, иначе текст поверх станет нечитаемым.
Определяем узор через Define Pattern
Когда тайл готов, его нужно сохранить как узор. Выделите весь холст сочетанием Ctrl+A (или конкретную область прямоугольным выделением) и выполните Edit → Define Pattern. Задайте понятное имя — так вы легко найдёте паттерн в общей библиотеке. Теперь узор доступен в панели заливки.
Чтобы проверить результат, создайте большой документ и залейте его через Edit → Fill → Pattern, выбрав ваш узор. Если по полю видны швы, вернитесь к тайлу и доработайте стыки фильтром Offset. Также паттерн можно применять как стиль слоя Pattern Overlay — это удобно для быстрой смены текстур на объектах.
Определённые узоры хранятся в наборе .PAT, который можно экспортировать через Preset Manager и передавать другим дизайнерам. Именно так распространяются готовые библиотеки паттернов на тематических ресурсах — вы скачиваете один файл и получаете десятки готовых заливок.
Экспорт паттерна для веба и CSS
Для сайта нам нужен не .PAT, а отдельный файл изображения тайла. Обрежьте документ ровно по размеру одной плитки и сохраните через File → Export → Save for Web. Для геометрии с плоскими цветами выбирайте PNG-8, для фотографических текстур — PNG-24 или качественный JPEG. Следите, чтобы размеры остались точными, иначе появится сдвиг при повторении.
В CSS подключение элементарно. Достаточно одной строки, и фон бесконечно замостит любой блок:
background-image: url('pattern.png');— путь к вашему тайлуbackground-repeat: repeat;— повтор по обеим осям (по умолчанию)background-repeat: repeat-x;— только по горизонтали, для полос под шапкойbackground-color: #f4f4f4;— запасной цвет под паттерном на случай долгой загрузки
Для экранов Retina делайте тайл в два раза крупнее и уменьшайте его через background-size. Так узор останется резким на дисплеях с высокой плотностью пикселей. Всегда указывайте фоновый цвет: он подстрахует, если картинка не загрузится, и сохранит контраст текста.
Оптимизация веса и типовые размеры
Вес тайла напрямую влияет на скорость сайта, поэтому паттерны стоит сжимать. Уменьшайте число цветов в PNG-8 до 16–32, удаляйте лишние метаданные, прогоняйте файл через оптимизаторы вроде TinyPNG. Разница между сырым и сжатым тайлом легко достигает 40–60% при неизменном виде.
Ниже — ориентировочные размеры тайлов и их типичный вес для распространённых задач веб-дизайна:
| Тип паттерна | Размер тайла | Формат | Примерный вес |
|---|---|---|---|
| Тонкая сетка / линии | 10×10 px | PNG-8 | ~0,5 КБ |
| Геометрический мотив | 64×64 px | PNG-8 | ~2 КБ |
| Текстура бумаги | 200×200 px | JPEG | ~15 КБ |
| Ткань / шум | 128×128 px | PNG-24 | ~20 КБ |
| Крупный орнамент | 400×400 px | PNG-24 | ~60 КБ |
Обратите внимание: маленькие тайлы браузер повторяет чаще, что даёт минимальный трафик, но чуть большую нагрузку на отрисовку. Крупные тайлы наоборот. Золотая середина для большинства фонов — квадрат от 64 до 200 пикселей, этого достаточно и для чёткости, и для лёгкости.
Частые ошибки и как их избежать
Первая ошибка новичков — рисование деталей вплотную к краю холста до применения Offset. Пока вы не свели стыки в центр, край трогать нельзя, иначе разрывы никуда не денутся. Всегда сначала смещайте, потом дорисовывайте, и только серединную зону.
Вторая частая беда — обрезка тайла не по размеру. Если при экспорте вы захватите лишний пиксель или потеряете его, повтор пойдёт со сдвигом и швы вылезут даже у идеального паттерна. Пользуйтесь инструментом Crop с точным вводом размеров и проверяйте значения в панели Image Size.
Наконец, избегайте слишком заметных уникальных элементов — яркого пятна или крупной детали. При повторении глаз мгновенно цепляется за них, и вся сетка «рассыпается» на видимые квадраты. Держите рисунок равномерным по плотности, и паттерн будет выглядеть цельно на любом разрешении экрана.
Источники
- Adobe — официальная документация Photoshop (раздел о фильтрах и работе с узорами)
- Smashing Magazine — публикации о паттернах и оптимизации фонов для веб-дизайна
- Крис Сперри (Chris Spooner), Spoon Graphics — уроки по созданию бесшовных текстур
