Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Рисуем профессиональную кнопку с помощью Флэш
Macromedia Flash » Уроки 22 октября 2009 NazaRПечать


Шаг 1. Создаем новый документ размером 400*400px.

Шаг 2. Переназываем текущий слой (layer1) на "base". Выбираем Инструмент Овал (Oval Tool(O)) на Панели Инструментов со следующими параметрами:


и рисуем овал, как на картинке внизу

Шаг 3. Теперь, давайте зальем наш овал градиентом. Убедитесь, что Панель Color Mixer (Смешение цветов) открыта и введите там следующие цифры: (овал должен быть при этом выделен, естественно).

наш градиент будет выглядеть так

Шаг 4. Все отлично, только направление градиента не то, что хотелось бы. Поэтому выбираем Инструмент Трансформации Градиента (Gradient Transformation Tool (F)) и поворачиваем наш градиент по часовой стрелке (см.картинку).

у вас должно получиться что-то в этом роде:

Шаг 5. Теперь для того, чтобы добавить эффекты типа "отбросить тень (drop shadow)" и "внутреняя тень (inner shadow)", необходимо конвертнуть наш круг в movie clip, так как Flash позволяет применять эти эффекты только к movie clip. Поэтому кликаем правой кнопкой мыши по нашему объекту и выбираем Convert to Symbol (Перевести в Символ). Используем следующие параметры:

Нажимаем Ок. Теперь идем в Панель Свойств. Кликаем на кнопке "+", чтобы добавить фильтры...
Шаг 6. Выбираем фильтр "Drop Shadow (Отбросить Тень)" и используем следующие значения:
Рисуем профессиональную кнопку с помощью Флэш
Мы создали эффект Внешней Тени. Теперь создадаим Внутренюю Тень. Для этого опять нажимаем "+" и выбираем Drop Shadow (Отбросить Тень), но на этот раз вводим вот такие параметры:
Рисуем профессиональную кнопку с помощью Флэш
 Наш основной слой готов, он должен выглядеть так:

Шаг 7. Создадим новый слой и назовем его "bevel". Выбираем опять Инструмент Oval (Овал) и рисуем круг, как на рисунке внизу:

Закрашиваем Овал Градиентом с установками на Панели Color Mixer, как внизу:

У вас должно получиться что-то такое:

Шаг 8. Опять, используя Инструмент Gradient Transform Tool (F), для поворота градиетной заливки на 90 градусов.

Шаг 9. Создаем еще один новый слой и называем его "blue". Он должен быть самым верхним. Панель слое будет выглядеть так:

Шаг 10. На этом слое мы будем создавать светящееся голубое стекло. Для начала рисуем круг с помощью Инструмента Oval.

Теперь, используя все ту же Панель Color Mixer, окрашиваем наш круг в такой Градиент:

У вас должно получиться что-то наподобие этого:

Шаг 11. Мы близки к цели. Создадим еще один слой и назовем его "gloss", нарисуем в нем овал, как на рисунке внизу:

Шаг 12. Выделяем наш новый прямоугольник и задаем для него на Панели Color Mixer следующие параметры. Обратите внимание, что Градиент меняется от Белого к Прозрачному (Для достижения этого эффекта, для начала создаем градиент от Белого к Белому, а затем выставляем значение alpha=0% на конце Градиента).

У вас должно получиться что-то в этои духе:

Шаг 13. И в очередной раз поворачиваем Градиент на 180 градусов.

Шаг 14. Ну вот и все. Можно поместить какой-нибудь значок (например, как на картинке внизу) на новом слое между "gloss" и "blue". Результат внизу:
 


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (6)

#1 написал: naikon | 22 октября 2009 17:06
     

Никогда не любил рисовать во флеше, не понимал смысла если есть иллюстратор или корел...
#2 написал: DeNRiX | 22 октября 2009 17:13
     

так зачем тогда вобще эти разделы ?
#3 написал: Jecky | 22 октября 2009 17:20
     

Цитата: SHADOW
так зачем тогда вобще эти разделы ?

У каждого своя религия!
#4 написал: naikon | 22 октября 2009 17:30
     

SHADOW,
Да и тем более флеш уроки не построены на создании из-ий, а в основном на их анимации, как визуальной так и кодовой части.
#5 написал: Samogon | 22 октября 2009 19:29
     

а я рисую во флэше...я к нему превык и илюстратор изучать особо времени нет...
#6 написал: pa-inter | 10 февраля 2012 04:08
     

Некоторые моменты всегда проще нарисовать сразу в той программе в которой работаешь в данный момент, и во флеше для этого все есть. Зачем открывать и тем более изучать илюстратор для рисования обычной кнопки - это маразм. Другое дело если делать портрет... Вообщем автору респект - для новичков наверно будет полезен урок.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.