乱歩酔歩--Random Walk official blog-- -236ページ目

AE 解剖しちゃうわ―⑤影を放出するタイトル

はいはいまたAE解剖に戻ってきました遊木です。
急に寒くなってきたせいかクシャミが止まらない日々を生きております。
ところで台風もっと早足にならないですかねホント。

おれは日曜のスパークに行きたいんだあああああああ




はーい、ではサクッと解剖です。
※↓↓の動画の後半の奴です。


⑤影を放出するタイトル


<コンポジション内レイヤー構成>


(奥)
・背景…AE
乱歩酔歩

・影…AE
乱歩酔歩

・タイトル…psd
乱歩酔歩
(手前)



はい、今回はベースの背景や影や動きの効果はAfter Effectsで、メインのタイトルロゴはPhotoShopで作っています。

まず背景から。
まず平面レイヤーを作り、[描画]→[フレアレンズ]を入れます。このあとレンズの種類を[105mm]にして、画面全体が白くなるように中央の位置で拡大します。このあと、[ウィグラー]機能を使い、微妙に光が揺らめくように設定します。

次にタイトルを浮遊させます。
今回はPhotoShopでデータを作りました。レイヤースタイルをいろいろいじって試してみましょう。拡張子はpsdです。

ここで今回で一番大切な作業が出てきます。
このあと作る影とタイトルは、常に同じように動かなくてはいけません。
そのためにこの段階で、もう一度タイトルのデータ(psd)をタイムライン上に読み込んでおきます。つまり、今はタイムラインに背景用の平面レイヤー+タイトル+タイトル(2)がある状態です。
ここでこの2つのタイトルを親子関係にしておきます。

次にタイトルを浮遊している感じにゆらゆらさせるのですが、今回は[ウィグラー]ではなく[エクスプレッションの追加]を使います。これを利用し、タイムラインの[位置]に[wiggle(1,10)]と打ちます。(もしかして数値は違うかも)これで揺らめいている感じになりました。

次にズームイン/アウトの効果です。
まず[スケール]の数値をいじり、単純なイン/アウトの効果を入れます。ただこれだと画像がくっきりしているのでスピード感がありません。そこで[モーションブラ―適用]にチェックを入れます。これと[イージーイーズイン/アウト]と合わせると、画像がぶれたり、スピードが変わったりしてリアルな動きに見えるようになります。

最後に放出している影です。これは先に用意していたタイトル(2)をいじって作ります。
まず、CS6の場合[描画]→[CC Light Burst2.5]、CS5.5以下の場合[Generate]→[CC Light Burst2.5]を使用します。このあと、色や光源をいじって画面に馴染ませたら終わりです。
事前に親子関係にしていたのでこの影はタイトルと一緒に動きます。それで、タイトルが影を放出しているように見えるわけです。


これは見た目は地味ですが裏ではちょっと複雑なことをしているので、意外と勉強になりました。






台風去れぇえええ


aki

「言の葉の庭」感想

遊木です。
最近はずっとAfter Effectsの話ばっかりだったので、ここでちょっと先日見た作品について書こうかと。

見よう見ようとは思っていたのですが、先送りにしていた新海誠監督『言の葉の庭』をようやく見ました。実は、新海監督の作品って『彼女と彼女の猫』以外しっかりと見たことがなかったのですが、何気なくYouTubeで↓↓を見たら無性に見たくなってしまい即行動。偶然『言の葉の庭』だけは手元に円盤があったので、思った瞬間PCに突っ込んで再生しましたよね。その間約5秒。







正直、感想を書くのがとても難しい作品でした。
多分私の文章力では伝えたいことの1割も表現できないと思います。
気になる人は、ぜひ作品の方をしっかりと見て下さい。


以下、ネタバレも含まれますので注意。






一言で表現するのなら、「美しい物語」だと思いました。
良い話とか、おもしろいとかではなく、ただただ透明で、美しい話だなぁと。

登場人物の設定などは、フィクションとしては決して珍しいものではありません。
夢を追って努力する少年と、女子生徒からのイジメにあって疲弊した女教師。


