Если В Вашей презентации только текст, то люди быстро устают.

Когда внимание рассеяно, донести основные мысли доклада невозможно в принципе.

Поэтому, с помощью анимации мы будем регулировать скорость чтения и управлять вниманием.

ОПРЕДЕЛЕНИЕ

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

* Википедия.

Итак, из рассмотренного нами определения видно, что под анимацией понимаются движения на картинке.

Однако, мы будем понимать анимацию, как те эффекты Power Point которые применяются к объектам и заставляют их двигаться, показываться и скрываться .

Как применить теорию на практике

В Power Point есть три типа анимации:

Б) Выделения;

С) Выхода.

Все вышеописанные типы характеризуются появлением, движением и исчезновением таких объектов как текст, графика, фигуры.

I. Работа с текстом

1. В начале откроем «пульт управления анимацией», нажав на закладке «Анимация» и затем на кнопке «Область анимации».

(Рисунок 1)

2. Затем выделив слайд начинаем применять анимацию ко всем его элементам.

2.1. Выделяем заголовок презентации и на закладке «Анимация» выбираем тип анимации «Плавное приближение».

(Рисунок 2)

2.2. Выделяем подзаголовок и повторяем действия из пункта 2.1.

3. В области анимации кликаем на раскрывающееся меню и выбираем для подзаголовка время запуска – «После предыдущего».

(Рисунок 3)

Информация:

В окне «Область анимации» все элементы нумеруются;

Последовательность эффектов можно изменить, нажав во фрейме «Изменить порядок презентации» - «Переместить вперед».

(Рисунок 4)

4. Изменяем направление движения текста, выделив текст и нажав на закладке «Анимация» кнопку «Параметры эффектов» - «Вверх».

(Рисунок 5)

5. Увеличиваем / уменьшаем время воспроизведения анимации , выделив подзаголовок и во фрейме «Время показа слайдов» увеличив время нажав на кнопку со стрелочкой вверх.

(Рисунок 6)

II. Работа с графикой

6. Выделив картинку нажимаем на кнопку «Добавить анимацию» и выбираем «Покачивание» (Рисунок 7, пункт 1,2).

7. Так как анимация картинки будет показываться после текста, то мы нажимаем на кнопку выпадающего меню и выбираем «Запускать после предыдущего» (Рисунок 7, пункт 3,4).

(Рисунок 7)

III. Работа с фигурами

8. Выделив фигуру стрелочки нажимаем на кнопку «Добавить анимацию» и выбираем «Плавное приближение» .

(Рисунок 8)

9. Так как стрелочка будет указывать на рисунок, то мы запустим ее по времени вместе с картинкой, а не с текстом. Вызываем меню настройки анимации фигуры «Стрелочка» и выбираем «Вместе с предыдущим».

(Рисунок 9)

10. Теперь можно нажать на кнопку «Просмотр», чтобы увидеть какие изменения мы внесли на втором слайде.

(Рисунок 10)

Профессиональный уровень

Если Вы хотите сделать сложные передвижения в презентации применив анимацию, то для этого:

Выделим объект и нажав «добавить анимацию», выберем «Пользовательский путь»;

(Рисунок 11)

Нарисовав появившимся карандашом путь, мы получаем очень сложное движение.

(Рисунок 12)

Выводы

В начале создания любой презентации мы должны поставить цель создание презентации и спланировать ее содержание.

Основная информация людям идет часто от обычного текста, изображений и таблиц, с диаграммами.

Дальнейшая работа может строиться только на подборе способов преподнесения информации и управления временем показа.

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

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

Итак, легко видеть, что создание анимации в презентации вполне посильно начинающим пользователям.

Что же касается количества анимационных эффектов, то рекомендуется использоваться 2-3 вида.

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

Абсолютно понятно, что мы получили набор инструментов, которые можем по мере набора опыта применять все более уместно и эффективно.

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

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

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

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

Разберемся как выполнить этот эффект на примере картинки с самолетом, которую вы видите слева от этого текста.

ШАГ 1.
Подыскиваем подходящие картинки. В данном случае это самолет и облака.
(Для урока можете взять эти же, что и у меня. По щелчку по картинке она откроется в новом окне в полном размере. Картинка самолета в формате png без фона.)

ШАГ 2.

Открываем картинку с облаками в фотошопе. Снимаем замочек, блокирующий слой. Для этого просто перетаскиваем иконку замочка со слоя в корзину (правый нижний угол окна слоев).

Переименовываем слой, даем имя .

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

ШАГ 3.

Для того, чтобы облака двигались достаточно медленно, необходимо, чтобы картинка с облаками была намного длиннее по ширине, чем картинка самолета.

Плюс еще важно, чтобы во время того, когда начало картинки и ее конец сменяют друг друга (движение облаков будет циклическим), не было бы видно этого перехода.

Поэтому выполняем следующие действия:

Даем команду
В открывшемся окошке изменяем сначала центр холста, выбираем левый центральный, чтобы холст увеличивался в одну сторону. А затем вводим длину холста в два раза больше исходной. Снизу на картинке видно, что исходная ширина (Width ) 600px, а новая ширина 1200px.

Копируем слой с облаками.
Для этого выделяем слой и нажимаем комбинацию клавиш Ctrl+J или даем команду Слой - Дублировать слой (Layer - Duplicate Layer).

Рисунок облаков на верхнем слое передвигаем вправо на свободное место.
Затем разворачиваем его по горизонтали для того, чтобы не было видно место стыка.

Для того, чтобы развернуть картинку, выделяем ее (клавиша Ctrl + щелчок мышкой по картинке на соответствующем слое), нажимаем комбинацию клавиш Ctrl+T , щелкаем по картинке правой кнопкой мыши и в открывшемся меню выбираем пункт Повернуть по горизонтали (Flip Horizontal)

Склеиваем оба слоя. Для этого проще всего выделить верхний слой и нажать комбинацию Ctrl+E, ну или выделить оба слоя и дать команду Слой - Слить слои (Layer - Merge Layers).
В итоге получаем вот такую длинную картинку с облаками:

ШАГ 4.

Приступаем к созданию движения.

Возвращаем исходный размер холста у картинки облаков.

Даем команду Изображение - Размер холста (Image - Canvas Size...) и указываем исходную ширину в 600px.

Двигаем картинку так, чтобы совместить левый край холста и левый край картинки с облаками. Лучше пользоваться не инструментом Перемещение (Move Tool) , а клавишами управления курсором.

Открываем панель анимации. Окно - Анимация (Window - Animation).
Так как у нас один слой, то и на панели анимации мы увидим всего один кадр.
Добавляем еще один кадр к анимации. На этом кадре сдвигаем картинку с облаками влево, пока не совместим правый край холста и правый край картинки.
Внизу на иллюстрации стрелками показана кнопка создания кадров, новый кадр и правая граница холста и картинки.

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

Между первым и вторым кадрами вставиться еще 15, то есть второй кадр станет 17. Нам он не нужен больше (16 и 17 полностью совпадают), поэтому удаляем его.Выставляем время смены кадров в 0,1 сек и делаем повторение анимации постоянным (Forever).

В итоге получаем вот такую анимацию движущихся облаков.

ШАГ 5.

Осталось добавить рисунок самолета. Если у вас рисунок с фоном, то фон, конечно же нужно удалить. У меня самолет сразу в формате png с прозрачностью.Поэтому я просто открываю его в фотошопе, затем выделяю все 16 кадров на анимации с облаками (Shift) и вставляю самолет на новый слой.


Вот в принципе и все!
Сохраняем наше произведение следующим способом.
Даем команду:
Файл - Сохранить для WEB и устройств. В открывшемся окне ОБЯЗАТЕЛЬНО выбираем формат GIF и сохраняем с нужным именем.

Хотите уникальную аватарку для дневника/форума? Нигде не найти именно то, что нужно? Желаете поразить посетителей анимированными элементами дизайна на вашем веб-сайте? Создайте свою собственную анимированную gif картинку (или даже серию), используя продукты из линейки Adobe Photoshop. Поверьте, это действительно легко, справится даже начинающий.

Вам понадобится:
- Adobe Photoshop по идее любой версии, от 5.5;
- Adobe ImageReady (идет в комплекте с Photoshop).

Создаем несколько картинок, чтобы собрать из них анимированный gif:

