Перечень используемого оборудования

2.2.1 Персональный компьютер

2.2.2 Описание практической работы

Задание

3.1Провести цветокоррекцию фотографий: Британец, Фотограф, Шотладец, Офис, Листья, Виноград, Чекан.

3.2. Провести ретуширование фотографий: Замок, Родители, Девушки

3.3. Создать рекламный плакат

3.4. После обработки всех фотографий сохраните для web.

Контрольные вопросы

4.1 Какие эффекты вы применили при изготовлении рекламного плаката?

4.2 Как изменить яркость и контрастность изображения?

4.3 Как осветлить изображение?

4.4 Как исправить цветовой тон и насыщенность изображения?

Содержание отчета

5.1 Наименование работы

5.2 Цель работы

5.3 Задание

5.4 Выводы по работе

5.5 Ответы на контрольные вопросы

Список литературы

6.1 Дунаев В.В. Сам себе Web-дизайнер. – СПб.: БХВ – Петербург; Арлит, 2002

6.2 Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2004.

6.3 Клонингер К. Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: Пер с англ. – М.: ДМК Пресс, 2005

Практическое занятие 9

«Создание баннера для web-страницы»

Цель работы

1.1 научиться создавать баннеры для web-страниц

Пояснение к работе

2.1 Краткие теоретические сведения

Баннер – это рекламный блок, при щелчке по которому посетитель переходит на рекламируемый сайт. Баннеры размещают на web-страницах, для привлечения посетителей (потенциальных клиентов) на свой сайт или для продвижения бренда. В настоящее время баннеры очень активно используются в Интернете, их по праву можно считать одним из главных инструментов для проведения эффективной рекламной кампании.

Виды баннеров

Самый первый баннер появился в сети в 1994 году. За свою недолгую историю у баннеров появилось множество разновидностей и технологий на которых они основывались. Ниже приведем несколько основных видов баннеров:

• JPG баннер – один из первых разновидностей баннера появившихся в Интернете, представляет из себя статическое изображение. На данный момент считается устаревшим и не может соперничать со своими более современными собратьями.
• GIF баннер – следующая ступень эволюции баннеров. Представляет собой анимированный графический элемент созданный из набора статичных изображений (кадров). Обычно состоит из 3-5 кадров.
• Flash баннер – самая современная технология. Позволяющая создавать самые эффектные анимированные баннеры. Предоставляет обширные возможности для реализации дизайнерских идей.
• Пиксельные баннеры – обособленный вид баннеров. Если при создании JPG, GIF и Flash баннеров в большинстве случаев используются фотоизображения, что негативно сказывается на весе, пиксельные баннеры создаются путем прорисовки дизайнером каждого пикселя (пиксель – мельчайшая точка или элемент изображения) вручную. Такая технология, позволяет создать красочную анимацию при минимальном весе баннера.
• Форматы баннеров

Формат – параметры ширины и высоты баннера, измеряемые в пикселях. Например, баннер шириной 468 пикселей и высотой в 60 пикселей, обозначается как 468х60. В техническом плане ограничений в формате баннера не существует. Существуют лишь общепринятые стандарты, на которые опирается большинство владельцев web-сайтов, при проектировании рекламных мест на своем ресурсе. Вы вполне можете отойти от общепринятых форматов, если владелец рекламного места предоставляет возможность размещения “нестандартных” баннеров.

Перечень используемого оборудования

2.2.1 Персональный компьютер

2.2.2 Описание практической работы

Задание

3.1Создайте 2 баннера для web-страниц на выбор, а затем их сохраните для web

Варианты заданий

Вариант 1	Вариант 2
Вариант 3	Вариант 4
Вариант 5	Вариант 6

Контрольные вопросы

4.1 Какие эффекты вы применили при изготовлении баннера?

4.2 Какие основные виды баннеров вы знаете?

4.3 Что такое баннер?

Содержание отчета

5.1 Наименование работы

5.2 Цель работы

5.3 Задание

5.4 Выводы по работе

5.5 Ответы на контрольные вопросы

Список литературы

6.1 Дунаев В.В. Сам себе Web-дизайнер. – СПб.: БХВ – Петербург; Арлит, 2002

6.2 Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 2004.

6.3 Клонингер К. Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: Пер с англ. – М.: ДМК Пресс, 2005

Практическое занятие 10

«Создание GIF-анимации»

Цель работы

1.1 Научиться создавать различные анимационные эффекты

1.2 Научиться создавать GIF-баннеры.

Пояснение к работе

2.1 Краткие теоретические сведения

GIF-анимация - последовательное отображение с заданной частотой растровых изображений, хранящихся в одном GIF-файле.

Создание нового изображения. Откройте программу Adobe ImageReady. Создайте новый файл: File (Файл) → New (Новый). Задайте следующие параметры изображения:

· Name (Имя) = banner-1;

· Width (Ширина) = 468 пикселей;

· Height (Высота) = 60 пикселей;

· Contents of First Layer (Содержимое первого слоя) – White (Белый).

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

3. Создание нового слоя. В правом нижнем углу окна программы в палитре Layers (Слои) щелкните по кнопке Create New Layer (Создать новый слой). Переименуйте новый слой Layer 1 в Green. для этого дважды щелкните по названию слоя, напишите новое название, нажмите клавишу Enter.

4. Создание зеленого прямоугольника. На панели инструментов (слева) щелкните по инструменту прямоугольное выделение Marquee (Выделение). Нарисуйте прямоугольник на рисунке. Выберите инструмент заливки Paint Bucket (Сплошная заливка). Теперь справа на палитре цветов Swatches (Плашки – ямочки для краски на палитре художника) выберите зеленый цвет и щелкните инструментом заливки (ведром) в выделенном прямоугольнике. Снимите пунктирное выделение, нажав клавиши Ctrl+D. Пока вы не снимите выделение, многие команды будут недоступны.

5. Создание красного прямоугольника. Создайте слой Red и нарисуйте красный прямоугольник.

6. Создание надписи FREE. Создайте новый слой, на палитре инструментов (слева) выберите инструмент Type (Печать текста). В палитре Swatches выберите белый цвет. На панели свойств инструмента Type (Печатать текст) (см. вверху) выберите шрифт Comic Sans MS, размер шрифта 36 px. Щелкните над зеленым прямоугольником и напечатайте заглавными буквами FREE. На палитре инструментов слева выберите инструмент Move (Движение) передвиньте текст так, чтобы он располагался как на образце.

7. Создание падающей тени у надписи. Примените к этому тексту эффект Drop Shadow (Падающая тень). Справа внизу на палитре Layers (Слои) щелкните по кнопке Add a layer style (Добавить стиль для слоя).

Откроется список стилей, выберите Drop Shadow (Падающая тень).

8. Создание остальных надписей.Напечатайте текст site (белого цвета) и примените к нему стиль Drop Shadow (Падающая тень). Напечатайте текст COOL (синего цвета) и примените к нему стиль Drop Shadow (Падающая тень). Напечатайте текст click here (синего цвета) и примените к нему стиль Drop Shadow (Падающая тень).

11. Создание прямоугольника с размытыми краями. Выделите слой с надписью click here, для этого один раз щелкните по иконке слоя. Создайте новый слой, назовите его Black. Обратите внимание, новый слой всегда создается выше выделенного. На слое Black нужно нарисовать полупрозрачный черный прямоугольник, который будет маркировать надпись click here.

Выберите инструмент Rectangle Marquee (Прямоугольное выделение). На панели свойств этого инструмента в поле Feather (Перо) задайте 5 пикселей, этим вы установите степень размытия краев прямоугольника. Нарисуйте прямоугольник. Залейте его черным цветом. На палитре Layers (Слои) в поле Opacity (Непрозрачность) установите степень непрозрачности 60%.

Так как в начале анимации содержимое слоев Black и click here не видно, отключите видимость этих слоев, для этого щелкните по кнопке с открытым глазом напротив названия каждого слоя на палитре Layers (Слои).

12.Сохраните рисунок в формате PSD (см. меню File → Save).

1. Создание кадров анимации. Текущее состояние рисунка отображается в первом кадре анимации. Создайте еще один кадр, для этого щелкните на кнопке Duplicates current frame (Продублировать текущий кадр). Справа от первого кадра появится второй кадр, пока оба кадра идентичны.

