グラフィックデザイナー・イラストレーター・専門学校講師。 アドビ社より、Adobe Japan Prerelease Advisor、Adobe Express Ambassador、Adobe Community Expertとして認定されています。 このブログでは、デザインが身近に感じられるよう、デザイン初心者向けの情報やAdobeのアプリの解説をしています。 また、「デザインブ」というコミュニティも運営しており、部活感覚でデザインを学べる場を提供しています。 どうぞよろしくお願いします❗

キャラクターアニメーションを作るならインバースキネマティクスは必要な機能です。 しかし、AfterEffectsは歴史の長いアニメーションソフトですが、この機能を持っていません。 そこでRainBoxが開発したDuIKの登場になります。 DuIKはAfterEffectsでインバースキネマティクスを可能にするフリースクリプトです。 最新のバージョンはDuIK Basselとなり、これまでと操作系が少し変わりました。 それに対応し解説しています。 以前、製薬会社さんの案件で薬の使い方のアニメーションを制作したときにこのスクリプトを使いました。 なぜならば、この作品はまさにキャラクターアニメーションだらけのものだったからです。 また、最近ではアニメビーンズの「もしもし、てるみです。」のアニメ制作でも使用しています。 AfterEffectsに強力なアニメ機能を追加するDuIK! 今回はこのスク

今年に入ってからillustrator系の9記事を開発元のアドビさんが運営しているTwitterアカウント、アドビスチューデンツにてご紹介いただいています。 イラレの記事のご紹介が一段落ついたころ、今度は当ブログのもう一つの柱であるAfterEffects＝略称AEの使い方記事もご紹介いただけました。 そのご紹介も5記事分たまってきましたし、古い記事はなかなか読んでもらえなくなることもありますので、この記事ではこのアドビさんにご紹介いただいたAEの記事をまとめるとともに解説していきます！

当ブログでは文字のアニメーションを扱った記事が他にもあります。 こういった表現にはいろいろな方法がありますね。 その中でも、私の生徒たちがAfterEffectsの初級レベルのときにやってみて、「おおー！」と声があがる効果があります。 それが今回解説する、文字の書き順のアニメーションです！ 筆記体フォントを使うと書かれていく様子がちょっとオシャレですよ！ おはようございます！ デザイン講師ブロガーのセッジです！ 今回は実は線のアニメーションの第二弾だったりもします。 線エフェクトを使うと、文字を描く様子が表現できちゃうんですよ！ illustratorで文字を作成 さて今回は Design という文字が描かれていく様子をアニメーションにします。 筆記体の方が書いている感じが強いと思いますので、以前も紹介した、 BrushScript Stdというフォントを使ってみました。 今回はDが描かれ

「単純な動きなのに、数が多くて大変」 そのような状況になったら、AfterEffectsの切り札とも言える機能、エクスプレッションを使ってみてはいかがでしょう？ エクスプレッションはレイヤーを言語や計算式でコントロールして動きや変化を付ける機能です。 キーフレーム無しでも、キーフレームと組み合わせても動きを作ることができる、プログラムのようなものです。 あなたもエクスプレッションを覚えれば、シンプルな動きなのに数が多くて面倒…、といった処理を効率化できるようになります！ おはようございます！ デザイン講師ブロガーのセッジです！ 今回はAfterEffectsで動くカンタンなプログラム、エクスプレッションの基本です！

今回は犬が走る簡単なアニメーションを作ってみましょう。 ここで知っておくと便利な機能が「リンク＝親子関係」です。 AfterEffectsなどでの親子関係は「親レイヤーの動きに従って、子レイヤーが一緒に動くようになる」ことを指します。 今回はこの親子関係を解説します。 親子関係をマスターすれば、あなたも簡単にキャラアニメーションが作れるようになります！ セッジです！おはようございます！ 今回はキャラアニメなどで必須な機能、親子関係について説明します！ シンプルなキャラならすぐ動かせるようになりますよ！ illustratorでイラストを用意しよう！ 今回は犬のイラストをillustratorで描いておきました。 大事な部分としては、絵を描くときに「どこが動くのか」ということを考えながら描いていくことです。 今回の場合は、頭(head)、胴体(body)、前脚(front)、後脚(rear)

