В предыдущем уроке я описывала как создать круглую кнопку web2.0 [1]. А сегодня я расскажу как в Adobe Photoshop делать анимацию, а именно, прыгающую кнопку как на моем блоге. Недавно один из читателей написал мне письмо, спросив, как же я сделала эти кнопочки. И вот, подробный урок готов! Приступаем :-)

1. Создадим новый документ размером 200х330. Поместим туда нашу круглую кнопочку, назовем слой "1".

Анимированная прыгающая кнопка. Рис 1.

2. Скопируем кнопочку. Слой с копией назовем "2" Т.к. она будет прыгать как мячик, необходимо сплющить. Используя инструмент Free Transform, слегка сплющим кнопку сверху вниз и растянем по бокам.

Анимированная прыгающая кнопка. Рис. 2 Анимированная прыгающая кнопка. Рис.3

3. Теперь скопируем кнопку "2" и назовем ее "3". На этом этапе мы еще раз сплющим и растянем кнопку. Получится вот так: 

Анимированная прыгающая кнопка. Рис.4

4. Шарики для прыганья готовы :-) Теперь каждой кнопке сделаем зеркальное отражение. Как это сделать я подробно описывала в уроке: Зеркальное отражение в Adobe Photoshop [2]. Поэтому еще раз рассказвать не вижу смысла :-)

5. Ну а сейчас приступим к анимации! :-) Откроем Windows > Animation. Если у вас появится вот такое окно:

Анимированная прыгающая кнопка. Рис.5

то нажмите на нижнюю правую кнопочку Convert to Frame Animation. Вы увидите вот такое окошко, в котором мы и будем создавать анимацию.

Анимированная прыгающая кнопка. Рис.6

6. Обратите внимание на то, чтобы все кнопки с отражениями были на одной высоте и ширине. Для этого перед началом создания анимации сделайте так, чтобы они все были поставлены примерно так:

Анимированная прыгающая кнопка. Рис.7 [3]

В этом вам поможет инструмент View > New Guide. Нажав на маленькую стрелочку на изображении, установим время 0,1 сек.

7. Когда все кнопочки расставили ровненько, уберем Guides, чтобы они нам не мешали (View > Clear Guides). На панели слоев для первого фрэйма делаем видимым только кнопку "1" и ее отражение.

Анимированная прыгающая кнопка. Рис.8 [4]

8. Теперь копируем фрэйм

Анимированная прыгающая кнопка. Рис.9

На панели слоев сделаем видимыми кнопку "2" с отражением.

Анимированная прыгающая кнопка. Рис.10 [5]

Копируем этот слой и для третьего фрэйма делаем видимой кнопку "3"

9. Копируем второй фрэйм и перетаскиваем его в самый конец.

Анимированная прыгающая кнопка. Рис.11 [6]

10. Точно также поступаем с 1-м фрэймом: копируем и переносим в конец. На данном этапе наша анимация выглядит вот так:

Анимированная прыгающая кнопка. Рис.13

Вы можете всегда просмотреть ее, нажав на play. 

Анимированная прыгающая кнопка. Рис.12

11. Займемся подпрыгиванием кнопки. После того как шарик оттолкнулся он начнет подпрыгивать. Выделим последний фрэйм. На панели слоев выделим кнопку "1" и при помощи клавиши "стрелка вверх" поднимим шарик. Я нажала на стрелочку 15 раз. Тоже самое повторим с отражением, только его мы опустим на 15 щелчков.

Анимированная прыгающая кнопка. Рис.13 [7]

12. Копируем фрэйм и повторяем тоже самое. Чтобы шарик взлетел еще выше. 

Анимированная прыгающая кнопка. Рис.12

13. Теперь копируем предыдущий фрэйм и перетаскиваем его в конец. Чтобы шарик начал падать. Смотрим, что получилось:

Анимированная прыгающая кнопка

Вот и все! Мы заставили шарик прыгать! :-) Теперь сохраним его File > Save for Web & Devices. 

Постовой:  Иконки в стиле Windows Vista [8] - скачиваем ;-)
 [8]