【フォトショップ】ネオンライトの点滅アニメーションのつくり方
この記事では、フォトショップをつかって、チカチカと点滅するネオンライトのアニメーションを作成します。 無料デザイン素材を利用することで、誰でもリアルなネオンエフェクトを表現できるスグレモノです。 豊富なオプションがあるぶん、使い方がすこしややこしかったので、詳しく見ていきましょう。 このチュートリアルを進めることで、以下のようなネオンアニメーションを、手軽にデザインできます。 ワンランク上のネオンライトのつくり方と一緒に活用するのがおすすめ。 ネオンアニメーションに必要なもの このチュートリアルでは、無料デザイン素材 Animated Neon Font を用い、フォトショップで作成していきます。
短期連載 第1回<br/>バンダイナムコスタジオ アニメーションの流儀<br/>BNSモーションキャプチャ シオスタジオ探訪
2016/07/28 短期連載 第1回 バンダイナムコスタジオ アニメーションの流儀 BNSモーションキャプチャ シオスタジオ探訪 『アイドルマスター』、『鉄拳』、『テイルズオブ』シリーズなど、多様なジャンルのゲームで知られるバンダイナムコスタジオ（以降、BNS）。そのゲーム開発において、アニメーション制作を支えてきたスタッフたちの「流儀」を、全3回の短期連載でお届けしよう。 ※本記事は、月刊「CGWORLD + digital video」vol. 216（2016年8月号）掲載の、短期連載 第1回『バンダイナムコスタジオ アニメーションの流儀』を再編集したものです。 20年以上の経験に裏打ちされたモーションキャプチャの技 連載第1回では、BNSの石田直秋氏、佐俣康喜氏の仕事であるモーションキャプチャと、その流儀を取り上げる。両氏は同じスクールで3DCGのためのプログラミングを学び、20
どういう謎技術だよ！ 101キャラで「マリオカート」をやってみた動画が大乱闘すぎる
YouTubeで「Super Mario Kart...with 101 players!（101人でスーパーマリオカート）」という動画が注目を集めています。2月16日に投稿された動画で、再生数は150万回に迫る勢い。 内容は文字どおり、101体のキャラクターたちがスーパーファミコン版「マリオカート」でデッドヒートを繰り広げるという非常にカオスなもの。 注目すべきは「大乱闘スマッシュブラザーズ」を彷彿（ほうふつ）とさせる圧倒的な物量とごった煮感！ ソニック、ネス、ピカチュウといったおなじみの面々に加え、ドラゴンボールの孫悟空やパラッパラッパー、果てはテトリスの棒（！？）まで、内外問わずさまざまなキャラクターが出演。プレイヤーのキノピオを中心に、小ネタを挟みつつ熾烈（しれつ）なレースを演じるという、任天堂ファンならずともニヤリとしてしまう約3分間のムービーとなっています。 スタート画面。もは
SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
ついにGIFに代わる新しいアニメーション画像フォーマットが誕生か
X Window System上で動作するデスクトップ環境「GNOME」の開発者であるJasper St. Pierreさんが、GIFに変わる新しいアニメーション画像フォーマット「XNG」を開発し、長らく使用されてきたGIFアニメーションに取って変わる可能性があります。 XNG: GIFs, but better, and also magical | Clean Rinse http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/ GIFはシンプルなアニメーションに使うのに適していますが、LZW圧縮形式は少し古く、カラーパレットの色の数にも256色という制限があります。GIF以外のアニメーションフォーマットにはAPNGやMNGがあるものの、サポートするブラウザが限定されているなど、ユーザーを満足させるものに
このスタイリッシュな映画CMに隠された秘密は何でしょう？
技術の進歩は凄まじいですな。 夜の街を駆ける1台のバイク…。実は｢The Message｣と呼ばれるショートフィルムに向けて作られたティザー広告なのですが、ある秘密があります。何とこの動画、全てCGIを使って作られているんです！ つまり、この映像は全てコンピュータを使ってゼロから作られてたアニメーション映像ということになります。 こんなに滑らかだと思わず実写映像と勘違いしてしまいそうですよね。昨今の映画業界が実写の代わりにCGIを多用しているのにも頷けます。 こちらはメイキング映像。こうやって作られています。ふーむ。 Casey Chan - Gizmodo SPLOID［原文］ （daiya）
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
感性を鍛えよう！動きが気持ちいいUIアニメーションまとめ
こんにちは。MUUUUU.ORGの中の人こと、 Quoitworks（クオートワークス）のムラマツ（マツムラではありません）です。 ブラウザの進化により昨今のwebサイトでは色々なアニメーションが実装できるようになってきました。そこで今回は動きに対する感性を磨き、「もっと気持ち良い感じに」というクライアントの要望をスマートにかなえる事ができるように、 セクシーだと思ったUIアニメーションを、エイヤエイヤとまとめてみました。（すみません！サイト負荷が高くサーバーがダウンしてしまうので、一部リンクのみになってます） line25.com https://dribbble.com/shots/1448379-Lookbook-nu-app https://medium.com/ui-ux-articles/3d1b0a9b810e http://thedesigninspiration.com/
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
東京23区のgifアニメに新展開〜 映画のオープニングのようなクールな表現がスゴイ!! : きよおと-KiYOTO
6月22 東京23区のgifアニメに新展開〜 映画のオープニングのようなクールな表現がスゴイ!! カテゴリ:デザインAwesome http://blog.livedoor.jp/clock510/archives/1819027.html東京23区のgifアニメに新展開〜 映画のオープニングのようなクールな表現がスゴイ!! 東京23区のカラフルでカッコイイ"区章gifアニメーション"（gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない）に、なんと早くも新しいシリーズが登場! →23ku.tumblr.com 千代田区・中央区・港区・新宿区 まるで映画のオープニングを見ているようなイメージ。それぞれの区の特徴も織り交ぜてあり、東京23区の多彩なキャラクターがわかりやすいgifアニメーションとなっています。UKYO Inabaさんの作品とは異なる表現なのです
gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない : きよおと-KiYOTO
6月20 gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない カテゴリ:Awesomeデザイン http://blog.livedoor.jp/clock510/archives/1818437.htmlgifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない モーションデザイナーUKYO Inabaさんの作品 東京23区の区章をカラフルでスタイリッシュなgifアニメーションで表現した斬新なアイデア。 普段、目にする状態だといかにも紋章といった感じで堅苦しく、道路標識などで無意識に見ていても、あまり記憶に残らないことが多いですが、これなら興味をもって身近な存在と感じられそうです。（6/21追記：コチラもおすすめ→東京23区のgifアニメに新展開〜 映画のオープニングのようなクールな表現がスゴイ!!） uky0178(UKYO I
道路標識の棒人間が逃走中!? （動画）
走ってますね～標識くん 標識出身なだけに走るフォームがカッコイイなぁ。なんて思いながら観ているビデオですが、この道路標識君に命を与えるのは本当に大変だったようですよ。 ベースとなる57個のステンシルを使って、位置調整、計測をしたうえで、5313枚の写真を撮影しました。この作業には、数えきれないぐらいの時間がかかっているんです。 それでは、このカッコかわいいアニメーションのメイキングをご覧ください！ 本当に大変だったんだなぁ。 ね。好きだからこそ出来る作業ですよね。この美術工芸にちょこっとでも注目してもらえてサンキューです。 [LikeCool] －Brian Barrett（原文／junjun ）
HTML5ってすごいわ！ この8bitアニメーションを見てちょうだい！（動画あり）
HTML5ってすごいわ！ この8bitアニメーションを見てちょうだい！（動画あり）2010.08.03 15:00 どん！ どん！ どどどん！ HTML5って本当に魔法のようなのですね。この下のアニメーション動画は、HTML5を使って作られているのです。水の反射なんて、そりゃもうキレイなもんですよ。動画にあるのは1部だけですが、ネタ元で全シリーズ36シーン公開しています。ネタ元必見です！ 大きい画で見ると8bitらしさがよくわかります。 こちらの作品はMark Ferrariさんがイラストを、Joseph Huckabyさんがコーディングを担当。コーディングは8bitカラーシンクをHTML5で使ったそうです。 すごいなぁ、HTML5。この夏のキーワードは5だな！ [Effectgames] Jesus Diaz（原文／そうこ）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ディズニーもドリームワークスも。実はCGアニメーターって演技派俳優なんです。というのがとても良く分かる映像。 | CGトラッキング 世界のCGニュースを集めてみる
スタジオカラーがエヴァンゲリオン次回作を含む制作スタッフ募集。アニメーション課題をスタジオカラーの中の人が挑戦した結果… | CGトラッキング 世界のCGニュースを集めてみる
ディズニーアニメの12の基本原則をグラフィカルに紹介するGIF画像
新着記事
