Для улучшения оформлении сайта можно обойтись и без JavaScript. И помогут нам изображения в формате gif, анимированные картинки. Если вставлять их с умом в элементы оформления, то они могут стать маленькими приятными дополнениями к дизайну ресурса, которые порадуют заказчика.

Рассмотрим, как создавать анимированные gif картинки в PhotoShop CS3.

Задача: у нас есть исходная картинка:

при наведении на нее необходимо показать эту картинку:

Добавим «эффектности»: пусть при наведении на картинку текст выезжает снизу:

Для создания анимации открываем наше исходное изображение в PhotoShop CS3. Отобразим панель анимации: Window -> Animation

В отобразившемся окне анимации (1) перейдем к панели покадровой анимации (2):

У нас есть 2 группы слоев: picture — фоновая картинка, которая меняться не будет, и hover — текст и подложка с градиентом, которая быдет выезжать, с ней мы и будем работать.

Для каждого кадра необходимо задать время, которое он будет отображаться. В нашем случаи 0,1с:

And let the magic begin … Копируем наш кадр и сдвигаем вверх группу hover вверх

Копируем следующий кадр и сдвигаем группу hover вверх еще немного. Продолжаем копировать и сдвигать до тех пор, пока надпись не займет необходимое положение, в нашем случаи это 7 кадров. Для просмотра результата можно использовать кнопку «Play animation»:

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

Зададим постоянное проигрывание.

Если результат нас устраивает, полученное изображение сохраняем File -> Save for Web & Devices. И не забывваем, что сохраняем картинку в формате gif! И вот он, результат: