Как сделать анимированный флаг
Делаем эффект развевающегося флага в Photoshop CS6
Сегодня в видео я попытаюсь описать, как сделать флаг в программе Photoshop CS 6
Если Вам понравилось это видео, оставляйте комментарии.
Лига фотожоперов
1.3K поста 14.4K подписчиков
Правила сообщества
*В сообществе не приветствуются материалы, содержащие в себе нарушение общих правил сайта.
*Излишняя политизированность работ также не приветствуется.
*Помните, сообщество, создано для развлечения, так что получаем позитив
но ведь ты не сделал флаг в программе фотошоп, а просто перенёс текстуру на готовый флаг..
Флаг развевающийся, а не извивающийся.
старый добрый фильтр Карта смещения, а у вас неправильно
Принимать вид волнистой линии или спирали.
отт. Изгибаться из стороны в сторону (о теле человека или животного).
Пролегать, протекать, делая многочисленные повороты, извилины (о дороге, реке и т.п.).
отт. Двигаться по извилистому пути (о колоннах войск, демонстрантов и т.п.).
Почему некоторые до сих пор используют CS6? Вопрос не к тому что она старая, а почему именно CS6.
Тыкаю фотошоп
Учусь создавать фотоманипуляции
Спасибо что досмотрели до конца:)
Сома нарисовала сомолет
Пара часов в Фотошопе и несколько бесплатных картинок из интернета)
Так проходит мое обучение на курсе дизайнеров)
Не судите строго, это просто шутка и хотелось поделиться своим хорошим настроением)
Мой второй опыт на планшете и курсы по CG
Привет моим трем подписчикам! И вот мой очередной рисовальный пост. После самостоятельных потуг научиться рисовать на планшете решил пройти какие-нибудь курсы. По рекомендации знакомой художницы, которая успешно трудиться на поле геймдева, я выбрал курсы по основам CG рисунка от Smirnovschool.
Честно говоря, когда смотрел работы выпускников данного курса, даже и представить не мог что я смогу нарисовать что-то похожее. А по факту по ходу курса сам удивлялся своим успехам). Очень выручили имеющиеся теоретические знания, типа как построить объект в перспективе, как построить тень и тп. В этой части на курсе я чувствовал себя довольно легко.
Но на этом все не закончилось) После курса, в качестве закрепления материала, предлагается пройти челлендж на 10 работ, основываясь на полученных знаниях.
Сундук в киберпанк стиле.
Песочные часы в виде голограммы.
Стулья из разных материалов.
Тяжелый болтер, и снова Warhammer 40к
Эшбрингер или Испепелитель и Варкрафта
Силовой молот из Warha. ну вы поняли)
Челлендж решил закончить постройками в изометрии.
По итогу каждую работу я старался сделать максимально качественно, чтобы можно было использовать в качестве портфолио, а не для галочки, чтобы быстрее выполнить челлендж.
Весь этот процесс меня очень сильно мотивировал тем, что видишь результат, который тебе самому нравиться.
А совсем недавно в сообществе школы в дискорде прошел флешмоб, одним из заданий которого было нарисовать шкаф юного оруженосца.
А пару недель назад мне предложили порисовать для небольшой игры. Так что можно считать, что своей цели вывести творчество в разряд регулярно подработки я почти достиг.)
Создание флага в After Effects.
В этом уроке мы научимся создавать красивый, развевающийся на ветру флаг. Интересно, что в анимации, которую мы получим в итоге, очень легко заменить флаг на другое изображение.
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 28
Спасибо! то что искал!
Эффект такой плавный! Текстура ткани вообще класс! Спасипа за урок!\50
Спасибо вам большое.
Здравствуйте. А как открыть проект в 15 версии AE? Пишет «Не удается получить доступ к ресурсу «» (тип xml)»
Эта ошибка в самом After Effects? Этот проект должен без проблем открываться в вашей версии
Подскажите как сделать видео дольше чем тут есть?
Изначально поставить длины композиций такими, какие требуется.
спасибо очень помогли
Не открывается в АЕ
В чём проблема? Какая-нибудь ошибка выскакивает?
Классный проект пригодился спасибо большое.
Привет! А как сделать чтобы лента развевалась на ветру не перемещаясь? Всю голову уже сломал
Спасибо, круто. А как насчет линейки уроков по разбору эффектов? Или как-то выделить их по функционалу, одни делают это, другие это. То как они разбиты в ае не отображает всей картины 🙂
Привет! Поделись пожалуйста проектом развевающегося флага.
АлЕв, к сожалению, нет.
Спасибо за урок, а проект есть.
Переход по внешней ссылке
VideoSmile не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
1″ > Вы можете выбрать до <
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Создаем развевающийся флаг на CSS
СОЗДАЕМ РАЗВЕВАЮЩИЙСЯ ФЛАГ НА CSS
Сегодня у нас дело государственной важности, господа! Нам выпала честь создать анимацию — флаг на CSS. Да не всякий флаг требуется сотворить нашими руками, а именно триколор! Двухцветный флаг, кстати, мы также научимся делать по мотивам триколора. В основе создания анимации флага будет лежать принцип, описанный в предыдущей статье «Эффект волны на CSS». Итак, закатаем рукава повыше и приступим к созданию флага на CSS! Предлагаю начать с создания российского флага. Для получения иных триколоров по описанному ниже методу, потребуется лишь заменить цвета флага на нужные. В каких местах нужно будет внести изменения, я укажу в тексте статьи. Для начала сформулируем задачу:
Цель: создать анимацию развевающегося российского флага по примеру изображения в начале статьи.
Инструменты: HTML, CSS и бодрость духа
Принцип создания анимации флага
Основной принцип заключается в задании вращения скругленным блокам, окрашенным в цвета флага. Так как блоки будут увеличены не менее, чем в 2 раза по отношению к фоновому кругу, а фоновому кругу мы зададим свойство overflow:hidden, то пользователь увидит лишь часть анимации. Увиденный фрагмент анимации будет создавать иллюзию развевающегося флага.
Приступаем к созданию кода
1. Для начала откроем HTML-файл и добавим в него фоновый блок с идентификатором «flag». Этот блок я планирую закрасить в белый цвет, чтобы из верхней части сформировать белую полосу флага. Внутри фонового блока расположим блоки с классами «wave2» и «wave3» для синей и красной полосы соответственно:
2. После этого добавим стили для вновь созданных блоков в CSS-файл. Для фонового блока определим белый background, зададим размеры, отступы, закругление. Кроме того, добавим свойство overflow: hidden, которое обрежет выходящие за пределы этого блока части других элементов:
Позиционируем элементы с классами «wave2» и «wave3» так, чтобы селектор «.wave2» оказался расположен выше селектора «wave3». После этого увеличим размеры блоков до 200%, закруглим края и окрасим их в синий и красный цвета. В заключение присвоим этим блокам анимацию под названием «wave», которую опишем ниже:
Настало время оживить наши блоки! Для этого опишем анимацию «wave» — зададим блокам вращение на 360 градусов:
Осталось сохранить изменения в файлах и обновить страницу в браузере. Анимация российского флага выполнена успешно!
Думаю, вы догадались, что нужно сделать для превращения российского триколора в триколор другой страны. Для этого нужно задать селекторам «#flag», «.wave2» и «.wave3» другие значения для свойства background. Например, для превращения российского флага в габонский, я поменяла значение свойства background-color для селектора #flag на зеленый цвет #4e9f61:
В итоге у меня получился симпатичный габонский флаг:
Как сделать зацикленную анимацию флага
Очередной урок от признанного мастера своего дела — vitsly. В своем живом журнале он довольно редко выкладывает интересные уроки к своим работам. Они всегда очень увлекательны и поучительны.
В этом уроке он расскажет и покажет как сделать зацикленную анимацию флага используя модификатор Cloth.
С виду, казалось бы, совсем простая задача, а все-таки требует уверенных знаний в области графики и анимации.
1. Симуляция
Сделаем плейн формата 2:1 разрешением побольше, навесим на него Edit poly и добавим геометрии на месте швов.
Выберем настройки ткани для полотнища флага (silk, satin или кастомные).
Внутри cloth делаем две группы — одну для фиксации полоски ткани у древка (с небольшим soft selection), а вторую — для имитации более толстой полоски швов.
Второй группе изменим настройки ткани на более жесткие (например burlap или rubber).
Поставим небольшую гравитацию и ветер с турбуленцией и анимацией направления и силы. Чтобы проще контролировать настройки турбуленции я сделал простую систему частиц и прибиндил ее к ветру.
Можно запускать симуляцию. Еще можно выставить time scale чтобы поторжественнее было.
2. Пойнткэш
Когда через пару месяцев симуляция закончится — самое время сделать из нее пойнткэш.
Поверх cloth накидываем модификатор point cache.
Сохраним его на диск, перепишем в сеть для дистрибутивного рендера или бэкбернера (сразу в сетку кэш почему-то не хочет экспортироваться).
Теперь можно убрать из стека модификатор cloth, для экономии веса файла сцены.
Сделаем копию кэшированного флага и выберем два наиболее эпических интервала симуляции для будущего цикла с помощью playback type — playback graph.
Чтобы получился цикл, значение playback graph у первой копии флага в первом кадре должно совпадать со значением playback graph у второй копии флага в последнем кадре.
3. Морфинг
Чтобы грамотно зациклить анимацию ткани простого морфа мне показалось недостаточно, глаз замечает момент перехода. Чтобы минимизировать неестественность перехода сделаем морф «шторкой».
Для этого к одному из флагов ниже пойнткэша применим модификатор vol.select. Гизмо модификатора анимируем так, чтобы оно наползало на флаг по ветру и выставим софт-селекшен побольше.
Чтобы результат вышел анимированным — надо включить галку automatically reload targets.
4. Морщинки
На референсных видео тонких тканей вокруг швов образуются симпатичные морщинки, которых не удалось добиться в основной симуляции.
Чтобы их сымитировать, отдельно засимулируем тонкую полоску ткани с несильным ветром и заметной турбуленцией, подвесив ткань за верхние вершины, выбранные через две по две.
Отрендерим сканлайном полоску из фронтального вида с градиентом поперек самосветящегося материала. Получим морщинки для дисплейса.
В афтерэффектс соберем из них зацикленную конструкцию на сером фоне, и повесим на флаг после turbosmooth.
5. Текстуринг и рендер
В фотошопе из фоток налепим текстуры на диффуз, бамп и опасити.
Сунем их в соответствующие слоты vray material, а его — в слот vray2sided material.
Развевающийся флаг на JS
Красивый эффект развевающего флага или другой фотографий с использованием WebGL
Данный скрипт колышет как на ветру любое изображение, но наиболее подходит к флагам.
Реализуется эта анимация на библиотеке curtains.js
Пример:
Выбрать другую фотографию для примера:
Найдено на codepen.io у пользователя Martin Laxenaire
Библиотека curtains.js на github
Смотрите также:
Отложенная загрузка контента
Дополнения плагина jquery.lazy для отложенной загрузки фреймов, скриптов, медийных файлов и т.д.
Всплывающие пузырьки на CSS
Движущиеся пузырьки как средство анимации блока (страницы) без использования JavaScript
Секция-галерея на GSAP
Блок или секция с меняющимися мышкой фотографиями
Добавить комментарий:
Комментарии:
Вместо флага у меня черное фото. И в консоли показывает какую-то ошибку о том что нельзя загрузить фото. В чем может быть проблема?
Локально тестируете или на сервере?
Если первое, то попробуйте залить все на хостинг и посмотреть там.
Если второе, то должно бы работать…
Помогите, не работает у меня ((( вставила код html, заменила картинку на свою, вставила css, может не правильно подключила скрипт и библиотеку, подскажите пожалуйста пошагово как сделать. Спасибо
И девушка из под воды пристально смотрит на тебя не моргая! Жуть!
:)))))
Даже не думал об этом. Просто хотелось показать вариант с фотографией, а тут и девушка симпатишная.