Мини-чат
Для добавления необходима авторизация
Одним из направлений нашего сайта является студия дизайна. Вы можете заказать уникальный дизайн для своего сайта по выгодным ценам. Приятно удивляет соотношение цены и качества выполненных нами шаблонов
Наш сайт по праву может называться интернет-порталом. Здесь Вы можете не только скачать все нужные вам файлы, но и получить помощь в разрешении проблем на форуме. Отзывчивая администрация поможет!
Приветствую тебя, Гость!
Войти Зарегистрироваться
  • Страница 1 из 1
  • 1
Форум » Adobe Photoshop » Уроки » Создаём анимированную кнопку для Вашего сайта
Создаём анимированную кнопку для Вашего сайта
Модераторы
18.08.2012, 06:57
Награды: 11
Репутация: 23
Сообщений: 1033
Сообщение # 1
Создаём анимированную кнопку для Вашего сайта


В этом уроке по работе с фотошопом мы будем создавать с "нуля" кнопку для сайта, а потом сделаем её анимированной




Создадим новый документ произвольных размеров, к примеру, 200 на 100 пикселов. Выберем инструмент "Прямоугольник со скруглёнными углами", будем применять его в режиме "Слой-фигура".




Нарисуем кнопку в нашем документе. Так как у меня цвет переднего плана чёрный, то кнопка получилась чёрного цвета.




Перейдём в палитру "Стили" и выберем какой-нибудь подходящий стиль для нашей кнопки, я выбрал "Бирюзовое стекло".




Растрируем верхний слой: "Слой - Растрировать - Слой".




Удерживая клавишу Ctrl, щёлкаем левой кнопкой мыши по иконке верхнего слоя.




Загрузится выделение кнопки.




Создадим по краям кнопки небольшую каёмку. Идём в "Выделение - Модификация - Сжать".




В появившемся окне ставим 3 пиксела.




Вот что у нас получилось.




Инвертируем выделение - Shift+Ctrl+I, а потом копируем выделение на новый слой - Ctrl+I. В палитре "Слои" появился третий слой.




Придадим нашей небольшой каёмочке (всего 3 пиксела) какой-нибудь стиль. Переходим в палитру "Стили" и выбираем подходящий. Я применила "Пурпурное стекло".




Вот такая кнопочка у нас получилась. Вы можете выбрать любые стили или применить свои.




Сливаем все видимые слои - Shift+Ctrl+E.




Открываем окно "Анимация" - "Окно - Анимация". Там мы увидим всего один слой.




Нажимаем на вторую справа иконку в палитре "Анимация" и создаём два новых кадра.




Делаем активным первый кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.




Делаем активным второй кадр и смотрим, чтобы в палитре "Слои" была выключена видимость слоя.




Делаем активным третий кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.




Делаем активным первый кадр и нажимаем на третью справа иконку в палитре "Анимация". Появляется окно "Создать промежуточные кадры", выставляем 10 кадров, остальные параметры не изменяем.




Делаем активным двенадцатый кадр (первый кадр плюс десять вновь созданных) и опять жмём ту же кнопку в палитре "Анимация". Добавляем ещё 10 кадров.


Делаем активным последний кадр, щёлкаем по чёрной стрелочке рядом с полем "0 сек", и выбираем время задержки 1,0 сек.




При активном последнем кадре опять щёлкаем по третьей кнопке и добавляем пять кадров.




Всё наша анимация готова. Нажимаем "Play" и любуемся готовой работой. Чтобы Ваша анимация работала не только в программе фотошоп, её необходимо правильно сохранить. Переходим в "Файл - Сохранить для WEB и устройств..." и выбираем формат файла GIF и сохраняем в любом месте на Вашем компьютере.. После того, как Вы слили все видимые слои, напишите на кнопке необходимый текст. Допустим, "Скачать".





Спасибо за внимание!


Cообщение было отредактировано!
ZeleBoba - Суббота, 18.08.2012, 18:13
Пользователи
06.10.2012, 12:09
Награды: 3
Репутация: 12
Сообщений: 286
Сообщение # 2
Ловите мою кнопку, но не стал анимированой делать
Модераторы
06.10.2012, 15:08
Награды: 11
Репутация: 23
Сообщений: 1033
Сообщение # 3
STALKER-SMASH, тебе урок помог?)
Пользователи
07.10.2012, 12:10
Награды: 3
Репутация: 12
Сообщений: 286
Сообщение # 4
ZeleBoba, да побропывал

Добавлено (07.10.2012, 12:10)
---------------------------------------------
Да, но я сам могу

Проверенные
07.10.2012, 17:00
Награды: 1
Репутация: 5
Сообщений: 44
Сообщение # 5
Дану слишком просто)
Пользователи
08.10.2012, 18:36
Награды: 3
Репутация: 12
Сообщений: 286
Сообщение # 6
HitProm, я о том же
Модераторы
09.10.2012, 09:09
Награды: 11
Репутация: 23
Сообщений: 1033
Сообщение # 7
STALKER-SMASH, HitProm, это уроки для начинающих,друзья мои.К чему тогда все настолько подробно описано)
Пользователи
14.10.2012, 10:39
Награды: 3
Репутация: 12
Сообщений: 286
Сообщение # 8
ZeleBoba, все ровно, ты молодец
Форум » Adobe Photoshop » Уроки » Создаём анимированную кнопку для Вашего сайта
  • Страница 1 из 1
  • 1
Поиск: