Как сделать фон без швов, или комар носа не подточит

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

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

Складываем углами внутрь

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

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

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

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

Такую перестановку четвертей нетрудно сделать в любом графическом редакторе с помощью вырезания и вставки через буфер обмена. Однако некоторые программы позволяют сделать это еще проще, за один шаг. Например, в ADOBE PHOTOSHOP достаточно выбрать команду FILTER | OTHER | OFFSET (при этом на изображении ничего не должно быть выделено), в появившемся диалоговом окне ввести половину ширины вашего изображения в поле HORIZONTAL и половину высоты в поле VERTICAL, переключатель UNDEFINED AREAS установить в положение WRAP AROUND и нажать OK.

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

Из крайности в крайность

Вряд ли кто-то будет спорить с тем, что FRACTAL DESIGN PAINTER - лучшая в мире программа создания растровой графики. Невероятное богатство художественных материалов и натуральных инструментов, оригинальный и привлекательный интерфейс делают PAINTER, пожалуй, самым вдохновляющим инструментом творческой работы из всех, которые когда-либо существовали в виде программ для компьютеров. Вполне естественно, что этот графический редактор идеально приспособлен и для создания впечатляющих фоновых изображений. А что особенно интересно, PAINTER (начиная с версии 3.0) обладает одним уникальным, хотя и довольно простым свойством, сильно облегчающим создание бесшовных фонов.

Выбрав команду TOOLS | PATTERNS | DEFINE PATTERN, вы переведете программу в особый режим, в котором все инструменты рисования приобретают волшебную способность беспрепятственно пересекать границы вашего изображения. Скажем, выводя кисть или карандаш за правый край картинки, вы в момент пересечения границы вдруг оказываетесь в противоположной точке левого края, и ваш штрих (или мазок), перепрыгнув влево на ширину изображения, как ни в чем не бывало продолжается в прежнем направлении. Точно так же, выведя инструмент за верхний край, вы окажетесь в самом низу изображения. Таким образом, в этом режиме просто невозможно создать изображение, которое не обладало бы свойством бесшовной стыковки. (К сожалению, это свойство, называемое WRAP AROUND COLOR, распространяется только на те инструменты, которые управляются движениями мыши; большинство выбираемых из меню эффектов, таких как LIGHTING или SURFACE TEXTURE, работают как обычно.)

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

Автоматическая сварка заподлицо

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

Чтобы сделать стык незаметным, этот метод пользуется наложением друг на друга копий изображения и частичной, плавно изменяющейся прозрачностью. Представьте, что вдоль наружных четырех краев прямоугольного выделения, которое надлежит превратить в бесшовный фоновый элемент, вырезаны четыре полоски определенной ширины. Затем каждая из этих полосок перенесена к внутреннему краю противоположной стороны и там наложена поверх старого изображения, причем так, что прозрачность этой полоски равна 50% на самом краю и постепенно увеличивается вплоть до полной невидимости по направлению к центру прямоугольника. Прозрачность же того фрагмента изображения, который оказался под полоской, наоборот, уменьшается от 50% до нуля (т. е. до стопроцентной видимости). Если вы мысленно покроете плоскость копиями такого изображения, то увидите, как соседние прямоугольники склеиваются друг с другом внахлест с помощью этих выступающих "клапанов".

Если ширина полосок-клапанов равна X пикселов, то ровно за X пикселов до стыка между двумя соседними копиями изображения начинается плавный переход одной копии в другую. На самом стыке, где формально кончается одна копия и начинается следующая, фактически видна смесь 50% от одной копии и 50% от соседней. После перехода на соседний элемент видимость выступающего "клапана" предыдущего элемента постепенно уменьшается, пока не сходит на нет - также на расстоянии X пикселов от стыка (но в другую сторону). Очевидно, что для применимости этого метода нужно, чтобы по краям области, которую вы хотите превратить в элемент фона, оставалось достаточно места, чтобы можно было выкроить клапаны для склейки (как правило, их ширина составляет около 20% от размера выделения). Этот метод дает хорошие результаты для нерезких, размытых текстур, не содержащих четких деталей и контрастных переходов. Многие фоновые изображения вполне удовлетворяют этим условиям. Однако если ваше изображение содержит текст или псевдотрехмерный рельеф, результаты будут, скорее всего, неудовлетворительными, так как в этом случае наложение одной копии изображения на другую становится слишком очевидным.

В настоящий момент существуют две реализации описанного алгоритма. Первая - это фильтр под названием SEAMLESS WELDER ("Бесшовный сварщик"), входящий в набор подключаемых фильтров KAI'S POWER TOOLS (версии 2.0 и выше). Воспользоваться этим фильтром можно из графического редактора, который способен работать с подключаемыми фильтрами стандарта ADOBE (например, ADOBE PHOTOSHOP или тот же FRACTAL DESIGN PAINTER). Вторая реализация - это фильтр, встроенный в SHAREWARE-приложение PAINT SHOP PRO (версии 4.0 и выше); там для его вызова нужно выбрать команду IMAGE | SPECIAL EFFECTS | CREATE SEAMLESS PATTERN.

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

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

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

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

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

2019-01-30

20 ценных уроков дизайна от "Мстителей"

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

2015-05-11

15 трендов веб дизайна в 2014-2015 году

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

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

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

2011-12-27

Факторы, определяющие хороший логотип

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

2011-12-27

Борьба поисковиков и оптимизаторов

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

2011-04-13

Почему не стоит скачивать шаблоны с варезников

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

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

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

2011-04-07

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

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

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

2011-03-29

Про заказчиков

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

2011-03-29