СОЗДАНИЕ БЕСШОВНОЙ ФОНОВОЙ ПЛИТКИ ДЛЯ ВЕБ-СТРАНИЦЫ
В ADOBE PHOTOSHOP

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

Итак, запускаем Adobe Photoshop. Создаём новое изображение – плитку размером 150×150 пикс.; Цветовой режим: Цвета RGB; Содержимое фона: Прозрачный. Заливаем фон плитки зелёным цветом: #557d55

Начинаем размещать на плитке объекты – элементы электронной схемы. Используем инструмент Текст. Шрифт Electronics (кегль: 48 пикс.). Цвет для элементов схемы/цвета текста: кремово-жёлтый #fffdd0. Обратите внимание, что все элементы я размещаю в центральной части плитки. Объединяем все слои с элементами электронной схемы, не затрагивая фон плитки. Меняем непрозрачность этого слоя: 50% – «приглушаем» рисунок, так как фоновая плитка не должна отвлекать читателей от содержания веб-страницы (рис. 1).

рис. 1 Элементы в центре

рис. 2 Фильтр: Сдвиг…

рис. 3 Добавляем элементы

Идём дальше :-) Объединяем все слои и обращаемся к стандартным фильтрам Adobe Photoshop: Фильтр; Другое; Сдвиг… По горизонтали: +75 пикс. вправо; Вертик.: +75 пикс. вниз; Вставить отсечённые фрагменты. Почему 75? Потому что ширина и высота нашей фоновой плитки 150 пикс. 150 ÷ 2 = 75 ;-) Элементы электронной схемы разбежались по углам :-)

Теперь в нашем с Вами распоряжении трансформированная плитка с пустой серединкой (рис. 2). Вновь «вооружаемся» инструментом Текст и добавляем ещё несколько элементов электронной схемы в центральную часть плитки (рис. 3). Объединяем слои с элементами и вновь «приглушаем» рисунок (непрозрачность: 50%).

Объединяем все слои и для проверки создаём узор на основе нашей плитки. Для этого выбираем команду «Определить узор…» меню «Редактирование». В диалоговом окне «Имя узора» задаём имя для нашего узора. Например, Electronics. Создаём новый проверочный файл ;-) размером 350×350 пикс. и заливаем его созданным нами узором. Впрочем, размер не имеет для бесшовной плитки никакого значения :-) Для того чтобы использовать созданную нами бесшовную плитку для веб-странички сохраните файл с рисунком (рис. 3 – tile_3.gif) на диске в папке images. Ну а дальше как кому больше нравится ;-) Можно побаловаться со стилями или прописать указания тегу body напрямую ;-)

Бесшовная фоновая плитка :: Adobe Photoshop

Кстати, данный пример это всего лишь демонстрация алгоритма работы по созданию бесшовной фоновой плитки. Вы можете позволить себе смелый эксперимент :-) создать плитку густого синего цвета и украсить её звёздочками ;-) Любознательным читателям рекомендую посетить зелёную страничку «Плавание по синему цвету».. Почитателей зелёного цвета приглашаю на зелёную страничку «Путешествие по зелёному цвету».

Заочная школа Adobe Photoshop

§ Графика: Заочная школа Adobe Photoshop (светодиодная подсветка)
Эффект светодиодной подсветки в Adobe Photoshop (по мотивам The X-Files)
§ Заочная школа Adobe Photoshop (рассеянные точки)
Эффект рассеянных точек в Adobe Photoshop
§ Заочная школа Adobe Photoshop (цвет на чёрно-белой фотографии)
Эффект цвета на чёрно-белой фотографии.
§ Заочная школа Adobe Photoshop (растровые строки)
Создание собственного образца узора.
§ Заочная школа Adobe Photoshop (Eye Candy 4000)
Дополнительный фильтр Eye Candy 4000. Стеклянные буквы.
§ Кисточки для Adobe Photoshop: «Город Курск»
создание кисти произвольной формы:

Посвящается 980-летию города Курска.

§ Стили, фильтры Adobe Photoshop
Работа с текстом (дополнительный фильтр Eye Candy 4000: стеклянные, объятые пламенем буквы, камуфляж…). Автопортреты.

_statistics

---