Test

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Test » Другие уроки » Анимация движения картинки


Анимация движения картинки

Сообщений 1 страница 14 из 14

1

В этом уроке я попытаюсь рассказать как с помощью простого размытия сделать анимацию которую потом можно будет использовать для баннеров и разнообразных картинок.
Например такое:
http://www.photoshop-master.ru/lessons/les802/1.gif

1. Создаем новый файл необходимого вам размера с прозрачным фоном. Я создала  новый документ с разрешением  400x125 px

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

http://psschool.0pk.ru/uploads/000b/32/99/2397-4-f.jpg

3. Выбираем любое понравившееся вам изображение. Я взяла такое и размещаем его на нашем документе (белый фон я вырезала) с краю.

4. Создаем дубликат слоя с изображением и спрятав изначальный слой с картинкой заходим в  Filter>Blur>Motion Blur (Фильтр > Размытие > Размытие в движении)
Устанавливаем показатели как на картинке (угол 0; Смещение (Distance) 25 px)

http://psschool.0pk.ru/uploads/000b/32/99/2397-2-f.jpg

получится примерно так:

http://psschool.0pk.ru/uploads/000b/32/99/2398-3-f.jpg

5. Переходим в  Imageready или же открываем окно анимации в фотошопе.
- На первом слое размещаем слой с фоном и изображение (не размытое)
- Дублируем кадр и скрываем изображение с картинкой, а слой с размытым изображением делаем видимым.
- Дублируем кадр с размытой картинкой и аккуратно перемещаем изображение в противоположный бок (до конца).
- Снова  дублируем кадр и включив слой с целым изображением(не размытым) перемещаем его в противоположную сторону на то же самое место где и размытое изображение в последнем кадре (при этом слой с размытием спрячте)

И так, у вас получилось 4 кадра:
- Нормальное изображение с права (с лева)
- Размытое изображение с права (с лева)
- Размытое изображение с лева (с права)
- Нормальное изображение с лева (с права)

- Идем ко второму кадру и наживаем на панельке анимации Tweens (промежуточные кадры). В появившемся окошке выставляем 1-2 кадра. Теперь у вас 5 (или 6, в зависимости от того, сколько промежуточных ставите) кадров.
- Теперь проделываем данную процедуру в обратном направлении.
- На кадрах, где картинка цельная устанавливаем задержку (я установила в 0,4с)

http://psschool.0pk.ru/uploads/000b/32/99/2398-1-f.jpg

- Нажимаем на Play (Воспроизведение) и готово) Сохраняем в формате gif

http://psschool.0pk.ru/uploads/000b/32/99/2397-3-f.gif

Пример испольвоние эффекта:
Баннер размером 120х60

http://psschool.0pk.ru/uploads/000b/32/99/2402-1.gif

+1

2

http://i053.radikal.ru/1001/71/27795a0c6cc2.gif
/домучила/

Отредактировано .forget-me-not (2010-01-08 13:12:46)

+1

3

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

0

4

http://s004.radikal.ru/i208/1001/5a/396d18a99f93.gif

Я не пытался здесь сделать красиво, пытался лишь понять принцип.

0

5

А можете объяснить как сделать так, чтоб получилось как у .forget-me-not?))

0

6

Maemi
Так же, как и в уроке описано, только картинку не скопировать, а отразить О_о

+1

7

Maemi
Она отразила картинку с девушкой и просто переместила в другой бок, не перетаскивая её по прямой.

+1

8

Без зеркального отображения выходит так
http://s40.radikal.ru/i087/1003/0f/ba85e51b1c86.gif

0

9

Lex
-Mere
Спасибо!) Ща сделаем))

0

10

Как-то так?
http://i045.radikal.ru/1003/03/1205541a47b5.gif

0

11

Оно какое-то сумашедшее:: И я, кажется, что-то ещё напортачила.(
Зато фон прикольный!

http://s003.radikal.ru/i202/1003/a3/1d32b2b660b9.gif

Ого! Только сейчас заметила - слева шея вылезает сильнее.

Отредактировано leer (2010-03-25 21:55:31)

0

12

Прикольный урок:
http://i061.radikal.ru/1003/60/793728e581b0.gif

0

13

Ну вот так вот...

увеличить

Отредактировано Ellen Swain (2010-06-30 17:00:41)

0

14

Вот , что получилось у меня:
http://i061.radikal.ru/1007/70/09158dea9fbb.gif

0


Вы здесь » Test » Другие уроки » Анимация движения картинки


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC