仕事の合間に現実逃避して作ってみました、
2011年のテレビアニメ『魔法少女まどか☆マギカ』より第10話の暁美ほむらちゃんです。

フィギュアは数多く出てますが本編には登場しない服装だったり笑顔だったり、
劇中の彼女はもっとすっごいもの背負って生きてるわけですがそれがあんまり感じられない。
なら自分で作っちゃえってことで今回の製作にいたりました。

モチーフは第10話のラスト、「私の戦場はここじゃない」というセリフの直後のポーズになります。
スカート以外は新造、スカートは黄前久美子さんのものを改造してボックスプリーツを追加してます。
足は結構長めにしてみました。
暁美ほむら足

出来上がったモデルにポーズを付けるのですが、今回初めてMixamoを使用してみました。
Mixamoはブラウザ上でモデルにリグ入れてアニメーションまで付けてくれるサイトです。
特別な知識がなくても簡単に、しかもそこそこ精度の高いリグを入れてくれます。
ここにモデルをアップロードして既存の「歩く」アニメーションをアサインしてそれをダウンロードしました。
こんな感じになります。
必要じゃないものもいっしょにアップロードするとエラーになったりしますので最低限のパーツのみです。

あるく暁美ほむら
Mixamoの残念な点としてはリグを入れる際の「肩」の指定がないことです。
顎、股関節、ヒジ、手首と指定するのですが肩はありません。
出来上がったセットアップはたいてい撫で肩みたいになってしまいます。
とはいえ今回ぜったい必要って部分でもないのでこのまま使用します。

ダウンロードしたファイル(fbx)は当然動いてますので好きなフレームに移動したら
それをOBJで書き出しポーズを固定したものを作ります。
その後、各パーツの作りこみやバランス調整を行っています。
暁美ほむら 暁美ほむら足アップ

仕事の合間の限られた時間で作りたかったのでMixamoを使ったりしてはしょれるとこははしょりました。
ここまでの製作時間は約3日間。
髪の毛やリボンなどはこの時点で板ポリです。
UVも切ってないので色が乗ってないとこもあります。

暁美ほむらバストアップ

この後ZBrushに持ってって続きをやろうと思ったのですが
ちょっと軽く自信をなくしたのでこの辺で終わるかもしれないです。

2016/07/12追記
ちょっとだけ進めたので画像追加です。
暁美ほむら最新版上半身
ちょこちょこしたとこに厚みを持たせてディティール追加・あとはポーズの手直しをしました。
Mayaでの作業はこの辺で、って感じです。


ちゃんとレイヤー分けをしたイラレのaiファイル。
save1

これをAfter Effectsに読み込んだ際、
AEでレイヤーが統合された状態で読み込まれる事があります。
「あぁ、うっかりフッテージで読み込んでしまったか、コンポジションなら大丈夫だろう」
と読み込みの種類を変えてもやっぱりレイヤーが統合されてる・・・。
AEでの読み込みダイアログ

そもそもAEに読み込んだ際、ちゃんとレイヤー分けされたファイルは
フッテージが選択されてもストレートに読み込んでくれないんですよね。
レイヤーは統合するか個別か、個別ならどのレイヤーを読み込むか聞かれるわけです。

そんな時はaiファイルを別名保存してみましょう。
保存の際、【PDF互換ファイルを作成】にチェックを入れて保存してみてください。
save2

再度AEにて読み込みを行います。
いかがでしょうか。
ちゃんとレイヤー分けされた状態で読み込む事が出来たのではないかと思います。

DTPなどをやってるデザイナーさんはイラレファイルの保存時にこのチェックを外してることがあります。
このチェックを外すことでファイルサイズが結構軽くなるんですよね。
印刷に関係ないものは極力ファイルに含まないということなのでしょう、たぶん。
細部まで気を使っていただいてる反面、ちょっとありがた迷惑でもありました。
すません。

※上記画像はcs5のものです。その他のバージョンでは別の言い回しになってるかもしれません。


 

