Разработка социального ролика о вреде интернета и социальных сетей

Рисунок 4 – Adobe Photoshop Extended

 

Для имитации движения в  Photoshop можно создавать кадры мультипликации, используя слои изображения. Можно создавать видеоизображения, основанные на одной из многих заданных пиксельных пропорций. После редактирования можно сохранить свою работу в виде файла GIF-анимации или PSD, который впоследствии можно проиграть во многих видеопрограммах, таких как Adobe Premiere Pro или Adobe After Effects. Доступно открытие или импортирование видеофайлов и последовательности изображений для редактирования и ретуширования, создание видеоряда мультипликации и экспорт работ в файл формата QuickTime, GIF-анимацию или последовательность изображений. Видеокадры можно отдельно редактировать, трансформировать, клонировать, применять к ним маски, фильтры, разные способы наложения пикселов, на них можно рисовать, используя различные инструменты.

4. Практическая часть

1. Создание  сценария видеоролика

 

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

Сценарий  видеоролика:

Что такое интернет? Добро  или зло? Сегодня более 55% посещают веб-сайты, из них 82% зарегистрированы в социальных сетях. Популярные соцсети в России: Вконтакте, Одноклассники, Twitter, Instagram, Фотострана,  Facebook. Гаджеты и сети превратили нас в роботов. Прокомментируй фотографию, поставь мне Like. (Происходит взрыв) Неужели мемы заменили нам эмоции? Ярость. Презрение. Радость. Смех. Одиночество. Печаль. Уважение. Жириновский: Хватит это терпеть! Люби и будь любимым. Займись спортом. Устройся на работу. Настоящая жизнь – offline. Сценарий и монтаж – Alex Runaway.

2. Создание раскадровок

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

Раскадровка служит для получения первого представления о том, как будет выглядеть фильм. Здесь можно определить длительность эпизода, ракурс и цепочку снимаемых эпизодов. Раскадровка редко получается в точности как оригинал, но она полезна как базис во время производства или съёмки видеоролика.

Раскадровка для каждой сцены данного сюжета состоит из описания первого и последнего кадра, а так же из рисунков ключевых кадров. Раскадровка созданного проекта представлена на рисунке 5.

3. Описание  процесса  создания 3D объектов для видеосцен

 

Специально для курсовой работы был разработан 3d-объект персонаж фирмы Google Android в программе Cinema 4D. Рассмотрим поэтапно, как он создавался и анимировался. Откроем программу и создадим туловище, при помощи объекта цилиндр с параметрами, показанными на рисунке 6.

 

Рисунок 6 – Создание туловища для 3d персонажа

 

Голову персонажа создаём  при помощи функции Создать > Моделирование > Булев. В этот модификатор помещаем объект сфера с радиусом 130. Также переместим в функцию Булев прямоугольник с параметрами как на рисунке 7 таким образом, чтобы она отсекала сферу в середине.

 

Рисунок 7 – Создание головы для 3d персонажа

 

Прорези для глаз делаются аналогичным образом, только вместо прямоугольника используют два узких  цилиндра. Руки и ноги персонажа  создаются при помощи объекта  капсула  (Создать > Объект > Капсула) и двигаются к туловищу при помощи функции перемещения .

Руки и ноги можно крутить  при помощи функции вращения, как  показано на рисунке 8.

Рисунок 8 – Изменение  позиции и поворота объекта

Рожки для персонажа сделаны  также при помощи объекта капсула  высотой 100 см и радиус 7см.

Конечным этапом для создания объекта служит наложение текстуры или материала. В контекстном  меню выберем функцию: Создать >Материал > Новый материал. Поместим все наши 3d объекты в ноль-объект. Этот пустой объект послужит нам группировкой, и просто перетянем на него в левой части шарик с текстурой. Схема объектов и характеристика текстуры представлены на рисунке 9.

Рисунок 9 - Создание и наложение  материала на 3d объект

 

Анимация движения 3d объекта проходила по кадрам с интервалом в 40 кадров для каждого конечности персонажа. При этом была задействована автоматическая расстановка ключевых кадров (всего 360) и угол поворота каждой ноги и руки персонажа. Например, начальный ключевой кадр ноги объекта имеет поворот на 55 градусов, а конечный – -55. (см. рисунок 10)

Рисунок 10 – Анимация персонажа  в Cinema 4D

В настройках рендеринга зададим размер композиции: 1280х720 и вывод всех кадров. Укажем путь к экспортируемому файлу в формате TIFF. При этом программа сама автоматически создаст ключевые кадры, из которых потом реализуется приложение к проекту After Effects, в виде покадровой анимации с альфа-каналом (рисунок 11).

Рисунок 11 – Настройки  рендеринга

 

Рисунок 12 – Рендер 3d объекта

4. Описание  процесса использования статичной  и динамичной графики в видеоряде

Статичная графика в курсовом проекте создавалась при помощи программы Adobe Photoshop. Рассмотрим на примере одного из объектов редактирование изображения. Откроем изображение и выберем инструмент волшебная палочка. Щёлкнем левой кнопкой мыши по белому полю, чтобы выделить его, далее нажмём клавишу Delete на клавиатуре (см. рисунок 13).

Рисунок 13 - Удаление фона с  изображения

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

Откроем изображение, взятое с интернета, и выберем в фотошопе пункт: Новый корректирующий слой  > Кривые, Новый корректирующий слой > Цветовой насыщенность и применим настройки как на рисунке 14.

Рисунок 14 - Цветовая коррекция  слоя

Далее выделим все слои, и нажмём правой кнопкой мыши выбрав пункт объединить слои. После с помощью инструмента овальная область и инверсия выделенной области сделаем круг в котором останется изображения нашего персонажа. Как это сделать показано на рисунке 15.

Рисунок 15 – Изображение  в круге

Все созданные в проекте  изображения сохраняем в формате  png. Этот формат имеет ряд преимуществ: малый вес файла и прозрачный фон т.е. наличие альфа-канала.

5. Описание процесса применения спецэффектов

 

Свечение вначале ролика и взрыв в середине (см. сценарий: «что такое интернет?» и «поставь мне лайк») являются футажами - специальными видеовставками с альфа-каналом, которые придают неповторимый эффект при минимуме настроек.

В курсовом проекте использовались спецэффекты светого джедайского меча. Для его создания в программе After Effects создадим узкий прямоугольник со скруглёнными краями. В правой панеле Effects & Presets программы выберем эффект Glow, Ramp и Hue Saturation.  Перетащим ихна слой во времнной панели внизу. Glow и Ramp предадут нашему мечу свечение и градиент, а изменение тона объекта от 0 до -2 с интервалом в полсекунды придадут эффект мигания. Ключевые кадры и настройки эффектов показаны на рисунке 16.

Рисунок 16 – Создание джедайского меча.

Вращающиеся круги – эффект наподобие зрения железного человека из одноимённого фильма был создан при помощи простых шейпов (фигур овалов). Внутри они прозрачные, зато имеют белую обводку Stroke c различной толщиной. Параметр Gap делит обводку круга на несколько частей. Чем больше значение, тем больше этих частей и расстояние между ними. При помощи начального и конечного значения Offset в ключевых кадрах задаётся вращение окружностей.

 

Настройки и результат  показан на рисунке 17.

Рисунок 17 – Эффект вращающихся  окружностей

В проекте также присутствует прогрессивный счётчик чисел, его наличие придаёт динамичность процессу, происходящему на экране. Для его создания в правой части экрана из библиотеки Effects & Presets выберем эффект Slider Control и сделаем привязку слоя с текстом в Source Text (см. рисунок 18)

Рисунок 18 – Прогрессивный счётчик чисел в After Effects

Теперь изменяя значение Slider Control, у нас будут меняться числа на экране. Чтобы числа были целыми, в поле Source Text введём экспрешн (специальная скрипт-формула): Math.round(effect("Slider Control")("Slider"));

6. Описание  процесса монтажа и вывода итогового  результата работы

 

Откроем программу After Effects и приступим к работе. Создадим новый проект (File> New Project) и новую композицию (Compostion > New Composition).

Для начала создадим фон  для всего видеоролика. Предварительно в программе Photoshop создадим файл градиента. Зальём в проект видео светящихся частиц (футаж) и изменим наложение слоёв градиента и футажа на Add.

Все файлы в проекте  располагаются таким образом, чтобы  создавалась целостная композиция на временной шкале. Появление и  затухание объектов на экране создаётся  различными эффектами, такими как: Position (изменение позиции), Rotation (изменение угла поворота объекта), Opacity (прозрачность), Scale (размеры объекта) и пресетами из набора Effects & Presets например Venition Blinds (появление в виде жалюзи) при помощи задания их начального и конечного значения. Для создания ключевого кадра достаточно просто щёлкнуть ромбик в левой части на временной шкале (рисунок 19).

Таким образом, создаётся большинство эффектов для всех слоёв проекта.

Рисунок 19 – Применение ключевых кадров к слою

Сторонние файлы, такие как  изображения, футажи и видеофрагменты, заливаются в проект при помощи команды File > Import.  Форматирование текста происходит на панели Character: там задаются размер текста, абзац, цвет и межстрочный/межсимвольный интервал. (рисунок 20)

Рисунок 20 – Форматирование текста

Иногда чтобы не перегружать  временную панель спрайтами (слоями) рекомендуется делать группировку  объектов в отдельный слой. Для  этого выделим нужные слои и выберем  в контекстном меню команду Layer > Pre-compose.

Ввиду того, что минутный ролик содержит большое количество настроек и эффектов, было решено представить  их применение в виде таблицы.

 

Таблица 1 – Ключевые параметры  появления и затухания объектов

 

Название объекта	Тип объекта	Применяемые параметры/эффекты
Ноутбук kasper.png	Изображение	Scale, Position
Что такое	Текст	Position
Интернет	Текст	X Rotation
?	Текст	Venition Blinds, Scale
Lens Flare Intro.mp4	Видео (футаж)	-
Gendalf.png	Изображение	Position, Scale, Opacity
Добро?	Изображение	Position, Opacity
Shape Layer3	Шейп окружность	Stroke, Dashes Offset, Scale
DartVeider.png	Изображение	Position, Opacity
Или зло?	Текст	Position, Opacity, Venition Blinds
Shape Layer4	Шейп прямоугольник	Position, Opacity + см раздел 4.5.
Сегодня, более, посещают,	Текст	Position, Opacity
Flag.png	Изображение	Scale, Opacity
Shape Layer1	Шейп окружность	Stroke, Dashes Offset, Scale
Веб-сайты, россиян	Текст	X Rotation, Opacity
55%	Массив, нумерованный текст	Source Text, Position, Opacity
Shape Layer2	Шейп окружность	Stroke, Dashes Offset, Scale
Зарегистрированы	Текст	Position, Text Offset
в социальных сетях	Текст	CC Light Wipe
82%	Массив, нумерованный текст	Source Text, Position, Opacity
Naselenie.png	Изображение	Маска слоя Mask Expansion, Свечение Glow
Shape Layer5	Шейп окружность	Stroke, Dashes Offset, Scale
Shape Layer6	Шейп окружность	Stroke, Dashes Offset, Scale
Soc.png	Изображение	Scale
Shape Layer 7 – 12	Шейпы, линии	Маска слоя Mask Expansion,
1-6.png	Изображения	Scale
Популярные соцсети в России	Текст	Venition Blinds
Вконтакте, Одноклассники, Twitter, Instagram, Фотострана, Facebook	Текст	Venition Blinds
Гаджеты и сети	Текст	Position
превратили нас	Текст	Position
в роботов	Текст	Position
Android.mp4	Отрендеренный 3d-объект, футаж	Scale
Прокомментируй	Текст	Position
фотографию	Текст	Position, X Rotation, Opacity
Поставь мне	Текст	Opacity
Girl.jpg	Изображение	Position,Y Rotation
Like.png	Изображение	Scale
Explosion Double.mov	Видео (футаж)	-
Взрыв.mp4	Видео фрагмент	Camera Lens Blur
Shape Layer13	Шейп окружность	Stroke Width, Offset
Mems.psd	Изображения в psd	CC Page Turn, Scale, Opacity
Неужели	Текст	Range Selector, Opacity
Мемы	Текст	Source Text, CC Twister, CC Jaws, X Rotation
Заменили нам	Текст	CC Jaws
Эмоции	Текст	Opacity
Ярость, презрение, радость, смех, одиночество, печаль, уважение	Текст	Scale,Opacity
Хватит это терпеть.mp4	Видео фрагмент	-
Windows Vector File.png	Изображение	Position, Scale
Lovestory.mp4	Видео фрагмент	Mask Path, Position, Scale
Люби и будь любимым	Текст	Position, Opacity
Sport.mp4	Видео фрагмент	-
Займись спортом	Текст	Position, Opacity
Work.mp4	Видео фрагмент	-
Устройся на работу	Текст	Position, Opacity
Настоящая жизнь	Текст	-
Offline	Текст	Glow Threshold
Сценарий и монтаж Alex Runaway	Текст	Opacity