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