ギークリ「Illustrator&AdobeExpressで作るサクッとアニメ」振り返り＋オマケ

当ブログオーナーのセッジは、Adobe Community Expertの一員として、
2024年11月23日に開催されたクリエイターの祭典『GEEK CREATORS 2024 TOKYO』に登壇者として参加しました。

今回の記事は私がセミナーセッションでお話したさわりの部分と、時間の都合上お見せできなかった部分を蛇足的にご紹介いたします！

※この記事は、Adobe Community Exprets presents Creative Advent Calendar 2024の7日目の記事です。
前回の記事はaisan/Adobeを教える就労支援員さんの記事でした。

※この記事はアドビ社およびアドビ製品のプロモーションが含まれています。

IllustratorとAdobe Expressの連携ワザ

私のセッションは15時からの回。
裏番組的に、あさひな。さんや、河野みどりさん、というビッグネームのお二人のセッションがありましたので、
「ひょっとしたらウチのセッションガラ空きなのでは…」
とすこし不安を感じていました。

ですが、実際のセッションでは私のセッション目的で来てくださった方もいて、満席状態になっていて、感動しておりました。

ご来場いただいた皆さん、ありがとうございます！🙏

Adobe Expressについて

さて、セッションでは本題のアニメ作りの解説の前に、Adobe Expressについて軽くご説明をしました。

まだまだ認知度が高いとはいえないAdobe Expressですが、
特に知られていないのが、IllustratorやPhotoshopなどの単体プランやAdobe Creative Cloudコンプリートプランを使用している方は、実はAdobe Expressはプレミアムプランが付いてくるコト。

このあたり、とてももったいないので強くプッシュしてきました。

また、デザイン初学者の方やノンデザイナーの方には、無料で始められるコトや、
豊富なテンプレート、Adobe Stock素材、そして業務用フォントが収録されているAdobe Fontsを使って、簡単にコンテンツ制作ができることをアピールしました。

アニメ制作で準備するコト

Illustratorで描いたイラストをアニメ化する流れについて、実際に操作をする前に、どのような準備が必要なのかを解説しました。

Illustrator側の準備としては、動かす予定の要素ごとに絵を分解して行くことになります。
このハルピュイアのキャラクターイラストの場合は、頭、左右の翼、胴体と左脚、右脚、といった具合に分割してあります。

また、2024年11月時点でのAdobe ExpressでIllustratorファイルを変換すると、かなり細かく大量のレイヤーに変換されてしまうため、こういった絵の場合は一度ラスタライズ（ピクセル化）しています。

こういった準備をした上でAdobe Expressに読み込めば、アニメーション化するコトができます。

このセッションではIllustratorでの例をご紹介しましたが、要素ごとにレイヤー分けをしておけば同じことはPhotoshopでも可能です。

カードフレームのアニメーション

実は私はアドビ製品を使ってボードゲームを作るコミュニティ『ボドゲbyアドビアプリ』の一員です。

その影響もあって、今回ギークリでデモをするにあたり思いついたのが「ソーシャルゲームでのカード出現イベント風ムービー」でした。

1. カードのキャラクターのフレーバーテキストを表示
2. キャラクターが出現し数秒ホバリングする
3. キャラクターの周りにフレームが現れカード化する

実際のセッションでは時間の都合でカットしましたので、ここで解説させていただきます。

Illustratorでカードフレームをデザイン

Illustrator側での準備です。
基本的に「動く要素ごとに分けておく」というのはキャラクターの要素分解と同じです。

左右のフレームが扉のように左右から閉じ、フレーバーテキスト用のフレームが下からせり上がる、という動きを想定しているため、左右のフレーム、フレーバーテキストという要素で分けています。

Adobe ExpressでAi形式を読み込み

上記で作成したカードフレームのファイルは、ローカル（PC）上に保存します。
クラウド保存の場合だと統合されたリンク画像になり、Adobe Express内のレイヤーに変換されなくなるからです。

こちらをAdobe Expressの[自分のコンテンツから開始]から読み込みます。

すると、

• Aiをリンク画像として配置
• AiをAdobe Expressファイルに変換

という選択肢がでてくるので［AiをAdobe Expressファイルに変換］を選択します。

アニメーションのためのグループ化

IllustratorからAdobe Expressに変換されたファイルを開いてみました。

前述したように、現在の仕様ではIllustratorファイルはかなり細かくレイヤー化されます。
具体的にいうと1オブジェクト＝1レイヤーになります。

また、形状が複雑だったり、塗りにグラデーションなどを使っても、線と塗りが分離されてしまいます。

このままだとちょっとアニメ化しづらいので、要素ごとにグループ化していきます。

複数選択＝囲み選択をしていきます。
要素全体を選択しようとすると他の要素も選択してしまうので、図のように一部を囲むようにするとうまく選択できるかと思います。

選択できたら、タスクバーまたは左パネルの［グループ化］でグループにします。

重なっている他の要素がある場合、やはり囲み選択をすると一緒に選択してしまうので、グループ化が終わったモノから［ロック］していきます。