2. Создание начального и конечного кадра для анимации движения. Щелкните мышью на миниатюре первого кадра. В панели инструментов выберите инструмент Move (Перемещение). В палитре Layers (Слои) активизируйте слой с надписью COOL. Переместите надпись вниз так, чтобы текст оказался за границей рисунка. Это начало движения слова. Во втором кадре переместите надпись COOL максимально вверх - окончание движения надписи.

3. Автоматическая анимация промежуточных кадров. Выделите первый и второй кадр, для этого щелкните по каждому кадру при нажатой клавише Ctrl. Выберите команду Tweens animation frames (Промежуточные кадры анимации). Откроется диалоговое окно Tween (Промежуточные кадры). В группе Layers (Слои) установите переключатель All layers (Слои), в группе Parameters (Параметры) – оставьте только флажок Position (Позиция), а в поле Frames to Add (Добавить кадры) оставьте число 5. Щелкните по кнопке ОК. Программа автоматически вставит промежуточные кадры между двумя выделенными кадрами.

4. Установка обратного хода анимации. Выделите последний кадр анимации. Щелкните по кнопке Tweens animation frames (Промежуточные кадры анимации). В диалоговом окне Tween (Промежуточные кадры) установите те же параметры, что и в предыдущем пункте, только в списке Tween With (Промежуточные между) выберите вариант First Frame (Первый кадр). Щелкните по кнопке ОК.

5. Создание эффекта мигания. Создайте новый кадр. Включите видимость слоя click here, для этого щелкните на палитре Layers (Слои) по пустому окошку напротив названия, там где должен появится открытый глаз. Также включите видимость слоя Black. Проделайте следующую процедуру:

1) создайте новый кадр, отключите видимость слоя Black;

2) создайте новый кадр, отключите видимость слоя click here.

Действуя таким образом, вы получите эффект мигания.

6. Просмотр анимации в окне ImageReady. Щелкните на кнопке Plays/stops animation (Проигрывать/остановить анимацию) кнопка в виде стрелки вправо. Посмотрите на результат в окне рисунка. Чтобы остановить показ анимации, щелкните по этой же кнопке Plays/stops animation (Проигрывать/остановить анимацию), теперь она выглядит как квадратик. Правее кнопки проигрывания анимации находится кнопка Selects next frame (Выбрать следующий кадр). Левее кнопки проигрывания находятся кнопки Selects previous frame (Выбрать предыдущий кадр) и Selects first frame (Выбрать первый кадр).

7. Просмотр анимации в браузере Internet Explorer. Нажмите на панели инструментов кнопку Preview in Default Browser (Просмотр в браузере) .

8. Задание времени задержки кадра (тайминг). Для каждого кадра анимации можно задать произвольное время задержки. На палитре Animation (Анимация) выделите кадр. Щелкните мышью на маленькой треугольной стрелке, расположенной ниже миниатюры кадра, рядом с ней выводится текущее время показа кадра – 0sec (0 секунд).

В открывшемся списке выберите нужный вариант.

Если нужно ввести время, которого нет в списке, например, 0.3sec, нажмите команду Other (Другие) и в поле Set Delay(Выбрать задержку) напечатайте время задержки, нажмите кнопку ОК.

9. Оптимизация анимации. Для GIF-анимации исключительно важна оптимизация, поскольку это фактически несколько изображений в одном файле. Для всех кадров анимации используются одинаковые параметры оптимизации. Параметры оптимизации устанавливаются в палитре Optimize (Оптимизация), см. верхний левый угол окна программы.

Щелкните на вкладке Optimized (Оптимизированное) в окне документа, чтобы следить за результатом оптимизации. В списке Color reduction algorithm(Алгоритм сокращения цветов) палитры Optimize (Оптимизация) выберите вариант Selective (Селективная), а в списке Dithering algorithm (Алгоритм сглаживания) – Diffusion (Диффузия) с силой около 80 %. Для данного изображения достаточно оставить 16 цветов. Выберите это значение в списке Colors (Цвета). Параметр качества Lossy (Качество) установите в районе 15. Размер файла после оптимизации вы сможете увидеть в строке состояния окна документа.

