Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 13.58.161.115
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Рисуем красивую анимированную кнопку в программе Фотошоп
Сообщение оставлено 02.06.2009 в 15:26:54 | Сообщение #1
1.Создаем новый документ размером 125Х40 пикселов с прозрачным фоном (Файл-Новый). Заливаем белым цветом при помощи инструмента "Заливка".

2.Двойным левым кликом по строке слоя вызываем окно "Стили слоя" и выбираем стиль НАЛОЖЕНИЕ ГРАДИЕНТА. Кликаем по окошечку с градиентом и у нас появляется окно "Редактор градиентов", там мы создаем градиент примерно такой как на рисунке.

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

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


5.Создаем новый слой, при помощи инструмента "Прямоугольное выделение" делаем выделение как показано на рисунке и заливаем его белым цветом при помощи инструмента "Заливка". Снижаем "Непрозрачность" слоя до 50%.

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


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


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

9.Активируем инструмент "Текст", подбираем шрифт и размер (в нашем примере это шрифт CENA размером 18 пт) и набираем нужную надпись. Двойным левым кликом по строке слоя с текстом вызываем окно "Стили слоя" и выбираем нужные Вам стили. В нашем примере к надписи применен стиль ТИСНЕНИЕ, НАЛОЖЕНИЕ ГРАДИЕНТА и ОБВОДКА с параметрами как на рисунке.



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

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

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


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

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

15.Нажмите кнопку PLAY посмотрите что получилось. Для того, чтобы сохранить анимацию в Photoshop CS 3 заходим в меню ФАЙЛ-СОХРАНИТЬ ДЛЯ ВЭБ И УСТРОЙСТВ... и сохраняем изображение в нужную Вам папку, как рисунок и HTML-код в формате GIF. Если сохраняете из Image Ready, то заходим в меню ФАЙЛ-СОХРАНИТЬ ОПТИМИЗИРОВАННЫЙ КАК и сохраняем изображение как рисунок и HTML-код в формате GIF.

 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика