プーンブログはホームページ素材の作成過程を日々綴ったブログです。

パネルボタン

パネルボタン : 1日目

ゴールデンです。
特に予定はありません。さて、今回はパネルボタンを作ります。
イメージ的には金属製のパネルに半透明なボタンが装着されている感じです。

というか、ボタンばっかり作ってますが、アイコンプーン の方で公開しているボタン素材のダウンロード状況にかなり偏りがあるので、不人気ボタンとの入れ替えをしようかなと思っての事です。

アイコンプーン ホームページ素材作成日記 : 21回目

日時: 2007年05月01日 00:23

パネルボタン : 2日目

panel_1.gif

2日目です。

ボタンを置くための、パネル部分を作ります。
サイズは たて 39px、よこ 89pxです。

シンプルにすることにしたので、薄いグレーの下地に少し陰影をつけるだけにします。そして上部に光があたった感じ、下部に影になる部分を描き込みます。

● 私信
ピクセルアートの巨匠、E-BOY の画集を買いました。
うおーっ!すげーっ!と思いましたが、私とのレベルが違い過ぎて参考にはなりませんでした。
もっと精進します。

アイコンプーン ホームページ素材作成日記 : 22回目

日時: 2007年05月02日 01:57

パネルボタン : 3日目

panel_2.gif

3日目です。

前回作ったパネル部分に、ボタンをはめ込むための穴を描きこみます。

左上にとった光源の具合を意識しながら、穴の ふち に少し盛り上がった感じを出していきます。

アイコンプーン ホームページ素材作成日記 : 23回目

日時: 2007年05月03日 00:13

パネルボタン : 4日目

panel_3.gif

4日目です。

前回、前々回と作ってきたパネルにボタンを描き入れます。
ロールオーバーさせるために2パターン用意しました。
ロールオーバー時のイメージとしては、ボタンにポインタを乗せると、ランプが灯る感じです。

まず、ボタンの暗い方をランプが消えている感じに、若干、明度と彩度を落とした色をベースに描いていきます。
次にボタンの明るい方、ランプが灯っている方を彩度、明度、コントラストの強い色で描きます。

こんな感じでどうでしょうか。

明日はこのパネルに並べられる、補助的なボタンを作ってみたいと思います。

アイコンプーン ホームページ素材作成日記 : 24回目

日時: 2007年05月04日 00:15

パネルボタン : 5日目

panel_4.gif

パネルボタン最終日です。補助的なボタンとして RSS ATOM RDF のボタンを同じ要領で作りました。ブログなどで使えるんじゃないかと思います。

この素材はこちらの パネルボタン で配布しています 。

アイコンプーン ホームページ素材作成日記 : 25回目

日時: 2007年05月05日 00:02