小規模画像の制作

HTMLでは複雑なデザインを行うことができないので、
さまざまな演出を画像を使って表現する事が多いです。

例：
注意事項 〜〜〜〜
ここに注目
マウスカーソル を使って〜〜
正解 不正解

Paint.net を使うとこのような画像を簡単に作成できます。

1．キャンバスサイズの指定

Paint.net を起動し、 [ イメージ ] → [ キャンバスサイズ ] で
横 12 ピクセル、縦 12 ピクセル の小さなキャンバスを用意します。

2．絵を描く

小さくて見にくいので、[ ズーム ] ツールを使って見やすい大きさに表示を拡大します。
左クリックで拡大(＋)、右クリックで縮小(−)です。

[ 鉛筆 ] か [ ブラシ ] ツールを使って絵を書きます。
[ 色 ] ウィンドウで
[ プライマリ色 ] を設定すると、鉛筆などでドラッグした時の色を決められます。
[ セカンダリ色 ] では右ボタンでドラッグした時の色を決められます。

[ 鉛筆 ] ツールは太さ1ピクセルの細い線がかけます。
[ ブラシ ] ツールは画面上部の [ ブラシ幅 ] を設定すると太い線が引けます。

最後に、[ ズーム ] で 100% にして問題なければ完成です。

3. 透明の表現

初期設定では、背景は 白色 です。
Webページの背景が白色の場合は問題がないのですが、
ページの背景色が違うの色の場合、 白い色は目立ってしまいます。

例：緑色の背景では四隅に白い点が見えてしまう。

そのようなときは、[ 透明 ] 色を使うとよいでしょう。
透明にするためには、 [ 消しゴム ] ツールを使って問題の部分を消すか、
[ 魔法の杖 ] ツールで透明にしたい部分をまとめて選択し、キーボードの Delete キーで削除します。

Paint.net では 透明部分は グレーの市松模様で表されます。

4. ファイルを保存する

出来上がったら [ ファイル ] → [ 名前を付けて保存 ] などで保存します。

保存の際は [ ファイルの種類 ] に注意しましょう。
Paint.net で再び編集する際は、 [ Paint.NET (*.pdn) ] 形式で保存するのが良いでしょう。
Webページで公開する際は、 [ GIF ] か [ JPEG ] か [ PNG ] 形式で保存してください。
しかし透明部分がある場合は、[ GIF ] か [ PNG ] で保存してください。 [ JPEG ] は透明に対応していないので、正しく表示されません。