ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
状況説明系はもっともシンプルでシステム寄りのものになるため、表示アニメーション自体シンプルな場合がほとんどです。 状況説明が使われるのはRPGやMMOなど情報過多なゲームに多く、使用されるシーンは状態異常やアイテムを拾った時、攻撃に付加効果がついた時など画面では伝えにくいことを説明することが多いです。 動きは主にベルトコンベアのように機械的なアニメーションやフェードインアウトで終わる場合も多く、目立たせずに情報だけを伝えることが目的の場合に使用されます。 威力表現 インゲーム中の文字で最も重要でゲームによって様々な表現になる演出です。 文字の出し方は、連続で何発与えたかを視覚的に表現するのもバラバラに見せたり重ねて見せるやり方や、数値を加算して結果だけ出すやり方など様々な表現があります。 回復を表現する時は文字を緩やかに上へ表示することでHPの上昇を表現するなど、ここでの文字表現だけで一つ
ブランディングデザイン会社neccoでデザインの仕事をしながら、7月からAfter Effectsの練習を始めました。 最初は全然使い方がわからず、「難しそうだしやめとこうかな、やっぱりデザインに専念した方がいいのかな」と思うこともありましたが、1ヶ月間練習を続けるうちにどんどん楽しくなってきました。 ▼はじめの頃に作ったもの モーショングラフィックス使いたい 案件のためにAfter Effect練習中🌱 楽しい〜!もっと上手になりたい☺️✨ pic.twitter.com/AzvZ1U1Pue — fuyuna🌷necco Designer (@fuyuna_design) July 5, 2020
今回は後編ということで、モーションデザインの作り方を実例を元に紹介していきたいと思います。実際のサイトに使うには色々足らないですが、After Effectsで制作する際のテクニックを交えて解説していきます。 この記事はこんな方におすすめです モーションデザインに興味がある Webサイトのアニメーションを自分で作ってみたいデザイナー After Effectsを触ってみたい また、制作にあたってこちらのサイトを参考にさせていただいております。様々なモーションの作例を周期表に見立てて紹介していて、ダウンロードもできるためどのように制作すれば良いかも見れるようになっています。 画像引用元:モーション周期表 Webデザインでモーションデザインを利用する機会 デザイナーがモーションデザインをWebデザインに取り入れる機会としては以下があるかなと思います。 デザインの提案 エンジニアとの共有 動画ま
こんにちは! 株式会社Rabeeでデザイナーをしています、nanamiです🌿 デザインにおいて「伝えたい情報を意図した通りに見せる」ことは最重要ポイントであり、且つ難しいポイントではないでしょうか。 そんな「伝わるデザイン」の特徴の1つとして挙げられるのが、見ている人に見せたい情報を適切に見せるよう目線をコントロールできていること。 これはWebサイトのデザインでもバナーのデザインでも共通して言えることですが、今回は特に目線の動きが重要になる動画のデザインを見ながら、そのポイントをまとめてみました! 悪い例 〜私の初心者作品を添えて〜他人の失敗例を見ると学びになることって多いですよね…🧐 ということで、良い例をご紹介する前に、まずはNG例を見ながら説明をしたいと思います。 今回はNG例として、私が学習の一環としてとあるサービスの紹介動画を作成した中からシーンを抜粋しています。 私が作成
この記事は、ドット絵に関する記事をみんなで書いて、12月1日からクリスマスの25日まで毎日公開する、ドット絵Advent Calendar 2023 最終日の記事になります。 今年は3つも会場があります!もともと記事を読むのが好きで企画したのでたくさん読めて幸せでした。表も裏も端も全部読んでますよ~。 ご参加くださったみなさん、ありがとうございました!! はじめに…みなさんこんにちは、Muscatです。 突然ですが、今日はとあるモノを皆さんに広めるためにこの記事を書いています。 ――これは数年前 とある先輩がいいモノ使っているという話を聞いたのがきっかけでした。 元々なんとなく興味があって、軽い気持ちで始めました。 使っていくうちにその魅力に取り憑かれて 今ではもうソレ無しでは生きていけなくなってしまいました… 警察に怯えながらも、日々ソレを使って過ごしています。 ・きっかけは先輩が使って
動画編集やビジュアルエフェクト(VFX)の分野で定番となっているAfter Effects。その多機能さやプロ仕様の品質が評価される一方で、コストの高さや操作の難しさが課題です。 「After Effectsは高くて手が出ない」「無料で使える代替ソフトはないの?」と感じている方も多いでしょう。そこで本記事では、初心者からプロまで使える無料の代替ソフトを5つご紹介します。それぞれの特徴や活用方法、After Effectsとの比較も交えて詳しく解説します。 After Effectsとは? After Effects(以下AE)は、Adobeが提供するモーショングラフィックスとビジュアルエフェクトに特化した動画編集ソフトです。映像編集の現場で広く使われており、映画、テレビ番組、広告、YouTube動画など、さまざまな分野で活用されています。 After Effectsの主な特徴 モーショング
まず先にUI演出と書いていますが、UIアニメーションとUI演出の二つ違いを書いておきます。(UI演出という言葉を勝手に作っているので自分の解釈の説明です) ・UIアニメーション ユーザーの知りたい機能や視線の誘導、快適さを追求する動き ・UI演出 世界観のようにゲーム自体の表現や期待感のようなユーザーの感情を動かす動き ゲームはアプリと違い、機能性だけを追求するものではないため、UI演出が大切になります。 アプリはユーザーへ快適と便利を提供しますが、ゲームはエンターテイメントを提供するものでアプリとは仕様が全く異なります。 だからこそ、機能重視のUIアニメーションはとても大事ですが、UI演出もゲームにとってはとても大事な存在になっています。 最近までNG系UIアニメーションなどでわかりやすくシンプルにしていくことを書いていましたが、この記事では演出もゲーム作りの一つで大事な要素ということに
ホーム After Effects, CGソフト, ツール&プラグインしっかりピッタリ張り付いてくる!!あらゆる形状を完璧にトラッキングするAfter Effectsプラグイン「Lockdown」が凄く革命的!! 2020.04.22After Effects, CGソフト, ツール&プラグインしっかりピッタリ張り付いてくる!!あらゆる形状を完璧にトラッキングするAfter Effectsプラグイン「Lockdown」が凄く革命的!! あらゆる形状を完璧にトラッキングするAfter Effectsプラグイン「Lockdown」の紹介です!! 販売しているのはアメリカ ニューヨークでデザインや3DCG、ゲーム制作、プラグイン制作と多方面に活躍しているChris Vranos氏!! 「Lockdown」はかつてない程の高精度なトラッキングで対象の表面に画像などを貼り付けられるAfter Eff
PSDで画面を作っていきます AEに持っていく時にPSDをそのままAEに入れるので、動かしたいパーツだけレイヤー分けをしておくと使いやすいです。 なるべくシンプルにしておくのがおすすめで、フォルダーは使わずにレイヤーだけの中身になっているようにPSDを整理しておくと簡単にAEで作業ができます。 AE準備編 ワークスペースを整える まずはAEをひらくと不要なウインドウも多いので、最低限のウインドウだけにします。 ウインドウ → ワークスペース → 最小構成 余計なウインドウが消えてすっきりしました。 そして、ここから使うものだけをさらに厳選します。 画像で黒く塗りつぶされているものだけをまずは使うと混乱しなくてよいと思います。 そこから徐々に使える領域を広げ、エフェクトに手を出すと無限の可能性が待っています。 AEの構成は4つに分かれていて、まずは各ウインドウの簡単な説明をします。 ・プロジ
おつかれさまです。デザイナーのみやです。 みなさんAdobe After Effects(以下:After Effects)のエフェクト機能を使ったことはありますか? エフェクトとは特定の処理があらかじめ用意されているAfter Effectsの機能のことで、写真を粒子状に散乱させたり、雨が落ちた地面の波紋を表現したりなど様々な表現を簡単に設定することができます。 私はAfter Effectsを業務で使うことは多々あるのですが、Webサイトでの動きの提案だったり、lottieでの実装前提だったりして、あまりエフェクト機能を使っていませんでした。 そこで全部一度使って遊んでみたところ、After Effectsにはデフォルトでかなり多くのエフェクトが用意されていることがわかりました。 その中でもアイデア次第で面白くできそうなものを、一部実例付きで紹介していきます。 独学でつまずいていません
温厚な僕ですが、高校生の頃はかなりのツッパリで、牛丼にかける醤油の量であらゆる人にマウントをとっていた時期がありました。 もちろん無敗です。 「最強」という称号と引き換えに腎臓にダメージを追いましたが無敗です。 とまあ武勇伝はさておき、どうも、サプライズ栄作です。 今回のnoteはAfter Effectsを今から学ぼうとする方や、初めたけどまだわからないといった方向けの内容です。 タイトルにもあるように初学者向けにアフターエフェクッの再生リストを作ってみました。 After Effectsでの映像の作り方は、先人の方々が時間を割いてチュートリアル動画をアップしてくださっています。感謝しかありません。 そして、ここだけの話、なんと無料で見れます! とはいえ、色んな人のチュートリアルがあります。 「なにから学べば良いのか?」「この方法であっているのか?」など 色々な疑問もでてきます。 また多
おつかれさまです。デザイナーのみやです。みなさんはデザインをクライアントに提案するときに、アニメーションの話はどこまでしていますか? Webでは一口にデザインといっても、ビジュアルだけではなく情報設計やインタラクションなども含まれます。コンセプト、デザインカンプ、戦略などの提案でも必要十分ですが、ホバーやオープニングアニメーションを合わせて提案することでより完成時のイメージが伝わりやすくなります。 アニメーションサンプルを作るメリット わかりやすく説明できるため 文字より絵、絵より動画で伝えた方が、ぱっと見での情報量が段違いに変わってきます。 言葉だけでイメージを伝えるのはとても難しいことです。頭の中のイメージを言葉やジェスチャーだけで相手に完全に伝えることはできません。擬音一つとっても同じものをイメージしているとは限らないため、よりわかりやすく伝える手段を用いる必要があります。 伝えるた
デザインやイラストの静止画を思い通りに動かせたら楽しいのに、どんな動きをつければよいのか分からない、そんな制作者・クリエイターにぴったりなAfter Effectsの解説書を紹介します。 案件で動画やアニメの依頼が増えてきたというWeb制作者やイラストレーターの人にお勧めの一冊です。IllustratorやPhotoshopは使えるけど、動画やモーショングラフィックスはまだという人に特にお勧めします。 本書は、9/28に発売されたばかり! さまざまなデザイン書でお馴染みのPower Design Inc.様が制作されたイラレのデザインを映像クリエイターの著者様がAfter Effectsで動きをつけた実践的な解説書です。動画用のデータの作り方をはじめ、After Effectsの基本操作、さまざまな動画・モーショングラフィックスの制作手順を学べます。 解説はAfter Effects初心者
「調べるの面倒だから誰か簡単にまとめてくれないかなー」 「『 Motion Tools Pro』の使い方、簡単でいいから誰か教えてくれ…_(┐「ε:)_」 と思ってる人も多いのではないでしょうか!? そんなズボラなお悩みを解決すべく 今回は 2023年1月13日に『 Motion Tools 2』のアップグレード版としてリリースされた『 Motion Tools Pro』の機能や使い方を徹底解説していきたいと思います。 UIも一新されて新機能の追加やツールパネルのカスタマイズ性もかなり向上してるので 旧バージョンである『 Motion Tools 2』との違いも含めて解説していきます。 なが〜い記事ですが…ぜひ最後まで読んでいただけると嬉しいです。 *『Motion Tools Pro』のインストール方法やアクティベート(アカウント認証)方法については以下の記事をご参照ください⬇︎⬇︎
はじめに この記事は、Visual Studio Codeに、Adobe ExtendScript Debuggerプラグインをセットアップする手順を共有するためのものです。 前提とする条件 この記事は以下の環境を想定しています。 macOS 10.14.6 Visual Studio Code 1.38.1 ExtendScript Debugger 1.1.2 記事を読む前に、お手元の環境をご確認ください。 想定する読者 この記事は以下の読者を想定しています。 Visual Studio Codeを利用したことがある JavaScriptの知識がある ExtendScriptを利用、開発したことがある この記事ではVisual Studio CodeおよびExtendScript開発の解説はしません。 ExtendScriptとは ExtendScriptとは、Adobe社のCreat
神はいる!!!! After Effectsでちょいちょい遊ぶことが増えてきて、日夜プラグイン販売サイトである「aescripts」に張り付いている私です、こんばんわ。 After Effectsいいですよね、かっけえ映像が作れたりする汎用性が高いツールです。個人的にAfter Effectsの強みって、ユーザーが制作した多種多様なプラグイン群だと思うんです。あれ作れねぇかなあ!! って時に検索すると「こいつで一発だよ」って出てきて、しゅしゅごい・・・ってなります。 プラグインなしでも勿論同じ物が作れるでしょう。しかし、プラグインがなくて作るのが1日かかって少しでも修正がかかるとさらに1日かけたりするのか、かちゃぽんぱでワンクリックでいけるのどっちがいい? って言われたら私は後者ですね!!! 先人たちのでかい肩に乗るのが私の主義。 というわけで紹介していきましょう。有料のものが多いです。ま
↓以前にこんなツイートをしました。 以前Aeのスクリプトにハマりいくつかまとめて購入しましたが「これ買わなくても良かったんじゃない?」というのがちょこちょこあります。無料スクリプトやいくつかの機能がまとまったものがあり、無駄に購入してしまいました。twitter情報を元に、代替えの利くおすすめスクリプトを紹介していきます。 — eizou|映像クリエイター🇹🇭大人ノマド (@eizou_world) May 17, 2019 という方は、ここで紹介するものを使えば間違いないです。 もしそれでも足りなければ購入すれば良いかと思います。 無駄に有料スクリプトを購入しないように、無料で入手できるものだけを紹介しております。 ・無料 ・Name Your Own Price ※自分で価格設定(0ドル〜)が可能。 どれも機能自体は素晴らしいですが、初心者向けに使用した時の操作性と機能の覚え易さ
皆さんはクリエイター必見の最強ツール「Loupedeck Creative Tool」(Loupedeck CT)をご存じでしょうか。 フィンランドに本社を置くLoupedeck社が開発した、PhotoshopやIllustrator、Lightroom 、Premiere、After EffectsなどAdobe製のアプリのほとんどに対応したハードウェアコントローラーデバイスです。 割り振られたキーを押したり回したりするだけで、様々なショートカットやアクション、マクロなどが実行出来る次世代のクリエイター必須ともいえるデバイスです。 日本では2020年3月12日に発売されたばかりなので、まだ知らない方も多いのではないでしょうか。 今回はそんなLoupedeck CTをご提供いただいたので、機能や特徴などをご紹介させていただきます。 冒頭でもご説明しましたが、Loupedeck CTはAdo
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
After EffectsでLottieデータを作成する際、 画像が使えない問題からどうしてもパスのデータを生きた状態で AE上に持ってこないといけなかったのですが AEはパスの癖がややあってイラストレーター上で作る方が早かったり 同じパスデータを使いたいということがありました。 色々調べたところ2種のインポート方法があるようです 20201019追記:有料ツールを使えばイラストレーターのレイヤー名+パス全てをそのままAE移植できるよう。overloadという有料ツールをプロの方は使っているそう 1. 1つのオブジェクト(パス)をコピペでAEヘ持ってくる 2. いくつか重なっているオブジェクトをまとめて1つのオブジェクトとしてAEに読み込ませる 一つ目のパスをコピペする方法 とりあえず単体のパスだけ欲しい時には便利です 1つのオブジェクト(パス)をコピペでAEヘ持ってくる 1. まずIll
AfterEffectsで素材をループさせたいなと思う時があると思いますが、 初心者が実際にやってみると簡単にできない罠があります。 【ベストな例】(手打ち勢は全員これを使ってくれ) 昔twitterに書いてあった内容の引用です。 ループさせたいコンポを選択後に下記のexpressionを記述 loopOut(type="cycle"); if(time==key(numKeys).time) {key(1)}else{loopOut(type="cycle");}; gifが見切れてますが、 右クリックでタイムリマップ後に、エクスプレッションをコピペしてるだけです。 あとで説明するやり方のようにキーフレームを打たなくてもちゃんとループします。 loopOut(type ="cycle")%(timeRemap.key(2)); でも可能なようです。こっちの方が短いので覚えやすい? 自分の
Adobe After Effects 41 今回はテキストやシェイプのトランスフォームにコピペするだけで 簡単にバウンド効果を加えることができるエクスプレッションと、その使い方を解説していきます。 *以下のようなバウンドをテキストやシェイプに簡単につけることができます⬇︎⬇︎ バウンドをつけることができるエクスプレッション バウンドをつける方法はめちゃくちゃ簡単です!! バウンドをつけたいテキストやシェイプに以下のコードをコピペするだけです⬇︎⬇︎ amp = 0.8; freq = 3; decay = 10; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){ n--; } } if (n == 0){ t = 0; }else{ t = time - key(n).time; }
今回は『CC Particle World』を各項目の機能をご紹介します。 このエフェクトは機能がありすぎて最初は大変混乱しますが、 一個一個紐解いていくと「あーなるほど」と自分に落とし込むことができます。 お時間のある時に一つひとつの設定を触りながら、 確認してみるのも良いかもしれないですね。 CC Particle World各機能紹介 ▶Birth Rate パーティクルの発生量を調整 ▶Longevity(sec)パーティクルの寿命を調整(でてきてから消えるまでの時間) ▶Producer パーティクルが発生する位置と大きさの調整 ・Position X X座標の位置を設定 ・Position Y Y座標の位置を設定 ・Position Z Z座標の位置を設定 ・Radius X X方向への大きさの設定 ・Radius Y Y方向への大きさの設定 ・Radius Z Z方向
皆さん、動画編集たのしんでいますかー!おそらくこの記事を読んでくださっている方の多くは、動画編集をはじめてまだ日が浅く「Adobe Premiere Pro(プレミアプロ)」をはじめとする専用アプリでの慣れない作業にイライラしてしまうこともあるのではないかと思います。わからないことに頭を悩ませる時間ってもったいないですよね。問題はサクッと解決して、ご自身の作品に集中しましょう! 今回ご紹介するのは、After Effectsでつくるテキストアニメーションです。 見本のテキストアニメーションの作成手順を今すぐ知りたい方は、目次の2番をクリック。部分的に難しいと感じる点があるかとは思いますが、会得できると表現の幅がぐんと広がりますので、ぜひじっくり取り組んでみてくださいね。この記事の目次はこちら! テキストアニメーションを作ってみよう! Premiere Proで行う動画編集ではテロップやタイ
2020-07-03 14:28 2021-01-29 15:46 動画編集 動画にカラオケテロップを入れる編集方法【AfterEffectsで色変わりの文字】 Adobe AfterEffects 一見簡単に見えるものも、いざ導入しようとすればどうやればいいかわからない、そんなこと多いのではないでしょうか? 今回はAdobe AfterEffectsを使った方法をご紹介します。些細な編集が動画のクオリティや見やすさを格段にアップさせるため、動画編集に興味のある方はぜひ参考にしていってください。 ※完成イメージ カラオケテロップの作成方法 今回は白文字を黄色文字に左から右へと色変わりする方法をご紹介します。 そのためには、まずベースとなる白文字が必要なので、文字ツールを使用してプロジェクトへ配置しましょう。サンプルでは「カラオケ風のテロップ」を配置します。 文字を重ねる ベースとなる文字を
個人的におすすめするプラグイン9選 After Effectsおすすめのプラグイン・スクリプト9個を簡単な解説つきで紹介しています。 キャラクターアニメーションのリギングに使えるものを多く紹介していますので、ぜひ参考にしてください! 1: EasyCopy https://aescripts.com/easecopy/ キーフレームのイージングや値をコピーできるスクリプト 同じキーフレーム数であれば複数のレイヤーに適応できます。 かなり時短になります。効率化したい場合にオススメ! 2: Cloners+Effectors https://flashbackj.com/product/cloners-effectors こちらのデモ版に入っている、Cloners Shape SplitとCloners Text Splitは テキストやシェイプをバラバラに分解してくれます。 その際アンカーポ
ブログ、ゲームUI演出(https://gameanimation.info)は2019年12月末に開設し、その時のブログの内容はゲームアプリの演出GIFアニメ資料サイトとして作成していました。 なぜブログを始めたか UIアニメーションの勉強を怠っていたのと、怠惰に慣れ始めて向上心をなくしつつあったため、ブログをきっかけに、自身の知識量を増やし、業界全体の参考サイトとなるブログを立ち上げてインプットアウトプットを増やしていこうと思い、ブログを開始しました。 12月/1月/2月 ブログ開設 アクセス:Twitterで宣伝して1日10人ほどアクセス 12月-1月は毎日ゲームアプリを触って参考になりそうな演出をアプリごとにまとめてブログを更新していました。 ログボ、クエスト開始、リザルト、ガチャなど、様々な演出を集め、業務の役に立つように、同じ業界の方の参考になるように資料収集をしていました。
自分自身の備忘録がわりに、動く矢印のアニメーションをAfter Effectsで作る2つの方法についてまとめておきます。 その1 - ブラシアニメーションひとつ目はブラシアニメーションを使った方法から。 1.新規コンポジションを作成 2.レイヤー>新規>平面(この時、選択した色が背景の色になります)を選択。ぺンツールでパスを描く(パスを描く方法は他にもあるけど、今回はとりあえずこれで) 3.エフェクト>描画>ブラシアニメーションを選択するか、エフェクト&プリセットパネルから「ブラシアニメーション」を選択。 4.ブラシアニメーションの詳細を設定(画像は初期値) ブラシのサイズ:ブラシの太さを設定。 ブラシの硬さ:ブラシの鮮明度を設定。ぼかしたい時は数値は小さく。 ブラシの不透明度:ブラシの透明度を設定。 ストロークの長さ(秒):ブラシの軌跡の設定。0に設定すると軌跡が消えずに残る。数値が大き
素材の置き換え(プロジェクト全体から一括差し替え) この方法では、プロジェクト全体で利用されている素材を一括して全て差し替えます。1つの素材が様々なコンポジションで利用されており、それらの全てのレイヤーを一括して差し替えたい時に有効な方法です。 置き換えたい素材の選択 まずプロジェクトパネル内にある素材の中から、置き換えたい素材を選択します。希望の素材をまず選択していないと置き換えが出来ませんので、まずは正しく素材を選択しましょう。 フッテージの置き換えメニューを表示する 1つ1つの素材の事をAfter Effectsではフッテージと呼びます。「フッテージの置き換え」というのが、素材を置き換えるという意味のメニューになります。メニューは素材を右クリックする事で表示されます。 置き換え作業 ファイルを選択後「右クリック>フッテージの置き換え>ファイル」と進むと「フッテージを置き換え」ダイアロ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く