Для GIF-анимации существуют также особые алгоритмы оптимизации. Откройте меню палитры Animation (Анимация). – в правом верхнем углу палитры. Выберите команду Optimize Animation (Оптимизировать анимацию) в меню палитры Animation (Анимация). Она открывает одноименное диалоговое окно, предлагающее два направления оптимизации. Первое состоит в автоматической обрезке каждого кадра изображения, чтобы в нем оставались только изменившиеся области. Второй путь состоит в удалении всех пикселей, которые не изменяются от кадра к кадру. Оба способа оптимизации приносят очень существенный выигрыш для большинства анимированных изображений. Поставьте оба флажка и щелкните на кнопке ОК.

10. Удаление лишних кадров. Крайним способом уменьшения размера изображения можно считать удаление отдельных кадров. Критически взгляните на получившуюся анимацию и подумайте, можно ли сократить ее на кадр-другой. Выделите лишние кадры анимации в палитре Animation (Анимация). Щелкните на кнопке с изображением мусорного ведра в нижней части палитры. Выделенные кадры будут удалены.

Сохраните готовое изображение в формате PSD для редактирования: File (Файл) – Save (Сохранить).

11. Сохранение анимации для использования на Web-странице. Проверьте, чтобы на палитре Options (Опции) был выбран формат GIF. В меню File выберите команду Save Optimized As. Поверьте, чтобы в поле Тип файла стояло Image Only (*.gif) (Только изображение формата GIF), задайте имя файла (например, banner-1) и нажмите кнопку Сохранить.

12. Вставка баннера на web-страницу. Готовый баннер можно вставить на Web-страницу с помощью следующего тега изображения:

<IMG src=”banner-1.gif” width=”468” height=”60” border=”0”alt=”Free cool site”>

Но так как баннер - это всегда ссылка на рекламируемый сайт (например, www.freecoolsite.com), следует встроить тег изображения в тег ссылки:

<A href=”http://www.freecoolsite.com/”>

<IMG src=”banner-1.gif” width=”468” height=”60” border=”0”alt=”Free cool site”></a>

Примечание. В имени файла баннера рекомендуется явно указывать его размеры и, возможно. рекламируемый ресурс, например: banner_freecoolsite_468x60.gif.

1. Создание заготовки баннера. Создайте фон баннера. Каждую надпись разместите на отдельном слое. Стрелку и символ телефона можно взять из списка векторных форм Custom Shapes(Стандартные формы). Приметите к элементам баннера эффекты слоя (тень, скос и рельеф).

2. Создание эффекта проявления. Слой с надписью $0,08/мин на первом кадре сделайте полностью прозрачным (Opacity=0%), на последнем кадре слой с этой надписью сделайте непрозрачным (Opacity=100%). Выберите команду Tweens animation frames (Промежуточные кадры анимации). Откроется диалоговое окно Tween (Промежуточные кадры).

В группе Layers (Слои) установите переключатель All layers (Слои), в группе Parameters (Параметры) – оставьте только флажок Opacity (Непрозрачность), а в поле Frames to Add (Добавить кадры) оставьте 5 кадров. Щелкните на кнопке ОК.

Добавьте обратный ход анимации для эффекта проявления, так чтобы надпись то появлялась, то исчезала.

3. Создание покадровой анимации движения стрелки. Правило создания покадровой анимации в программе ImageReady можно сформулировать следующим образом: один кадр - один слой. Иначе говоря, каждое новое изменение в покадровой анимации должно быть прорисовано на отдельном слое. В нашем случае, чтобы провести анимацию стрелки, сделайте копию слоя с рисунком стрелки. На новом слое инструментом Move (Перемещение) подвиньте стрелку ближе к надписи $0,08/мин. Отключите видимость копии слоя со стрелкой во всех кадрах анимации. В середине анимации, в том кадре где надпись $0,08/мин наиболее видна, отключите видимость слоя со стрелкой и включите видимость его копии, там где стрелка подвинута к надписи.

4. Сохраните баннер в двух форматах: для редактирования (PSD) и для просмотра (GIF).