クリエイティブにアートとグラフィック by Charlotte Smith 猫のGIFアニメ制作

激安CDKの購入ならこちら http://www.xwin.jp/

作者のシャーロット・スミスさんは、フランス・パリ在住のグラフィックデザイナーで、デザインの基礎をパリで学びました。　やわらかい色と居心地の良い雰囲気からもインスピレーションを得ていて、彼女の専門は手書き、ペーパークラフトとイラストレーションです。　彼女の作風を生かしつつ、パリが持つ活気を伝える作品として、今回猫のGIFアニメを制作頂きました。　GIFアニメ制作の過程とその解説のチュートリアルをご覧ください。

「私はずっとパリに住んでいます。　この街の雰囲気と活気が大好きです。」と、スミスさん。「私の一番好きな時間は夏の夕暮れ時です。　夕日が沈むとたくさんの種類の色や光がそれぞれの建物から溢れ出します。　町中の街灯も一気にライトアップされ、さらに幻想的になります。　パリの街を歩くと、ライトアップされたそれぞれの窓が、美しいパリの風景の一部になったところを楽しめるんです。　私は最初シンプルなイラストでの作品を考えましたが、アパートの窓から見える最高の眺めを想像していた時、私の大好きな猫が頭に浮んだんです。　猫の動きを表現するため、GIFアニメの利用を思い付きました。」

Step 1

最初に美しいパリの夜景制作のため、写真のパッチワークを作ります。　私は２つのステキな画像素材をShuterstockで見つけました。最初の画像の屋根は十分なディテールがあり、さらにもう少しパリ風の雰囲気を加えるために、２枚目の画像から空とエッフェル塔を加えることにしました。

180x240mmのファイルを新しく作成して、１枚目で再現したくない画像の部分を削除します。　なげなわツールを使用して、不要な選択箇所を削除していきます。

２枚目の空の大きさが十分ではないので、テクスチャの品質を保ちながら、引き伸ばす領域を長方形の選択ツールで選択し、[編集] > [コンテンツ認識スケール]に移動して希望のサイズに引き伸ばします。

Step 2

これで基本の背景ができました。　次のステップのためにラフスケッチを描いておくと、作業が楽になります。（画像の上にイラストを描く際に、ガイドとして役立ちます。）　新しいレイヤーを作成し（cmd + shift + N）、描画を始めます。　ブラシツールを使用して画像を描画し、スポイトで色を選択します。

ヒント：毎回メニューに行かなくても、ブラシのサイズを変更するには、ctrl + altキーを押しながらマウスを左から右に動かして幅を選択できるので便利です。　また、ブラシツールを使用する場合は、altキーを押してスポイトツールに直接アクセスすることもできます。

細かい部分を描いた後、その下に色の付いたレイヤーを入れていく方法がオススメです。　建物やエッフェル塔から始め、最後に空の部分を描いて行きます。　ラフスケッチは、描画の進歩を確認するために使うと、作業漏れを確認することができます。　私はこの作品にスケッチと同じような感じを表現したかったので、こちらでダウンロードしたブラシを使用しました。

“シーンを描いたら、新しいレイヤーを作成し、グラデーションツールを使用します。　「カラーから透明」に設定されていることを確認して、空の下から1/4に移動します。　レイヤースタイルで、カラーオーバーレイを選択し、一番濃い青を選択します。ブレンドモードを乗算に設定します。
”

新しい塗りつぶしレイヤーを作成し、[フォトフィルター]、[カラー]の順に選択し、インディゴを選択してしだいに暗くなるようにします。　好きな色ができるまで、いろいろ試してみてください。　これが完了したら、明るさ/コントラストのレイヤーを作成することで、シーンをさらに暗くすることができます。

Step 3

