タグ: アイコン

ここ最近、Paint Shop Pro による光沢のあるアイコンの作り方を、自分なりに確立しました。忘れてしまわないように書き留めておこうと思い、この日はその作業を行いました。どうせなら自分だけでなく、多くの人の参考になるように、web に書いて公開することにしました。

他人に何かの方法を説明しようとすると、なるべく単純で合理的で、なおかつ有効な手順を考え出すものです。そうしないと説明が上手にまとまりませんし、読み手に「不合理だ」とか「冗長だ」とか突っ込まれてつらい思いをするからです。

そういうわけで、この日は紹介記事を書くことによって、手順をきれいに整理整頓することができました。書けば書くほど自分の手順の無駄が見えくるのは、ありがたくも不思議なものです。教えようとして自分が教わるわけです。次回からは自分自身のアイコン制作作業もだいぶ早くなりそうです。

しかし、書き終えた手順をあらためて振り返ってみると、根本的な欠陥があることに気付きました。先日確立させた方法は、縮小後のクオリティについて何も考慮していなかったことがわかりました。また、アイコン全体の色合いが暗すぎる気もしてきました。

そんなわけで、光沢のあるアイコンの作成方法の紹介記事を、いったん完成させはしましたが、さらに新しい手法を今後まとめなおしたいと思っています。遊んでいるように思われるかもしれませんが、web サイトのクオリティは、主催者の情熱の表れと解されやすいし、web サイトに対する信頼度にも影響していると、常々思うのです。

Paint Shop Pro 9 を使用して、光沢のあるアイコンを作成します。

画像の新規作成

まずはアイコンの原画を書くための、大きいキャンバスを用意します。このキャンバスのサイズは、最終的に作成するアイコンの整数倍の大きさにしておくと、美しく縮小できます。今回ターゲットにしているサイズは、

• 256 x 256（アイコンのリンク先のページに表示されるもの）
• 48 x 48（メニューに配置されるリンク用のもの）
• 16 x 16（ファビコン用のもの）

以上の 3 種類です。最小公倍数は 768 となりますので、キャンバスのサイズも 768 x 768 としたいと思います。

キャンバスの表示設定

ルーラー、グリッド、ガイドいずれも表示させておくと便利だと思います。メニューバーの [表示] メニューにある [ルーラー]、[グリッド]、[ガイド] をそれぞれオンにします。

キャンバスのサイズによって、グリッドの間隔を変更したほうが使いやすいでしょう。デフォルトのグリッドの間隔は 10 ピクセルなので、このままだと 768 と親和性の少ないグリッドが表示されることになります。右の画像では、グリッドのサイズは 24 ピクセルとしました。この設定だとグリッドがキャンバスを 32 x 32 のブロックに分割することになります。つまり、2 x 2 のグリッドが、ターゲットの最小サイズである 16 x 16 ピクセルの 1 ピクセルに相当することになります。

グリッドの間隔やガイドの設定の詳細については、マニュアルをご参照下さい。

色の作成

アイコンのベースカラー、ダークカラー、ハイライトカラーの 3 色を用意します。それぞれ普通、暗め、明るめの色であれば問題ないと思います。今回は以下の 3 色を使用してみました。

	色相	彩度	明度	RGB
ベースカラー	1	120	96	8D3533
ダークカラー	1	120	64	5E2322
ハイライトカラー	9	137	160	D3836D

ベースカラーはダークカラーの明度をただ下げただけのものでよいのですが、ハイライトカラーは色相をやや黄色気味にし、彩度もやや高めにするとよいようです。

色の作成が終わったら、ベースカラーでキャンバスを塗りつぶしておきます。

オーブの作成

先ほど作成した色を使って、ダークオーブとハイライトオーブを作成します。2 つのベクタレイヤーを作成し、右の画像のように楕円を配置します。ダークオーブは画面中央に横長に、ハイライトオーブは画面の下にはみ出すように大きく、それぞれ配置します。必ず別々のレイヤーに配置してください。

この段階でいったん保存しておき、これ以降のアイコン作成時のテンプレートとして利用すると便利です。先ほどからサンプルとして表示している Icon Base.pspimage をアップロードしておきますので、よろしければご利用ください。

icon-base.pspimage
http://www.shinsuke.com/wp-content/uploads/2008/12/icon-base.pspimage

続いて、配置した楕円を [ぼかし (ガウス)] を使って、楕円の中心がぎりぎり透明になるかならないか程度にぼかしていきます。ラスタレイヤーに変換するように求められますので、変換します。サンプルの場合、ダークオーブのレイヤーが半径 48、ハイライトレイヤーのオーブが半径 56 でうまくぼけました。

ふちの作成

アイコンの周囲にふちを作成します。矩形ツールを使って、まるみを持たせた四角形を作成し、グラデーションを薄く塗ります。

ふちの太さも、ターゲットのサイズに変換したときに、整数になるサイズを選びましょう。今回のサンプルでは 48 ピクセルを狙って、47 ピクセルを選択しました（実際の矩形はなぜか 1 ピクセル太くなります）。すると以下の表のとおり、ターゲットのどのサイズでも、ふちの太さが整数ピクセル分の太さになります。

	倍率	太さ
768 x 768	x 1	48 px
256 x 256	x 1/3	16 px
48 x 48	x 1/16	3 px
16 x 16	x 1/48	1 px

サンプルの矩形ツールの設定は以下の通りです。

線のスタイル	幅	連結	角の比率	水平半径	垂直半径	左	上	幅	高さ
実線	47.00	マイター	15	128.00	128.00	24.00	24.00	720.00	720.00

光沢の作成

最後に光沢を作成します。光沢のつけ方は、アイコンの表面の形状をどのように想像しているかによって異なります。今回は周囲に丸いふちがあり、表面は全体的に平らなアイコンを想定していますので、光沢は上下を二等分した上半分につきます。

まずは矩形ツールで角の丸まった長方形を作成します。次にその長方形をパスに変換し、角を整えます。長方形の中心の座標が 0.5 ピクセルずれていることがあります。その場合はテキストボックス内の座標を直接編集して修正しなければなりません。

サンプルのファイルをアップロードしておきますので、参考になさってください。このファイルを直接使っていただいてもかまいません。

edge-and-gloss.pspimage
http://www.shinsuke.com/wp-content/uploads/2008/12/edge-and-gloss.pspimage

四隅の削除

最後に四隅を削除します。まずはすべてのレイヤーを結合してください。結合がすんだら、自動選択で四隅を選択範囲に入れ、[背景消しゴム] ツールを使用して消していきます。

以上でアイコンの作成は前半が終了しました。縮小後のイメージもなかなかよいですね。次はこのアイコンにマークや文字を入れていきます。

前日から続きます。光沢のあるアイコンの作り方を解説したサイトを検索したところ、確かに多くのサイトがヒットしたのですが、そのほとんどは Adobe の Photoshop を対象としたものでした。その上、デザインがあまり私の好みではありませんでした。

面白いところでは glossy.js という JavaScript も見つけました。これはページに配置されている img タグに glossy というクラスを設定しておけば、自動的に光沢のある画像に変換するというものです。残念ながら商用サイトでの利用は認められていないので、当サイトでは楽譜の販売も行っている以上、利用することはできませんでした。

仕方がないので、Paint Shop Pro を使ってアイコンを作る方法を、自分で確立する以外に道はなくなってしまいました。先ほどの glossy.js のおかげで、どういう操作をすればアイコンに光沢を出せるのかがよくわかりましたので、それを Paint Shop Pro での作業に置き換えました。同時に、glossy.js の出力が、ガラスというよりはプラスチック的な風合いになる点も改めました。

以上のような経緯で完成したのが、スクリーンショットの右側に映っているアイコン群です。僕が確立した方法はこちらのページにまとめておきましたので、よろしければご覧ください。

しかし、今ご紹介しましたページを書いている最中に、新たな問題点や、更なるクオリティの向上策を思いついてしまいました。そろそろ年賀状作りにも励まねばなりませんが、まだもう少しばかりアイコンの制作に時間を取りたいと思っています。