41803

Adobe Photoshop: Анимация

Лабораторная работа

Косметология, дизайн и стилистика

Поэтому прежде чем приступить к анимации вам необходимо вызвать палитру Слои. задайте инструменту этот размер в панели опций инструмента рис.1 Рис. Сделайте дубликат слоя и дайте команду Фильтр Пластика и в панели инструментов выберите инструмент Вздутие рис.

Русский

2013-10-25

583.59 KB

47 чел.

Лабораторная работа №6.

Adobe Photoshop: Анимация.

Для создания анимации предназначена специальная палитра, которая так и называется — Анимация. Запустить ее можно, выполнив команду Окно / Анимация. Работа заключается в анимировании слоев. Поэтому прежде, чем приступить к анимации, вам необходимо вызвать палитру Слои. Рассмотрим примеры выполнения анимации, чтобы ознакомиться со всеми возможностями программы.


Пластика

Просмотрите на сетевом ресурсе в папке Анимация готовый проект (заяц.gif). Чтобы создать такой аватар:

  1. Возьмите подходящее изображение (зайцы.jpg). Откроем его в Photoshop.
  2. Вырежьте из него одного зайчонка. Для этого дублируйте слой.
  3. Возьмите инструмент Прямоугольная область.
  4.  Чтобы точно вырезать квадрат размера аватара (120 на 120 пкс.), задайте инструменту этот размер в панели опций инструмента (рис.1).




    Рис.1

Рис.2

  1. Для этого установите Стиль Заданный размер, Ширину и Высоту в пикселях.
  2. Щёлкните на изображении, появится рамка заданного размера и, передвигая ее, выберите нужный участок.
  3. Дайте команду Изображение – Кадрировать, снимите выделение,  получилась заготовка для аватара.
  4. Теперь будем накладывать спецэффекты на зайчонка. Сделайте дубликат слоя  и дайте команду  Фильтр – Пластика и в панели инструментов выберите инструмент Вздутие (рис.2).
  5.  

Рис.5

Рис.3

Рис.4

С правой стороны окна установите такие настройки, как на рис.3 и  надуйте зайчонку левую щёчку (рис.4)




  1.  

Рис.6

Снова создайте дубликат слоя и аналогично  надуйте зайчонку правую щёчку (рис.5)

  1. Активируйте нижний слой Задний план, а два верхних погасите, закрыв иконку Глаза на слое в панели Слои
  2. Сделайте дубликат этого слоя. Сейчас фильтром Пластика исказим нос зайчонка.
  3. Дайте команду Фильтр – Пластика и выберите инструмент Деформация (рис.6) и задерите зайчонку нос кверху (рис.7).
  4. Погасите этот слой, и перейдите опять на нижний слой Задний план, дублируйте его и опять – Пластика – отводим нос вправо (рис.8).
  5.  

Рис.7

Рис.8

Рис.9

Аналогично отводим нос влево (рис.9).

  1. Сделайте рамочку для будущего аватара. Для рамочки создайте новый прозрачный слой, нажав на иконку внизу окна слоёв, и нарисуйте простую рамочку.
  2. Слой с рамкой перенесите на самый верх.
  3.  Выполните анимацию из созданных слоев. Для этого откройте окно анимации Окно – Анимация.
  4.  

Рис.10

В открывшемся окне видите первый кадр. Отредактируйте его: в окне слоёв погасите все слои, оставим только Задний план и Рамку (рамка будет включена на всех слоях) – это будет первый кадр.

  1. Далее нажмите на иконку – новый кадр (рис. 10).
  2. Включите слой с надутой левой щекой, а слой с задним планом погасите.
  3.  

Рис.11

Продолжая в таком духе, набирайте кадры (рис.11).

  1.  

Рис.12

Установите частоту смены кадра: если нужна одинаковая частота на всех кадрах, то выделите все кадры, для этого выделите сначала первый кадр и, с нажатым Shift, щёлкайте на последнем кадре. Далее нажмите на маленький треугольник внизу любого кадра и устанавливаем время в секундах (рис.12).

  1. Проверьте полученную анимацию: нажмите треугольник Воспроизведение.
  2. Теперь, чтобы сохранить аватар, дайте команду Файл/ Сохранить для  WWW и устройств, выбрав формат файла *.gif

                                                     Движущийся круг

                                                      (образец krug.gif)

1. Запустите Photoshop.

2. Создайте новый файл, задав ему размер 300х200 пикселей.

рис.13

3. Выполните заливку фона.

4. С помощью инструмента выделения Овал выделите в левом верхнем углу окружность и залейте ее синим цветом.

5. Создайте 3 копии этого слоя.

6. Отредактируйте каждый из четырех образовавшихся слоев таким образом, чтобы круг располагался в одном из углов (рис.13).

7. Выполните их анимирование.

Рис.14

Светофор            

(образец svet.gif)

2. Создайте новый файл, задав ему размер 200 х 300 пикселей, прозрачный.

3. Создайте слой, изобразив в нем светофор.

4. Создайте 2 копии этого слоя.

5. Отредактируйте слои таким образом, чтобы горел один из цветов: красный, желтый или зеленый (рис.14).

6. Создайте кадры из слоев. Выберите все кадры и задайте время анимации 0.5 с

Рис.15

Мигающая надпись

(образец new.gif)

1. Создайте новый файл. Выполните его заливку цветом.

2. Создайте 3 копии этого изображения.

3. Создайте надписи в отдельных текстовых слоях.

4. Объедините текстовые слои со слоями заливки цветом, чтобы в результате получить 4 слоя: один пустой, 3 такие, как показано на рисунке 15.

5. Создайте кадры из слоев.

6. Задайте время анимации для пустого слоя - 1 с, для слоя с текстом - 0.5 с.

Падающая листва

(образец листопад.gif)

  1. Создайте новый документ размером 400х400 пикселей.
  2. Выберите инструмент Кисть в виде кленового листа
  3. На палитре Слои создайте новый слой, назовите его Лист 1 и один раз щелкните мышью на рабочем листе — появится изображение листа.
  4. Теперь создайте еще один слой, назовите его Лист 2 и нарисуйте еще один кленовый лист. Таким же образом создайте еще парочку листиков, только помните, что каждый листок нужно создавать на отдельном слое, причем листья должны быть разных цветов и оттенков.
  5. Теперь создадим анимацию. Вызовите палитру Анимация, выполнив команду Окно — Анимация. На экране появится палитра. Есть два режима работы с этой палитрой: в режиме кадров и в режиме шкалы времени. Для переключения режимов предназначена кнопка, находящаяся в правом нижнем углу палитры. Будите работать в двух режимах и использовать возможности каждого.
  6. Для начала переключитесь в режим шкалы времени. В режиме шкалы времени в левой части палитры вы увидите список только что созданных вами слоев, а справа — непосредственно саму шкалу времени.
  7. Щелкните на треугольнике рядом со слоем Лист 1 — вам станут доступны настройки анимации данного слоя: Позиция, Непрозрачность и Стиль.
  8. Щелкните на изображении часиков в области Позиция, и на шкале времени появится индикатор первого ключевого кадра.
  9. Затем захватите мышью индикатор времени и перетащите его на несколько секунд вправо.
  10. Здесь вам нужно будет установить еще один ключевой кадр. Для этого в строке Позиция щелкните на изображении ромбика — он сразу же появится на шкале времени.
  11. Теперь выберите на панели инструментов инструмент Перемещение и переместите вниз кленовый листок, расположенный на активном слое.
  12. То же самое проделайте с остальными слоями — перемещайте листья по той траектории, по которой предполагаете их падение в вашем ролике.
  13. Когда основная часть работы закончена, просмотрите результат. Для этого верните индикатор времени в начальное положение (то есть на первый кадр) и нажмите кнопку Воспроизведение.
  14. Осталось указать более точную продолжительность каждого кадра и количество повторений анимационного ролика. Это проще всего сделать в режиме покадровой анимации, поэтому смените режим нажатием уже знакомой вам кнопки.
  15. Если вы хотите, чтобы ролик проигрывался постоянно, в левой части палитры из раскрывающегося списка выберите пункт Постоянно. Чтобы задать определенное количество повторений, выберите из того же списка пункт Другое и в появившемся диалоговом окне введите желаемое количество повторений.
  16. Чтобы отрегулировать продолжительность проигрывания каждого кадра, щелкните на треугольнике на эскизе кадра и из списка выберите подходящее значение.
  17. Осталось только сохранить созданный ролик. Для этого достаточно выполнить команду Сохранить для интернета и устройств. В появившемся окне нажмите кнопку Сохранить и сохраните файл в формате .gif.


Эффект мерцания текста


Рассмотрим еще один пример выполнения анимации в программе Photoshop.

  1. Создайте новый файл небольшого размера и красочную надпись. Анимация будет заключаться в том, чтобы надпись то исчезала, то появлялась.
  2. Вызовите палитру анимации и перейдите в режим шкалы времени. Будем работать с одним текстовым слоем.
  3. Раскройте настройки анимации для данного слоя, щелкнув мышью на треугольнике рядом с названием слоя. В данном случае будем работать с параметром Непрозрачность.
  4. Щелкните мышью на ромбике в строке Непрозрачность, и на шкале времени появится первый ключевой кадр.
  5. Сместите индикатор времени вправо и установите второй ключевой кадр.
  6. В этом месте надпись должна исчезнуть, поэтому на палитре Слои уменьшите значение параметра Непрозрачность до 0%.
  7. Снова сместите индикатор времени вправо и установите еще один ключевой кадр.
  8. Затем вернитесь на палитру Слои и установите значение Непрозрачность равным 100%.
  9. Верните индикатор времени в самое начало и проиграйте созданную анимацию с помощью кнопки Воспроизведение.
  10. Вы увидите, что все вроде бы и неплохо, но эффект мигания не получился. Вместо этого надпись плавно исчезает, а затем плавно появляется. Исправим это.
  11. С помощью мыши выделите на шкале времени все ключевые кадры.
  12. Затем щелкните правой кнопкой мыши на любом из кадров и из появившегося контекстного меню выберите пункт Приостановить интерполяцию — ромбики изменятся на квадратики. Снова просмотрите результат. После выбора режима Приостановить интерполяцию кадры будут сменять друг друга без задержки.
  13. Переключитесь в режим покадровой анимации. Установите для каждого кадра небольшое время проигрывания и задайте непрерывное повторение проигрывания анимации. Сохраните полученный результат в формате .gif, выполнив команду Сохранить для интернета и устройств.


Создание баннера



Баннеры - рекламные картинки, по которым осуществляется переход по ссылке на рекламируемый сайт. Баннеры существуют различных размеров и технологий исполнения.

При создании баннеров дизайнеры используют различные способы для привлечения внимания посетителей сайта к их баннеру:

  1. в большинстве баннеров используются яркие цвета
  2. как правило, баннеры анимированы (в них используется gif или flash-анимация)
  3. рисунок или анимация на баннере должны побуждать посетителя сайта щелкнуть мышкой по баннеру.

Главное при создании баннера — грамотно разработать идею. Просмотрите готовые примеры на сетевом ресурсе.

Создайте баннер для своего сайта. Для этого достаточно будет создать 3-4 кадра.

Примерный алгоритм создания баннера:

  1. создать лист с заданными размерами;
  2. добавить готовую графику или нарисовать свой рисунок;
  3. добавить текст и эффекты;
  4. изображение анимировать и оптимизировать.

  1. Создайте новый документ размером 100х100 пикселей (стандартный квадратный баннер).
  2. На палитре Слои создайте новый слой и оформите первый кадр баннера (каждый слой будет отдельным кадром).
  3. Создайте еще один слой и оформите второй кадр, а затем третий и, если надо, четвертый.
  4. Техника выполнения анимации в данном случае будет следующей. Слой с первым кадром должен находиться выше остальных на палитре Слои. Как только будет подходить время появления второго кадра, прозрачность первого кадра нужно будет уменьшить до 0%, а когда второй кадр будет сменяться третьим, прозрачность второго кадра должна также быть снижена до 0%, и т.д.
  5. Вызовите палитру Анимация и щелкните на ней мышью на слое с первым кадром.
  6. После этого щелкните на треугольнике рядом с названием этого слоя, чтобы получить доступ к настройкам анимации.
  7. Щелкните на ромбике рядом с названием кадра, тем самым установив положение первого ключевого кадра.
  8. Переместите индикатор времени в положение, где предполагается конец первого кадра, и снова установите еще один ключевой кадр.
  9. Теперь обратитесь к палитре Слои и измените для данного слоя параметр Непрозрачность до значения 0%.
  10. Щелкните мышью на втором слое со вторым кадром на палитре Анимация и выполните для него те же действия, что и для первого кадра.
  11. Теперь, если вы хотите, чтобы кадры плавно перетекали друг в друга, оставьте все как есть, а если вам нужно, чтобы кадры резко сменялись, то выделите все ромбики на шкале времени, щелкните на любом из них правой кнопкой мыши и из контекстного меню выберите уже знакомую вам команду — Приостановить интерполяцию.
  12. После этого переключитесь в режим покадровой анимации, отрегулируйте время каждого кадра, задайте непрерывность анимации или повторение кадров определенное количество раз и выполните команду сохранения баннера.


 

А также другие работы, которые могут Вас заинтересовать

64833. ТВОРЧІСТЬ МИКОЛИ ТРУБЛАЇНІ І СТАНОВЛЕННЯ ПРИГОДНИЦЬКОГО ЖАНРУ В УКРАЇНСЬКІЙ ЛІТЕРАТУРІ ПЕРШОЇ ПОЛОВИНИ ХХ СТОЛІТТЯ 175.5 KB
  Микола Петрович Трублаїні художник слова який посідає почесне місце серед найвизначніших українських дитячих письменників 30х років минулого століття. Трублаїні плідно працював у пригодницькому жанрі. Трублаїні у якій він осмислює сучасний йому літературний процес основні завдання літератури.
64834. ФОРМЫ ОРГАНИЗАЦИИ УЧЕБНОГО ПРОЦЕССА В ВЫСШЕЙ ШКОЛЕ 549.31 KB
  Учебный процесс при дистанционном обучении включает в себя все основные формы традиционной организации учебного процесса: лекции семинарские и практические занятия лабораторный практикум систему контроля исследовательскую и самостоятельную работу студентов.
64835. Педагогическое проектирование и педагогические технологии 241.5 KB
  Определить современное понимание и использование технологий профессионального обучения. Категории технология педагогическая технология технология обучения Сегодня в педагогической и психологической литературе часто встречается понятие технология.
64836. ПЕДАГОГИЧЕСКАЯ КОММУНИКАЦИЯ И ОСНОВЫ ПЕДАГОГИЧЕСКОЙ КУЛЬТУРЫ ПЕДАГОГА 502.75 KB
  Сущность стили и генезис педагогического общения Сущность и генезис педагогического общения Педагогическое общение специфическая форма общения имеющая свои особенности и в то же время подчиняющаяся общим психологическим закономерностям присущим общению...
64837. СТРУКТУРА ПЕДАГОГИЧЕСКОЙ ДЕЯТЕЛЬНОСТИ 482.42 KB
  С учетом понимания деятельности в философии и психологии структуру педагогической деятельности можно представить как единство субъекта и объекта педагогической деятельности, их потребностей, целей, мотивов, методов и средств педагогической деятельности...
64838. Характеристики физических свойств грунтов 163.5 KB
  Такие грунты воспринимают довольно большую статистическую нагрузку, но при динамических нагрузках они теряют свою структуру (в водонасыщенном состоянии) и грунт переходит в суспензию (плывунное состояние).
64839. Устойчивость откосов 130.5 KB
  Причины приводящие к нарушению устойчивости массивов грунта в откосах. Увеличение крутизны откоса подмыв берегов реки Увеличение нагрузки на откос строительство на бровке Обводнение грунтов уменьшение механических характеристик...
64840. Инженерные методы улучшения свойств грунтов (искусственные основания) 319.5 KB
  Инженерные методы улучшения свойств грунтов искусственные основания Строительство линейных инженерных сооружений неизбежно связано с освоением новых территорий расположенных в том числе и на слабых грунтах. При необходимой толщине уплотнения грунта...
64841. Конструктивные меры улучшения оснований 90.5 KB
  Наиболее распространенным следует считать способ замены слабого грунта на достаточно хорошее надежное основание или устройство песчаных подушек. Замена слабого слоя грунта основания устройство песчаных подушек...