記事本文
画像にドロップシャドウを付ける
今日は私用で休暇を取った上、ちょっとメール待ちで時間が空いたので簡潔なネタをひとつ。 デジカメの写真や web ページのスクリーンショットを weblog の記事中に掲載するときに、そのまま貼るよりもドロップシャドウで影付き状態にしていた方が立体感が出ていい感じですよね。 と言いつつ hxxk.jp では 2007 年 2 月現在、 Firefox 2 にインストールしている 10 のアドオンと 4 つの greasemonkey スクリプトのスクリーンショットで初めて採用したわけですが。
こういうのって、探せばオンライン上でドロップシャドウ加工をしてくれる API などがあるのかもしれませんが、ざっと探した限りでは見当たりませんでした。 我らが (?) ごろすけ特製の Polaroize なんていうものもありますが、ちょっと違いますし。 また、オンラインサービスならサービスの廃止やサーバの停止などで使えないこともあるので、ローカルで出来るテクニックも覚えておこう ! できればフリーソフトで ! というのがこの記事の趣旨です。
フリーソフトでドロップシャドウを付ける
まあ「フリーソフトで」と銘打ったのは、最初は「ローカルのソフトウェアでドロップシャドウ」と書こうと思っていたら Lucky bag::blog: リサイズしてドロップシャドーをつける Photoshop 用アクションというナイスな記事が見つかったので、差別化を図るためにフリーソフトで、と。
まあ最近 Adobe Photoshop Elements 4.0 を入手したので、本当はその使い方を覚えるべきなのかもしれませんが......。 とりあえずこれまでに私が慣れ親しんだフリーソフトでのやり方をメモ。 事前に準備する環境は次の通りです。
- Windows 用フォトレタッチフリーソフト JTrim
- Firefox (Firefox 以外のブラウザでも構いませんが、一定のサイズでスクリーンショットを作りたい場合は Firefox がお勧め )
- Web Developer 日本語版 ( 同じく、一定のサイズでスクリーンショットを作りたい場合に )
JTrim+Firefox+Web Developer 日本語版でドロップシャドウ付きのスクリーンショットを手軽に作成
ここでは、最終的に「ドロップシャドウ付きの状態で 800*600 ピクセル」なスクリーンショットを作る手順を紹介します。 ちなみに、スクリーンショット取得に使ったページはフォト： Np - wu's blog で、今後の展開のキーになったりならなかったりするページです。
Firefox のダウンロードページから Firefox をダウンロードしてインストールします。インストール済みの場合は次のステップへ。
Web Developer 日本語版のダウンロードから Web Developer 日本語版をダウンロードしてインストールし、 Firefox を再起動します。インストール済みの場合は次のステップへ。
Web Developer ツールバーのサイズ変更から幅と高さをリサイズする(E) を選択します。
設定画面で追加をクリックし、幅が 795 ピクセル、高さが 595 ピクセルの設定を作成します。概要 ( 設定名 ) は任意ですが、分かりやすいものにしましょう。
795*595 ピクセルの設定ができあがれば設定作業は完了です。
スクリーンショットを取りたいページを開き、先ほどの 795*595 ピクセルの設定でリサイズし、 WinShot などのキャプチャリングソフトでスクリーンショットを作成します。
この時点ではまだドロップシャドウ無しの 795*595 ピクセルのスクリーンショットです。
JTRim で 795*595 ピクセルのスクリーンショットを開き、表示(V)から背景色(B)背景色を設定します。
背景色を設定します。これは画像の下地になる背景色に合わせましょう。もしかしたら透過にできるのかもしれませんが、私は白でやっています。
イメージ(I)から影をつける(D)を選択します。
元の画像サイズと、オフセットとぼかしの大きさを勘案してドロップシャドウを付けます。もしドロップシャドウを大きめに付けたい場合は、スクリーンショットを取る段階で遊びを大きくしてください。
ドロップシャドウを付けた上で、 800*600 ピクセルの大きさのスクリーンショットの完成です。
