Создание анимационных кнопок для сайта |
Всем доброго времени суток и добро пожаловать на очередной урок по фотошопу. Сегодня будем создавать анимационную кнопку для сайта в формате GIF. Этот урок немного похож на предыдущий, так, как тоже используется анимация. Но здесь мы будем создавать красивую кнопку, как говорится, с нуля, то есть самостоятельно ее нарисуем. Для простоты работы мы будем использовать специальные стили фотошопа. У кого нет хороших, качественных стеклянных стилей, то их можно скачать здесь. Инструкция по установке находится внутри архива.
Усаживайтесь поудобней, мы начинаем!)
Открываем фотошоп и создаем новый документ. Размер указывается индивидуально, а я поставил 200×100 и прозрачный фон. Выбираем инструмент: Прямоугольник с закругленными краями. Затем открываем Стили и нажимаем на понравившийся.
Теперь нажимаем Ctrl и кликаем на слое с нашей фигурой для выделения. Дальше: Выделение – Модификация – Сжать и устанавливаем значение 4 пиксела. 
Затем кликаем правой клавишей мышки по слою с фигурой и выбираем: Растрировать слой. Нажимаем: Ctrl+J и выбираем другой стиль для нашей кнопки. У меня получилось вот так:
Со стилями можно поиграться так, как Вам нравится. Пишем свой текст на кнопке. Также можно применить стили и к тексту. Объединяем все видимые слои. Для пущего эффекта можно создать дубликат слоя и отразить его по вертикали, как показано в этом уроке. Дальше открываем панель анимации: Окно – Анимация. Создаем 3 кадра. На первом будет видна кнопка, на втором нужно отключить все слои, чтобы оставить кадр совсем пустым и на третьем – так же, как на первом. Кликаем на первый кадр, создаем 15 промежуточный кадров. Ту же операцию проделываем с пустым кадром. В итоге у нас получилось 33 кадра. Для самого последнего установите задержку времени в 2 секунды. Для остальных оставьте 0. Вот, собственно и все. Получилась довольно симпатичная кнопочка. Не правда ли? 
| Рубрики: | дизайн уроки фотошоп |
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
