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

Наверх

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наверх

Комментарии

Добавить новый

Анонимно   |Ваш IP адрес -178.93.120.xxx |2011-05-27 17:21:29 сложно Ответ

Анонимно   |Ваш IP адрес -89.178.190.xxx |2011-06-01 02:09:06 сохраняю, а gif анимация почему то не работает Ответ

admin77   |SAdministrator |2011-06-01 03:03:53 Одно из решений посмотрите здесь - http://www.photoshopsunduchok.ru/animaciy/213-web. html А вообще полученный файл необходимо сохранять через "Файл - Сохранить для Web и устройств..." и дальше, как описано в уроке выше. Ответ

Darhan  - =)))))   |Ваш IP адрес -89.106.238.xxx |2011-06-14 14:37:39 Спасибо класный урок всё получилос админу респккт! Ответ

admin77   |SAdministrator |2011-06-14 19:16:10 Пользуйтесь на здоровье! Ответ

Настя   |Ваш IP адрес -95.72.156.xxx |2011-06-14 20:52:00 Спасибо администратору!!!Мне 11 лет,у меня получилось.Не знаю,как у автора первого сообщени могло не получиться!!! Уважаемый администратор,вы не могли бы выложить урок тоже по созданию анимации,только с другим эффектом.Не знаю даже,возможен ли другой эффект анимации,просто у меня друг делал всплывающий текст в Adobe Photosop CS3.Если это возможно,выложите пожалуйста.Буду очень благодарна!!!Спасибо. Ответ

Анонимно   |Ваш IP адрес -195.68.190.xxx |2011-08-02 21:48:43 При сохранении не предлагает гиф,почему???Только HTMLи и только изображение(((( :( Ответ

Стэн  - Из за вас вылетел фотошоп и не сохранилось ничего!   |Ваш IP адрес -46.181.201.xxx |2011-08-17 00:07:38 делал всё по инструкции только свою анимацию и сохранял по вашей "инструкции", из за вас всё вылетело!!! АААА :angry: Ответ

admin77   |SAdministrator |2011-08-17 00:07:24 Мне кажется всё дело в Вашей программе фотошоп, а не в моих инструкциях. Если почитать комменты, то даже у детей 11 лет получается. Ответ

Анонимно   |Ваш IP адрес -83.167.104.xxx |2011-08-18 01:09:57 А Это вобще возможно? :pinch: Ответ

admin77   |SAdministrator |2011-08-18 01:55:20 Пример текстовой анимации Вы видите на самой верхней картинке, а как её сделать написано чуть ниже. Так что всё возможно! Ответ

diaries74   |Ваш IP адрес -94.181.25.xxx |2011-08-22 19:14:37 Самый лучший урок из всех, тех которые я видел на других сайтах. Всё очень подробно, показано на скринах, описано. Thanks! Ответ

Лена  - .   |Ваш IP адрес -83.69.13.xxx |2011-08-26 21:49:00 Сохраняю, как у вас написано и ФШ выключается Можно ли как-то по-другому сохранить ? Ответ

admin77   |SAdministrator |2011-08-26 22:45:15 По другому сохранить не получится. Посмотрите решение своей проблемы вот в этом материале и в комментариях к нему: link:http://www.photoshopsunduchok.ru/animaciy/21 3-web.html Ответ

denis   |Ваш IP адрес -217.118.90.xxx |2011-08-28 22:50:39 спасибо за сайт Ответ

Руся  - Тема хорошая!   |Ваш IP адрес -178.90.24.xxx |2011-08-29 00:55:39 у мне получилось мне 13 выложите еше Ответ

admin77   |SAdministrator |2011-08-29 01:28:47 Приветствую ещё одного будущего фотошоп мастера! Ответ

Анонимно   |Ваш IP адрес -109.184.62.xxx |2011-09-06 20:47:39 Просто. Понятно. Замечательно. Ответ

Анонимно   |Ваш IP адрес -46.159.224.xxx |2011-09-28 15:18:35 анимация на фотографии не сохраняется,просто на новом документе все получается, а вот именно на фото не сохроняется Ответ

admin77   |SAdministrator |2011-09-28 19:53:40 Никакой разницы нет между новым документом и фотографией. Если на документе получается, то и на фотографии получится. Посмотрите, чтобы фото было в формате Jpeg и режиме RGB. Если всё-равно не получается, то просто перетащите фото в новый документ, а дальше по уроку. Ответ

Анонимно   |Ваш IP адрес -95.53.80.xxx |2011-10-23 23:03:20 У мня не получаетсся Ответ

admin77   |SAdministrator |2011-10-23 23:03:39 Что конкретно не получается? Ответ

Костя  - не получается   |Ваш IP адрес -83.149.48.xxx |2011-11-05 11:05:28 я все сделал у меня все получилось заливаю через radikal.ru ставлю на аватарку а она не мигает как я сделал почему помогите плиз заранее спасибо :angry: :( :cheer: Ответ

admin77   |SAdministrator |2011-11-05 11:29:41 Костя! Насколько я знаю сервис radikal.ru поддерживает только формат файла Jpeg, а у Вас файл в формате Gif. Кроме того, посмотрите, поддерживает ли этот формат форум на который Вы ставите аватарку (у других пользователей работает анимация или нет). Ответ

Борис  - класс   |Ваш IP адрес -95.32.91.xxx |2011-12-27 17:12:34 спасибо большое я вообще 3 раз за фотошоп взялся раньше просто не приходилось, и всё с первого раза получилось ваше респект автору,понятно и доходчиво а тем кто пишет что инструкция плохая хочу сказать что у них руки из жопы растут :!: :!: :!: Ответ

Pro100 ByKoV  - Спасибо огромное   |Ваш IP адрес -80.72.183.xxx |2012-01-03 18:14:47 Большое Спасибо!Вот что у меня получилось: Ответ

admin77   |SAdministrator |2012-01-03 18:34:02 Очень хорошо! Ответ

Анонимно   |Ваш IP адрес -83.149.3.xxx |2012-01-13 03:50:37 у меня такая проблема: после того как делаю невидимым 1 слой(красный), то во 2 кадре остаётся всё без изменений( не переключается на изначальный цвет текста) админ подскажи в чём проблема? Ответ

Анонимно   |Ваш IP адрес -83.149.3.xxx |2012-01-13 04:02:05 админ простите разобрался), просто я не изменил у 2 кадра градиентную заливку :D Ответ

yozh2012  - не получается   |Ваш IP адрес -88.196.181.xxx |2012-01-28 19:58:47 Здравствуйте. Я все сделала по уроку, все получилось и работает в фотошопе... а когда пытаюсь сохранить в формате GIF, тип файла такого формата не выдает... :unsure: там есть только: HTML AND IMAGES, ONLY IMAGES, ONLY HTML... ПОМОГИТЕ, ЧТО НАДО СДЕЛАТЬ, ЧТОБЫ ПРАВИЛЬНО СОХРАНИТЬ... Ответ

Иван   |Ваш IP адрес -81.163.54.xxx |2012-01-28 23:52:28 Сохраняйте файл через пункт "Сохранить для WEB", а не "Сохранить как". Ответ

modocha2011  - а почему   |Registered |2012-04-26 14:13:12 а почему Ответ

Эдуард  - вопрос   |Ваш IP адрес -178.129.159.xxx |2012-01-29 18:11:33 мне тоже 11 лет)) хочу 1 анимашку сделать)) но вот вопрос возник Дальше я сделал активной вкладку "Наложение градиента", выбрал градиент "От основного к прозрачному", поставил галочку "Инверсия" и немного "поигрался" параметрами "Режим", "Непрозрачность", "Масштаб". Подберите параметры, которые Вам подходят. можешь в скринах объяснить?)) просто не так понятно активной вкладку наложение градиента(( Ответ

admin77   |SAdministrator |2012-01-30 12:45:19 Эдуард! Чтобы сделать активной вкладку "Градиент", поставьте галочку и щёлкните по этой вкладке, чтобы она стала активной (синего цвета). Ответ

yozh2012  - не получается   |Ваш IP адрес -88.196.181.xxx |2012-01-30 15:57:34 сохраняю для web в формате gif, выдает таблицу в фотошопе, там ставлю формат gif, нажимаю сохранить, он выдает еще табличку, где я указываю, где сохранить и вот тут он опять пишет только три возможных формата: -HTML AND IMAGES, ONLY IMAGES, ONLY HTML...Может быть такое что у меня комп не поддерживает этот формат или что-то надо в настройках изменить? помогите пожалуйста - очень надо!!! кстати в HTML анимашка работает - просто супер!!!! Ответ

admin77   |SAdministrator |2012-01-30 21:35:05 yozh2012! Очевидно, у Вас что-то с самой программой фотошоп. Попробуйте сделать так, как описано здесь: link:http://www.photoshopsunduchok.ru/animaciy/21 3-web.html Ответ

Оставить комментарий
Имя:
Email:
Тема:

Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."