Webサイト制作時のリストなどに用いる小さいアイコンの作り方

Webサイト制作時にリストタグ（ul、li）などの箇条書き要素を用いる機会は少なからずあると思われる。
その際、デザインの面でリストタグの頭出しの記号を三角形のアイコンなどに置き換える機会も少なからずあるだろう。

今回はそういった場合に使える小さいアイコンをPhotoshopで作ってみる。

制作手順

1. Photoshopで幅13px×高さ13px程度の新規ファイルを作成する。
2. 描画色を設定する。
3. 表示を大きくし、鉛筆ツールで1pxずつ色をつけていく。

とっても簡単だが、これにて完成。

制作時の注意

• 三角形や矢印など、先が尖った形状のものを作るときは、ピクセル数（特に縦の）を奇数にした方が良い。
• 三角形などを作る際、多角形ツール（アンチエイリアス指定）などを使うと、輪郭がぼやけてはっきりしなくなる場合があるので、1pxずつ色をつけていく方法で作成するのがベター。
• 円形を作成するときは、楕円形ツールを使う。その際はアンチエイリアスにチェックをいれる。

制作例

・拡大画像
←クリックで拡大表示

・原寸画像

上記画像は左から順に、下記のようになっている。

• 1pxずつ塗って作成（形状1）
• 多角形ツール（アンチエイリアスなし）
• 多角形ツール（アンチエイリアスあり）
• 多角形ツール（アンチエイリアスあり）+一番左の一列（ぼやけている部分）を削除
• 1pxずつ塗って作成（形状2）
• 1pxずつ塗って作成（形状3）
• 楕円形ツール（アンチエイリアスあり）
• 楕円形ツール（アンチエイリアスなし）

この結果をみると、多角形ツールでアンチエイリアスなしで作成した正三角形（左から2番目）は歪な部分もあり、輪郭がキレイではないことが分かる。また、やはり多角形ツールで作成したアンチエイリアスありの正三角形（左から3番目）はやや輪郭がぼやけているように見える。
楕円形ツールを用いた場合に関しては、アンチエイリアスなし（一番右）だとやはり輪郭がガタガタしているように見える。

ベターと思われる結論

• 上記制作例の一番左のような一定の角度で描ける二等辺三角形なら手で1pxずつ塗っていく
• 正三角形や角度が一定には描けない三角形なら多角形ツール（アンチエイリアスあり）で作成した後、一番左のぼやけている一列を削除する
• 円形なら楕円形ツール（アンチエイリアスあり）