秋月の、苦労しているからこその夢へのひたむきさや、名前も歳も職業もずっとわからないままだった雪野へ対する、15歳ならではの不格好で、それでもひどく純粋な心。
雪野の、大人だからこその苦悩や慰め、立ち振る舞い、葛藤…27歳になっても全然賢くなれない自分の弱さへの無自覚な諦め。

それらが、絶妙なニュアンスで表現されていたと思います。



結論から言うと、これは2人が結ばれるための物語ではありません。

歳の差の問題か…というと私は個人的に、そうではないと思っています。そもそもこの2人の間に生まれたものは、「憧れ」だったのか「恋」だったのか「癒し」だったのか…もしくはもっと他の、それこそ名前も付けられないようなものだったのかもしれない。
でもそれらは、おそらく「15歳の、ひたむきに夢を追っている秋月」と、「疲弊して、一人で歩く練習をしていた27歳の雪野」だからこそ生まれたものだと思います。

もっと歳が近かったり、教師と生徒の関係じゃなかったり、違う出会い方をしていればとか、そういう要素を付加していったら、多分この物語の様な2人にはならなかったのではないかと。

このとき、この瞬間、このタイミングで出会った2人だからこその物語だと感じました。

まさに彼らが「それぞれの道を歩くために練習をしていた物語」だったのだと思います。




個人的に、靴を作ることが好きな秋月に雪野が、「私はあそこで一人で歩くための練習をしていた…靴がなくても」と返すのが印象的でした。

結局ラストまで2人の関係を明確に表現するような描写はありませんでしたが、その曖昧で、不明瞭で、不明確なつながりこそが、この物語の「美しさ」を創り上げているのではないかと思います。
ただどんなつながりであろうと、秋月が雪野に「惹かれていた」ことも、雪野が秋月に「癒されて」いたことも事実で、そして真実だったのだろうなと。




『彼女と彼女の猫』を見た時から、新海さんの世界観は好きだなぁというか、私の好みの波長だったというか、「自分が作ってみたい」と思うものにすごく似ていたので、今回は本能に従って即行鑑賞して良かったです。機会があったら是非みなさんも見てみて下さい。



aki

【オラ、試しにサイトつくってみただ! #02】ザックリとこうなっています

須々木です。

