Принципы анимации: как сделать хороший скринкаст программного продукта

[tym32167]

А причем тут скринкаст? Я думал, скринкаст — это просто запись с рабочего стола, нет?

[alconost]

Отличие «просто записи с рабочего стола» от «анимированных скриншотов» — в способе производства. Результат один и тот же: зритель видит действия, которые происходят в окне программы. Полагаю, не будет ошибкой «анимированные скриншоты» называть скринкастом.

[tym32167]

За что мне минусы то? Я ж не просто так спросил, я и погуглил, и на википедию зашел, не понял почему эти видеоролики назвали скринкастами, спросил и получил ответ.

[vamp756]

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

[alconost]

А нам кажется, что скринкаст должен быть одинаково хорошо сделан, независимо от задач и целей ролика.

[vamp756]

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

[alconost]

Ну как же так? Нельзя делать специально некачественный продукт. «Тупо запись с экрана» — это поделка, которая отпугнет потенциального клиента. Такие туториалы, сделанные на коленке, имхо, негативно влияют на продажи продукта.

Хорошие видеоуроки и how to ролики должны выглядеть как минимум вот так:
youtu.be/wCoU6mVALLM
youtu.be/t88WiG7TFlI

[vamp756]

Никто не говорит о тупо записи экрана, речь о сокращении количества не информативной анимации к минимуму. Я же приложил пример того что имел ввиду.

[Cadog]

Мне тоже кажется, что нужно разделять презентационный ролик и туториал. Туториал должен быть именно «тупо» записанные действия с экрана. В обучающем видео надо показывать реальный процесс работы с продуктом, грубо говоря когда и куда нажать. Без лишних анимацией и эффектов.

[alconost]

Принципы анимации едины, независимо от того, делаете вы скринкаст окна Google или мультфильм про прыгающаю лампу. Как сказано в начале статьи, мы адаптировали принципы анимации, берущие свое начало еще от Диснея, под специфику видеороликов о программных продуктах.

[imater]

А какой софт вы используете для создания «скринкастов» (подобных роликов)?

[vamp756]

Лучше чем After Effects еще пока человечество не придумало.

[aleks_raiden]

то есть, то, что есть специализированные инструменты, включая также и продукты Adobe — Вы отрицаете? :)

[vamp756]

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

[vamp756]

Самая большая проблема в создании скринкастов связанна с тем, что необходим макет интерфейса в бОльшем разрешении чем для верстки, ибо если мы хотим приблизить интерфейс к камере, то мы увидим безобразие и размытости.

[imater]

И как её решить?

[vamp756]

Как правило все макеты к интерфейсам делаются в Photoshop под разрешение 72 точки на дюйм. Приходится вручную увеличивать разрешение макета, а это порой весьма не просто. Векторные элементы конечно без потерь увеличатся а вот растровые придется перерисовывать. Да и с векторными придется попотеть, скругления и эффекты не масштабируются, и придется вручную их переназначать.

[Rastishka]

Я для этих целей поступал так:
— отключал субпиксельное сглаживание
— делал скриншоты и увеличивал разрешение программой типа Photo Zoom Pro

Результат конечно неидеальный, но очень хороший относительно трудозатрат на него.

[vamp756]

А можешь показать пример такого увеличения?

[Rastishka]

Не хватает кармы чтобы использовать теги в сообщении, поэтому ссылкой:
habrastorage.org/storage2/68d/5b2/eab/68d5b2eabbd3fea65d9584a3cd388519.png

Если у вас вебприложение, то лучше просто увеличить масштаб страницы (или как мои знакомые скриншотили на iPad).

[vamp756]

Когда веб приложение готово и запущено в сети — проблем нет. Но почти всегда я делаю ролики для продуктов которые еще не готовы, либо еще не наполнены, и все что имеем — это только макет в PSD.

Неплохой результат, попробую применить, спасибо!

[Rastishka]

Тогда попробуйте всю графику (без текстовых слоев) склеить в один слой и увеличить через photo zoom.

А шрифты останутся векторные и смасштабируются фотошопом идеально — уверен результат будет неплохой.

[vamp756]

Отсутствие интерполяции сделаю плохую штуку со шрифтами. Хотя из двух зол можно поступить и так.

[alconost]

Спасибо за идею!

[geekAdd]

Как по мне, все перечисленные принципы стоит применять с умом. В одном случает тот же эффект отскока будет смотреться идеально, в другом – просто глупо. Хотя, если относиться к этому критично и понимать миссию и ЦА продукта, то эти советы можно применять довольно эффективно.

[alconost]

Верно! Здравый смысл и умение оценивать конкретную ситауцию должны брать верх над «вот правила, используй их все».

[Efsi]

На второй минуте от вашего ролика у меня закружилась голова.
Наверное, чем больше мельтешащего мусора, тем дороже можно ролик продать?

[vamp756]

А по ролику в сабже, могу Вам посоветовать быстрее делать анимацию переходов, очень длинные они у вас получились, почти 2 секунды я наблюдаю как элементы уезжают и выезжают, это немного раздражает и хочется промотать уже на следующий «совет» в ролике. Из-за этих долгих эпизодов, ролик вышел на 3 минуты, а можно было все и в полторы уместить.

[Shultc]

Можно и за 30 секунд, а кто не успел, отмотает назад и нажмёт на паузу. Автор и говорит о том, что нужно уравновешивать информативность с красотой.
Переходы действительно затянуты, но они соответствуют стилю, в котором сделан ролик.

[vbif]

Для придания «веса» курсору можно воспользоваться простой утилиткой. Сначала кажется непривычным, но быстро привыкаешь, и обычная мышка кажется скучной.
yadi.sk/d/MK_Tm1oV3T3A2
(на всякий случай поясняю, по ссылке — экзешник, написанный на delphi)

[Shultc]

Может вы всё-таки расскажете что это такое?

Кидаться голыми экзешниками — некультурно!

[vbif]

Это как раз-таки программка для создания подобных эффектов на курсоре мыши: при движении мыши он разгоняется и останавливается плавно, а также отскакивает от краёв экрана.

[vamp756]

ЭЭэ, все перемещения мыши в подобных ролика создаются внутри графического пакета, траектория замедления и остановки создаются вручную. И применить какую то программу внутри просто невозможно

[Harrix]

Это программка не для таких сделанных искусно роликов, а для простого захвата видео с экрана, чтобы был эффект такого курсора.