1. Откройте Photoshop и создайте новый пустой файл подходящего размера: как правило, в сервисах соцсетей и на форумах допускаются аватары размером 80х80, 100х100, 200х200 и в редких случаях 250х250. Выберите один из этих размеров, установите цветовой режим RGB. Если вы намерены создать движущуюся картинку, фоном для которой послужит фон сайта/форума, отметьте здесь так же прозрачный (transparent) фон. Но помните, что только некоторые фигурки получается вырезать из картинок настолько аккуратно, чтобы убрать белесые (и другого цвета) очертания, так что подумайте, все-таки задав фиксированный фон будущей аватаре или баннеру вы значительно облегчите себе жизнь.

2. Выберите в меню пункт «Window» (Показать - инструменты/панели) и в раскрывшемся списке отметьте галочкой пункт «Layers» (Показать панель «слои»). Чаще всего галочка уже стоит, то есть показ панели задан по умолчанию.

3. Выберите в левой узкой панели инструмент Карандаш (Pensil) и нарисуйте с его помощью картинку. Там же есть кисть, если орудовать ею вам будет удобнее. Чтобы переключиться между инструментами, нажмите на квадратик, удерживая кнопку мыши в нажатом состоянии, переведите курсор на нужный элемент в выпавшем рядом списке и отпустите.

Как вариант, можно нарезать необходимых объектов из найденных в Интернете картинок, используя лассо и все его аналоги из списка (Lasso Tool),

Выделение квадратом и кругом (все варианты из списка Marquee Tool),

Функцию копирования и вставки выделенного (после выделения, в меню выбирайте: Edit->Copy, затем в созданном вами новом файле Edit->Paste) и ластик, чтобы убрать лишнее. Уменьшайте или увеличивайте, наклоняйте, отображайте или поворачивайте скопированную картинку по своему желанию при помощи Edit->Free Transform и Edit->Transform.

Либо можно сделать надпись на нужном фоне при помощи Type Tool, и затем, используя фильтры, вносить изменения на новых слоях для получения движущейся картинки в конечном итоге; или сделать так, чтобы на каждом новом слое появлялось по 1 новой букве или новому слову.

4. Нажатием правой кнопки мыши на выделенном исходном слое выберите в панели инструментов «Слои» пункт «Дублировать слой» (Duplicate Layer). Выделите новый созданный слой, если этого не произошло автоматически. И затем, после работы, каждый раз копируйте последний слой с внесенными изменениями (либо первый, если по задумке вам нужен именно он).

5. Внесите на новом слое какие-то изменения в картинку: что-то добавьте (например, новый объект или буквы), что-то уберите (ластиком), уменьшите/увеличьте общий размер, поменяйте цвет какой-то детали, осветлите/затемните картинку в целом (в меню Image->Adjustments->Brightness/Contrast; таким образом, вы сможете добиться того, что ваша картинка будет мигать при смене в gif файле светлой и темной картинок), и т. д.

Помните, что в gif картинке слои будут СМЕНЯТЬ по порядку друг друга, а не накладывать дополнения на первый слой. За счет дополнений и изменений в новых слоях gif картинка создаст имитацию движения. Поэтому, если вы через копирование будете добавлять новые элементы в картинку (а они пойдут опять новыми, отдельными слоями), не забывайте выделять слой с последним дополнением и далее через меню Layer->Merge Dowm (Слои->Объединить с одним нижним; нажать 1 раз или в зависимости от количества скопированных дополнений) объединять новую(ые) деталь(и)-дополнение(я) с дубликатом последнего слоя.

6. Когда все слои будут готовы, проследите чтобы именно ваш файл со слоями был активным в этот момент, и выберите в меню: File->Jump To-> Adobe ImageReady. Созданный вами файл со слоями будет перенесен в приложение ImageReady.

Создаем анимированную картинку в Adobe ImageReady:

1. В меню выберите и отметьте галочкой: Window->Show Animation (как правило уже установлено по умолчанию). Таким образом, вы активируете панель Анимации. В панели анимации перенесенный файл будет выглядеть, как 1 единственный кадр. Если при переносе произошел сбой и ImageReady сама автоматически сделала раскадровку, смотрите сразу п. 3.а ниже.

