Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Web-дизайн / ЛР_7. Коллаж.doc
Скачиваний:
65
Добавлен:
29.05.2015
Размер:
8.54 Mб
Скачать

Тема 7: «элементы дизайна сайта. Создание коллажа. «резиновый» сайт»

В данной работе Вам предстоит создать «резиновую шапку» сайта в виде коллажа в программе Photoshop (рис. 1). В данном контексте термин «резиновый» означает «тянущийся, растягивающийся». Исходные фотографии для создания коллажа изображены на рис. 2.

Работа по созданию «шапки» сайта состоит из нескольких этапов:

  1. Создание коллажа.

  2. «Нарезка» изображений для создания «резиновой» таблицы.

  3. Размещение «резиновой» таблицы в HTML-коде сайта.

Рисунок 1. Элемент сайта «шапка» в виде коллажа

а б в

Рисунок 2. Исходные фотографии для создания коллажа: а – dom.jpg; б – priroda.jpg; в – vodopad.jpg

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

Задание 1. Совмещение фотографий с использованием слой-маски

В этом задании Вы изучите метод совмещения фотографий с помощью слой-маски.

Слой маска – это маска прозрачности слоя. Для каждого слоя она может быть только одна. Слой-маска часто применяется при компоновке монтажей.

Необходимо создать изображение, представленное на рис. 3, в, из двух исходных изображений (рис. 3, а и 3, б).

а б

в

Рисунок 3

Последовательность выполнения задания:

  1. В графическом редакторе PhotoShop из папки html_css_7/Lab откройте файлы Статуя.jpg и Море.jpg.

  2. Активизируйте файл Море.jpg. Щелкните указателем мыши на инструменте Move (Перемещение) , наведите указатель мыши на изображение моря, нажмите левую кнопку мыши и, удерживая ее, перетащите изображение моря в окно с изображением статуи. Расположите так, как показано на рис. 4.

Рисунок 4

  1. Убедитесь, что в палитре слоев появился новый слой (рис. 5).

Рисунок 5

  1. Выполните команду FileSave As (Файл – Сохранить как) и сохраните файл под именем Из моря.psd в папке myhouse.

  2. В палитре слоев измените названия слоев: фону дайте имя Статуя, слою 1 – Море. Для этого щелкните правой кнопки мыши по наименованию слоя и в контекстном меню выберите команду Layer Properties… (Параметры слоя). В открывшемся окне введите новое имя слоя (рис. 6).

Рисунок 6

  1. Активизируйте слой Море, щелкнув по его миниатюре в палитре слоев.

  2. Нажмите кнопку Add Layer Mask (Добавить маску слоя) , расположенную в нижней части палитры слоев.

Рисунок 7

  1. Убедитесь, что в палитре слоев рядом с миниатюрой слоя Моря появилась миниатюра слоя-маски (рис. 8).

Рисунок 8

  1. Выделите изображение моря (рис. 9)

Рисунок 9

  1. Нажмите на клавишу <Alt> и, удерживая ее, щелкните левой кнопкой мыши по миниатюре слоя-маски. В окне файла Из моря вместо изображения должно появиться белое поле (рис. 10).

Рисунок 10

  1. Для выделенного фрагмента примените градиентную заливку (рис. 11).

Рисунок 11

  1. Снимите выделение и щелкните на миниатюре слоя Море .

  2. Убедитесь, что вы получили плакат с плавным переходом изображения статуи в изображение моря.

  3. В палитре слоев щелкните правой кнопкой мыши по миниатюре слоя-маски на слое Море и выберите команду Apply Layer Mask (Применить маску слоя). Результат на рис. 12.

  4. Сохраните файл.

Рисунок 12

Задание 2.

Создать изображение, представленное на рис. 13, из исходных изображений (рис. 13, а и 13, б)

а б

в

Рисунок 13.

Последовательность выполнения задания:

  1. В графическом редакторе Photoshop из папки html_css_7/Lab откройте файлы Город.jpg и Пустыня.jpg.

  2. Активизируйте файл Город.jpg. Перетащите изображение город в окно с изображением пустыни (рис. 14).

Рисунок 14

  1. Выполните команду FileSave As (Файл – Сохранить как), назовите файл Город в пустыне.psd и поместите в папку myhouse.

  2. В палитре слоев измените названия слоев: фону дайте имя Пустыня, слою 1 – Город. (рис. 15).

Рисунок 15

  1. Активизируйте слой Город и расположите его так, как показано на рис. 16.

Рисунок 16

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

Рисунок 17

  1. Выполните команду Select Inverse (ВыделитьИнверсия). Результат выполнения команды представлен на рис. 18.

Рисунок 18

  1. Нажмите кнопку Add Layer Mask (Добавить маску слоя) , расположенную в нижней части палитры слоев.

  2. Убедитесь, что в палитре слоев рядом с миниатюрой слоя Город появилась миниатюра слоя-маски (рис. 19).

Рисунок 19

  1. Нажмите на клавишу <Alt> и, удерживая ее, щелкните левой кнопкой мыши по миниатюре слоя-маски. В окне файла Город в пустыне вместо изображения должно появиться изображение маски (рис. 20).

Рисунок 20

  1. Используя инструмент Ластик и Кисть, откорректируйте слой-маску (рис. 21).

Рисунок 21

  1. Щелкните на миниатюре слоя Пустыня. Если вы подчистили не все участки, то вернитесь в режим маски, щелкнув с нажатой <Alt> на соответствующей пиктограмме , и продолжите редактирование ластиком, пока не получите нужный результат.

  2. Откорректируйте положение слоя Город.

  3. Выполните кадрирование изображения, выделив необходимый фрагмент и выполнив команду Image Crop (ИзображениеОбрезать).

  4. Перейдите на слой Пустыня и откорректируйте яркость и контраст.

  5. Сохраните файл. Результат на рис. 22.

Рисунок 22.

Вернемся к созданию сайта. Все изображения для создания коллажа (а – dom.jpg; б – priroda.jpg; в – vodopad.jpg) расположены в папке html_css_7/shapka

Задание 3.