メガネフレームショップ曽我：店主のブログ

アニメーションGIFでバナーの試作品を作ってみました。
570*379ピクセルで360KB

256色、ディザ最大、つまり最高画質。
コマは凝らずに各コマ同じ5秒づつにする。

さて、現在のウェブサイトにおいては、いかがなものか。

実は数年前、3年くらいアニメーションGIF専門のサイトを運営していた経験があります。
携帯の待ちうけやメール送着信画像用の画像専門サイトでした。
それ以来、時代の流れとともに兄GIFはほとんど作っていなかったですが、ふと思うところあって作成。
もっと（かなり）複雑なものも作れるのですが、サイズが大きくなるのと、うるさいということで、シンプルなもの試作してみました。今、ウェブ用動画というと、フラッシュですが、こんなのは使えるかな？
アニメーションGIFは動いてるけど単なる一枚の画像ファイルなのでSEO的にもいいと思うんだけどな。
でも、そもそも、動画ってどうよっていう議論になるんだろうけど。

おまけの試作品。
画面の切り替わりにフレームディレイの早いぼかし画像をいれてみた。よけいうるさくなったかも。
コマ数増やしたので、小さくしたけど、サイズはアップ。

枯葉。イラスト風です。
いったんＨＤＲにした画像をポスタリゼーション化、輪郭抽出をオーバーレイ、さらに減色してＧＩＦにする。

エラそうに人に教えに行ったりして、お前は作れんのかよー？ということで、
範囲選択も何もしない、超簡単なバナーの作成例の紹介です。
ビャーっとやってガーっとするだけです。

素材は先日福島潟イベントでの小林佳史さんのライブで私が撮影した画像を使用しました。
勝手にバナー作っちゃいましたが、おこられるかな？

まず、合成する3枚の画像を開きます。

左上の画像に右の画像をビャーっとドラッグアンドドロップしてレイヤー（通常）を作ります。
シフトキーを押しながらその画像をマウスでテキトーな大きさに縮小します。
レイヤー上と下の画像の境目をエッジのぼけた丸ブラシでガーっとテキトーに消しごむで消します。
(消しゴムのブラシの透明度を落としてやると、境目が滑らかになります。）

次に、下の画像をシフトキーを押しながら、ドラッグアンドドロップ。
そうするときちっと隅が合います（二つの画像が同じ大きさの場合）
このレイヤーは比較（明）にして、明るいところだけ重なって見えるようにします。
レイヤーの透明度を少し下げて下の画像とブレンドさせてなじませます。

で、出来たのが下の画像。
不自然さをなじませるため、ほんの少しだけソフト系とシャープ系のフィルター
をかけたコピーレイヤー画像を薄くブレンドします。（しなくても自由）

次に文字を入れて、新規レイヤーに範囲選択を作ってグラデーションで文字の背景を作ったり、
レイヤースタイルで影を作ったりして見やすくします。
（背景はなくてもあっても自由）

出来上がり。

＊PC画面はPhotoshopですが、エレメンツでも同じ手順で作成可能です。

ご質問はコメント欄へ。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

以下、補足説明用

１．いずみやさんの質問用画像。

まるで囲んだ部分がエッジのぼけた丸ブラシ（ソフトブラシ）。

先回のまたまた続きです。
今回はフォーカス合成したものをさらに縦パノラマ合成してみました。

下の画像のようにサイドバーのバナーなんかに使おうかななんて思ってます。

実は５０枚以上のＲＡＷ画像から１枚に合成する、「フォーカス合成＋縦パノラマ合成＋ＨＤＲ」という、とんでもなくばかばかしいものを作ってみたのですが、絵的に気に食わなかったのでとんかちでつぶしてゴミ箱に入れました。再チャレンジしてよいものが出来たら、アップします。

前エントリーでやった、異なるピントの複数画像を最適な部分のみ合成し、マクロレンズにもかかわらず被写界深度が広いパンフォーカスな画像を作る・・・という手法「フォーカス・コンポジット（ピント合成）」の続きです。

少し習作してみました。以下作例です。
どのような撮りかたがよりインパクトがあるのか、模索中。

缶コーヒーのおまけのおもちゃです。パンフォーカスになると、なんだか大きなおもちゃに見えてくるから不思議です。
下は通常のマクロ撮影（絞りＦ８）です。

サギ草の花です。これはちょっと判りにくいかもしれませんが・・。
花の部分のみフォーカス・コンポジットしてみました。マクロっぽくない自然な感じに、それでいて、マクロならではの質感が出たと思います。
下は通常のマクロ撮影（絞りＦ８）です。

補足；もちろん、通常の背景をぼかしたやわらかいマクロ撮影のほうが写真としては美しいかもしれません。だた、これはいろんな用途を考えての多様な表現方法のバリエーションのなかのひとつの写真だと思っております。