2. В правом верхнем углу панели Анимации нажмите на стрелочку, откроется подменю, в нем выберите пункт Make Frames From Layers (Сделать кадры из слоев). Программа сделает вам раскадровку по слоям.

На данной картинке как раз показан результат неверной работы, когда при создании файла и его слоев в Photoshop не учитывался тот факт, что каждый новый слой-кадр в gif будет полностью сменять предыдущий, а не накладывать дополнения на исходную картинку. На самом деле на каждом из 4-х кадров выше должен быть одуванчик, и на каждом последующем кадре все, что было изображено на предыдущем.

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

3. В меню выберите: File->Save Optimized As (Сохранить оптимизированный файл как…) и далее выберите папку и имя для сохранения анимированного gif файла.
3.а. После любого изменения файла в Photoshop(е) обязательно заново повторяйте переброску файла File->Jump To-> Adobe ImageReady, иначе все настройки в ImageReady собьются в нечто непонятное.
Бывает, что настройки и синхронизация между Photoshop и ImageReady не срабатывают верно, тогда вам придется, выделяя каждый кадр в панели Анимации, переходить на панель слоев справа (аналогичную панели слоев в Фотошопе) и подключать или отключать (нажимая на изображение глаза слева от каждого слоя) для конкретного кадра нужные слои. В общем-то тоже ничего сложного.

Дополнения:

В принципе, рисовать можно и в ImageReady, т. к. панели инструментов у них с Photoshop похожи;

На панели Анимации, внизу, под кадрами, есть стандартные кнопки управления видео - нажав на стрелку, можно запустить превью, и посмотреть, как будет выглядеть ваша gif картинка;

Чем больше кадров, тем тяжелее будущая gif картинка, имейте это в виду.

Хотите удивить близких и друзей? Сделайте слайд-шоу с элементами синемаграфии! В программе «ФотоШОУ PRO» вы найдете все необходимые инструменты для создания подобного проекта. Прочитайте статью и узнайте обо всех нюансах разработки слайдов с «живыми» фотографиями в этом приложении. А если у вас ещё не установлено «ФотоШОУ PRO», то исправьте это прямо сейчас: с нашего сайта.

Как сделать синемаграфию из фото для слайд-шоу

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

Создать эффект движущегося изображения в слайд-шоу не так уж и сложно. Для работы вам потребуется «ФотоШОУ PRO» и фоторедактор. Совсем необязательно устанавливать на ПК и осваивать сложный Adobe Photoshop или другой софт, который используют профессионалы. Подготовить материалы для создания синемаграфии можно буквально за три шага в редакторе .

• Шаг 1. Загрузите фотографию в программу. В меню «Эффекты» выберите опцию «Замена фона».

• Шаг 2. Выделите область, которую хотите анимировать. Размойте границы фрагмента, передвинув бегунок на одноименной шкале вправо.

• Шаг 3. Сохраните элемент. Установите переключатель на пункт «Без фона» и кликните «Сохранить в файл…». Выберите PNG, дайте изображению имя и поместите его в нужную вам папку.

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

Добавьте на слайд фрагмент изображения, извлеченный в фоторедакторе. Настройте его местоположение и размер при помощи мыши.

Если обрезка вышла «грубой» и у фрагмента выделяется одна из сторон, то примените к слою маску.

Теперь перейдем к оживлению изображения. Добавьте второй ключевой кадр и задайте настройки для слоя в конце показа. В нашем примере для создания эффекта движущейся реки нужно сдвинуть слой вправо и увеличить его. Это можно сделать вручную или во вкладке «Анимация».

Если движению не хватает плавности, то увеличьте длительность слайда.

Синемаграфия готова! При желании вы можете продолжить работу над слайдом. Кадр станет еще интереснее, если вы воспользуетесь функцией «3D-камера». С ее помощью вы сможете . Добавьте ключевой кадр в конец таймлайна и потяните бегунок на шкале «Приближение» вправо.

Бушующее море и таинственный туман: идеи для синемаграфии

С «ФотоШОУ PRO» вы быстро почувствуете себя настоящим волшебником! Добавляя движение в одну из частей снимка, вы сможете добиться поистине фантастического результата за короткие сроки. Но и это далеко не всё! Фото можно дополнить эффектом реалистичного тумана. Просто наложите на исходную картинку фрагмент соответствующей текстуры и настройте ее. Добавьте второй ключевой кадр и сделайте слой с туманом меньше.

