Photoshop (Web-design) Урок 11 (лекция)

ПЛАН УРОКУ №9

Мета уроку: навчальна – вивчити поняття «комп’ютерної анімації», види комп’ютерної анімації, що містять анімації; навчитись створювати анімаційні зображення в редакторі Adobe Photoshop; виховна - виховувати зосередженість, вміння активно сприймати новий матеріал; розвиваюча — прививати інтерес до вивчення предмету.

Вид уроку: практика

ХІД УРОКУ

1. Організаційна частина: перевірка присутніх на уроці, перевірка готовності учнів до уроку. Повідомлення теми та мети уроку.

1. Мотивація до вивчання нового матеріалу.

2. Актуалізація знань:

Перевірка знань попереднього матеріалу.

1. Викладання нового матеріалу.

• Поняття «комп’ютерна анімація»;

• Види комп’ютерної анімації та програми обробки анімаційних зображень;

• Анімації для web в Adobe Photoshop;

1. Закріплення нового матеріалу.

Виконання самостійних завдань.

1. Підведення підсумків.

Повторення основних понять, які було вивчено на занятті.

Підведення підсумків виконання практичних завдання.

Обґрунтування оцінок учнів.

1. Домашнє завдання №9. Створення анімованого тексту. Створення анімованого банеру.

15.03.2016. Викладач: К. І. Монахова

КОНСПЕКТ УРОКА 9 – 2 часа

Компью́терная анима́ция — вид мультипликации, создаваемый при помощи компьютера. В отличие от более общего понятия «графика CGI», относящегося как к неподвижным, так и к движущимся изображениям, компьютерная анимация подразумевает только движущиеся. На сегодня получила широкое применение как в области развлечений, так и в производственной, научной и деловой сферах. Являясь производной от компьютерной графики, анимация наследует те же способы создания изображений:

• Векторная графика

• Растровая графика

• Фрактальная графика

• Трёхмерная графика (3D)

Для создания анимированных изображений существует множество программ как платных, так и бесплатных.

• Adobe Photoshop — платная

• GIMP (чаще используется на Linux) — бесплатная

• Adobe Flash Professional — платная

• CoffeeCup — условно бесплатная

• Blender (чаще используется на Linux) — бесплатная

• Synfig — бесплатная

• Pivot Stickfigure Animator — бесплатная

• Stykz — бесплатная

• Dimp Animator — бесплатная

• Anime Studio — платная

Одним из наиболее популярным форматом анимационных файлов является формат gif

GIF (англ. Graphics Interchange Format — «формат для обмена изображениями») — популярный формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов. Не зависящий от аппаратного обеспечения формат GIF был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации. GIF использует LZW-компрессию, что позволяет сжимать файлы, в которых много однородных заливок (логотипы, надписи, схемы). Долгое время GIF был одним из наиболее распространённых форматов в интернете.

Формат GIF поддерживает анимационные изображения. Они представляют собой последовательность из нескольких статичных кадров, а также информацию о том, сколько времени каждый кадр должен быть показан на экране. Анимацию можно сделать цикличной (англ. loop), тогда вслед за последним кадром начнётся воспроизведение первого кадра и т. д.

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

Недокументированной, но поддерживаемой возможностью является сохранение большего количества цветов с помощью анимированного GIF с нулевой задержкой между кадрами. При этом преодолевается ограничение в 256 цветов: каждый кадр содержит свою палитру

Широкое распространение анимированный GIF получил в Интернетв виде рекламных баннеров, заставок, логотипов и других "двигающихся" изображений, выполненных в формате GIF.

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

В предыдущих версиях в Photoshop входила программа ImageReady, которая представляла собой мощный WISIWYG-редактор для создания сайтов. Эти два продукта были объединены вместе еще в пятой версии Photoshop. В ImageReady возможно:

• cоздание анимационных GIF-изображений;

• cоздание интерактивных элементов навигации: кнопок и панелей;

• оптимизация изображений при экспорте в форматы, принятые в Internet;

• создание карт ссылок и ролловеров на основе изображений;

• многое другое.

Итак, в прежних версиях Photoshop приложение ImageReady, ориентированное на веб-дизайн, поставлялось вместе с Фотошопом. В последней версии Photoshop убрана клавиша быстрого перехода между этими программами и большинство возможностей ImageReady импортированы в Photoshop CS3. В частности, это касается и анимации изображений. Ранее она выполнялась в ImageReady, а теперь ее можно сделать непосредственно в Photoshop CS3.

Говоря об особенностях Photoshop CS3 для www, следует отметить, что в прежних версиях программы существовала команда File (Файл) | Automate (Автоматизация) | Web Photo gallery (Фотогалерея Web). Команда автоматически создавала галерею изображений для Интернет. Для веб-мастеров, поддерживающих и обновляющих большие галереи (например, на фотосайтах), вопрос автоматизации обработки и подготовки фотографий является одним из важнейших. К сожалению, в Photoshop CS3 теперь такой возможности по непонятным причинам теперь нет.