文字のサイズや太さ、文字間・行間などを調整してわかりやすくしたデザインのことを「タイポグラフィ」といいます。 また、このタイポグラフィに動きと時間の流れを加えた、文字のアニメーション表現のことを「キネティック・タイポグラフィ」と言います。 ※モーション・タイポグラフィと呼ばれることもあります。 こういった表現はどうやって作るのでしょう？ 実は、キネティック・タイポグラフィ制作には、文字のデザインに強いillustratorと、アニメーションに強いAfterEffectsは最強の組み合わせになります。 セッジです！おはようございます！ 今回は単純なようで奥が深い、キネティック・タイポグラフィに挑戦してみましょう！ あなたもこれを実践してみることで、アニメーション制作の理解が深まりますよ！ 文字を組むだけであれば、AfterEffectsだけでも可能です。 しかし、細かい加工や調整などを加えて

AfterEffectsは機能がとても多いソフトでもあります。 全てのコマンドをメニューから行うと面倒に感じるコトも多くなりますので…ショートカットを覚え使っていく方が効率的に操作ができます。 最初は2列の表を作る予定でしたが、 複数キーの組み合わせがかなり多く、1つのセルに収まりきらなくなったため、WindowsとMacを分けた3列表示にしています。 基本ツールのショートカット 選択ツールや手のひらツール、ズームツールは、illustratorやPhotoshopと共通ですが、 回転ツールやペンツールなどは共通しないショートカットが割り振られています。（後述のプロパティの方に割り振られているため） また、コピースタンプが消しゴムと同じものになっていますが、これはトグル式といって同じショートカットを叩くと順次切り替わる形になっています。 プロパティのショートカット AfterEffects

2018年の年賀ムービーを作成した際、 扇(おうぎ)が開くという表現をアニメーションで作成しました。 現実の扇の動きは留め具＝要を基点として開いていくのでなんとなく想像がつきますね。 これをアニメーションで行う場合は、どのようにすればいいでしょうか？ 「骨」一つずつにキーフレームを割り当てて行く？ もちろんそれでも可能ですが、一つずつ角度を割り出していくコトになるので、結構面倒ですし、キーのズレが起こると動きもズレてしまいます。 これはキーフレームとエクスプレッションを組合せれば解決できます。 おはようございます！ デザイン講師ブロガーのセッジです！ 扇子が開く仕組みはエクスプレッションを使った方法です！ 設定ができれば2つのレイヤーだけで動きを作ることができるんですよ！ 年始のご挨拶の記事でも書いているように、illutratorで扇子の素材を作っていたときから、これが開くアニメーション

謹んで新年のお祝いを申し上げます。 昨年は何かとお世話になり、また当ブログの記事をご覧いただき、誠にありがとうございました。 本年もどうぞよろしくお願い申し上げます。 2017年2月に開設したこのブログですが、途中中断はあったものの100記事を越え、新年を迎えることができました。 本来は三日坊主的な性質の私ですが、なんとかモチベーションを維持して11ヶ月続けることができたのは、応援していただいている皆様のおかげだと考えております。 本日はご挨拶代わりに大晦日から動画を作っておりましたので、ご覧いただけますと幸いです。 皆様のご健康とご多幸をお祈り申し上げます。 Greetings 2018 当ブログの素材を使用した動画になります。 扇子の記事を書いている時に、扇子が開くという表現をやってみたくなりまして、 そこに少し力を入れています。

今回は以前用意したクリスマス素材を使ってアニメーションを作成しました。 ベルのアニメーションの作り方になります！ 実はクリスマスイラスト素材を作っていたときからずっと、この素材を使ったクリスマス動画を作ろうとを考えていました。 私のアバターのカラーリングもサンタっぽい感じというのもありますし、動画のプレゼントということでご覧いただけるとうれしいです。 ベルの素材を読み込もう それでは今回使用する素材のダウンロードからお願いします。 Google Drive : Bell_Animation 以前、ベルの素材を作った時は前後関係がおかしくなるということで、「ベルと振り子は一緒に3D化する」とご説明しましたが、今回はベルと振り子は別々に動かすため、個別に3D化して、別レイヤーにしておきます。 こちらではベル本体を「bell」、振り子を「clapper」とネーミングしています。 ※説明では横に2

線エフェクトを使用したラインアニメーションの作り方、後編です。 前回はillustratorで作成した素材から、マスクパスを作成しました。 今回は動きの付け方について解説します。 ラインアニメの元ネタを必要としますので、もしあなたが初めてこの記事をご覧になったとしたら、ぜひ前回の記事をご覧ください！ おはようございます！ デザイン講師ブロガーのセッジです！ 前編に引き続き、ラインアニメーションの作り方ですね！ 今回はいよいよ線が動いていきますよ！

モーショングラフィックというジャンルの動画で、線が描かれていくアニメーションをみかけることがありませんか？ いわゆる、ラインアニメーションというものですね。 と、あなたもお困りなのかもしれませんね？ AfterEffectsで制作する場合はいくつか方法がありますが、 今回はその一つ、線のエフェクトを使用したアニメーションの作り方を解説します。 今回の記事は線のタネの準備編です。 何も用意していない状態ではラインアニメは作れませんので、まずはこの一回目の記事を良く読んでくださいね！ おはようございます！ デザイン講師ブロガーのセッジです！ 実は今回解説する「線エフェクトを使用したラインアニメーション」は昔からある方法です！ この場合、イラレと連携するとラクなので、イラレも起動しておいてくださいね～！ 【この記事は2018年7月6日に更新されました】 素材準備編 まずillustratorで素

前回の講座はサッカーボールがバウンドする位置のアニメーションを解説しました。 今回は図形が回転、拡大するアニメーションの作り方を解説します。 この記事を読めば、あなたはAfterEffectsの回転・スケール(拡大縮小)のアニメーションの基本をマスターすることができます！

9月に振り返り的な記事を書いて、次は1年後かなーなどと書いていたのですが、ブログ運営をするにあたって、節目で振り返る記事を書くのも良いことだというのも聞きますし、またちょうど本日は2017年10月31日ですので、月の節目も兼ねて振り返ってみます。 いろいろブログ指南書的なものを読んだりしますと、「100記事書いて1人前のブログ」といわれます。そうすると50記事というのは半人前ブログというところでしょうか。 50になった時の記事は以下になります。 元々はillustratorの使い方ブログで始めようと思ってブログを開設しましたので、illustratorの記事で50を飾れたのは良かったと思っています（笑） 本来サッカーボールの作り方をやる予定は無かったのですが、記事中にも書いてあるようにそのあとのAfterEffectsの記事でただ単色の円が上下するよりは、この方が良いかな、それなら唐突にサ

アニメ作れたら面白そう！ でもやっぱり作るの難しそう…やっぱりパラパラマンガみたいに1枚ずつ描くのかな…？ アニメーション作品は多くの人々の労力と時間を費やして作られるモノです。 長年、アニメ制作者の負担を軽くする方法が模索されている分野でもあります。 アニメを作れるというのは特殊技能そのものとも言えるでしょう。 本来であれば誰にでもできるコトではありません。 けれども単純な動きであれば、実は誰でもすぐ作れるようになります。 そのためには、デジタルアニメーションの基本であるキーフレームについて理解する必要があります。 そこで、今回はボールがバウンドする動き＝位置が変化するアニメーションを作ることで解説していきます。 今回使用したサッカーボールはillustratorで作成しています。 よろしければこちらの記事もあわせてご覧ください。

おはようございます！ デザイン講師ブロガーのセッジです！ 今回はAfterEffectsのワークスペースなどについてです！ Adobe AfterEffects(Ae)とは、 ビジュアルエフェクトとモーショングラフィックス、アニメーションなど、ゼロから映像をデザインするためのソフトウェアです。 AfterEffectsはPCでの映像制作の経験がある人なら一度は触ったことがあるソフト、と言っても過言ではありません。 正直に言えば、Adobeのソフトの中でも難しい部類に入るソフトになります。 しかし、これもセオリーを理解すれば実は全て基本は同じだというコトが判ってきます。 ただ、それでもAfterEffectsの初心者には、何がなにやらわからない部分は多いかもしれません。 そこで今回はAfterEffectsのワークスペース(作業環境)と各部の名称について解説します。 AfterEffects