前回のエントリー【Adobe Illustrator オブジェクト オプションでロゴをインポート、の注意点】
大事なこと書くの忘れてました。
いや、それほど大事じゃないかもしれませんが知ってて損はないかなと思いまして。

それは【Mayaにインポートしたイラレデータが滑らかじゃない!】ということなのです。
インポートする度に「なんでだろう」と思うばかりでインポートした後にMaya上で
スムーズなりなんなりしてあげれば滑らかになるからいっか、ってことで
「まあこんなもんなんだろう」程度で考えておりました。

たぶんきっと誰かがすでにブログなどで答えを書いてくれてるかもしれませんが、
せっかく自分で調べたのでまとめておこうと思います。

結論、イラレのアンカーポイントの数はMayaにインポートすると6倍の頂点数になる。

下の画像はイラレで円を作ったものです。

円を複製し、複製した円はオブジェクトメニュー→パス→アンカーポイントの追加を実行して
アンカーポイントの数をデフォルトの円の倍である8個に増やしております。

これをMayaにインポートしたのが下の画像です。

ってことでより滑らかな状態でインポートしたい場合はイラレ上でアンカーポイントを増やしておきましょう。
もちろん、Mayaに持ってきてからスムーズを加えても構いませんが総体として頂点数が増えてしまいますし
複合パスにスムーズを加えると面が穴をふさいでしまってめんどくさい事になる場合もありますので
注意が必要です。

 


いや、そんな期間限定なんて大それたものではないのです。
が、中には公開許可をとったかとってないか不明なものもあり、
また「でも自分で作ったものは見てもらいたいよねぇ」っていう欲求もあり
そんなゆれる気持ちと事情の狭間っていうことで期間限定です。

demoreel 2012
https://vimeo.com/46272167

PW設けています、ごめんなさい。
私の携帯番号から090を消したものです。
ご感想お聞かせください。


今年も明星和楽の映像を作らせていただきました!

まずはオープニングアタック

去年のもあれはあれで好きだったのですが、出来た瞬間になんていうのか言い方悪いかもしれませんが捨てたくなりました。
もっと色を変えたい、坂井っぽいって言われたくない、ちゃんと意味のある絵にしたい。
なんかそんな気持ちになったです。
で、今年はこんなんなりました。

テーマは「スターになる素質はあるか」
英文に変えるとちょっと、ってか結構違う意味になってしまいました。

明星和楽のサイトに、
「福岡、そして日本、アジアを盛り上げていくための明日のスターを発掘・育成します。」
というテーマがあります。
いわゆる「スター誕生」なわけです。

スターってのは「なろう」って思ってなれるもんじゃないですよね。
実力だけじゃ足りない。
その道を突き進むエネルギー、センスというか嗅覚、また人との縁や運なんていう自分じゃどうしようもないもの、
何一つ欠けてもなれないもんなんじゃないかと。
そういったものを持っているか、という心構え的な意味を映像にしてみました。

で、こっちがエンディングです。


※映像内に不手際がありました、リンクを差し替えております。
※2012年11月16日、さらにリンクを差し替えております、申し訳ありません。

スポンサーさまやゲストの所属会社名をロゴで乗せようとしたのですがCIの関係もあり
黒背景時の使用禁止事項がなかったため泣く泣く断念しました。
順不同・敬称略でございます、なにとぞご理解ください。

また今回VJ motordrive氏の指導のもと、初めて3Dプロジェクションマッピングに挑戦させていただきました。
・・・で、イベントの進行が忙しくて投影の様子、撮ってません・・・。
facebookのmotordrive氏のポストをリンクしてますのでよろしければ見てやってください。
普段の仕事もあってなかなか全力投球できませんでしたが結構イイ感じに見えるもんだねーってのが出来ました。
ちょっとまたやりたいです、3DPM。