Одним из вариантов вывода изображения на экран компьютера является GIF-анимация. Напомню, что GIF-анимация складывается из набора кадров (в растровом формате), размещенном в одном файле - естественно, в формате GIF(Graphics Interchange Format). И создать такую последовательность кадров теперь можно непосредственно в Photoshop (в предыдущих версиях программы для этого необходимо было использовать вспомогательный редактор web-графики, поставляемый в комплекте с Photoshop, - ImageReady). Очень эффективным средством, обеспечивающим создание анимации в Photoshop, является механизм слоев и палитра Layers (Слои), позволяющие накладывать прозрачные слои изображения один на другой в установленном порядке. А начиная с Photoshop версии CS2, в программу были добавлены новые средства, объединенные в палитре Animation (Анимация) и позволяющие создавать анимационный ряд (последовательность кадров) изображений с целью последующего сохранения его в файле формата GIF.

Подготовка изображения для анимации

Для создания набора изображений для анимации можно, например, выбрать любое изображение, находящееся в отдельном слое, скопировать слой и применить к нему небольшое приращение размера, перемещение, деформацию и/или любую иную операцию, изменяющую положение, форму и/или содержимое результирующего изображения. Можно скопировать слой и проделать что-либо подобное еще несколько раз, чтобы создать последовательность кадров для будущей анимации. Повторяйте этот процесс, пока количество кадров анимации не будет готово. Итак, после того, как мы создали каждый кадр анимации в отдельном слое, приступим непосредственно к анимированию изображения.

Создание анимации для Интернет

• Подготовка изображений для анимации

Предварительная работа по подготовке изображений заключается в их кадрировании, настройке по тону, цвету и прочим параметрам. Фотографии могут быть из разных источников и их необходимо сделать примерно одного размера. Обычно все фотографии приводятся к единому типоразмеру по одной стороне (обычно по высоте). Часто в левый верхний угол снимка помещают водяные знаки или надписи. Завершает этот шаг уже знакомая нам команда оптимизацией для веба (Save for Web & Devices…).

Для создания GIF – анимации из файлов формата JPEG необходимо конвертировать изображения из формата JPEG в формат GIF. Это можно сделать по-разному, например, командой File (Файл) | Save for Web & Devises (Сохранить для веб и девайсов).

Принцип создания анимации в Photoshop следующий. Вы рисуете покадрово всю анимацию, располагая каждый новый кадр на новом слое. Для просмотра многослойного рисунка в виде анимационного ролика (1 слой = 1 кадр) нужно в каждом кадре скрыть ненужные в данный момент слои. Задав задержку для каждого кадра, получим слайд-шоу.

Для настройки анимации выполните команду Window (Окно) | Animation (Анимация) - в нижней части интерфейса Photoshop появиться окно управления анимацией

Используя на палитре анимации кнопку Duplicates selected frames (Продубливовать выделенные кадры), а на палитре слоев кнопку Indicates layer visibility (Индикатор видимости слоя) поместите все слои на палитру Animation (Анимация) 

Теперь на палитре Animation (Анимация) вы можете видеть очерёдность кадров вашей анимации. Если кадры стоят неправильно, то исправить проблему можно здесь же, просто поменяв кадры местами, для чего нужно произвести буксировку выделенного вами кадра в нужное место мышкой непосредственно на палитре анимации.

Проиграть анимацию можно нажатием кнопки Plays animation (Проиграть анимацию). Вероятно, вы не будете довольны результатом, т.к. кадры сменяются слишком быстро. Временной интервал между кадрами можно изменять. Для этого нажмите правую кнопку мыши на надписи "0 sec" ниже каждого кадра, и выберите один из предлагаемых интервалов.

Если вас не устраивают предлагаемые интервалы то, выбрав пункт Other (Другой) вы сможете установить свой собственный интервал (в качестве разделителя используется запятая, а не точка). В данном примере мы установили интервал в 1 секунду, а в списке количества проигрывания - выбрали вариант Forever (Всегда).

• Создание переходов между кадрами

Когда вы попробуете проиграть получившийся анимационный ролик, то увидите, что кадры будут меняться скачками. Для создания плавного перехода между кадрами есть специальная кнопка Tweens animation frames (Сглаживание кадров аниогации). При помощи этого инструмента создаются плавные переходы из одного состояния в другое (морфинг изображений). Это не уникальный инструмент. Перетекание одного изображения в другое создают многие редакторы, например, CorelDRAW.

В меню окна Tween (Сглаживание) вы можете видеть количество промежуточных кадров и три флажка - Position (Положение), Opacity (Прозрачность) и Effects (Эфекты). ФлагPosition (Положение) необходим для задания смещения каждого кадра относительно предыдущего. Opacity (Прозрачность) задает прозрачность перехода кадров. Effects - это эффекты.

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

• Оптимизация и сохранение анимации

Делается оптимизация размера анимационного файла при помощи специальной опции, а именно: на палитре Animation (Анимация) нажмите на кнопку справа вверху, активируйте из контекстного меню строку Optimize Animation (Оптимизация анимации) и выполните команду OK.

Для сохранения результата нашей работы в виде GIF - файла выполните команду File (Файл) | Save for Web & Devises (Сохранить для веб и девайсов) и после нажатия на кнопкуSave в списке Тип файла укажите Image only (*gif).

15.03.2016 Конспект составлен преподавателем Е. И. Монаховой