ФотошопСундучок
Начните свой путь в мир ФОТОШОПА сейчас!


БЕСПЛАТНЫЕ РАССЫЛКИ ВКОНТАКТЕ

(более 20 рассылок) 

 

 

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму.

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу, при желании, укажите свои данные.

Меценаты

Присоединяйтесь в

Вход на сайт

Профиль

Кто на сайте

Сейчас 269 гостей и ни одного зарегистрированного пользователя на сайте

 

 

 

 

 

 

Яндекс.Метрика

Создаём анимированную кнопку для Вашего сайта

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

Анимированная кнопка

Подобные публикации:


Смотреть другие уроки по созданию анимации в фотошопе.

{smooth-scroll-top}

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

Инструмент "Прямоугольник со скруглёнными углами"

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

Нарисованная кнопка

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

Палитра Стили

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

Слой - Растрировать - Слой

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

Палитра Слои

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

Кнопка

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

Выделение - Модификация - Сжать

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

Окно "Сжать область"

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

Кнопка

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

Палитра Слои

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

Палитра Стили

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

Кнопка

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

Палитра Слои

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

Палитра Анимация

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

Палитра Анимация

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

Палитра Анимация и палитра Слои

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

Палитра Анимация и палитра Слои

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

Палитра Анимация и палитра Слои

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

Палитра Анимация и палитра Слои

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

Палитра Анимация и палитра Слои

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

Палитра Анимация

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

Палитра Анимация и палитра Слои

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

КНОПКА

Анимированная кнопка

{smooth-scroll-top}

Печать

Комментарии  

Виктор
0 # Виктор 16.01.2013 03:43
Все понятно написанно с первого раза все зделал а у кого не получилось учите фотошоп нормально
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 08.04.2012 15:06
урааааааааааааааааа! сделал :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: :woohoo:
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 09.03.2012 01:13
Алиса! Что Вы имеете ввиду? Эту кнопку надо сделать самому по уроку.
Ответить | Ответить с цитатой | Цитировать
алиса
0 # алиса 08.03.2012 21:08
где находится эта анимация? :0
Ответить | Ответить с цитатой | Цитировать
Татьяна
0 # Татьяна 31.01.2012 21:46
Описано всё СУПЕР!!! наваяла кнопку за минуту :woohoo: Теперь вопрос - как сделать, чтобы кнопка реагировала на мышь, а не просто мигала?...
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 01.02.2012 13:15
Татьяна! Можно сделать, чтобы после клика по кнопке люди переходили на нужный Вам сайт. А чтобы кнопка реагировала на мышь - то это к программистам.
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 17.12.2011 19:32
Саша! Очевидно сайт "В контакте" не поддерживает анимацию. Посмотрите в своём аккаунте, может быть там есть возможность включения анимации или обратитесь к администрации сайта.
Ответить | Ответить с цитатой | Цитировать
Саша
0 # Саша 17.12.2011 19:18
Все сделал на компе анимируется а вконтакте нет почему???
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 24.11.2011 10:30
сохраняю в GIF для WEB. анимация отдельно без фотошопа не работает.просто изображение кнопки.
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 24.11.2011 12:11
alex! Если у Вас анимация нормально работает в фотошопе и Вы сохраняете её в GIF формате, то она обязательно будет работать в программах для просмотра изображений. Очевидно, что та программа, которой Вы пользуетесь, не поддерживает этот формат или не установлена соответствующая галочка в настройках программы.
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 24.11.2011 20:22
вы не могли-бы написать название программы в которой работает анимация??
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 24.11.2011 23:52
alex! Я использую ACDSee. А вообще анимация работает даже в стандартной программе, которая устанавливается по умолчанию - программа просмотра изображений и факсов.
Ответить | Ответить с цитатой | Цитировать
alex
0 # alex 25.11.2011 01:28
ясно. спасибо
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 09.03.2012 03:16
Странно..А у меня в программе просмотра изображений и факсов анимация почему-то не работала, а выглядела как обычное, неподвижное изображение :0
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 15.12.2011 01:07
Анимации корректно отображаются например, в браузере. :-)
Ответить | Ответить с цитатой | Цитировать
Андрей
0 # Андрей 09.03.2012 02:41
Программ, в которых будет работать анимация-множество. В том числе, известный всем броузер-программа для просмотра веб-страниц. ;-)
Ответить | Ответить с цитатой | Цитировать
Норм чел
0 # Норм чел 23.08.2011 13:54
:woohoo: класс :woohoo:
Ответить | Ответить с цитатой | Цитировать
niko
+1 # niko 15.08.2011 17:49
вот сделал
Ответить | Ответить с цитатой | Цитировать
Никита
0 # Никита 08.08.2011 17:52
а как сделать аву на форум ввиде анимации?
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 08.08.2011 17:51
а как сделать аватар на форум ввиде анимации?
Ответить | Ответить с цитатой | Цитировать
AmonRa
0 # AmonRa 23.07.2011 16:22
НЕОЧЕНЬ ПОНЯТНО ОПИСАНО, за скрины 5 баллов
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 01.08.2011 15:10
Что конкретно непонятно? Напишите и я переделаю урок, чтобы всем было ясно!
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 13.07.2011 00:31
:woohoo: :huh: ;-)
Ответить | Ответить с цитатой | Цитировать
Андрей
+1 # Андрей 28.06.2011 14:19
спосибо B)
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 09.06.2011 20:56
Если ей дать функцию перехода по ссылке. Нажимаем на картинку и переходим по ссылке.
Ответить | Ответить с цитатой | Цитировать
маша
0 # маша 20.09.2011 01:01
а как сделать эту функцию??? :D
Ответить | Ответить с цитатой | Цитировать
73PH_adminv15
0 # 73PH_adminv15 20.09.2011 02:09
Маша, какую функцию Вы имеете ввиду?
Ответить | Ответить с цитатой | Цитировать
Guest
+1 # Guest 09.06.2011 20:49
А на неё нажать можно? ;-)
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Введите Ваше имя, или зарегистрируйтесь на сайте, что бы имя в ответах вставлялось автоматически: это займёт 2 минуты! После регистрации вы сможете редактировать свои сообщения и не придётся вводить подтверждение.
Ваш аватар к комментарию возможен, если вы зарегистрированы в системе Gravatar. Если нет - зарегистрируйтесь, это бесплатно.


