Создание gif анимации с помощью PhotoShop и использование ее в веб

Для улучшения оформлении сайта можно обойтись и без 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! И вот он, результат:

Теперь необходимо вставить картинку с анимацией на страничку. Вставляем в код страницы ссылку <a href="#" class="cat" title="Погладь кота"></a>

a.cat {
background: url(cat_static.gif) no-repeat 0 0;
display: block;
height: 107px;
width: 100px;
}
a.cat:hover {
background: url(cat_animated.gif) no-repeat 0 0;
}

Теперь при наведении статичная картинка заменяется картинкой анимированной. Однако если удерживать курсор на картинке видно, что анимация повторяется, создавая неприятныйэффект мигания. Для того, чтоб анимация проигрывалась один раз, при сохранении картинки необходимо указать это в режиме проигрывания анимации. Пересохраним картинку:

При использовании такой техники на сайте при первом наведении на нее будет небольшая задержка до появления изображения – это подгружается анимированная картина. К сожалению, в случаи, когда анимация проигрывается не все время, а лишь один или несколько раз, нельзя объединить анимированную и неанимированную картинки в один спрайт, так как есть большая вероятность, что до того, как пользователь наведет курсор на картинку, анимация уже закончит проигрываться. Так что с миганием прийдется мириться.

В случаи, когда анимация постоянно повторяется, объединять в спрайт заменяющиеся картинки можно (и нужно ):

В данном случаи используется следующий спрайт:

Удачи вам с анимацией!