Урок “Анимация стрелок часов”

11.09.2012

Это цитата сообщения TamSanna Оригинальное сообщениеУрок "Анимация стрелок часов"

Урок "Анимация стрелок часов"

урок взят из сообщества "Фотошоп уроки,тренинг,объяснения!"


Дорогие друзья!

Этот урок был написан мной специально к новогодним праздникам, в нем мы будем создавать анимацию движения стрелок часов, которые возвестят о наступлении Нового года!

Это мой первый (и пока единственный) урок по фотошоп, поэтому прошу быть снисходительными…

Добро пожаловать в часовую мастерскую, фотошоп-мастера!

Для данного урока вам надо заранее подготовить запасные части для будущих часов - циферблат, маленькую и большую стрелки.
Для выполнения урока Вы можете воспользоваться моими файлами
Циферблат
http://ib2.keep4u.ru/b/2011/12/25/0...34154f14b2c.png
Маленькая стрелка
http://ib2.keep4u.ru/b/2011/12/25/7...84b5256fdc2.png
Большая стрелка
http://ib3.keep4u.ru/b/2011/12/25/a...90e81a80e6d.png

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

1.Создайте новый документ в Adobe Photoshop (для моих деталей не меньше 600 х 600 пикселей). Откройте файлы с запасными частями и перенесите слои в ваш документ.
2. Циферблат у нас статичен, поэтому с этим слоем ничего делать не будем.

3. Для того, чтобы в дальнейшем не запутаться с анимацией стрелок, предлагаю сразу создать две папки «Маленькая стрелка» и «Большая стрелка». Перетащите с помощью мышки в соответствующую папочку наши стрелки, которые я для удобства обозначила м1 и б1.




4.Установите стрелки строго по центру циферблата. От того, насколько точно вы определите центр, вокруг которого вращаются стрелки, будет зависеть аккуратность вашей анимации. Легче всего это сделать с помощью направляющих. Зайдите в меню «Просмотр» и выберите «Линейки», «Новая направляющая…». Я задала позицию горизонтальной и вертикальной направляющих 50 %,
у вас может быть и другое положение циферблата. После того, как найдена центральная точка, установите строго по центру стрелки – маленькая внизу, большая вверху. Маленькую стрелку установите между цифрами 11 и 12. Большую - на цифру 1.



5. Стрелки находятся на небольшом расстоянии от циферблата, поэтому отбрасывают тень. Активируйте слой б1. Внизу палитры слоёв нажмите на значок стиля слоя fx и выделите «тень…». В окне стиля слоя задайте параметры по своему усмотрению. Мои параметры см. в Скриншоте



6. Скопируйте стиль слоя б1 и вставьте его для слоя м1. Для этого нажмите правой кнопкой мыши на активном слое б1 и в открывшемся контекстном меню выберите «Скопировать стиль слоя». Затем активируйте слой м1 и выберите «Вклеить стиль стоя».



Тот же эффект можно получить, если, удерживая на клавиатуре клавишу Alt, аккуратно перетащить со слоя б1 на слой м1 символ стиля слоя fx.

7. Приступаем к созданию копий стрелок для дальнейшей анимации. Маленькая стрелка у нас будет менять положение на цифре 6 и 12, поэтому создайте 2 копии слоя м1, который должен быть активным. Нажмите сочетание клавиш Ctrl+J и переименуйте полученные копии для удобства в м2 и м3.
Большая стрелка поменяет своё положение 12 раз, поэтому в папке «Большая стрелка» создайте 11 копий слоя б1 и переименуйте их соответственно в б2 – б12.

Итак, в палитре слоев имеем: фоновый слой; слой с циферблатом; 3 слоя в папке «Маленькая стрелка» и 12 слоёв в папке «Большая стрелка».




8. Приступаем к самому ответственному и самому интересному – будем вращать наши стрелки
Закройте пока видимость («глазик») у папки с большими стрелками и займемся трансформацией м2 и м3. Активируем сначала слой м3, который будем устанавливать напротив цифры 12. Нажмите сочетание клавиш Ctrl+T.
Появилась рамка трансформации. Размер стрелки у нас не изменяется,
поэтому боковые точки не трогайте. Нам нужна единственная точка,
расположенная посередине – центр вращения. Перетащите его к центру нашего циферблата (точка пересечения ваших направляющих) и легко поверните рамку, пока стрелка не станет на заданное место.



Снимите рамку, нажав на клавишу Enter, для сохранения трансформации.
Активируйте слой м2 и аналогичным способом установите стрелку между м1 и м3. Закройте видимость слоёв м2 и м3, они нам пока не нужны.

9. Переходим к папке «Большая стрелка». Указанным в п. 8 способом вращайте поочередно все 11 созданных слоёв-копий, устанавливая соответственно:
Слой б2 на цифру 2
Слой б3 на цифру 3
……………………………..
Слой б12 на цифру 12.

Закройте видимость всех слоёв кроме б1.

Поздравляю, самый ответственный этап мы прошли. Осталось «завести» наши часики (вернее, создать анимацию) .

10. У кого версия Adobe Photoshop ниже CS3, сохраните файл в формате PSD и откройте ImageReady.
Для более поздних версий программы откройте меню «Окно» и выберите «Анимация» - «анимация (покадровая)» - «постоянно». Задайте время отображения кадров – 1 сек. У нас большая стрелка должна обойти весь круг циферблата, поэтому создаём 12 кадров.




Задайте следующую последовательность смены стрелок:
Кадр 1 – б1; м1
Кадр 2 – б2; м1
Кадр 3 – б3; м1
Кадр 4 – б4; м1
Кадр 5 – б5; м1
Кадр 6 – б6; м2
Кадр 7 – б7; м2
Кадр 8 – б8; м2
Кадр 9 – б9; м2
Кадр 10 – б10; м2
Кадр 11 – б11; м2
Кадр 12 – б12; м3

Включите анимацию и проверьте все ли вы правильно сделали?

С успешным окончанием работы вас, часовых дел мастера!
Можете сохранить свой труд в формате GIF. Для этого откройте меню «Файл», выберите «Сохранить для Web и устройств…»

Если вы захотите вставить эти часики в какую-то работу – сохраните в формате PSD

Наглядно посмотреть, как выглядит эта анимация в большой работе можно ЗДЕСЬ (правда, из-за большого объема файла и комплексной анимации время движения стрелок пришлось ускорить).

Примите этот плэйкаст-календарь на 2012 год как поздравление к празднику!
Счастливого Нового года вам! Желаю весело встретить его под удары
курантов! Пусть волшебство и вдохновение всегда будут с вами!!!

Плэйкаст-версия данного урока была создана год назад и ее можно посмотреть ЗДЕСЬ

С теплом, Татьяна Бел-Ка (xorta)