|
В этом уроке по работе с фотошопом мы будем создавать с "нуля" кнопку для сайта, а потом сделаем её анимированной.
 [показать]
Подобные публикации:
Смотреть другие уроки по созданию анимации в фотошопе.
 Наверх
Создадим новый документ произвольных размеров, к примеру, 200 на 100 пикселов. Выберем инструмент "Прямоугольник со скруглёнными углами", будем применять его в режиме "Слой-фигура".
[показать]
Нарисуем кнопку в нашем документе. Так как у меня цвет переднего плана чёрный, то кнопка получилась чёрного цвета.
[показать]
Перейдём в палитру "Стили" и выберем какой-нибудь подходящий стиль для нашей кнопки, я выбрал "Бирюзовое стекло".
[показать]
Растрируем верхний слой: "Слой - Растрировать - Слой".
[показать]
Удерживая клавишу Ctrl, щёлкаем левой кнопкой мыши по иконке верхнего слоя.
[показать]
Загрузится выделение кнопки.
[показать]
Создадим по краям кнопки небольшую каёмку. Идём в "Выделение - Модификация - Сжать".
[показать]
В появившемся окне ставим 3 пиксела.
[показать]
Вот что у нас получилось.
[показать]
Инвертируем выделение - Shift+Ctrl+I, а потом копируем выделение на новый слой - Ctrl+I. В палитре "Слои" появился третий слой.
[показать]
Придадим нашей небольшой каёмочке (всего 3 пиксела) какой-нибудь стиль. Переходим в палитру "Стили" и выбираем подходящий. Я применил "Пурпурное стекло".
[показать]
Вот такая кнопочка у нас получилась. Вы можете выбрать любые стили или применить свои.
[показать]
Сливаем все видимые слои - Shift+Ctrl+E.
[показать]
Открываем окно "Анимация" - "Окно - Анимация". Там мы увидим всего один слой.
[показать]
Нажимаем на вторую справа иконку в палитре "Анимация" и создаём два новых кадра.
[показать]
Делаем активным первый кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.
[показать]
Делаем активным второй кадр и смотрим, чтобы в палитре "Слои" была выключена видимость слоя.
[показать]
Делаем активным третий кадр и смотрим, чтобы в палитре "Слои" была включена видимость нашего единственного слоя.
[показать]
Делаем активным первый кадр и нажимаем на третью справа иконку в палитре "Анимация". Появляется окно "Создать промежуточные кадры", выставляем 10 кадров, остальные параметры не изменяем.
[показать]
Делаем активным двенадцатый кадр (первый кадр плюс десять вновь созданных) и опять жмём ту же кнопку в палитре "Анимация". Добавляем ещё 10 кадров.
[показать]
Делаем активным последний кадр, щёлкаем по чёрной стрелочке рядом с полем "0 сек", и выбираем время задержки 1,0 сек.
[показать]
При активном последнем кадре опять щёлкаем по третьей кнопке и добавляем пять кадров.
[показать]
Всё наша анимация готова. Нажимаем "Play" и любуемся готовой работой. Чтобы Ваша анимация работала не только в программе фотошоп, её необходимо правильно сохранить. Переходим в "Файл - Сохранить для WEB и устройств..." и выбираем формат файла GIF и сохраняем в любом месте на Вашем компьютере. Ещё один момент я забыл. После того, как Вы слили все видимые слои, напишите на кнопке необходимый текст. Я написал "Скачать".
[показать]
|