Для исходной фотографии тоже добавим ещё одну ключевую точку. Здесь слой будет медленно и плавно увеличиваться.

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

В фоторедакторе сначала вырежьте часть изображения с небом и сохраните ее в отдельный файл. Затем аналогично отделите море и сохраните в той же папке. Когда подготовка завершится, наложите оба получившихся фрагмента на исходное изображение в «ФотоШОУ PRO».

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

Хотите узнать, как сделать данную синемаграфику ещё более зрелищной? Воспользуйтесь инструментом 3D-камера: поэкспериментируйте с приближением, добавьте движение влево, вправо, вверх или вниз.

Сохраняйте готовую анимацию в удобном вам виде! Экспортируйте проект в любом видеоформате вместе с другими слайдами. Также вы можете сохранить созданный слайд отдельно и позже преобразовать его в GIF. Загружайте готовые синемаграфии в сеть и делитесь ими с людями со всех уголков планеты!

Этот урок подготовлен по многочисленным вопросам наших посетителей. На самом деле, в создании анимированных рисунков нет ничего сложного. Движущиеся картинки поддерживает, например, наиболее известный формат графических файлов GIF. Обратите внимание, что сделать анимированный файл JPG или BMP вряд ли получится, так как эти форматы не поддерживают чередование кадров.

Как создать кадры движущегося ролика в Paint.NET

Итак, для создания анимированного ролика нам потребуется сделать серию кадров. Благодаря тому, что обеспечивает работу со слоями, сделать кадры совсем не сложно. Для примера воспользуемся изображением смайлика, сделанного на уроке Paint.NET "Как нарисовать трехмерный смайл" , опубликованном на нашем сайте.

Для создания нескольких кадров возьмем изображение трехмерного смайла из этого урока и создадим копию слоя с изображением смайлика в том количестве, сколько кадров ролика нам нужно. Для этого можно воспользоваться, например, меню "Слой" - "Сделать копию слоя" или скопировать слой непосредственно в окне "Слои" Paint.NET .

Копировать слои можно не сразу, а например для того что бы сделать второй кадр, скопировать первый слой, после чего на скопированном слое изменить рисунок в соответствии с задумкой ролика. Мы, например, сжимали смайлик и перемещали его вверх и вниз чуть-чуть кадр за кадром. Пример окна "Слои" Paint.NET вы можете увидеть на рисунке слева, естественно на нем не поместились все кадры, но общая идею увидеть можно.

Как сохранить кадры движущегося ролика в отдельные файлы

Для соединения отдельных кадров в нужном порядке в анимированный ролик при помощи программы UnFREEz, сначала надо сохранить кадры как отдельные файлы. В этом тоже нет ничего сложного. Можно, например, скопировать всё содержимое нужного слоя, создать новое изображение, и вставить в него, скопированное со слоя изображение. После чего сохранить как отдельный файл GIF. Выделить все изображение на слое можно, например, нажатием комбинации клавиш Ctrl+A. Описание остальных горячих клавиш Paint.NET есть в разделе инструкции на этом сайте.

Другим способом можно, например, просто отключать видимость не нужных на текущем кадре слоев, после чего сохранять видимые слои как отдельный рисунок GIF. Сделать это можно в меню Paint.NET "Файл" - "Сохранить как". При сохранении в формате GIF Paint.NET предложит объединить все слои изображения, т.е. получится, что временно отключенные слои пропадут. Но после сохранения файла с кадром можно нажать кнопку "Отменить" в горизонтальной панели Paint.NET и последнее действие по объединению слоев будет отменено, и все слои вернутся обратно.

Еще раз обратите внимание, что для объединения потом кадров программой UnFREEz в один анимированный GIF файл, необходимо, что бы все кадры имели одинаковый размер изображения. Т.е., например, если размер рисунка одного кадра 20 на 30 точек, то и остальные кадры должны иметь тот же размер. Описанный выше способ создания кадров в Paint.NET обеспечивает выполнение этого условия, так как все кадры делаются из одной основной картинки.

Справочники