Photoshopで手書きアニメーション(pSAxe)3

Photoshopに組み込まれているアニメ機能の紹介です
22
ねこまたや @info_nekomataya

そろそろ、ゴハンタイムであるな。作業していて欲しくなったもの。選択したレイヤすべてに同じアクションやフィルタを適用するスクリプト 作業するレイヤにスライダで移動するUI #psAxe

2011-05-23 18:14:20
ねこまたや @info_nekomataya

んー ちと思いついたが、かなりトリッキーでよければアニメーションフレームクラスでつくったタイミングをシート出力できるかも?アレ?できる? んー …明日考えよう 寝るなり。#psAxe

2011-05-24 00:57:34
ねこまたや @info_nekomataya

おっとっと ミス発見 アニメフレームを作成する度に新規レイヤを作るチェックがあるので、このスイッチを入れたままスクリプトでフレームを作るとむやみにレイヤが増えるでござる #psAxe

2011-05-24 19:29:30
ねこまたや @info_nekomataya

ほえほえ、こんばんは ねこまたやです。psAxe のベータ版をアップデートしました。http://www.nekomataya.info/nekojyarashi/wiki.cgi?PsAxe アーカイブの差し替えなので元のリンクからドゾ #psAxe

2011-05-24 20:09:22
ねこまたや @info_nekomataya

今日はpsAxeの説明の前にAdobe Photoshopのアニメ機能についてのお話しをいたします。 #psAxe

2011-05-24 20:10:25
ねこまたや @info_nekomataya

現行のPhotoshopには2種類のアニメーション機能搭載されています。 ひとつは「フレームアニメーション」・もうひとつは「タイムラインアニメーション」です。 #psAxe

2011-05-24 20:10:52
ねこまたや @info_nekomataya

フレームアニメーションはもともとWEB用の画像編集を主なターゲットにしていたAdobe ImageReadyに搭載されていた機能です。CS2(var9)でPhotoshopに取り込まれて以降 全バージョンのPhotoshopで使用できます。 #psAxe

2011-05-24 20:11:35
ねこまたや @info_nekomataya

CS3 または CS4-5のExtended版をお持ちの方は、フレームアニメーション機能に加えて、タイムラインアニメーションがつかえます。 AfterEffectに似た形のタイムラインを操作して細かいタイミング制御が可能です。 #psAxe

2011-05-24 20:12:00
ねこまたや @info_nekomataya

タイムラインアニメーションは、フレームアニメーションを拡張するような形で搭載されています(変換可能)。 CS3(ver10)では標準機能。CS4(var11)以降はPhotoshop Extended(上位版)の限定機能になっています。 #psAxe

2011-05-24 20:13:43
ねこまたや @info_nekomataya

psAxeでは、主にフレームアニメーションの機能を利用してタイムシートの適用とプレビューを実現しています。 Photoshopでアニメを作画するには、このアニメーション機能についての基礎知識を持っているとイロイロ便利です。 #psAxe

2011-05-24 20:14:29
ねこまたや @info_nekomataya

で、今日は、フレームアニメーションの機能のおはなしをします(psAxeで拡張した機能は次の回に予定ね)。 今までPhotoshopのアニメ機能を利用していなかった方も居られると思いますので、最初から~♪ #psAxe

2011-05-24 20:15:48
ねこまたや @info_nekomataya

アニメ機能利用するためにはアニメーション用のメニューを表示します。 メニューから [ウインドウ]>[アニメーション] とたどってアニメーションウインドウを表示させます。 #psAxe http://twitpic.com/51vdc4

2011-05-24 20:17:41
拡大
ねこまたや @info_nekomataya

表示がこんな風になっていたらそれはタイムラインモードになってます。端っこのアイコンでフレームモードに切り替えてね。 #psAxe http://twitpic.com/51vdq7

2011-05-24 20:18:46
拡大
ねこまたや @info_nekomataya

ウインドウには、レイヤパレットに似たサムネイルが表示されています。これをフレームとかアニメーションフレームと呼びます。フレームにはフレーム番号と、ディレイ(遅延)時間が表示されています。遅延時間の指定単位は秒です。 #psAxe

2011-05-24 20:20:33
ねこまたや @info_nekomataya

この時間は表示時間ではなく、遅延時間の指定なので幾分注意が必要です。もともとGIFアニメのために作られたインターフェースなのでGIFの仕様に準じて作られています。 #psAxe

2011-05-24 20:21:14
ねこまたや @info_nekomataya

遅延時間とは画像(フレーム)の表示が終ってから次の絵を表示開始する前での遅延時間なので画像が表示されている継続時間は厳密には描画時間と遅延時間を合わせたものです。描画時間はマシンに依存するので、遅延時間0を指定した場合のフレームレートは実は不定になります。 #psAxe

2011-05-24 20:21:55
ねこまたや @info_nekomataya

ただ Phtoshop上でプレビューしている限り(キャッシュに入りきる状態ならば)おおむね遅延を感じないで再生が可能です。 ムービーに書き出せば基本的には遅延は問題になりません。 #psAxe

2011-05-24 20:24:12
ねこまたや @info_nekomataya

昔はGIFアニメで1/24秒の遅延を指定しても大方のWEBブラウザで指定どおり再生できませんでした。1秒のつもりで24枚表示すると1.5秒くらいはかかったものでしたが…最近のマシンはやいよ #psAxe

2011-05-24 20:25:08
ねこまたや @info_nekomataya

このフレームには、ドキュメントの各レイヤの 不透明度(%) ブレンドモード 表示/表示 位置 レイヤースタイル などを登録することができます。各フレームを「ディレイ(遅延)時間」にしたがって順番に表示することでアニメーションをプレビューできます。 #psAxe

2011-05-24 20:26:15
ねこまたや @info_nekomataya

レイヤの順序や、画素(ピクセルの値)自体は登録できません(並べ順や絵の書き換えは全部のフレームに影響します)。たとえて言うなら、Photoshopのレイヤの状態をスナップ(撮影)したものが「フレーム」で、これに時間を割り付けてアニメを実現しているわけです。 #psAxe

2011-05-24 20:27:07
ねこまたや @info_nekomataya

フレーム同士の中間の位置や不透明度がトィーン(中割り)可能です。(ただし均等割り限定) AE使いの方は この「フレーム」がAEで言う「キーフレーム」だと思えばよいと思います。補完はすべてリニア #psAxe

2011-05-24 20:29:01
ねこまたや @info_nekomataya

ウインドウの左下側にはよく使うコマンドアイコンが並んでいます。 #psAxe http://twitpic.com/51vibp

2011-05-24 20:31:32
拡大
ねこまたや @info_nekomataya

左は 再生ループ回数の指定。回数または無限ループを指定できます。#psAxe

2011-05-24 20:33:30
ねこまたや @info_nekomataya

移動ボタン 最初のフレームへ 前のフレームへ 再生/停止 次のフレームへ の4つのボタンがあります。#psAxe

2011-05-24 20:34:13
ねこまたや @info_nekomataya

その隣のボタンは「トィーン(中間値の補完)」です。指定フレーム数の(均等)中割ができます。ピクセルを変更する…わけはなくて、透明度や位置を補完します。 #psAxe

2011-05-24 20:34:41