В этом уроке по работе с фотошопом будет показан способ создания простой текстовой анимации, которую можно с успехом использовать на сайте.

Текстовая анимация

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


{smooth-scroll-top}

Создадим новый документ произвольного размера - Ctrl+N (размер с учётом размещения анимации на сайте). Выберем инструмент "Текст" с подходящими параметрами и напишем какое-нибудь слово.

Инструмент Текст

В палитре "Слои" сейчас два слоя.

Палитра Слои

Создадим новый слой, для чего щёлкнем по второй справа иконке в палитре "Слои".

Палитра Слои

В качестве цвета переднего плана установим цвет, которым будет отображаться тест (я выбрал красный). Нажмём сочетание клавиш Alt+Backspace.

Цвет переднего плана

Верхний слой зальётся цветом переднего плана (красным).

Верхний слой

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

Палитра Слои

Вот так сейчас выглядит палитра "Слои".

Палитра Слои

Надпись стала красного цвета.

Текстовая надпись

Сделаем активным текстовый слой и щёлкнем по второй иконке слева в палитре "Слои". В раскрывшемся списке выбираем "Обводка".

Палитра Слои

Во вкладке "Обводка" я изменил цвет обводки на чёрный и уменьшил её размер до 2 пикселов.

Стиль слоя

Дальше я сделал активной вкладку "Наложение градиента", выбрал градиент "От основного к прозрачному", поставил галочку "Инверсия" и немного "поигрался" параметрами "Режим", "Непрозрачность", "Масштаб". Подберите параметры, которые Вам подходят.

Стиль слоя

На вкладке "Тень" подрегулируйте параметры тени.

Стиль слоя

Вот что у меня получилось.

Текст

Откроем палитру "Анимация" - "Окно - Анимация".

Окно - Анимация

В палитре "Анимация" мы увидим только один слой.

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

Создадим копию выделенного кадра, для чего нажмём на вторую справа иконку.

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

Делаем активным первый кадр в палитре "Анимация". Включаем видимость всех слоёв в палитре "Слои".

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

Делаем активным второй кадр в палитре "Анимация" и убираем видимость верхнего слоя.

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

Удерживая клавишу Ctrl, щёлкаем по первому кадру (выделяем оба кадра) и щёлкаем по чёрной стрелочке в поле "0 сек". В появившемся списке выбираем время задержки 0,5 сек.

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

Сделаем анимацию более красивой. Делаем активным второй кадр в палитре "Анимация" и в палитре "Слои" - активным средний слой. Правой кнопкой мыши щёлкаем по этому слою и выбираем "Жёсткое сглаживание".

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

Делаем всё то же самое, только при активном первом кадре в палитре "Анимация".

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

Наша анимация готова. Нажимаем "Play" и любуемся полученным результатом. Сохраняем полученный результат - "Файл - Сохранить для Web и устройств...".

Файл - Сохранить для Web и устройств

В появившемся окне выбираем формат файла "Gif", 256 цветов. Смотрим, что оригинал у нас "весил" 87,9 Кб, а оптимизированный - 9,62 Кб. Прекрасный результат. Нажимаем "Да".

Параметры сохранения

В окне сохранения документа даём имя анимации, место сохранения файла и тип файла (Gif), нажимаем "Сохранить".

Окно "Сохранить оптимизированный как"

Для того чтобы анимацию в дальнейшем можно было изменить, сохраним наш файл ещё в формате PSD - "Файл - Сохранить как..."

Файл - Сохранить как

Опять даём название файлу и определяем место сохранения файла и выбираем тип файла PSD.

Параметры сохранения документа

Появляется окно "Параметры формата Photoshop", нажимаем "Да". Наш файл сохранён в двух форматах - Gif и PSD.

Параметры формата Photoshop

{smooth-scroll-top}

Комментарии  

