読者です 読者をやめる 読者になる 読者になる

masahirorの気まま記録簿

個人的な出来事や意見、生活などの記録を思うままにブログに記録

デル株式会社
マウスコンピューター/G-Tune

デイリーポータルZのテレビのような画像を作ってみる

Web
@niftyデイリーポータルZ:テレビのようなホームページ
http://portal.nifty.com/2006/06/06/a/

screenshot
この記事で使われていた「テレビ風画像」。結構面白そうだったんで自分も作ってみた。
コンセプトはもちろん「簡単に」。そのうち専用ソフトなどが登場するだろうけどね。

画像に走査線をつけてみる

ここにテレビの走査線をかぶせてみる。そんなの画像処理ソフトで一発だぜ、と思ったがその機能が発見できなかったので、1ピクセルの白線を手で引いて上からかぶせた(透明度は20%程度)。あと、色もコントラストを強めてあります。

とあるが、とてもそこまで根気のいる作業はやる気がおきない。
方法を調べてみると、何通りかやり方があった。

  1. PhotoShopを使う
    • メニューから「フィルタ→スケッチ→ハーフトーンパターン(パターンタイプ:線)」
    • 走査線を入れるフィルタプラグインを入手する(後述)
  2. PaintShopを使う
    • メニューから「効果→テクスチャ効果→ブラインド」
  3. フリーソフトでやりくりする

今回は、一番ネックとなる「走査線」の作業を誰でもやれるよう、「フリーソフト」で実践。*1


まず、インストール作業。

  1. フリーのマルチメディアビューワ「IrfanView」日本語版を入手する。
  2. 次に、「InfanView」公式サイトより、Pluginのセットをダウンロードする。
  3. これらをインストールする。
  4. PhotoShop用の走査線を入れるプラグインをダウンロードする。
  5. 解凍したファイルより、「OLD\pvtr.8bf」を、InfanViewインストールディレクトリ内の「Plugins\Adobe 8BF\」フォルダにコピーする。
    • 標準では「C:\Program Files\IrfanView\Plugins\Adobe 8BF
    • ※元々PhotoShop用プラグインなので、PhotoShopでも使えます。その場合は、Photoshopのプラグインフォルダへ。

ここからが走査線を入れる作業。

  1. InfanViewを立ち上げ、目的の画像を読み込む。
  2. メニューから「画像→フィルタ→Adobe 8BF フィルタ(またはCtrl+k)」を選択。
  3. 初回は何も表示されないので、「Add 8BF filter」ボタンを押して、先ほどの「Plugins\Adobe 8BF\」を選択する。
  4. フィルタ一覧が更新されるので、「VTR...」を選択し、ダブルクリック。
  5. 調整画面が表示される。ここはお好みで。基本的には「Ghost」を0にすれば、あとはデフォルトでそれなりになる。

これで走査線入り画像の出来上がり。

走査線入り画像に文字を重ねてみる

これもいくつか方法がある。

  1. PhotoShopを使う
  2. PaintShopを使う
  3. フリーのペイントソフト「PictBear」を使う
  4. ホームページ作成ソフト等の画像編集ソフトを使う

PhotoShopやPaintShopに精通している人はこれらで十分。しかし、僕にとっては慣れてないので難しい。「フリーソフトで」を考え色々探してみたが、いいのが見つからなかった。「PictBear」も、フリーで高性能だが、文字入力に関してはあまりバリエーションが多くない。
他の方法として、サイトのボタンを作成したりする際使用する「ホームページ作成ソフト等の画像編集ソフト」は、ソフトを買ったら付いてくるおまけ的なツールであるが、文字の装飾や複数画像の重ね合わせ(主に結合部分の綺麗さや作業の手軽さ)に長けている場合が多い。今回は、「IBMホームページビルダー」を持っていたので、付属している「ウェブアートデザイナー」を使用した。
ソフトの使い方、画像へ文字の入れ方についての解説は以下サイト参照。

一番難関と思われる走査線だけでもできれば、文字の合成は使い慣れたペイントソフトを使えば比較的簡単にできると思う。

いざ実践

今回は、手持ちの写真の中からこれを使ってみる。

はにわ君です。


このままでは縦長でテレビサイズに見えないので、上下をカット。


まず、上記手順に従ってInfanViewで走査線を入れる。


ウェブアートデザイナーを立ち上げ、先ほどの画像を挿入する。
同じくウェブアートデザイナーで文字のパーツを作成する。


参考までに、各文字は「縁取り:普通」で縁取りをし、場所に応じて「DFP超極太楷書体」「@DF平成明朝体W3」「DFG魏碑体W7」を選択。これらは、手持ちのフォントで色々変えてみて、しっくり来るやつを選ぶしかない。
そしてこれらのパーツを重ね合わせ、「ファイル→Web用保存ウィザード」で画像と重なった文字をJPEGに出力する。



完成。


走査線のプラグインに「Autointerlace」を使った別バージョン。


といった感じでそれなりのものができた、と自分では思っているが、果たしてそれっぽく見えるかな?

参考までに

id:ryuzi_kambeさんの人力検索質問に感化されて書いてみた。

ただ、

  • デイリーポータルZのような、白色の走査線にできなかった。
  • できるだけ入手しやすいフリーソフトでやってみようとしたけど、一部市販のツールになってしまった。(質問の意図とは違うが、個人的な方向性として)
  • PhotoShopやFireworksが使いこなせない自分。
  • もっと楽な方法があるはず、というより専用のツールが登場しそう。
  • そもそも、はにわのテロップにセンスがない。

などといった理由で、あんまり自身がないのと質問の本題であるPhotoShopやFireworksでのやり方を書いていないので、回等は控えトラバのみとしました。

*1:僕自身がPhotoShopやPaintShopをあまり使いこなせてないのも理由だけど