背景のイラストが完成したら、アニメーションの作成に移ります。これには、（ウィンドウ>エクステンション> Adobe Exchange）にアクセスして、無料のプラグインをダウンロードする必要があります。　検索バーに「AnimDessin2」と入力し、開発者: Stephane Barilのものをダウンロードします。　(ウィンドウ>エクステンション> AnimDessin2）が表示されるようになります。　一番下のメニューを開きます。

まず新しいタイムラインを作成します。　あなたが描いたすべての静的要素は、すでにタイムライン上に配置されています（これがレイヤーの名称が重要な理由です）。　このプラグインは、フレームごとのアニメーションを作成するためのものです。ここでは建物を背景として使用し、シーンの個々の部分をアニメーション化します。　タイムライン上のレイヤーのサイズは、表示される時間の長さに対応します。

Step 4

Step-4では猫のアニメーションを作成します。　別のファイルで、猫の走る動きを分解してイラスト化しました。　それぞれの絵は別のレイヤーにあります。　猫を走らせたい場所に、あなたのタイムラインガイドを配置してください。

下のGIFファイルは猫の動きを重ねてアニメーションにしたものです。　もし貴方が絵があまり得意でない場合は、Shutterstockから猫のシルエット素材集をダウンロード、加工してご利用ください。

次に「cat」という名前の新しいビデオグループを作成します。　これにより、レイヤーパネルとタイムラインパネルにレイヤーフォルダが作成されます。シーンに最初の猫を置き、新しいフレームを作成し、2番目の猫を配置します。現実的な動きを生み出す正しい場所に猫を配置するために、あなたは前の猫がどこに置かれたかのゴーストイメージを示す「オニオンスキン」を利用できます。　（オニオンスキンを使用する際は、上で作成したナイトシーンのエフェクトを非表示にすることをお勧めします。）

猫の残りの画像についても同様の作業を行い、動きごとに異なるレイヤーを作成します。　新しいビデオグループ（「cat shadow」という名前）を作って、猫の影を作成し、その動きに合わせて、猫自身のできるだけ多くのレイヤーを作ります。　ブラシストロークの不透明度レベルをいろいろ試してみましょう。

Step 5

猫が最初の窓を通過する部分に、タイムラインガイドを配置します。　「window 1」という名前の新しいビデオグループを作成します。　ブラシツールを使用して、最初の窓のウィンドウペインを一番薄い黄色で塗りつぶします。　これが完了したら、ブレンドモードを「ハードライト」に設定します。

次にanimdessin2パネルで、「window 1」グループに新しいフレームを作成し、最初のフレームと同じ長さになるようにサイズを変更します。　ウインドウペインを薄い黄色で塗りつぶし、ブレンドモードを「ハードライト」に設定して、最初のレイヤーからステップを繰り返します。これを2回行います。　これは異なる4つの画像を作成することで、光にまぶしさの効果を与えます。

タイムラインの終わりに達するまで、これらの4つのレイヤーを複製します。　2番目と3番目の窓にも、猫が通り過ぎるタイムラインガイドを置いてください。

Step 6

それぞれの窓にさらに輝きを与えるために、新しいビデオをグループ(「window glow」という名前)を作成して、ブラシストロークを約10%に下げて、窓の周りを塗ります。　前と同じように、4つの異なるレイヤーを作成し、それらをタイムラインの最後に複製します。　また、窓を通過するたびに猫に反射するライト用の別のビデオグループを作成することもできます。

Step 7

エッフェル塔について、窓と同じように光の輝きを追加します。　輝く光のために、新しいビデオグループ（「Eiffel lights」）を作成し、各層の異なる場所にライトを配置して4つの異なるレイヤーを作成します。　そして同様に最後までそれらを複製します。

さらに輝きを追加するために、レイヤースタイルに移動し、「光彩(内側)」（不透明度20%/ノイズ40%）を選択します。また、「カラーオーバーレイ」を選択し、薄い黄色を使用します。　最後に「光彩(外側)」を選択し、75%の不透明度と15%のノイズのオレンジを使用します。　これでスタイルを作成し、屋根から下りている光の列にも使用できます。

Step 8

空については、別のビデオグループを作成して、「stars1」と名前を付けます。　星を描いて、タイムラインの最後に複製します。　ここで2つ目のレイヤーの不透明度を70%、3つ目を40%というように0%になるまで下げます。　そして0%から30%、そして逆を行います。別のビデオグループ(「starts2」)を作成して、最初とは異なる別の星のセットを描きます。　今回は不透明度設定を逆に行います。　0%から始まって100%に上がり、元に戻ります。　これは1つの星のセットが0%のときに、もう一つが100%であることを意味します。

Step 9

作品を制作しながら、素早くアニメーションをレビューするには、animdessin2パネルの再生ボタンを押すか、スペースキーを押してビューの開始、停止をしてください。　GIFを保存するには、cmd+alt+shift+Sを押してください。　GIF（jpgではない）を選択すると、保存前に作品のプレビューを見れます。　これで完了です！

尚こちらの猫のGIFアニメ制作ガイドで使用した素材のダウンロードは、下記の画像をクリックして下さい。

Shutterstockはクリエイティブでハイクオリティーな素材、ツール、サービスを提供するグローバル・テクノロジー企業です。どんなプロジェクトにでも対応できるよう、弊社のライブラリーには豊富な画像素材および動画素材が用意されています。　また、画像編集のヒント集やツール、無料エディタ、チュートリアル、チーム・エクスペリエンス、企業向けオファーなど、クリエイティブなプロジェクトのために様々なリソースも提供しています。

Shutterstockのクリエイティブ・コミュニティーで自分の経験やプロジェクト、ノウハウなどを共有してみませんか？　#GetCreativeをキーワードに参加してくれるクリエイティブ・リーダーをお待ちしています。コンセプト・スケッチや作品、ヒント、インスピレーションを得た背景の説明などと一緒に　getcreative@shutterstock.com までメールでご応募ください。　弊社ブログでのご利用ガイドとして紹介、もしくは次回以降のShutterstockグローバル・チャレンジで特集されるかもしれません！

XWIN.JP十周年祝い

http://www.xwin.jp/
XWIN.JP十周年祝い、千万円のソフトウェアを全部無料大サービス？！ＣＤＫも貰える！
毎月上位50名のお客様にわ、1つのソフトウェア（永久使用権）を0円で獲得できます（自分で選ぶ可）
xwin.jpとは？
xwin.jpは主にソフトウェアの売買をしているサイトです、Windows、office、Adobe、Autodesk等
xwinでしか体験出来ないサービス、サイトをクリックすると色々分かると思います。