連日更新です(ドヤァ。

タイトルを見ての通り、昨日の日記の続きの内容になっているので、読んでいない人はそちらを先にどうぞ~。





さて、今月16日の日記の後半でもあっさり触れていたのですが、本日は、HTMLとかCSSとかJavaScriptとかjQueryって、実際どんなもんなんだよ? どんなことができるんだよ?みたいなことについて、改めて。。

全然知らない人は、言葉で説明されてもよくイメージできないと思うので、実際に昨日のサンプルページで説明していきましょう。

※以下、基本的に、全然知らない人向けの内容です。



まずは復習ですが、16日の日記の後半をすごく簡単にしてもう一度書くと……

■ HTML … 構造を指定する。
■ CSS … デザインを指定する。
■ JavaScript … ブラウザ(閲覧者のコンピューター)で実行する動作を指定する。
■ jQuery … JavaScriptを、よりシンプルな操作でよりリッチに動作させる。



今回のサンプルページでも、

 ① HTMLで構造を指定。
 ② CSSでデザインを指定。
 ③ jQueryでデザインの追加指定や演出の追加指定。


という流れでつくられています。

そうやってできたものが、昨日のサンプルページです。


では、せっかくなので、完成形だけでなく、途中段階もお見せしましょう。







① HTMLだけの状態

サンプルページ:その1(HTMLのみ)

乱歩酔歩-サンプルページ:その1_2_サムネ


ブラウザによって差はあるかもしれませんが、見出しタグ、著作権情報などを書いてあるあるアドレスタグ(IEであればおそらくイタリックになっている)、あとはリンクが張られている箇所をのぞいては、ただの普通サイズの黒い文字が並んでいることと思います。

あと、リストタグのところは、シンプルな「・」をつけられたリストの表示になっていると思います。

これらは、完成版から、CSSとjQueryの指定を削除しただけで、コンテンツ自体はまったくいじっていません。

完全にHTMLだけの状態であり、構造のみを指定した状態です。

※例えば、アドレスタグで指定されている箇所がイタリックになったりするのは、アドレスタグに対して制作者(僕)がデザインの指定をしていないので、ブラウザが定めたルール(ブラウザによる既定のCSS)により勝手にデザインされたということです。





② HTMLとCSSの状態

サンプルページ:その1(HTMLとCSS)

乱歩酔歩-サンプルページ:その1_3_サムネ

一番最初の見出しのところの背景色などが指定され(今回はグラデーションをかけています)、アニメ制作会社のリストがカラフルになっています。

※アニメ制作会社のリストの角が、丸くならずにただの直角になっている人は、うまく表示できていません。ブラウザの設定の「互換表示」を確認してください。

他にも、文章中のリンク部分に点線が表示され、ポインターをあてると色が反転したりされるようになっています。

そして、最下部が著作権情報になっていて、HTMLだけのときには表示されていた文章が消えています。

詳しい仕組みはとりあえず気にせずに、「HTMLだけの状態」と「HTMLとCSSの状態」を見比べてみましょう。

見比べて表示の異なるところは、すべてCSSにより指定したデザインが反映されています。





③ フルバージョン(HTMLとCSSとjQuery)
 ※昨日のサンプルページの状態(完成版)

サンプルページ:その1(フルバージョン)

乱歩酔歩-サンプルページ:その1_サムネ

ページを開いたときに水平線が現れて上下に広がる演出、リンクの円形の整列、「Right」「Left」ボタンを押したときの動作など、「HTMLとCSSの状態」と異なる部分は、すべてjQueryによって追加されたものです。

なんとなく、動きが増えました。








大きくザックリこの3段階でつくっていきますが、どの段階でもかなり劇的に変化します。

各要素や演出に関する説明はここでは省きますが、見比べてみると、なんとなく雰囲気はつかめるのではないでしょうか?

さて、最後にポイントをまとめればこんな感じかと。

 ・ HTMLはシンプルに構造のみ(デザインはしない)
 ・ デザインはできる限りCSS(特に静的な演出)
 ・ さらに高度なことはjQuery(特に動的な演出)



ちなみに、可能な限りCSSやjQueryでデザインをしていくことで、単純なデザイン性、機能性以外にも「メンテナンスのしやすさ」「ページサイズの軽量化」という利点があります。

今回のサンプルページ(HTML、CSS、jQuery)でも、関連するすべてのファイルのサイズは合計157KBです。

圧倒的軽さです。






sho


【オラ、試しにサイトつくってみただ! #01】とりあえずさらしてみる

須々木です。

先週のブログで「とりあえず何かつくるかー」的なことを言ってしめた割に、そのあと忙しくてなかなかできませんでしたが、昨日はちょっとゆとりがあったので、ようやくちょちょいとつくってみました。


ではさっそく……の前に。。



みなさん、ブラウザの確認をしましょう。
サンプルページの動作環境は、

 Internet Explorer 9 以降
 Firefox 18 以降
 Safari 6 以降
 Google Chrome 24 以降


です。



特に、Internet Explorerの人は、アップデートは手動なので、やった記憶がなければ古いバージョンの可能性があります。
サンプルページは、バージョン8以前のものだとうまく表示されません。
公式サイトから最新版(バージョン9 or 10)にアップデートしましょう。


※使用しているOSの都合でIE9 or 10にアップデートできない場合は、Google Chromeをダウンロードして使用するのが良いでしょう。






さてみなさん、準備は整いましたかね?

ではでは↓↓↓



サンプルページ:その1













ちゃんと表示されていますか?

ちゃんと表示されている人には、こんな感じに見えているはずです。

$乱歩酔歩-サンプルページ:その1_サムネ


もし、カラフルなバーが水平に積み重なっているようだったら、ダメなパターンです

ブラウザが最新のものであるか確認をしましょう。

あとは、JavaScriptを許可していない人は、許可してください。

もしブラウザのバージョンに問題がない人の場合、Internet Explorerであれば、ブラウザ上部のURLのすぐ右あたりにある「互換表示」でも押してみましょう(正直、これが一番可能性高い)。

カラフルなバーが円状に整列すればOKです(たぶん)。





というわけで、1ヶ月弱の努力の賜物であるサンプルページ、適当にいじってやってください。

サンプルページの仕組みなどには、また改めて触れたいと思います(初心者でもすぐできる程度なので、こなれた人は見ればわかると思いますが……)。


ちなみに、このサンプルページ、画像は一枚も使っていません。







sho


ブライト!

最近朝が急に寒くなった気がするよ…!どうもこんばんは霧島です。
今朝起きたらパジャマの裾をズボンにインしてて笑った。

先日、色彩講習なるものを受けてきました。色が人々に与える影響やらパーソナルカラー診断やら。

思えば私はどうにも色彩というものに苦手意識があって、大学時代からその分野とはできるだけ離れて生活してきたのですが(←)、やっぱりちょっと取り入れてみたりすると効果は絶大なわけで。

講習前半の色についての色々は、正直大学での必修授業の方が面白かったけど、簡易的なパーソナルカラー診断は、実際に自分に色を当てて似合う似合わないをみてもらえるので、なかなか参考になりました。

人はまずブルートーンとイエロートーンに別れるそうです。これは髪、肌、瞳の色をそれぞれA~Dに分類、その中から一番近いものを選択していき、最終的にはそのA~Dの数の違いで判断します。判断方法は簡略化されているのかもしれませんが、これが素人目には結構難しい。

パーソナルカラーは、持って生まれた色素で判断するので、地毛や地肌の色が重要です。女性は特に、メイクしていたり最近はカラコンも珍しくないので、パッと見ではなかなか判断しかねるかもしれないですね。
かく言う私もカラーリングしてるので地毛の色は記憶の彼方なのですが、悪戦苦闘した結果どうやらイエロートーンに分類されるようです。

ブルートーン、イエロートーンが判明したら、次はそこから同系色の色見本2枚ずつを交互に見比べ、どちらがより本人の顔色をよく見せるかなどを基準に選別していきます。
ちなみにブルートーンは、パステルサマー、ブリリアントウインター、イエロートーンはブライトスプリング、ディープオータムという分類になります。

自分で鏡を見ながら、同じグループのメンバーに見てもらいながらでどちらがより自分をよく見せる色かを判断していきます。
こういうところで私の感性の鈍さが出ているのだと思いますが、一度見ただけでは判断しかねる。しかし何度も見ているとどちらも似合っている気がしてくる。困ったものです。
講師の方曰く、瞳が輝いて見えたり肌がくすんで見えたりなど微妙に変化するそうです。これは目で見て慣れるしかないのかもしれないですね。

そのようにして分類していくと、私はブライトスプリングというものになりました。(結局自己診断というかほぼ先生に頼りっぱなしだった)

ここまでわかると、それぞれの分類に属するカラーがわかり、それが各々のパーソナルカラーとなるわけです。簡単に言えば「似合う色」ですね。
これは例えば「私には赤が似合う」ということではなくて、彩度や明度の違いで、明るい赤は似合うけど、暗い赤は似合わない、というようなことです。

洋服はもちろんですが、女性の場合これをメイクにも生かせます。例えばチークやリップ。色を変えるだけで肌が白く見えたり、瞳が輝いてみえたりするのでこれは是非活用したいところです。また、ブルートーンの人は下地にイエロー系を使うと肌がくすんでみえてしまうそうです。

人が目から得る情報は本当に膨大で、数時間の講習ではありましたが生活の中で随分活かせることが多いこと、またいかに影響されているのかがわかりました。
これを機にカラリストの資格勉強とか…してみようかな…と思う今日この頃。

パーソナルカラーについて気になった方は、パーソナルカラー診断で検索すると診断用のサイトがずらっと出てくるので是非調べてみてください。鏡とにらめっこしながら。
ちなみに友人は自己診断でディープオータムだと思ってたのに実際はパステルサマーだったというのでまぁ…参考までに。←

したらば今日はこの辺で!
rin