Создание анимационных кнопок для сайта

Четверг, 10 Марта 2011 г. 20:37 + в цитатник

Всем доброго времени суток и добро пожаловать на очередной урок по фотошопу. Сегодня будем создавать анимационную кнопку для сайта в формате GIF. Этот урок немного похож на предыдущий, так, как тоже используется анимация. Но здесь мы будем создавать красивую кнопку, как говорится, с нуля, то есть самостоятельно ее нарисуем. Для простоты работы мы будем использовать специальные стили фотошопа. У кого нет хороших, качественных стеклянных стилей, то их можно скачать здесь. Инструкция по установке находится внутри архива.

Усаживайтесь поудобней, мы начинаем!)

Открываем фотошоп и создаем новый документ. Размер указывается индивидуально, а я поставил 200×100 и прозрачный фон. Выбираем инструмент: Прямоугольник с закругленными краями. Затем открываем Стили и нажимаем на понравившийся.

В итоге должно получится что-то типа этого:

Теперь нажимаем Ctrl и кликаем на слое с нашей фигурой для выделения. Дальше: Выделение – Модификация – Сжать и устанавливаем значение 4 пиксела.

Затем кликаем правой клавишей мышки по слою с фигурой и выбираем: Растрировать слой. Нажимаем: Ctrl+J и выбираем другой стиль для нашей кнопки. У меня получилось вот так:

Со стилями можно поиграться так, как Вам нравится. Пишем свой текст на кнопке. Также можно применить стили и к тексту. Объединяем все видимые слои. Для пущего эффекта можно создать дубликат слоя и отразить его по вертикали, как показано в этом уроке. Дальше открываем панель анимации: Окно – Анимация. Создаем 3 кадра. На первом будет видна кнопка, на втором нужно отключить все слои, чтобы оставить кадр совсем пустым и на третьем – так же, как на первом. Кликаем на первый кадр, создаем 15 промежуточный кадров. Ту же операцию проделываем с пустым кадром. В итоге у нас получилось 33 кадра. Для самого последнего установите задержку времени в 2 секунды. Для остальных оставьте 0. Вот, собственно и все. Получилась довольно симпатичная кнопочка. Не правда ли?