Учимся создавать ВЕБ-графику. Рисуем анимированные кнопки в графическом редакторе Фотошоп.


на главную уроки Фотошоп анимированные кнопки

анимированные кнопки

Иногда необходимо создать красивую кнопку, чтобы она бросалась в глаза. А выделить ее среди других легче всего с помощью анимации. Например, очень часто приходится использовать небольшой банер-кнопку размером 88 на 31 пиксель. На этом уроке и рассмотрим как создавать красивые анимированные кнопки в программе Фотошоп.

анимированные кнопки

1. Создаем новый документ размером 125х40 пикселов с прозрачным фоном (Файл-Новый File-New). Заливаем белым цветом при помощи инструмента \"Заливка\" (Paint Bucket).

2. Двойным левым кликом по строке слоя вызываем окно \"Стили слоя\" (Layer Style) и выбираем стиль Наложение градиента (Gradient Overley). Кликаем по окошечку с градиентом и у нас появляется окно Редактор градиентов (Gradient Editor), там мы создаем градиент примерно такой как на рисунке.

3. Создаем новый слой, нажав на кнопку \"Создать новый слой\" (New Layer) в нижней части палитры Слои (Layers). Активируем инструмент \"Кисть\" выбрав мягкую кисть размером 70 пикселей. И рисуем нужным Вам цветом (в нашем примере это синий) так как показано на рисунке.

4. Активируем инструмент Осветлитель (Dodge Tool) с параметрами как на рисунке и рисуем им чтобы получилось так как на рисунке.

5. Создаем новый слой, при помощи инструмента Прямоугольное выделение (Rectangular Marquee Tool) делаем выделение как показано на рисунке и заливаем его белым цветом при помощи инструмента Заливка (Paint Bucket). Снижаем Непрозрачность (Opacity) слоя до 50%.

6. Снова создаем новый слой и при помощи инструмента Прямоугольное выделение (Rectangular Marquee Tool) делаем выделение как показано на рисунке и заливаем его белым цветом. Снижаем Непрозрачность (Opacity) слоя до 30%.

7. Создаем новый слой и при помощи инструмента Прямоугольное выделение (Rectangular Marquee Tool) делаем выделение как показано на рисунке, заливаем его белым цветом. Активируем инструмент Ластик (Eraser Tool) установив на панели задач инструмента параметры как на рисунке.

8. Акуратно стираем немного с левой стороны и немного с правой. Должно получиться примерно как на рисунке.

9. Активируем инструмент Текст (Horizontal Type Tool), подбираем шрифт и размер (в нашем примере это шрифт CENA размером 18 пт) и набираем нужную надпись. Двойным левым кликом по строке слоя с текстом вызываем окно Стили слоя (Layer Style) и выбираем нужные Вам стили. В нашем примере к надписи применен стиль Тиснение (Bevel and Emboss), Наложение градиента (Gradient Overley) и Обводка (Stroke) с параметрами как на рисунке.

10. Откройте панель анимации в Photoshop CS3 (Окно-Анимация Window-Animation) или перейдите в ImageReady CS, при помощи кнопки \"Редактировать в ImageReady\" (внизу панели инструментов), если вы работаете в более ранней версии программы. На панели анимации уже есть один кадр. Активируйте слой с текстом (если он у Вас был не активным) на палитре СЛОИ (Layers) и снизьте \"Непрозрачность\" (Opacity) до 0%.

11. Вернемся к панели анимации и добавим новый кадр нажав на кнопку \"Создание копии выделенных кадров\" в нижней части панели, теперь возвращаем \"Непрозрачность\" (Opacity) слоя с текстом до 100%. На панели анимации у нас два кадра: на первом надпись не видна, на втором - видна.

12. Активным на панели анимации у нас является второй кадр, нажимаем клавишу Shift и кликаем по первому кадру. Теперь у нас выделены оба кадра и мы добавим промежуточные кадры нажав для этого кнопку Создание промежуточных кадров (Tween) в нижней части панели. Появится окно Создать промежуточные кадры, где выставляем параметры как на рисунке.

13. Добавим новый кадр и снова снижаем Непрозрачность (Opacity) слоя с текстом до 0%. Активным на панели анимации у нас является последний кадр, нажимаем клавишу Shift и кликаем по предпоследнему кадру, чтобы выделены были оба кадра. Снова нажимаем кнопку Создание промежуточных кадров (Tween), в окне Создать промежуточные кадры оставляем те же параметры.

14. Теперь у нас на панели анимации 23 кадра. Устанавливаем первому кадру время задержки кадра 0,2 секунды, двенадцатому кадру - 1 секунду. Анимированные кнопки готовы.

15. Нажмите кнопку PLAY посмотрите что получилось. Для того, чтобы сохранить анимацию в Photoshop CS 3 заходим в меню Фаил-сохранить для Веб и устройств... (File-Save for Web) и сохраняем изображение в нужную Вам папку, как рисунок и HTML-код в формате GIF. Если сохраняете из Image Ready, то заходим в меню Фаил-Сохранить оптимизированный как... и сохраняем изображение как рисунок и HTML-код в формате GIF.



Добавлено: 07:05:2009

На этом уроке рассмотрен прием, который позволяет автоматически создавать анимацию. Вам необходимо сделать первый и последний кадры, а остальные программа Фотошоп нарисует сама, благодаря чему получаются действительно интересные анимированные кнопки с плавными переходами между кадрами анимации.








Полезные советы

Что бы открыть изображение в Фотошопе не обязательно заходить в меню Фаил-Открыть (File-Open), можно щелкнуть два раза левой кнопкой мыши на пустом месте в окне программы, либо перетащить изображение из окна файлового менеджера (Проводника Windows или Total Commander) в окно программы Фотошоп.


При перепечатке материалов сайта активная ссылка обязательна