Анимация огня. Горящий текст

Анимация огняПродолжаем тему анимации. Настала очередь огня. Начнем с самого простого – подожжем что-нибудь :)В данном случае сделаем горящий текст, хотя, как вы сами понимаете, на его месте может оказаться что угодно – это дело вашей фантазии.
В двух словах – алгоритм действий аналогичен нашим самым первым урокам “Радуга” и “Падал снег”, только направление движения поменяли. В общем, смотрите сами :)



____________________________________________________

PS Записал урок в CS6, но все команды и действия аналогичны с CS5, так что не пугайтесь.
PPS Извиняюсь за звук, получился тихо, не досмотрел за уровнем :)

40 комментариев к записи “Анимация огня. Горящий текст”

  • Дима:

    у меня так до сих пор и не получается чтобы огонь двигался что делать подскажите

    • Обратите внимание тогда, на создание кадров, скорее всего вы не в той последовательности выполняете создание кадров, может делаете не на том кадре, может еще что. Что-то сказать конкретней сложно.

  • юра:

    давно смотрю ваши видео уроки неперестоваете меня удевлять побольшебы таких как вы респект и успехов вам !!!!!!!!!!!!

  • Вера:

    Здравствуйте, Вячеслав! А урока почему то не нашла, моно ли его как то вернуть?

  • Евгений:

    Вячеслав, спасибо тебе за уроки пребольшущее. Малорик!

  • Вика:

    я сама огонь не рисовала, но скачала кисти “пламя”, блин очень круто получилось , спасибо за урок

  • Александр:

    И ещё у меня стоит Cs7 и я не нашол ни “пальчика” ни эффекта “облаков”.
    Владимир может что подскажите. Буду очень презнателен и пообщался бы в скайпе.

  • Александр:

    И всё же вернусь к моей просьбе. Владимир вы расскажите как сделать огненную надпись на прозрачном фоне.

  • Александр:

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

  • Max:

    Добрый день! Подскажите пжлста, почему при сохранении в gif формате, анимация огня отсутствует)? Или необходимо сохранять как-то иначе?

    • Вячеслав Федоткин:

      Если вы сохраняете через меню Файл – Сохранить для web… то скорее всего она сохранилась нормально, а ваш просмотрщик рисунков просто не показывает анимацию

  • Не понял до конца вопроса. Про второй кадр вроде все понятно – снизу в палитре кадров, щелкаем на значок создания второко кадра и передвигаем слой с пламенем. Потом (ничего больше не нажимая и не переходя на первый кадр) нажимаем “сделать промежуточные кадры” и все получается (даже в CS5).
    Где всзять CS6 – спрашивайте гугла или яндекса.

  • Михаил:

    Здравствуйте, Автор данного сайта.
    Вы очень мне помогли, сегодня целый день не отходя от компьютера пытаюсь делать анимации с текстом, и никак не получалась анимация Горящего текста. На минуте видео 5,48, у меня не получалось передвинуть кадр, так как и на втором, и на первом он передвигается одновременно.
    MeteorNEO: , я думаю Вам это поможет, я в течении нескольких часов пытался решить эту проблему, а решение действительно просто, Вы до перемещения картинки на втором кадре, выделите слой кадр2, так как у автора в cs6, этого нет, как у нас с программой cs5, и начните перемещение, после этого первый кадр не движется!
    Автор если не секрет, где можно скачать cs6 на русском?
    Спасибо Вам большое.
    С уважением, Михаил.

  • Серый:

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

    Но вот вопрос: как то же самое делать, чтобы итоговый gif получился с любым фоном кроме чёрного? Желательно вообще с прозрачным? Просто в облаках так или иначе получаются чёрные участки, и при прозрачном фоне они видны и всё портят…

    • Хороший коммент, радует когда человек “включает голову” и сам становится творцом. Так держать! По зацикливанию пламени можно конечно и отразить по вертикали и замкнуть, но для мелкой анимашки это не столь важно и видно (тем более если пламя кусками, как тут), ну а кого будет ломать “переход” тот может зациклить. Про фон – сходу не скажу как его убрать (прикину по-позже :). Перекрасить можно используя разные режимы прозрачности.

      • Серый:

        Просто у нас на сайте как раз рабочая область полупрозрачная и движется при прокрутке относительно стационарного изображения сзади… Так что прозрачный фона в изображениях – необходимость, красивее с ним… Так что если появится решение – будет супер.

        Навскидку ещё два вопроса по анимации:
        *создана анимация, кадры сделаны, всё готово. Но тут понимаешь, что не те пропорции. Банально в начале сделал не тот размер холста. Допустим сделал прямоугольник, а надо квадрат. Можно как-то это поменять, не переделывая всю анимацию с нуля? Просто попытка изменить размер холста отрезает невидимую область у подвижного крупного слоя и все кадры становятся одинаковыми…
        *Может вопрос глобальный и это тема для отдельного урока, а может вообще неосуществимо, вам виднее… Итак. Есть уже готовая анимация из интернета, при загрузке которой в фотошоп мы видим в слоях уже готовые кадры. Например шагающий человек. На каждом слое-кадре он в новой стадии движения. Задача – продублировать человека, чтобы синхронно (или не синхронно) шагала толпа “близнецов”. Вопрос: можно ли и если да, как, сделать, чтобы новые копии на каждом кадре находились в одном месте относительно друг друга? Чтобы в итоге смотрелось нормально?

        …надеюсь не сильно заумно спросил…
        В любом случае, вы делаете нужное и полезное дело. Так что и вам “так держать”!

      • C фоном не подскажу, пока решения не вижу. Или использовать другие фильтры, т.к. у фильтра “облака” никак без черного не обойтись.
        Про копии “толпы” не вижу трудностей, меняйте размер холста с увеличением по вертикали, или размер изображения – тупо вытяните. Скопировать и сдвинуть – выделите нужные слои, ПКМ “дублировать” и не снимая с них выделения сдвиньте – они все и сдвинутся на нужное расстояние.

  • MeteorNEO:

    Урок хороший, только вопрос как у начинающего. На этапе перемещения выделенной области (это происходит на втором кадре анимации) изменения распространяются на все кадры (т.е. первый кадр становится таким же, как и второй). С чем это может быть связано?

    • MeteorNEO:

      В видео это временной промежуток 5:42-6:00

    • Все правильно, если вы перейдете на 1-й кадр он будет точно таким же, как и второй. А теперь вопрос – а зачем вам туда переходить? Вы действуйте по уроку, т.е. не переходя, создаете промежуточные кадры и все будет нормально :)
      PS Рассказывать алгоритм работы фотошопа при создании кадров ну чесслово совершенно лениво. Тут задача создать анимацию, а не разобраться почему так получается.

      • MeteorNEO:

        Так дело как раз в том, что никуда не перехожу. Делаю как и показано, но изменения отражаются на всех кадрах (причем так только с выделенной областью)

  • Ирина:

    Это Вы хорошо придумали – объединиться с Ивановым в рассылке! Теперь все его посетители будут Ваши )). Он тоже грамотно работает. Но Ваши уроки мне нравятся больше.

    • Спасибо, Ирина, но вы из меня какого-то коварного монстра делаете – мол сманиваю подписчиков от партнера. Врядли бы кто-то объединялся, если бы это не было взаимовыгодным делом :) А подписчики от этого, я так думаю, только выигрывают

      • Ирина:

        И в мыслях не было! Ясное дело, что все Ваши заходят к нему (и я была), и подписчики получили еще один хороший сайт. Мне действительно идея понравилась. Удачи вашему совместному проекту!

  • Agor:

    Заглянул вот к коллеге, посмотреть как продвигается сайт. Надо сказать очень неплохо продвинулся! Молодец!

    • Спасибо, коллега. Могу сказать тоже самое и про тебя – растешь всяко быстрее, и уроки чаще и народа больше. А то может присоеденишься к нам, сделаем во благо подписчиков общие проекты, почему бы и нет :)

  • Костя:

    Большое спасибо, всё очень красиво и, главное, доступно!

  • Владимир:

    Здорово!Всё гениальное-просто.Хоть и работаю в пожарной охране,придётся поджечь что-нибудь и не раз.(по секрету).

  • Татьяна:

    Спасибо! Очень кстати

  • Денис:

    Это шедевр, спасибо. Поздровляю с обновлением!

  • Ирина:

    Спасибо за урок.

Оставить комментарий

Бесплатные курсы

Получать уроки на почту

Ваше имя: *
Ваш e-mail: *
Яндекс.Метрика