Перед началом работы в папке своего класса создайте свою папку

1. Откройте Photoshop CS5 и создайте новый документ. Размеры – 200 на 100 pixels:

2. Выберите инструмент скруглённый прямоугольник в режиме Shape Layers:

3. Выберите инструмент скруглённый прямоугольник в режиме Shape Layers и нарисуйте в документе кнопку (т.к. передний цвет чёрный – кнопка тоже чёрная):

4. Перейдём в палитру Styles и выберем подходящий стиль, например, такой:

5. Растрируем этот слой (Layer - Rasterize - Layer):

6. Выделим кнопку (нажать Ctrl + левая кнопка мыши на иконке верхнего слоя):

7. Создадим по краям кнопки небольшую каёмку (Select – Modify - Contract):

8. В открывшемся окне поставьте 3 pixels:

9. Должно получиться:

10. Инвертируйте выделение – Shift + Ctrl + I, затем скопируйте выделение на новый слой – Ctrl + С, Layer – New – Layer, Ctrl + V:

11. Выберите для каёмочки какой-нибудь другой стиль, например, такой:

12. «Сливаем» все видимые слои – Shift + Ctrl + E:

13. Добавляем на кнопку текст (устанавливаем для него стили):

14. Снова сливаем все видимые слои:

15. Открываем окно Animation (Window – Animation) и создаем ещё два кадра:

16. Выделяем первый кадр (видимость слоя должна быть включена):

17. Выделяем второй кадр (видимость слоя должна быть выключена):

18. Выделяем третий кадр (видимость слоя должна быть включена):

19. Выделяем первый кадр и нажимаем в палитре Animation кнопку Tweens Animations Frames:

20. В появившемся окне добавляем 10 промежуточных кадров:

21. Сделайте активным 12 кадр, нажмите ту же кнопку в палитре Animation и добавьте ещё 10 кадров:

22. Выделите последний кадр и установите длительность 1,0 sec:

23. На активном последнем кадре добавьте ещё 5 кадров:

24. Сохраните свою анимацию в формате Gif в свою папку:

25. Если вы всё делали правильно, то должно получиться примерно следующее: