サイトのインデックスページの背景画像・ラフ画でもそれなりの見栄えがするノウハウ

少々手間のかかる作業なので、とりあえずメモしておく。ポイントは、Inkscapeというドローソフト（2005年現在フリー）を使って、雑な絵を「一見きれいに」見せることにある。

準備するもの

• フルカラーモードでスキャンしたビットマップ画像
• リサイズ・エアブラシ・レイヤー・自動選択ツール機能がついた画像処理ソフト（私は2005年現在、Photoshop 5.0 LEやPaintgraphicを使っている）
• Inkscape（ドローソフト、2005年現在フリーソフト）
• あれば、減色専用ソフト(YukariやPadie等フリーかつ高機能のものが出回っている)

「画像と文章のスペース」のインデックスページのコンテンツ紹介部分の背景画像は、透過PNGを使っている。
一箇所に背景画像を表示させるのは、CSSによって可能である。body要素に
background-repeat:no-repeat;
と指定してやることで、ページの一箇所に背景画像を表示させることが可能である。くわしくはCSSの参考書等を参照のこと。
サイト全体の2005年現在の背景色は、R,G,B=(239, 239, 239)。「透過させる色はサイトの背景色と同じにしたほうがよい」とPhotoshop 5.0 LEの市販マニュアルに書いてあったのでそれに従った。

背景画像の元の絵。ボールペンで描いた線画に申し訳程度に色鉛筆で色を塗ったものである。ついでに言うと、画像が切れている部分は、エアブラシなどで白色に塗ってぼかしている。あとで透過PNGに変換したときにいい感じに表示されるのをねらってのことである。
Webページにワンポイントで使う背景画像はだいたい300ピクセル*300ピクセルくらいの大きさが適当であり、データサイズは12KB前後が個人的には良いと思う。

Inkscape（ドローソフト、2005年現在フリーソフト）のTrace Bitmap機能を使い、scanレベルを30くらいにして自動的に画像をトレースさせる。それからPNG形式にエクスポートする。(Trace Bitmap程度の機能なら、とくにマニュアルを検索しなくても使える)

Photoshop LEやPaintgraphicなどレイヤー・自動選択ツールを使えるソフトで、白色の背景をマジックワンド（自動選択ツール）で選択し、削除して、その下にレイヤーを作成してサイトのページの背景色と同じ色で塗りつぶす。

人物のレイヤーの不透明度を20パーセント台まで下げる。必要な文字を入れる。
Yukariで32色程度に減色してから、透過する色を決め、透過PNG形式で保存。

それなりに背景色と調和しているはずである。