 |
| ||||||||
|
|
|
|
|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
| Главная » Файлы » уроки Photoshop » Анимация |
кнопка
| 27.12.2010, 12:39 | |
1. Новый файл, холст – квадратный(или как нравится), цвет фона – черный.( Я взяла размер 240x240 для нормального результата фильтра Clouds) 2. Создаем новый слой. По центру холста рисуем кнопку в состоянии «включено». Можно, например, создать круглое выделение, залить каким-нибудь цветом и применить свой самый любимый стиль слоя, который вы всегда хотели куда-нибудь применить, но не знали куда 
. Я взяла переключатель из Adobe Illustrator CS2 (Window -> Symbol
libraries -> Web Buttons and Bars ->Button16 Mouse Down). Скрываем
этот слой. 3. Создаем новый слой. По центру холста рисуем кнопку в состоянии «выключено». Этот переключатель я брала оттуда же откуда и первый (Button16 Normal) (рис.2).  4. Теперь нарисуем стекло. А) Новый слой. Заливаем черным. Выставляем режим наложения(blending mode) Screen. Б) Рисуем отражение на стекле. Новый слой. Заливаем белым. Foreground – голубой, Background – белый. Filter -> Render -> Clouds. Режим наложения(blending mode) слоя Pin Light, прозрачность слоя 25%. Щелкаем правой кнопкой мыши по этому слою в панели Layers. Из выпадающего меню выбираем пункт Create Clipping Mask. В) Рисуем блики на стекле. Новый слой. Заливаем черным. Filter -> Render -> Lens Flare…(настройки на ваш вкус). Режим наложения(blending mode) слоя Screen. Щелкаем правой кнопкой мыши по этому слою в панели Layers. Из выпадающего меню выбираем пункт Create Clipping Mask.  Не очень похоже на стекло, но это ведь и не урок по рисованию реалистичных стекол .5. Рисуем рамку. Увеличим холст(например, на 20px с каждой стороны), Image -> Canvas Size… . Выделяем область рамки. Новый слой. Заливаем каким-нибудь цветом. Далее я применила фильтр Liquid Metal из набора DreamSuite1 и стиль слоя Drop Shadow, на новом слое нанесла кистью «орнамент» узор и применила к этому слою стиль Bevel and Emboss (Pillow emboss). Но ничто не мешает вам создать собственную оригинальную рамку. Самый простой способ – применить к слою с рамкой какой-нибудь стандартный стиль слоя из палитры Styles. Не забудьте добавить тень от рамки(она же над кнопкой).  6.Переходим в Image Ready(кнопка внизу панели инструментов). II. Основной этап. Анимируем кнопку в Image Ready. 1.Жмем на треугольник в правом верхнем углу панели Web Content. Из выпадающего меню выбираем пункт New Rollover State. Кликаем правой кнопкой мыши на появившемся состоянии, выбираем пункт None. Это состояние определяет, как будет выглядеть кнопка до того, как пользователь произведет какие-либо действия с ней.  2.Снова New Rollover State. Кликаем правой кнопкой мыши на новом состоянии, выбираем пункт Over(возможно он уже будет выбран автоматически). Это состояние определяет, что будет отображаться при наведении курсора на картинку. Нам нужно чтобы стекло медленно отъезжало. Приступим. А) Убедитесь, что на панели Web Content выделено состояние Over. На панели Animation перетащите первый кадр на иконку нового кадра(слева от мусорного бака). Теперь у нас два одинаковых кадра. Б) Выделите второй кадр. В панели Layers перетащите влево инструментом Move Tool слой со стеклом(только тот что залит черным), так чтобы стекла не было видно. 
В панели Animation выделите оба кадра (удерживая Shift) и нажмите на
иконку tween-анимации(см. рис.). Параметры установите как на рисунке.
Жмем ОК. Г) Из списка в левом нижнем углу панели Animation выберем Once(проигрывать один раз). 3. Панель Web Content. New Rollover State. Кликаем правой кнопкой мыши на новом состоянии, выбираем пункт Out. Это состояние определяет, что будет отображаться при отведении курсора от картинки. Далее делаем все то же самое, что и для состояния Over(пункт 2), но перед созданием анимации меняем первый и второй кадры местами. 4. Панель Web Content. New Rollover State (можно не открывать список, а просто нажать на иконку нового состояния внизу панели). Кликаем правой кнопкой мыши на новом состоянии, выбираем пункт Down(возможно он уже будет выбран автоматически). Это состояние определяет, что будет отображаться при нажатии левой кнопки мыши. А) Убедитесь, что на панели Web Content выделено состояние Down. В панели Layers скройте слой с кнопкой «выключено» и слой со стеклом и сделайте видимым слой с кнопкой «включено».  5. Панель Web Content. Перетаскиваем состояние Down на иконку New Rollover State. Кликаем правой кнопкой мыши на новом состоянии, выбираем пункт Click. Это состояние определяет, что будет отображаться при левом клике мыши. 6. Кликаем на иконке IE в панели инструментов. Смотрим, как все работает. Возвращаемся в IR. Уменьшаем кнопку до нужного размера Image -> Image Size…. Сохраняем файл для web File -> Save Optimized As. В результате получим html-файл и папку images с рисунками *.gif. | |
| Просмотров: 465 | Загрузок: 0 | Рейтинг: 0.0/0 | |
| Всего комментариев: 0 | |
|
|
|
|
|
|
|