Free-Studio — создание сайтов

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

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

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

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

Исходное изображение

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

Изображение при наведении курсора

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

Анимация

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

Animation

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

Переход к покадровой анимации

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

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

Задаем время

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

magic

Копируем следующий кадр и сдвигаем группу 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;
}

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

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

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

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

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



7 комментариев

    Хорошо расписали. Для новичков будет полезно.

  • Как я обожаю когда примеры показывают на нерусских фотошопах, проще найти урок с русскими названиями, чем три часа долбится ища нужную кнопку….(((

  • спасибки за подробное описание с картинками

  • Все тут нормально расписано… для новичков в самый раз…
    А русские Шопы стоят только у дилетантов, любителей и детишек которые рисовать не умеют…
    я даже не представляю как можно рисовать на русском фотошопе…

  • спасибо за описание, у меня стоит русский фотошоп и всё норм,от языка то программа сама не изменяется

  • Для новичков — как раз что нужно. Более сложную анимацию конечно таким простым способом не сделаешь.

  • Спасибо, пригодилось…

Добавить свой комментарий