ロックされているレイヤーやグループは、囲み選択の範囲に入っても他の要素とグループ化されるコトはありません。

グループ化してロックし、別の要素をグループ化して…
最終的には図のように、4つにグループ分けをしています（赤で囲んだ部分）。

カードフレームのアニメーション

各要素のグループ化ができたのでロックを解除（鍵マークをクリック）して、それぞれにアニメーションを付けていきます。

画面右下の［…（三点リーダー）］のボタンを押すとメニューがでてきます。
この中の［タイムラインを編集］を選ぶと、このファイルに時間の概念が追加され、画面下にタイムラインが表示されます。

４つの要素が出現するタイミングをズラしていきます。
この場合、タイムライン左下の［レイヤーの表示時間を調整］をオンにすれば、選択したレイヤーの開始時間と終了時間の調整が可能です。

ここでそれぞれにアニメーション効果を付けていきます。
アニメーションには［開始・ループ・終了］と、表示時間のどのタイミングに効果をつけるか選べるようになっており、今回はすべて［開始］です。

左右と下のフレームには［スライド］を付けました。
この効果は基本左から右に移動しつつ現れますので、左のフレームはそのまま、右のフレームは方向を右から左、下のフレームは下から上、という形に方向を変えています。

「SR」のテキストについては、ズームアウトしていくイメージにしたかったので［縮小］を付けました。

これでもうアニメーションになっています。
こうして出来上がったアニメーションはグループ化して、コピーすれば別のAdobe Expressファイルにアニメーションごとペーストできます。

これをキャラクターのアニメのファイルに

完成形はコチラです▼

可能性を感じるIllustrator→Adobe Express

「IllustratorのファイルはIllustratorでしか開けない」
何を当たり前のコトを言っているんだ？とお思いかもしれません。

「Illustratorで描いた図形の色や線種・線幅を変えたい」
これもIllustratorが無いとできない…というのが常識です。

現行バージョンのAdobe Expressは上記が可能です。
Illustratorの文字オブジェクトもAdobe Expressの文字レイヤーに変換されますので、
「ベースはIllustratorで作ってAdobe Expressに変換し取引先と共有する」
というコトが可能になります！

より専門的なコトはこれまで通りIllustratorで行いますが、
それこそ線の色や幅、文字修正くらいであれば、デザインのスキルがない人でも修正・変更が可能になるので、クリエイターとお客さんとで共同作業ができるようになるのです。

Adobe Expressは「簡単なデザインツール」でもありますが、IllustratorやPhotoshop、InDesignと連携し、かつNoteやWixなど他社サービスとも連携できる、
「クリエイティブハブ」そして「ビジュアルコミュニケーションツール」ともいえます。

あなたもぜひAdobe Expressを使った、新たなデザインの世界を楽しんでみてください。

 

ギークリを終えて

普段専門学校で対面授業をしているので、実は対面セッションは慣れてはいるのですが、25分の中にどこまで詰め込むかがとても難しく感じました。

でも、聴講者の皆さんは楽しんでいただけたようなので私的には満足しています。

また、会場が専門学校の東洋美術学校さんだったこともあり、
聴講者さんの中には「学生に戻って授業を受けている感覚になり懐かしかった」というご感想もいただき、やって良かったと感じています。

ギークリこと、GEEK CREATORS 2024 TOKYOは、アドビをはじめたくさんの企業様に協賛をいただきましたが、運営はすべて個人の集団であるAdobe Community Expertたちです。

このような素晴らしいイベントが開催でき、そして参加できて良かったです。
またこういう機会があればぜひ参加したいと思います。
この場をお借りして企画運営にご尽力された実行委員会の皆様、会場をご提供いただいた東洋美術学校様、協賛企業の皆さま

そしてこの記事を読んでいただいたあなたも、ぜひまた次の機会には参加してください！

明日のアドベントカレンダーは「ボドゲbyアドビアプリ」でもご一緒している、まるみ師匠の記事です！
ギークリでまるみさんが担当した「AdobeExpressでトランプを作ろう！」の振り返りレポとのコトです！

書いた人

デザイン専門学校卒業後、本来であればデザイン制作会社に就職するところ、映像制作会社に就職し、グラフィックデザインやイラストレーション制作に従事する。
その後編集デザイン事務所に移り、機関誌のデザインやDTPアドバイザーを担当の後、フリーランスとなる。
これまでにデザインやイラストの制作、TV用CGの制作、PC雑誌の記事執筆などを経験。
それらに並行して専門学校/東京デザイナー・アカデミー（旧称：東京デザイナー学院）にて非常勤講師も兼任している。

2020年以降アドビ社より、
Adobe Japan PreRelease Advisor、Adobe Express Ambassador、Adobe Community Expertを順次承認されている。

X(Twitter)：https://x.com/sedge_design
Instagram：https://www.instagram.com/sedge_de_sign/
Threads：https://www.threads.net/@sedge_de_sign
BeHance：https://www.behance.net/sedge_design