Тема 7: «элементы дизайна сайта. Создание коллажа. «резиновый» сайт»
В данной работе Вам предстоит создать «резиновую шапку» сайта в виде коллажа в программе Photoshop (рис. 1). В данном контексте термин «резиновый» означает «тянущийся, растягивающийся». Исходные фотографии для создания коллажа изображены на рис. 2.
Работа по созданию «шапки» сайта состоит из нескольких этапов:
«Нарезка» изображений для создания «резиновой» таблицы.
Размещение «резиновой» таблицы в HTML-коде сайта.
Рисунок 1. Элемент сайта «шапка» в виде коллажа
Рисунок 2. Исходные фотографии для создания коллажа: а – dom.jpg; б – priroda.jpg; в – vodopad.jpg
Прежде, чем приступить к созданию этого элемента сайта, изучите технологию совмещения фотографий, выполнив два задания.
Задание 1. Совмещение фотографий с использованием слой-маски
В этом задании Вы изучите метод совмещения фотографий с помощью слой-маски.
Слой маска – это маска прозрачности слоя. Для каждого слоя она может быть только одна. Слой-маска часто применяется при компоновке монтажей.
Необходимо создать изображение, представленное на рис. 3, в, из двух исходных изображений (рис. 3, а и 3, б).
Последовательность выполнения задания:
В графическом редакторе PhotoShop из папки html_css_7/Lab откройте файлы Статуя.jpg и Море.jpg.
Активизируйте файл Море.jpg. Щелкните указателем мыши на инструменте Move (Перемещение) , наведите указатель мыши на изображение моря, нажмите левую кнопку мыши и, удерживая ее, перетащите изображение моря в окно с изображением статуи. Расположите так, как показано на рис. 4.
Убедитесь, что в палитре слоев появился новый слой (рис. 5).
Выполните команду File – Save As (Файл – Сохранить как) и сохраните файл под именем Из моря.psd в папке myhouse.
В палитре слоев измените названия слоев: фону дайте имя Статуя, слою 1 – Море. Для этого щелкните правой кнопки мыши по наименованию слоя и в контекстном меню выберите команду Layer Properties… (Параметры слоя). В открывшемся окне введите новое имя слоя (рис. 6).
Активизируйте слой Море, щелкнув по его миниатюре в палитре слоев.
Нажмите кнопку Add Layer Mask (Добавить маску слоя) , расположенную в нижней части палитры слоев.
Убедитесь, что в палитре слоев рядом с миниатюрой слоя Моря появилась миниатюра слоя-маски (рис. 8).
Выделите изображение моря (рис. 9)
Нажмите на клавишу <Alt> и, удерживая ее, щелкните левой кнопкой мыши по миниатюре слоя-маски. В окне файла Из моря вместо изображения должно появиться белое поле (рис. 10).
Для выделенного фрагмента примените градиентную заливку (рис. 11).
Снимите выделение и щелкните на миниатюре слоя Море .
Убедитесь, что вы получили плакат с плавным переходом изображения статуи в изображение моря.
В палитре слоев щелкните правой кнопкой мыши по миниатюре слоя-маски на слое Море и выберите команду Apply Layer Mask (Применить маску слоя). Результат на рис. 12.
Создать изображение, представленное на рис. 13, из исходных изображений (рис. 13, а и 13, б)
Последовательность выполнения задания:
В графическом редакторе Photoshop из папки html_css_7/Lab откройте файлы Город.jpg и Пустыня.jpg.
Активизируйте файл Город.jpg. Перетащите изображение город в окно с изображением пустыни (рис. 14).
Выполните команду File – Save As (Файл – Сохранить как), назовите файл Город в пустыне.psd и поместите в папку myhouse.
В палитре слоев измените названия слоев: фону дайте имя Пустыня, слою 1 – Город. (рис. 15).
Активизируйте слой Город и расположите его так, как показано на рис. 16.
С помощью инструмента Волшебная палочка выделите изображение неба. Для этого щелкните инструментом на любом участке неба и, удерживая клавишу <Shift>, щелкайте на других участках, пока не выделите все оставшиеся участки неба (рис. 17).
Выполните команду Select Inverse (ВыделитьИнверсия). Результат выполнения команды представлен на рис. 18.
Нажмите кнопку Add Layer Mask (Добавить маску слоя) , расположенную в нижней части палитры слоев.
Убедитесь, что в палитре слоев рядом с миниатюрой слоя Город появилась миниатюра слоя-маски (рис. 19).
Нажмите на клавишу <Alt> и, удерживая ее, щелкните левой кнопкой мыши по миниатюре слоя-маски. В окне файла Город в пустыне вместо изображения должно появиться изображение маски (рис. 20).
Используя инструмент Ластик и Кисть, откорректируйте слой-маску (рис. 21).
Щелкните на миниатюре слоя Пустыня. Если вы подчистили не все участки, то вернитесь в режим маски, щелкнув с нажатой <Alt> на соответствующей пиктограмме , и продолжите редактирование ластиком, пока не получите нужный результат.
Откорректируйте положение слоя Город.
Выполните кадрирование изображения, выделив необходимый фрагмент и выполнив команду Image Crop (ИзображениеОбрезать).
Перейдите на слой Пустыня и откорректируйте яркость и контраст.
Сохраните файл. Результат на рис. 22.
Вернемся к созданию сайта. Все изображения для создания коллажа (а – dom.jpg; б – priroda.jpg; в – vodopad.jpg) расположены в папке html_css_7/shapka
Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.