Прикрепить фотографии

Популярные уроки сайта:

Prev Next

Как использовать смар…

Видеоуроки

Как использовать смарт-фильтры в фотошопе неразрушающим способом   Продолжение серии уроков по неразрушающей обработке фотографий в Photoshop. Предыдущие уроки Вы найдете по ссылкам под картинкой. В уроке «Как использовать смарт-фильтры в фотошопе неразрушающим способом» поговорим о...

Читать далее

Как сделать фотошоп м…

Видеоуроки

Как сделать фотошоп макияж неразрушающим способом  Продолжение серии уроков по неразрушающей обработке фотографий в Photoshop. Предыдущие уроки Вы найдете по ссылкам под картинкой. В уроке «Как сделать фотошоп макияж неразрушающим способом» поговорим о...

Читать далее

Фон из фото

Уроки фотошопа коллажи

 Фон из фото Всем привет! В сегодняшнем уроке мы будем создавать фон из фото из самого исходного фото. Звучит слегка запутанно, но эффект довольно прост и подойдет для оформления свадебных фотографий, снимков...

Читать далее

15 советов, как сделать…

Обработка фотографий в фотошопе

15 советов, как сделать обработку в фотошопе, неразрушающим способом Привычка работать в фотошопе так, чтобы сохранять историю работы в слоях, не менять исходник и максимально упростить свою работу, дорого стоит. В уроке «15 советов...

Читать далее

Обои облака

Уроки рисования в фотошопе

 Обои облака Всем привет! Сегодня мы будем рисовать с нуля обои облака для рабочего стола. Как часто вы любуетесь облаками, красотой неба? Предлагаю в этом уроке побыть художником, нарисовать собственные облака. Из урока...

Читать далее

Что такое неразрушающ…

Обработка фотографий в фотошопе

Что такое неразрушающая обработка? Для того, чтобы хорошо и эффективно работать в Photoshop, надо не просто знать какие есть инструменты, как они работают, какие приёмы применяются. Очень важно для эффективной работы выработать полезные...

Читать далее

Поп арт в фотошопе

Уроки рисования в фотошопе

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

Читать далее

Фон круги

Уроки рисования в фотошопе

Фон круги Всем привет! Сегодня будем создавать фон в виде кругов. Это интересная идея, например, для создания фона открытки, фона баннера, или просто для создания обоев. В уроке вы научитесь пользоваться инструментами Кисть, Заливка...

Читать далее

Рисуем штамп в фотошо…

Уроки рисования в фотошопе

Рисуем штамп в фотошопе  Всем привет! Сегодня мы будем рисовать штамп в фотошопе. Для чего это нужно? Цель создания штампа может быть разная, например, создание эскиза, или знака на сайт. Или, например, если вам нужна...

Читать далее

Эффекты для текста - з…

Уроки фотошопа текст

Эффекты для текста заклёпки Всем привет! В сегодняшнем уроке мы будем создавать эффекты для текста -  текст из заклепок. Урок прост в исполнении, но результат выглядит естественно и натурально. Текст выполненный в...

Читать далее

Эффект для текста в фо…

Уроки фотошопа текст

Эффект для текста в фотошоп "Расплавленный текст" Всем привет! В этом уроке разберемся с вами, как быстро и легко сделать яркий и огненный текст.  Сегодня создадим эффект для текста в фотошоп - "Расплавленный текст". В...

Читать далее

Как улучшить снимок, …

Видеоуроки

Как улучшить снимок,используя микширование каналов в фотошопе   Рассмотрим еще метод обработки фотографии. Улучшим снимок очень быстрым методом. Придадим обьема снимку, и добавим теней.  Урок сделан в русифицированной программе СС 2018, но может быть легко...

Читать далее

Полуавтоматический с…

Видеоуроки