ってことで今回の2回目のスタッフ参加でございました。
フタを開けてみれば3000人オーバーの集客。
明星和楽というイベントの浸透度は確実に去年を越えたと感じております。
その様子は他のブロガーさんのやメディアの記事を参照していただければと思います。

さいごに。
去年のエントリーで「なにやってるイベントなのかぜんぜんわからない」なんてコメントももらいましたが、
「そりゃ来ないとわかんないよ」
来た人だけがわかるんすよ。
この映像は来た人が見る映像なんです。


Illustrator初心者向け 処方薬検索サイト「おくすり検索」バナー制作要項


表題の通り、Illustrator初心者向け制作に関するエントリーです。

完成見本はこのようになります。※原寸です。

所要時間は授業時で1時間半、手順をマスターした場合は約20分で制作可能になっています。

使用ソフトはIllustratorのみ、作例はcs5で作成していますがcs6でも問題なく進められます。
使用するツールも以下のものに限定しています。
・ブレンドツール
・パスのオフセットツール
・描画モード
・グラデーション
・パスファインダー

フォントはwindows版Officeに標準で入っている【HG丸ゴシックM-PRO】を使用します。

以下制作手順です。
なるだけ分かりやすくするため画像を多く使っています。
クリックすると 画像が大きくなります。
戻る際はブラウザの戻るボタンで戻ってください。 

 ●ではまず薬のカプセルの制作からスタートしましょう。

1.アートボードは400×180(px)、RGBカラーで作ります。

2.オブジェクトのアウトライン化

3.オブジェクトの同位置コピー&ペースト(ショートカットはCtrl+C、Ctrl+F)

4. 複製したオブジェクトの変形(拡大・縮小)1

5. 複製したオブジェクトの変形(拡大・縮小)2

6. カプセルを構成するパーツの複製と配置

 

7. パスファインダ(分割)の前準備として直線ツールでラインを縦に引く

8. パスファインダの実行とパーツの色分け

9.①と②のパーツのブレンド

10. 描画モード(スクリーン)でカプセルの光沢を出す

11.描画モードを比較(暗)にして立体感を出す

12. カプセルを複製して片方の色を変える

13.カプセルをそれぞれグループ化する

●これでカプセルは完成です。最後のレイアウトまで隅に移動させておきます。
これ以降各パーツはレイヤーで分けておくと後の作業が楽になります。
このカプセルは最初からあるレイヤーに格納されているはずです。
レイヤー名を【カプセル】に変えておきましょう。

次は文字の入力とデコレーションを行います。 
【文字レイヤー】を作成し作業を進めていきます。 

14. 文字の入力

15.【おくすり】の文字をアウトライン化して着色

16.アウトライン化した文字にパスのオフセットをかける

17. オフセットをかけた部分をグループ化する

グループ化しますと、オフセットをかける前の元々の部分とレイヤーの順番が混ざってしまいます。
ピンクで着色した元々の文字よりも下にくりようにレイヤーの順番を入れ替えてください。

18.オフセット部分の複製(コピー&背面ペースト)を行い、ピンクに着色しなおして位置をずらす

オフセット部分を複製すると複製前と同じ色になります。
これを元々の文字と同じ色であるピンクにするのですが、まったく同じ色を適用する場合は
スポイトツールが便利です。
ます、色を変えたいオブジェクト(この場合は複製したオフセット部分)を
選んで(背面ペーストした直後なのですでに選ばれています)スポイトツールに持ち替え、
元々の文字のピンク色の部分をクリック、これで複製したオフセット部分の色が変わりました。

しかし 背面ペーストしたオフセット部分は複製元であるオフセット部分の下にありますので
そのままの位置では色が変わった感じがしません。
落ち着いて斜め下にずらしてちゃんと色が変わってることを確認してください。

●これで文字のデコレーションは終了です。
次に虫メガネの作成に進んでいきます。
【虫メガネレイヤー】を作成して作業を進めていきます。 

19.正円の作成(Shiftキーを押しながら左斜め上から右斜め下にドラッグ)

20. 円の複製

