• Авторизация


Создание анимационных кнопок для сайта 12-03-2011 09:34 к комментариям - к полной версии - понравилось!

Это цитата сообщения Владимир_Шильников Оригинальное сообщение

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

 (180x149, 19Kb)

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


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


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

В итоге должно получится что-то типа этого: [300x175]Теперь нажимаем Ctrl и кликаем на слое с нашей фигурой для выделения. Дальше: Выделение – Модификация – Сжать и устанавливаем значение 4 пиксела. [300x182]Затем кликаем правой клавишей мышки по слою с фигурой и выбираем: Растрировать слой. Нажимаем: Ctrl+J и  выбираем другой стиль для нашей кнопки. У меня получилось вот так:

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

http://www.serblog.ru/sozdanie-animacionnyx-knopok-dlya-sajta
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Создание анимационных кнопок для сайта | jeni_kz - Дневник Евгении | Лента друзей jeni_kz / Полная версия Добавить в друзья Страницы: раньше»