ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Анимация из видео без Photoshop

Сообщений 1 страница 10 из 10

1

Данный материал уже ранее публиковался мною на другом ресурсе.

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

Итак, нам потребуются:
- Собственно исходник видео
(любой на ваш вкус, но лучше до 500-700мб, т.к. очень большие по объёму видео могут существенно затормозить работу программы)
- Программа Free Video to GIF Converter
(к сожалению, официальный сайт, откуда качал я, приказал долго жить, поэтому если не хотите качать через разные порталы софта, можно взять у меня. Программа freeware, насколько мне известно)

Почему именно Free Video to GIF Converter?
+ интуитивно понятный интерфейс (правда, на английском, но нет хуллиона настроек и бегунков, не нужно ломать голову с параметрами сохранения, как в том же фотошопе)
+ возможность работать с кадрами, удалять ненужные, в т.ч. лишние сцены, если интервал между нужными сценами небольшой
+ отличное качество гифок (- возможен большой их вес)

Разжёвывать буду подробно, поэтому если вам лень читать - можете просто скачать прогу и поэкспериментировать сами. В принципе, ничего сложного, но если вы совсем новичок в графике, ранее не работали с анимацией или не знаете английского, то это для вас.

1. Устанавливаем конвертер, запускаем.

Видим вот такой незамысловатый интерфейс:

https://i.imgur.com/YPKhszY.png
Browse Video - позволяет выбрать видео из имеющихся на компьютере. После добавления видео отображается его общая длина и оригинальное разрешение кадра (Video Duration и Image Size).
Reload - это что-то с перезагрузкой. Не знаю, мне оно нафиг не надо XD
Extract Frames - извлечение кадров. From - начало, To - конец. Соответственно, задаёт интервал видео, из которого будут извлекаться кадры. Если не уверены, лучше брать с запасом за секунду до нужной сцены и через секунду после.
Width и Height - соответственно, ширина и высота будущей гифки. По умолчанию после выбора видео будет стоять 160 пикселей. Можно изменить вручную на любой другой размер не более оригинального.
Keep aspect ratio - лучше поставить галочку, чтобы при выборе размера автоматически регулировалось правильное соотношение сторон.
Extract ... frames per second / frame rate - количество кадров в секунду. По умолчанию стоит 10. Можно оставить так, но лично я люблю по хардкору - ставлю на максимум - 20 XD

2. Итак, с первой частью интерфейса программы разобрались, выбираем видео. Я выбрал для примера IV эпизод Звёздных Войн - момент, где Звезда Смерти уничтожает Альдераан.
В моей версии видеофайла это интервал с 59:06 и до 59:13.

Выставляем эти данные в программе:

https://i.imgur.com/hS1u2l3.png

Ширину кадра для гифки я взял по тумблеровским стандартам - 245 пикселей. Высота подстроилась сама. И частота кадров 20.

3. Далее жмём Next > и ждём. Программе может потребоваться несколько минут на обработку, в случае с данным видео - 1-2 минуты. Если видео более объёмное - может потребоваться и 10 минут, поэтому я не рекомендую видео в HD качестве. Как только программа обработает видео, интерфейс переключится на вторую вкладку.

4. Готово.

Видим следующее:

https://i.imgur.com/zPQkePV.png
Preview - позволяет видеть картинку выбранного кадра. Переключаться по кадрам справа (Frame List) можно с помощью мышки или клавишами ↑ и ↓ на клавиатуре, либо < и > в интерфейсе программы. Будьте осторожны, не нажимайте лишних кнопок вроде ENTER, иначе может перебросить обратно на 1ю вкладку и придётся снова нажимать на Next > и ждать, пока программа обработает видео.
Frame List - собстно список кадров, вырезанных из выбранного ранее интервала. Можно удалять с помощью кнопки Remove. Если случайно удалили лишний, есть кнопка Reload, позволяющая восстановить все кадры в выбранном интервале. Поэтому прежде, чем удалять лишние кадры, рекомендую пробежаться кнопками < и >, дабы ознакомиться с содержимым.
Color Matching - выбор качества итоговой гифки.
Normal Quality, Smaller File Size - нормальное качество, меньший размер файла. Скажу по секрету - качество тут ни разу не нормальное, поэтому смело переключайте на пункт ниже, а именно на:
Excellent Quality, Вigger File Size - отличное качество, больший размер файла. Получится близко к оригиналу. Сломать качество в редакторах в дальнейшем ещё успеется XD
Play Speed - скорость воспроизведения.
Same as source video - как в оригинальном видео. Обычно оставляю по умолчанию. Однако при желании можно поэкспериментировать с пунктом ниже:
Custom - пользовательская скорость. Там уже на ваш вкус из имеющихся вариантов.

5. Итак, с интерфейсом второй вкладки разобрались, теперь удаляем лишние кадры. В моём случае это кадры 1-5 (кусочек от предыдущей сцены с запуском луча), 40-54 (на них Лея) и 139-142 (следующая сцена). После удаления кадров жмём кнопку Make GIF. Выбираем папку, придумываем гифке название и жмём Сохранить.

После сохранения открывается диалоговое окно:

https://i.imgur.com/8iTMkCm.png
В нём указаны:
Total Frames - итоговое количество кадров
Duration - длительность
Picture size - размер картинки
File Size - вес файла.
Можно сразу же нажать кнопку Да и посмотреть на результат.

Да, почти 1,7 метра, но зато какая красота:
https://i.imgur.com/B7L2jS6.gif

Конечно, может, не всем позволяет трафик так упарываться качеством анимации, но если нужно всего несколько кадров или исходник, допустим, для создания анимированного аватара - то программа самое оно.

P.S. За всё время использования программы я обнаружил 1 неприятный баг: если слишком много чёрного цвета в кадре итоговый результат может заметно мерцать. Я не знаю, почему так получается, потому что, допустим, в данном примере много чёрного, но всё ок. Поэтому если получается мерцание - можно попробовать впоследствии обработать гифку с помощью другой программы или вырезать анимацию другим способом.

Надеюсь, урок был полезным) В случае вопросов - пишите сюда. Если ссылки окажутся нерабочими/картинки пропадут - милости прошу в ЛС, перезалью.

+4

2

Очень интересная статья! Для меня всегда создать анимацию, это целая проблема! Да и комп у меня не самый мощный, так что во время большой анимации всё виснет сильно в ФШ. Надо бы попробовать эту программу...

+2

3

#p146349,Automation Baby написал(а):

Очень интересная статья! Для меня всегда создать анимацию, это целая проблема! Да и комп у меня не самый мощный, так что во время большой анимации всё виснет сильно в ФШ. Надо бы попробовать эту программу...

Я люблю искать разные полезные проги с простым интерфейсом) Давно юзаю эту прогу.
Дефф тоже какую-то прогу предлагал по созданию анимации посредством png что ли слоёв. Я скачивал, но так нифига и не понял, как оно работает( Но понял, что там суть создания гифов похожая.

+2

4

Скачала программу, вечерком попрактикуюсь...

+2

5

спасибо огромное за статью, очень полезная программа!

+2

6

Добрый вечер , а зачем целая программа, при наличии вот такого онлайн ресурса :
Видео в гиф , гиф из чего угодно
И там полно ещё функций , добавить текст ( причём анимированный) , Выбрать количество кадров, чтобы облегчить гиф, убрать определённый цвет с гифки, сделать на прозрачном фоне, повернуть, завернуть и вывернуть и т.д.

Причём, в самих гифках, уже готовых, можно разложить на фреймы( покадрово и изменить , что нужно)

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

Делается все быстро, я бы сказал в момент.

https://forumupload.ru/uploads/0007/e3/f7/6763/959449.png

Сжала там твой гиф, убрав из него метр . Теперь он весит 765 кб.
https://forumupload.ru/uploads/0007/e3/f7/6763/31683.gif

+1

7

Алгол
Ну ведь никогда не знаешь, когда сайт упадёт или ещё что. Ещё не все проги способны вырезать гифку из фильма весом в 2 и более гигов. Плюс гиф может и стал меньше, но в качестве тоже слегка потерял. Я просто не особо доверяю онлайн-ресурсам, но в принципе почему нет, кому как удобнее.
Некоторые до сих пор в ФШ режут XD

0

8

#p146426,бродяга написал(а):

Некоторые до сих пор в ФШ режут XD

Я так делала, потому что думала что иначе нельзя...

0

9

#p146429,Automation Baby написал(а):

Я так делала, потому что думала что иначе нельзя...

Можно) Проблема в том, что большинство прог так себе результат выдают. Или откровенно ужасный. Или попросту не работают.
Я так и не разобрался, как в ФШ резать анимацию из видосов) Но у меня видосы обычно эпичные, может, в этом дело.

0

10

Сделала новый баннер для своей ролевой, используя эту программу и получилось очень легко и быстро, в общем, спасибо ещё раз за урок!

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляй ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удали символы: "https://", "https://" или "www."
font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens
format_align_left format_align_center format_align_right list table_view
link add_photo_alternate ondemand_video mood
content_cut lock_open format_quote code
horizontal_rule anchor live_help emoji_symbols library_add
Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms
10px 12px 14px 16px 18px 20px 22px
  • Точками
  • Кружочками
  • Квадратами
  • Цифрами
  • Римскими цифрами
  • Без обозначений
Многострочный пункт списка
© ® « » ¢ £
Заголовок Автосжатие больших картинок Скрыть от гостей Ссылка «скачать» Имя читателя Добавлено спустя… Надстрочный текст Подстрочный текст Блок HTML Анкета: разделитель текста Анкета: закрыть ответы

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],
Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],
Красный пост[block="saledpost"]saledpost[/block],
Синий пост[block="forsalepost"]forsalepost[/block],
Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],
Общее портфолио FD[block="FDteam-portf"]FDteam-portf[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]
Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]
Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]
Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]
Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]
Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]
Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)
Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,



Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)

Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)
Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,



Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)
Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,



Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)
Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]


Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]


Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]


Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]


Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]


Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]


Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]


Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]


Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]


Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]


Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]


Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]


Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]