21. 二つの円をパスファイダで分割

22. 円に対してグラデーションを与える

23. 分割したパーツからいらない部分を削除

24. 長方形ツールで虫メガネの柄の部分になるパーツを作成

25. 長方形の複製と着色

26. 整列ツールで二つの長方形を合わせ描画モード(乗算)を加える

27. 先に作った虫メガネのレンズ部分と柄の部分の位置を合わせグループ化

●これで虫メガネの作成は終了です。
 スキルに応じてレンズのガラスの反射などを入れると一層リアルに仕上がるでしょう。

28.レイアウト

背景や文字の下に色をつけたり、お好みで各パーツにドロップシャドウを加えて立体的にしましょう。
作例では取り扱う対象(お薬)とそれを見るであろうターゲット(主婦や年配の方)を考慮して
全体的にやわらかい感じの色使いにしています。
その時々のクライアントやターゲットによって配色やレイアウトを変えてみてください。

29.Web用に保存する

Adobe Illustrator cs5では「Webおよびデバイス用に保存」
同cs6では「Web用に保存」になっていますが、基本的には同じと思っていただいて結構です。
※一部形式での書き出しが削除されています。
今回はもっとも一般的なjpegで保存していますが、デバイス(PC、携帯電話)の種類などによっては
別の形式が良い場合もあります。

なお、Web用に保存した場合、アートボードからはみ出たオブジェクトは書き出しの対象にはなりません。
作例にもありますとおり、虫メガネのオブジェクトはアートボードからはみ出た部分が切られた状態で書き出しされています。
「完成形には不要なんだけど消さないで取っておきたい」 、そのようなオブジェクトは
アートボードの外側に置いておくと良いでしょう。

以上でチュートリアルを終了します。


Mayaの作成メニュー→Adobe Illustrator オブジェクト オプションですが
なんでかエラーが起きてうまくインポートできない!って方いますよね。
イラレのバージョンがいけないのか、アンカーポイント数が多すぎたのか。
でもこれで持ってこれないとカーブとしてでしかインポートできなくて
べベルかけるまでが超めんどくさい・・・ってことになります。

インポートするイラレのデータ、最後に保存するときにここだけ注意してください。

・バージョンは8がベスト(3でもいいです)
・アウトライン化してるか
・ガイドが残ってないか(トンボもダメみたい?)

これだけです。
要はきれいなパスになってればいいです。
おそらくMayaにイラレのデータをインポートしようとしてる方は、
無茶なことはできないと解ってらっしゃると思うので
・グラデーションメッシュ
・ブレンド
・ワープ
・エンベローブ
なんかはちゃんと拡張してるものと思います。

そんな感じでちゃんとしてるはずなのにまだ引っ掛かってしまう、という方は
もう一度ファイルを見直してみてくださいませ。


Adobe Illustrator CS5で新規ドキュメントを作るとこんなダイアログが出てきます。

で、この赤の印の部分が今回頭を悩ませた部分です。
【新規オブジェクトをピクセルグリッドに整合】 

元々どちらかといえば印刷なんかでの作業をメインとしていたイラレですが、
Fireworksみたいなソフトの存在もあってWeb向けの機能も充実させなければ
ならないのかなと勝手に推測しております。

勝手な解釈ですがどうもこの機能、要はWebでの標準単位であるピクセルのマスで
作られたグリッドにきれいに整列させようという機能っぽいです。


上の画像ですが、どっかで見たような模様をイラレで作ってアウトライン表示しています。
左は最初に作った図形、大きさは300pxくらいの比較的大きいサイズで作っています。
で、これを小さくした時に右のような状態になってしまいました。
※形の変化がわかるように同じ尺度にしています。

比較として右の図形のすぐ右上に1pxの正方形を置いています。
最初に作った図形にちりばめた四角は正方形なのですが、これが完全に崩れています。
またタイリングされた正方形のアンカーポイント同士はスナップしていたのですが
これもずれてしまっています。
色々テストをして裏をとったわけではないので絶対ではないのですが概ね以下のような事が起きました。

