alconost Mar 21 2013 at 11:21

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

3 min

18K

Alconost corporate blogWorking with video*Working with 3D-graphics*

Tutorial

Comments 36

tym32167 Mar 21 2013 at 11:39

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

alconost Mar 21 2013 at 13:41

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

tym32167 Mar 21 2013 at 15:45

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

UFO just landed and posted this here

vamp756 Mar 21 2013 at 11:50

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

alconost Mar 21 2013 at 13:35

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

-1

vamp756 Mar 21 2013 at 13:42

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

alconost Mar 21 2013 at 14:05

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

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

-1

vamp756 Mar 21 2013 at 14:10

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

Cadog Mar 21 2013 at 20:29

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

alconost Mar 21 2013 at 13:33

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

-1

imater Mar 21 2013 at 11:42

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

vamp756 Mar 21 2013 at 11:58

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

aleks_raiden Mar 21 2013 at 13:33

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

vamp756 Mar 21 2013 at 13:37

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

vamp756 Mar 21 2013 at 11:57

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

imater Mar 21 2013 at 11:59

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

vamp756 Mar 21 2013 at 12:08

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

Rastishka Mar 21 2013 at 12:06

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

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

vamp756 Mar 21 2013 at 12:08

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

Rastishka Mar 21 2013 at 13:02

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

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

vamp756 Mar 21 2013 at 13:14

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

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

Rastishka Mar 21 2013 at 13:24

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

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

UFO just landed and posted this here

vamp756 Mar 21 2013 at 14:03

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

alconost Mar 21 2013 at 13:26

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

geekAdd Mar 21 2013 at 12:16

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

alconost Mar 21 2013 at 13:47

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

Efsi Mar 21 2013 at 13:13

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

vamp756 Mar 21 2013 at 13:22

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

Shultc Mar 22 2013 at 05:01

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

vbif Mar 22 2013 at 19:52

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

-1

Shultc Mar 23 2013 at 02:07

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

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

vbif Mar 23 2013 at 20:15

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

vamp756 Mar 24 2013 at 00:10

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

Harrix Mar 24 2013 at 05:28

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