СОЗДАНИЕ БЕСШОВНОЙ ФОНОВОЙ ПЛИТКИ ДЛЯ ВЕБ-СТРАНИЦЫ В 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!
читатель зелёных страничек [13.09.2016, 21:51]
Отличный урок! Спасибо!
Заочная школа 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: стеклянные, объятые пламенем буквы, камуфляж…). Автопортреты.
Распространение материалов сайта приветствуется.
Ссылка на материалы весьма желательна, но не строго обязательна ;-)
«Знание должно служить творческим целям человека. Мало накоплять знания;
нужно распространять их возможно шире и применять в жизни». Рубакин Н.А.
|