16x16 でアイコンを描こう！ - coﾘ・ー・ﾝ＜2nd life

2009 06 15

■ 16x16 でアイコンを描こう！

http://16x16.hatelabo.jp/

先日、はてラボで 16x16 という、16x16 サイズに特化したアイコンエディタをリリースしました。

favicon や小さなアイコンなど、Web 上では小型サイズのドットアイコンは使いやすいので、いろいろな場所で使われていますね。16x16 サイズのアイコンを書くのに、16/32/64 サイズの同時プレビューが欲しかったり、即座に色の明度調整を行いたかったのですが、手軽に使えるツールが無かったため、Flash でサクッと作ってみました。

と云うわけで、はてなのユーザアイコンとも相性がいい 16x16 サイズのアイコンを、みんな描いてみましょう！絵心が無くてもなんとなーく描くだけでそれっぽいのが作れると思うので、軽いチュートリアルを作ってみました。

その1 ざっくりと形を決める

適当に形を決めましょう。初心者なら線対称な図形を描くのが楽ちんです。■●▲の組み合わせなんかでさくっと。今回は■を描いてみました。

その2 アイデンティティとなるものを描く

ただの図形だと味気ないので、アイデンティティとなるものを描きます。今回は顔っぽく仕上げるために目と口をかいてみました。■●▲なんかを描くだけでもいいと思います。シンプルなアイコンっぽくなってきましたね。

その3 色をつける

今まではモノトーン(シンプルなアイコンならモノトーンや黒白+一色が良いです)で来ましたが、ここでビビットな色でアクセントをつけてみます。ピンクと青＋灰色はなんか好きです。

その4 陰影をつける

このままでは平らな感じなので、陰影をつけてみましょう。顔の灰色を選択 (CTRL でスポイト) し、カーソルキーの↑↓を押すと、色はそのままに明度を変更できるため、簡単にハイライトや陰影をつけるための色を選べます。

左上から光が当たったら、というのを想定して左上のラインを明るい灰色、右下のラインを暗い灰色で塗ります。

その5 もの足りないので何か付け足す

その4で完成！でも良いのですが、なにかもの足りないので付け足してみましょう。具体的には頭に耳を、口によだれを付け足してみました。この辺は描いてなんか違う→UNDOの繰り返しです。

ちなみに q キーを押すと IE 以外のブラウザで履歴(いままで描いてきた履歴)を表示することができます。たとえば、今回のチュートリアルで作ったアイコンの履歴は下な感じです。その5でいろいろと試行錯誤してるのが解りますね。

完成したらアップロードしよう！

アイコンが完成したら、保存して自分のはてなプロフィールアイコンとしてアップロードしてみましょう。 http://www.hatena.ne.jp/ にアクセスし、右上のユーザアイコンの画像の鉛筆アイコンをクリックします。

その後、次のページでアップロードすれば完了です！

こんな感じに、16x16 サイズでプロフィールアイコンを描くと、大きいアイコン(64x64)の方も、いい感じのドット絵になりますね。というわけで、みなさん是非これを機会に、プロフィールアイコンや favicon などを描いてみてはいかがでしょうか。

Permalink | コメント(14) | トラックバック(6) | 19:33

コメントを書く

k2font 2010/03/13 17:29 アイコンに設定しようとすると、「アップロードできる画像の種類は jpg, png, gif, bmp です。」と出てきてしまい設定できません。

どうしたら出来ますか?

secondlife 2010/03/13 18:32 たぶんファイル名が icon という名前になっているからだと思うので、
icon.png という名前に変更してからアップロードすると
うまくいくと思います。

mimi-o 2010/07/22 16:20 それでもアップロードできないのですが、どうしたら良いでしょうか

nakayo4388 2010/07/29 16:26 ↑と同じくアップロードできませんorz

yurimo10 2010/08/25 10:30 ↑と同じでアップロード出来ません

TN001 2010/10/24 11:57 アップロードできない

TN001 2010/11/10 19:47 ペイントに貼り付けて、bmpで保存すると出来ます!!
(私のユーザーアイコンは、16×16で作りました)

ryotakamisato 2010/11/20 18:04 これでアイコン作りました

yoshii_511 2010/11/24 22:09 Google Chromeを開いて同じくアップロードしたら出来ると思います。Internet Explorer 8でやったら僕は出来ませんでした。
でもGoogle Chromeでアップロードしたら、出来ました。
（あくまでも、個人の感想です。出来るか出来ないかは、わかりません。パソコン次第です。）
長くてすみません。