2007-02-13 アーカイブ

画像にドロップシャドウを付ける

今日は私用で休暇を取った上、ちょっとメール待ちで時間が空いたので簡潔なネタをひとつ。 デジカメの写真や 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 で、今後の展開のキーになったりならなかったりするページです。

1. Firefox のダウンロードページから Firefox をダウンロードしてインストールします。インストール済みの場合は次のステップへ。
2. Web Developer 日本語版のダウンロードから Web Developer 日本語版をダウンロードしてインストールし、 Firefox を再起動します。インストール済みの場合は次のステップへ。
3. Web Developer ツールバーのサイズ変更から幅と高さをリサイズする(E) を選択します。
4. 設定画面で追加をクリックし、幅が 795 ピクセル、高さが 595 ピクセルの設定を作成します。概要 ( 設定名 ) は任意ですが、分かりやすいものにしましょう。
5. 795*595 ピクセルの設定ができあがれば設定作業は完了です。
6. スクリーンショットを取りたいページを開き、先ほどの 795*595 ピクセルの設定でリサイズし、 WinShot などのキャプチャリングソフトでスクリーンショットを作成します。
7. この時点ではまだドロップシャドウ無しの 795*595 ピクセルのスクリーンショットです。
8. JTRim で 795*595 ピクセルのスクリーンショットを開き、表示(V)から背景色(B)背景色を設定します。
9. 背景色を設定します。これは画像の下地になる背景色に合わせましょう。もしかしたら透過にできるのかもしれませんが、私は白でやっています。
10. イメージ(I)から影をつける(D)を選択します。
11. 元の画像サイズと、オフセットとぼかしの大きさを勘案してドロップシャドウを付けます。もしドロップシャドウを大きめに付けたい場合は、スクリーンショットを取る段階で遊びを大きくしてください。
12. ドロップシャドウを付けた上で、 800*600 ピクセルの大きさのスクリーンショットの完成です。

Firefox 2 の設定やアドオンや Greasemonkey スクリプトを設定した

Destroy target="_blank" with Firefox 2 で そろそろ Firefox 2 に移行しないとなあ...... と書いたまま、ずっと Firefox 1.5 のままだったのですが、ようやく 2.0.0.1 に設定を移行しました。

Firefox 1.0 アップデート前に拡張をメモやマシンを新調する前に拡張をメモで Firefox の拡張機能についてのメモを書いていましたので、今回もこの場にメモしておきます。

インストールしているアドオン

All-in-One Gestures

マウスジェスチャで色々な操作を実現。 私が良く使うジェスチャはオーラキャノン ( ↓→、現在のタブを閉じる ) とばくれつけん ( →←→、あらかじめ URI 文字列をドラッグしておき、その URI を新しいタブで開く ) です。

Copy URL+

Copy URL+ 1.3.2 のまとめ。導入からバグへの対処、カスタマイズの例まで。で大プッシュしているのでそちらの解説をご覧ください。

FoxyTunes - Control any media player while surfing the Web and more...

Firefox 上から iTunes などのミュージックプレイヤーを操作可能に。 Alt+Tab などで切り替えればいいじゃないか ? それですら面倒臭いという人向けの機能なんです。

greasemonkey

Greasemonkey - Mozilla Firefox まとめサイトの言葉を借りると、 指定ドメイン・URIに対しJavaScriptによるユーザーサイドスクリプトを追加することの出来る 機能です。 これのおかげでますます Firefox から離れられなくなっています。 ネットカフェなどでテンポラリフォルダに Firefox をインストールする時も、真っ先に greasemonkey をインストールしています。 どんなスクリプトを使っているかは別項使っている greasemonkey スクリプトにて。

Html Validator

ページを表示する際に自動的に Validate を行ってくれる上に、ソースを表示すれば Error や Warning の箇所を示してくれます。 hxxk.jp のように Firefox に対して application/xhtml+xml でリソースを提供している場合は、うっかりしたタグの閉じ忘れなどで not well-formed となってパースエラーが起こってしまうことがありますが、その場合でも素早く当該箇所を特定可能。 全ての web 制作者やブロガーは、この機能を是非インストールすべきだと思います。

Link Widgets

を表示します。 link 要素によるナビゲーションがあるページでは非常に威力を発揮します。 だから世の web 制作者はもっと link 要素を重要視してください。

Live HTTP Headers

Live Http headers - HTTP ヘッダ表示ツールにて詳しい解説あり。 ブラウザと web ページがどのようなやり取りをしているか、たまには目を向けてあげてください。

Pearl Crescent Page Saver

ページ全体のスクリーンショットを取得することができる機能。 PrintScreen キーによるスクリーンショットでは画面上に見えている部分しか取得できませんが、この機能を使えばページをそのまま画像として保存できます。 Copy URL+ 1.3.2 のまとめ。導入からバグへの対処、カスタマイズの例まで。のスクリーンショット ( ただし原寸よりも大幅に縮小 ) のサンプルをどうぞ。

Tab Mix Plus

タブ関連の機能をサポートします。 Destroy target="_blank" with Firefox 2 のような about:config から設定していた内容も、 GUI から設定可能です。

Web Developer 1.1.2 日本語版

これも全ての web 制作者やブロガーに是非インストールして欲しい機能。 詳しくは Web Developer - Mozilla Firefox まとめサイトにて ! ( 丸投げ )

使っている greasemonkey スクリプト

greasemonkey は他の機能と違い、インストール後に更にスクリプトをインストールする必要があります。 ここでは私が使っている greasemonkey スクリプトを紹介。 何故か SBM 関連ばかりですが。

G+?B

Google の検索結果の横にはてなブックマークのユーザ数を表示します。 検索結果の記事に対するはてなブックマーカの反応を知りたい時に。

hb_fav_arrange

はてブお気に入りの重複エントリをまとめる＆既読エントリを非表示化というタイトルがスクリプトの機能をそのまま語っているので説明は割愛。

hatebu add dmain counter ( 改造版 )

最速インターフェース研究会 :: はてなブックマークのドメイン表示してる箇所にカウンターをくっつけるGreasemonkeyスクリプトの改造版の方を使っています。 しかし、 dmain じゃなくて domain な気がするんですが......。 後でメールを送ることにしましょう。

SBMCommentsViewer

[PR] ソーシャルブックマークで付けられたコメントを取りこぼさないために - for ?B, del.icio.us, ECnavi and livedoor clip で紹介した SBM コメントチェック用に便利なスクリプト。

他にもはてブクロニクル - 記憶する部屋 - はてブ関連のGreasemonkeyを知っているだけ並べてみるに便利そうなスクリプトが並べられています。