Как сделать «бесконечное» фоновое изображение?

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

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

Описанные методы подходят в тех случаях, когда само фоновое изображение не содержит в себе сложных деталей и «границ кадра», обрезающих объекты на картинке. Существует способ сделать «бесконечный» фон на основе фотографии, описание которого я нашел на сайте 24ways.org, и привожу здесь перевод со своими комментариями.

Автор: Эллиот Джей Стокс, elliotjaystocks.com
Оригинал: http://24ways.org/2007/the-neverending-background-image-story
Перевод: Александр Мусаев, paradigm.ru

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

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

1. Выбор исходного изображения

Можно выделить три критерия оценки пригодности фотографии для создания бесконечного фона:

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

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

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

2. Горизонтальные линии

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

В Фотошопе есть очень удобный для этой цели инструмент — Single column marquee tool. Выделяем им «пограничные» пиксели (в нашем примере — с правой стороны фотографии), затем копируем их в новый слой и, с помощью инструмента Free transform (Ctrl-T/Cmd-T), растягиваем полученный фрагмент в ширину, заполняя им всю рабочую область.

3. Клонирование

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

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

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

4. Сглаживание границ

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

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

Периферийный слой плавно сливается с основным изображением и скрывает нежелательные тени на песке.

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

5. Сшивание текстуры

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

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

Используем мягкие кисти и отдельный слой для рисования.

Снижаем прозрачность «облака» до 20%, после чего, с помощью Free transform tool, отодвигаем его за правую границу кадра так, чтобы центр слоя совпал с ней.

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

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

Написать комментарий