Полуавтоматический способ  обработки пейзажа  в фотошоп   В этом уроке рассмотрим один из экспресс методов улучшения фотографии. Способ очень простой и эффективный.  Урок сделан в русифицированной программе СС 2018, но может быть легко повторен практически в...

Читать далее

Яркая обработка фото

Фотошоп уроки эффекты

Яркая обработка фото  Всем привет! В уроке "Яркая обработка фото" мы будем добавлять яркости к фотографии. Яркие и сочные, "вкусные" цвета в кадре – необходимая вещь для Вашей фотографии. Сегодня на примере одного снимка рассмотрим...

Читать далее

Эффекты для текста в ф…

Уроки фотошопа текст

 Эффекты для текста в фотошопе "текст из воды" Всем привет! В сегодняшнем уроке мы будем создавать эффекты для текста в фотошопе - "текст из воды". Сначала мы создадим фон – добавим в работу...

Читать далее

Эффект масляной краск…

Фотошоп уроки эффекты

Эффект масляной краски Всем привет! В сегодняшнем уроке мы будем создавать эффект фильтра Масляная краска, используя другие фильтры фотошоп и корректирующие слои. Фильтр Масляная краска успел полюбиться многим.   Придаст вашей фотографии вид классической...

Читать далее

Текст золотом в фотош…

Уроки фотошопа текст

Текст золотом в фотошопе Всем привет! В сегодняшнем уроке мы будем создавать текст золотом в фотошопе с вкраплением бриллиантов. Из урока вы узнаете, как пользоваться инструментами Текст, Кисть, Перемещение и Перо, стилями слоя, научитесь...

Читать далее

Создание сферы в фото…

Уроки рисования в фотошопе

Создание сферы в фотошопе Всем привет! Сегодня мы будем рисовать сферу. В уроке вы научитесь пользоваться инструментами Заливка, Кисть, Овальная область, Прямоугольная область, Эллипс, Перемещение, фильтрами Размытие по Гауссу, Сферизация, Рябь, режимами наложения...

Читать далее

Коллаж Love is...

Уроки фотошопа коллажи

Коллаж Love is... Всем привет! Сегодня мы будем создавать коллаж в стиле вкладышей жевательной резинки «Love is…», популярной в 90-х годах прошлого столетия. Такой коллаж «Love is…»может быть прекрасным подарком любимому человеку...

Читать далее

Как нарисовать луну и …

Уроки рисования в фотошопе

Как нарисовать луну и звезды  Всем привет! В сегодняшнем уроке мы узнаем как нарисовать звезды и луну на фотографии. Из урока вы узнаете, как пользоваться инструментами Кисть, Рамка, Прямоугольная область, Перемещение, фильтрами Шум и...

Читать далее

Как рисовать огонь в ф…

Уроки рисования в фотошопе

Как рисовать огонь в фотошопе Всем привет! Сегодня мы будем рисовать огонь в фотошопе. Этот эффект очень прост в исполнении – мы буквально за несколько шагов получим довольно реалистичное изображение огня. Сначала мы применим к...

Читать далее

Эффект старой кинопле…

Фотошоп уроки эффекты

 Эффект старой кинопленки в фотошопе Всем привет! В сегодняшнем уроке мы будем создавать эффект старой кинопленки. Из урока вы узнаете, как пользоваться инструментами Прямоугольная область, Перемещение, фильтрами Размытие в движении, Умная резкость, корректирующими...

Читать далее

Поворот в фотошопе ин…

Видеоуроки

Поворот в фотошопе инструментом "Поворот вида" Инструмент поворот в фотошопе вращает холст — не нанося вред ни единому пикселю. Поэтому, вы можете редактировать, рисовать и раскрашивать изображение под более удобным для работы углом. Это как сдвигать...

Читать далее

Палитра история в фот…

Видеоуроки

Палитра История в фотошопе Работать в фотошопе и не совершать ошибки, не всегда получается.  Где-то стерли лишнее, мазнули не в том месте, или не тот эффект наложили или переборщили с настройками. В любом...

Читать далее

Светлячки для фотошоп…

Уроки фотошопа текст

Светлячки для фотошопа Всем привет! Сегодня мы будем создавать текст из светлячков. В уроке вы научитесь пользоваться инструментами Кисть, Текст, Ластик, Перемещение, фильтром Облака, стилями слоя, режимами наложения слоев, корректирующими слоями, узнаете, как...

Читать далее

Как использовать инст…

Видеоуроки

Как использовать инструмент архивная кисть в фотошопе Инструмент "Архивная кисть фотошопе" позволяет рисовать стилизованными штрихами с использованием исходных данных. К мазкам архивной кисти могут применяться различные параметры, которые позволяют менять состояние выделенного обьекта, на...

Читать далее

Анимация текста в фот…

Уроки анимации в фотошопе

 Анимация текста фотошопе Всем привет! Сегодня мы будем создавать анимацию появляющегося текста. Сначала мы создадим фон и зальем его черным цветом. Затем установим шрифт из папки с исходниками, напишем текст и применим к...

Читать далее

Соглашение / Оферта
Автор сайта: Накрошаев Олег, Все права защищены Copyright, © 2009-2018