・図を構成しているパーツが1px以下になるとこのような状態になる
・一度 【新規オブジェクトをピクセルグリッドに整合】 にチェックを入れた書類で作った図形は、
チェックをいれてない書類に貼り付けてから小さくしても同じ結果になる
・パーツが1px以下になったからといって消えてなくなるわけではない
・図形やパーツの大きさに関係なく1pxを下回るナッジやスナップは無効になる
※厳密には無効ではなくナッジの場合は1px単位、スナップの場合は一番近くのアンカーポイントへスナップ。

ホントは理由なんでどうでもいいというのが本音です。
形も配置も崩れずに好みの大きさになってさえくれればいいのです。
で、回避策を考えてみました。

【作った図形をシンボル化してからリサイズする】 
もちろん他の手段もあるかもしれませんし、そもそもルールを守って1px以下にならないように
作るってのが悩まなくてすむ一番の方法かもしれません。
ただ一度なってしまったの見てしまうとムキになってしまいました。

久し振りの更新でしたが役にたつかたたないかよくわからないエントリーでございました。


仕事上のメモです。

■AE上での動作A
・プロジェクトウィンドウでダブルクリックしてファイルの読み込み>Prのプロジェクトを読み込み
・ファイルメニュー>Adobe Dynamic Link>Premiere Proシーケンスを読み込み

上記の読み込み方だと、
・Prのシーケンスは1本の映像状態で読み込まれる
・1本にまとまっているのでサイズ変更も一括
・Prで使用した画像や音声も選択すれば読み込まれる
・厳密にはネスト化された状態だがファイルをダブルクリックしてもフッテージが開くだけ
・Prで付けたトランジションやエフェクト、ボリュームレベルは活きた上で読み込まれる
・Prでトランジションなどの数字の変更を行った場合でもAE側で瞬時に反映される
※ただしPrで付けたキーフレームはAEでは見えないので変更は元々のPrで行うべき

■AE上での動作B
・ファイルメニュー>読み込み>Adobe Premiere Proプロジェクト

この読み込み方をすると、
・Prのプロジェクトウィンドウに入ってたすべての素材を一括で読み込む(任意で一部だけ読み込むことも可能)
・読み込まれたシーケンスはコンポジションに変換されてて、開くと1クリップ1レイヤーになっている
・Prで付けたエフェクトはAEのエフェクトになっているので変更も可能だし消去もできる
・トランジションは無効になっているがかかっていた部分がレイヤーで重なった状態になっている
・ボリュームレベルに付けたキーフレームはステレオミキサーになっているので変更可能
・リンクによる読み込みではないのでPrで変更しても反映はされない、Prの段階まで修正が入った場合は
修正後再度AEに読み込みしなおして編集させないと結果が二通りになってしまう。

つまり一長一短。
いや、個人的にはFX重視なので後者の方が使い勝手がいいと言える。

※cs4でのお話です。


前回はその1を書きましたがまだまだありました。

前回同様、『同じような映像数十本を埋め込みSWFにする』ってわけで、1本2本程度なら良いのですが
数十本となると欲しくなる機能ややめてほしい仕様がでてきます。
以下箇条書き。

・ドキュメントタグがいっぱい並んで画面からはみ出した時のためにスライダを付けてほしい。
(>>マークのプルダウンは使いにくい。)

・制御メニューの再生からでも音声が出るようにしてほしい。
(パブリッシュしないと出ないのはちょと困る。)

・ステージの表示位置をセンターに戻す的なコマンドがほしい。
(他のドキュメントに配置したオブジェクトの位置を見比べるため)

・バッチパブリッシュを実装してほしい。
(数十本のドキュメントってことは数十回Ctrl+Enter押さないといかんのはつらい)

回避策やプラグインがあるよーって人、教えてください。
スクリプト書けばいいやんってのはナシで。
書けないので。