ファイルやフォルダーを操作するために、小さな絵を描いてボタンなどにしたもをアイコンといいます。マウスでの操作が一般的になるにしたがって普及しました。このような操作法はMacのあたりから始まってWindowsで一般化しました。LinuxなどもGnomeやKDEをはじめとするWindowsシステムが普及していろいろなアイコンを目にするようになりました。
WindowsMeの時代のアイコン
Linux(Gnome)のアイコン
また,ウェブページのリンクなどにも使われます。
このような画像は普通、30ピクセル×30ピクセルほどの大きさです。拡大すると次のようになっています。
上図にマウスを合わせると見える小さな升目のひとつひとつの四角がピクセルで、これ以上分割できない色の要素です。ピクセルまでわかるように拡大すると斜めの線はギザギザに見えますが,小さいままだと目立たいものです。
このピンやニンジン
は16×16ピクセル程度の大きさです。小さすぎて、ブラシの太さを1にして、拡大して1点1点を考えながら塗りつぶすような作業になります。
ピンとニンジンを拡大すると次のようになります。
小さな画像を拡大して描くと一番小さな絵筆(ブラシ)を使っても太い線しか描けないというもどかしさを感ずることがあります。
これは特に斜めの線がギザギザになる(エイリアシングという)のをなめらかに見せるために,指定の色より薄い色をギザギザの引っ込んだ部分に塗っているためです。縦の線でも指定した場所がピクセルの間に近い時には両側のピクセルに指定の色より薄い色を塗ります。
これはこれで便利なこともあるのですが,より細かなところまで自分でコントロールしたい時には,鉛筆を使うのがいいでしょう。
小さくした時にどう見えるかということを確認しながら目的にあった道具を使いましょう。
絵筆で描いたものがこちら
鉛筆で描いたものがこちら
普通に白い背景に丸いアイコンを描くと背景が白でなくなった時に,四角い枠が出ます。周りが透明なアイコンを作れば解決します。
四角い枠付きアイコン | 周囲が透明なアイコン | |
背景が白 | ![]() |
![]() |
背景が青緑 | ![]() |
![]() |
背景が青 | ![]() |
![]() |
周りが透明なアイコンを作るには,背景に直接描かずに,レイヤーを作成してその上に描きます。背景に色を塗れば背景が変わった時にどのように見えるかも試せます。
保存する時に,背景の左の「目のマーク」をクリックして不可視にして保存をすればまわりを透明にできます。
ウェブページなどに使うのであれば、.pngの拡張子をつけてpng形式で保存します。jpg形式では透明度の指定ができません。
周りを透明にする時は,背景が同じ色になっても見えなくならないように工夫が必要です。
一色のみの場合 | 境界線を描くと | 他の色も使うと | |
背景が白 | ![]() |
![]() |
![]() |
背景が緑 | ![]() |
![]() |
![]() |
背景が青 | ![]() |
![]() |
![]() |
32×32~16×16の大きさのアイコンを作成しなさい。ファイル名はicon.xcfとすること。
は32×32
は27×27。