Тамара К.
0 # Тамара К. 20.02.2015 14:35
Техническая сторона очень хорошо представлена. Всё подробно, четко,понятно - молодцы. Но часто мастера обращают много внимания на техническую сторону, но предают мало значения художественной стороне. Техническая сторона только средство, а цель - художественная часть. Вот здесь изображено анимированное пульсирующее сердце и почему-то по нему бегает "оптический прицел"? Мрачное впечатление! В сердце может пульсировать кровь или "бегать" по нему ромашка, как символ любви.
Ответить | Ответить с цитатой | Цитировать
Ольга
0 # Ольга 22.04.2014 00:22
Урок понравился. Всё получилось.Жаль только, нельзя выложить свою работу.
Ответить | Ответить с цитатой | Цитировать
Наталия
0 # Наталия 16.02.2014 04:30
Очень жаль, но не могу оформить подписку на Вашу рассылку. Не приходит письмо для активации.
Ответить | Ответить с цитатой | Цитировать
Алекс
0 # Алекс 02.06.2013 20:23
Очень понравился ваш сайт. Однни словом: Великолепный
Ответить | Ответить с цитатой | Цитировать
Ирина
0 # Ирина 23.05.2013 20:59
Большое спасибо за урок. Давно хотела сделать что-нибудь подобное. Все замечательно получилось.
Ответить | Ответить с цитатой | Цитировать
Анна
0 # Анна 08.09.2012 20:12
Спасибо,все получилось)
Ответить | Ответить с цитатой | Цитировать
Мария
0 # Мария 21.05.2012 03:47
Интересный урок. Сама стараюсь создавать нечто подобное. У меня тоже сайт по фотошопу - [censored]://....... , где я недавно создала рубрику про анимацию. Надеюсь, в будущем он будет также посещаем и интересен, как и Ваш. Успехов Вам!
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 30.01.2012 22:35
yozh2012! Очевидно, у Вас что-то с самой программой фотошоп.
Попробуйте сделать так, как описано здесь:
[censored]://[censored].photoshopsunduchok.ru/animaciy/213-web.html
Ответить | Ответить с цитатой | Цитировать
yozh2012
0 # yozh2012 30.01.2012 16:57
сохраняю для web в формате gif, выдает таблицу в фотошопе, там ставлю формат gif, нажимаю сохранить, он выдает еще табличку, где я указываю, где сохранить и вот тут он опять пишет только три возможных формата: -HTML AND IMAGES, ONLY IMAGES, ONLY HTML...Может быть такое что у меня комп не поддерживает этот формат или что-то надо в настройках изменить? помогите пожалуйста - очень надо!!! кстати в HTML анимашка работает - просто супер!!!!
Ответить | Ответить с цитатой | Цитировать
Эдуард
0 # Эдуард 29.01.2012 19:11
мне тоже 11 лет)) хочу 1 анимашку сделать)) но вот вопрос возник
Дальше я сделал активной вкладку "Наложение градиента", выбрал градиент "От основного к прозрачному", поставил галочку "Инверсия" и немного "поигрался" параметрами "Режим", "Непрозрачность", "Масштаб". Подберите параметры, которые Вам подходят.
можешь в скринах объяснить?)) просто не так понятно активной вкладку наложение градиента((
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 30.01.2012 13:45
Эдуард! Чтобы сделать активной вкладку "Градиент", поставьте галочку и щёлкните по этой вкладке, чтобы она стала активной (синего цвета).
Ответить | Ответить с цитатой | Цитировать
Иван
0 # Иван 29.01.2012 00:52
Сохраняйте файл через пункт "Сохранить для WEB", а не "Сохранить как".
Ответить | Ответить с цитатой | Цитировать
modocha2011
0 # modocha2011 26.04.2012 15:13
а почему
Ответить | Ответить с цитатой | Цитировать
yozh2012
0 # yozh2012 28.01.2012 20:58
Здравствуйте. Я все сделала по уроку, все получилось и работает в фотошопе... а когда пытаюсь сохранить в формате GIF, тип файла такого формата не выдает... :unsure:
там есть только: HTML AND IMAGES, ONLY IMAGES, ONLY HTML... ПОМОГИТЕ, ЧТО НАДО СДЕЛАТЬ, ЧТОБЫ ПРАВИЛЬНО СОХРАНИТЬ...
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 13.01.2012 05:02
админ простите разобрался), просто я не изменил у 2 кадра градиентную заливку :D
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 13.01.2012 04:50
у меня такая проблема:
после того как делаю невидимым 1 слой(красный), то во 2 кадре остаётся всё без изменений( не переключается на изначальный цвет текста)
админ подскажи в чём проблема?
Ответить | Ответить с цитатой | Цитировать
Pro100 ByKoV
0 # Pro100 ByKoV 03.01.2012 19:14
Большое Спасибо!Вот что у меня получилось:[censored ]://img.torrents.kg/ images/dNz88987.gif
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 03.01.2012 19:34
Очень хорошо!
Ответить | Ответить с цитатой | Цитировать
Борис
0 # Борис 27.12.2011 18:12
спасибо большое я вообще 3 раз за фотошоп взялся раньше просто не приходилось, и всё с первого раза получилось ваше респект автору,понятно и доходчиво а тем кто пишет что инструкция плохая хочу сказать что у них руки из жопы растут :!: :!: :!:
Ответить | Ответить с цитатой | Цитировать
Костя
0 # Костя 05.11.2011 12:05
я все сделал у меня все получилось заливаю через radikal.ru
ставлю на аватарку а она не мигает как я сделал почему помогите плиз заранее спасибо :sad: :sad: :cheer:
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 05.11.2011 12:29
Костя! Насколько я знаю сервис radikal.ru поддерживает только формат файла Jpeg, а у Вас файл в формате Gif. Кроме того, посмотрите, поддерживает ли этот формат форум на который Вы ставите аватарку (у других пользователей работает анимация или нет).
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 24.10.2011 00:03
У мня не получаетсся
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 24.10.2011 00:03
Что конкретно не получается?
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 28.09.2011 16:18
анимация на фотографии не сохраняется,просто на новом документе все получается, а вот именно на фото не сохроняется
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 28.09.2011 20:53
Никакой разницы нет между новым документом и фотографией. Если на документе получается, то и на фотографии получится. Посмотрите, чтобы фото было в формате Jpeg и режиме RGB. Если всё-равно не получается, то просто перетащите фото в новый документ, а дальше по уроку.
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 06.09.2011 21:47
Просто. Понятно. Замечательно.
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 29.08.2011 02:28
Приветствую ещё одного будущего фотошоп мастера!
Ответить | Ответить с цитатой | Цитировать
Руся
0 # Руся 29.08.2011 01:55
у мне получилось мне 13 выложите еше
Ответить | Ответить с цитатой | Цитировать
denis
0 # denis 28.08.2011 23:50
спасибо за сайт
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 26.08.2011 23:45
По другому сохранить не получится. Посмотрите решение своей проблемы вот в этом материале и в комментариях к нему:
[censored]://[censored].photoshopsunduchok.ru/animaciy/213-web.html
Ответить | Ответить с цитатой | Цитировать
Лена
0 # Лена 26.08.2011 22:49
Сохраняю, как у вас написано и ФШ выключается
Можно ли как-то по-другому сохранить ?
Ответить | Ответить с цитатой | Цитировать
diaries74
0 # diaries74 22.08.2011 20:14
Самый лучший урок из всех, тех которые я видел на других сайтах. Всё очень подробно, показано на скринах, описано. Thanks!
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 18.08.2011 02:09
А Это вобще возможно? :Pinch:
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 18.08.2011 02:55
Пример текстовой анимации Вы видите на самой верхней картинке, а как её сделать написано чуть ниже. Так что всё возможно!
Ответить | Ответить с цитатой | Цитировать
Стэн
0 # Стэн 17.08.2011 01:07
делал всё по инструкции только свою анимацию и сохранял по вашей "инструкции" , из за вас всё вылетело!!!
АААА :sad:
Ответить | Ответить с цитатой | Цитировать
73PH_admin
+1 # 73PH_admin 17.08.2011 01:07
Мне кажется всё дело в Вашей программе фотошоп, а не в моих инструкциях. Если почитать комменты, то даже у детей 11 лет получается.
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 02.08.2011 22:48
При сохранении не предлагает гиф,почему???Только HTMLи и только изображение(((( :sad:
Ответить | Ответить с цитатой | Цитировать
Настя
+1 # Настя 14.06.2011 21:52
Спасибо администратору!!!Мне 11 лет,у меня получилось.Не знаю,как у автора первого сообщени могло не получиться!!!
Уважаемый администратор,вы не могли бы выложить урок тоже по созданию анимации,только с другим эффектом.Не знаю даже,возможен ли другой эффект анимации,просто у меня друг делал всплывающий текст в Adobe Photosop CS3.Если это возможно,выложите пожалуйста.Буду очень благодарна!!!Спасибо .
Ответить | Ответить с цитатой | Цитировать
Darhan
0 # Darhan 14.06.2011 15:37
Спасибо класный урок всё получилос админу респккт!
Ответить | Ответить с цитатой | Цитировать
73PH_admin
+1 # 73PH_admin 14.06.2011 20:16
Пользуйтесь на здоровье!
Ответить | Ответить с цитатой | Цитировать
73PH_admin
0 # 73PH_admin 01.06.2011 04:03
Одно из решений посмотрите здесь - [censored]://[censored].photoshopsunduchok.ru/animaciy/213-web.html
А вообще полученный файл необходимо сохранять через "Файл - Сохранить для Web и устройств..." и дальше, как описано в уроке выше.
Ответить | Ответить с цитатой | Цитировать
Guest
0 # Guest 01.06.2011 03:09
сохраняю, а gif анимация почему то не работает
Ответить | Ответить с цитатой | Цитировать
Guest
-2 # Guest 27.05.2011 18:21
сложно
Ответить | Ответить с цитатой | Цитировать

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

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


Кто на сайте

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

Помощь сайту

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

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

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

Пользователи, внесшие вклад

Вход на сайт

ВСЕ РАССЫЛКИ САЙТА НА EMAIL

 

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

 

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

Основная полезная рассылка сайта.

Соглашение

 

 

 

 

Поиск по сайту

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

Что в сундучке?

  • Текстовых уроков - 1152
  • Видеоуроков - 765
  • Вебинаров и тренингов - 66
  • Практических советов - 167
  • Программ - 7
  • Шаблонов, обоев и клипартов - 368
  • Наборов кистей, фигур - 320
  • Календарей - 117
  • Наборов рамок - 560
  • Книг, журналов - 125
  • Текстур, узоров и фонов - 44
  • Наборов иконок - 28
  • Наборов логотипов - 3
  • Наборов стилей - 51
  • Шрифтов - 78
  • Разное - 70