第８回　素材作り応用編 パート２

さて、今回もどんどん作成していきましょう！ まずは、素材を作ったけれど平面的なのでもうちょっとボリュームを出したい というあなたへ。 立体的に見せるには、光が当たっている（ように見える）部分とそれによって 出来る影を表現します。 具体的に言うと、左と上に光を当て、右と下には影を作るということになりま す。 実際に作成してみましょう。 以下の□、■、◎は１ドットと考えてキャンバスを１０×１０ピクセルで作成 して、以下のようにキャンバスを埋めていってください。 もちろん、キャンバスを拡大して作成したほうがやりやすいですよ〜。 まずは、お好きな色でキャンバスを塗りつぶすとことからはじめましょうか。 ただし、今回は光と影を表現するので、白と黒で塗りつぶすのはやめておきま しょうね。（表現が難しくなっちゃいますから^_^;） 塗りつぶしたら、□と■の部分に色を入れていきましょう。 □□□□□□□□□□ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ □◎◎◎◎◎◎◎◎■ ■■■■■■■■■■ □：◎より明るい色 ■：◎より暗い色 ◎：お好きな色 もっとボリュームを出したいときは光と影の部分を増やします。 こんな風に。 □□□□□□□□□□ □□□□□□□□□■ □□◎◎◎◎◎◎■■ □□◎◎◎◎◎◎■■ □□◎◎◎◎◎◎■■ □□◎◎◎◎◎◎■■ □□◎◎◎◎◎◎■■ □□◎◎◎◎◎◎■■ □■■■■■■■■■ ■■■■■■■■■■ 今度は逆に凸に見えていたものを凹に見せましょう。 方法は・・・感の良い方ならお分かりですね。 そう、光と影の部分を逆にするだけで、へこんでいるように見えてくるのです。 ■■■■■■■■■■ ■■■■■■■■■□ ■■◎◎◎◎◎◎□□ ■■◎◎◎◎◎◎□□ ■■◎◎◎◎◎◎□□ ■■◎◎◎◎◎◎□□ ■■◎◎◎◎◎◎□□ ■■◎◎◎◎◎◎□□ ■□□□□□□□□□ □□□□□□□□□□ □や■だけ見ていても、あまりピンとこないかもしれませんので、実際に作成 されてみることをオススメします。 それぞれの画像が作成できたら、保存してください。 こんな感じになりましたか？ この素材ならアイコンとしても使えますし、壁紙としても使えますね。 更に、今度はこのちょっと立体的な四角い画像を応用してより汎用的な壁紙を 作成してみましょう。 新しいキャンバスを用意してください。 大きさは２０×２０ピクセルで良いです。 キャンバスには先ほど描いたちょっと立体的な四角を２つ、斜に配置してみま しょう。 図で表してみるとこんな感じ。 □□□□□□□□□□・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ □◎◎◎◎◎◎◎◎■・・・・・・・・・・ ■■■■■■■■■■・・・・・・・・・・ ・・・・・・・・・・□□□□□□□□□□ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・□◎◎◎◎◎◎◎◎■ ・・・・・・・・・・■■■■■■■■■■ ・には何色でも良いのでこのキャンバス内では使っていない色を配色してくだ さい。 そして、この・の色を透過させ、保存します。 この「透過色の指定」をすることによって、汎用的な素材に仕上げているので す。忘れずに透過させてくださいね。 まだ、ピンとこない人はこちらをみてください。 サンプル１ サンプル２ サンプル３ ３つとも、今作成した同一の壁紙を使っています。 （わかりやすくするためにハッキリとした色を使いましたので、ちょっと見に くいかも） 違っているところは、HTMLの書き方だけです。 透過色を指定することによって、バックの色、すなわちタグのBGCOLOR で設定した色が見えてきます。 そのページもタグのBACKGROUNDには「s080201.gif」という画像を設定 していますが、BGCOLORにはそれぞれ「#CCCC99」「#9999CC」「#CC9999」と設 定しています。 各コンテンツごとに壁紙をかえたいけれど、コンテンツが増える毎にいちいち 作成するのは大変だよと言う方、壁紙の設定はしたいけれど、データサイズは 小さく抑えたいという方、こんな壁紙作りはいかがでしょうか〜？ さあ、透過処理を使ってもうひとつ素材を作りましょう。 「ＢＡＣＫ」や「ＮＥＸＴ」等のボタンを作成します。 ■・■・■・■・■・■・■・■・■・■・■・■・■・■ ・■・■・■・■・■・■・■・■・■・■・■・■・■・ ■・■・■・■・■・■・■・■・■・■・■・■・■・■ ・■・■・■・■・■・■・■・■・■・■・■・■・■・ ■・■・■・■・■・■・■・■・■・■・■・■・■・■ ・■・■・■・■・■・■・■・■・■・■・■・■・■・ ■・■・■・■・■・■・■・■・■・■・■・■・■・■ ■：任意の色（お好きな色をどうぞ） ・：透過させる色 任意の大きさのキャンバスを用意して、上のようなパターンで作成してみてく ださい。（私は８０×４０ピクセルのキャンバスを用意しました） 作成したら、保存しておいてくださいね。 透過処理はまだしなくて結構です。 では、この画像の上に文字を配置して見ましょう。 今回は「ＮＥＸＴ」を文字入れしてみます。 バッチリと文字を入れ、保存をする際に透過処理を行います。 このボタンを壁紙を指定しているページに配置してみると・・・ 出来あがったボタン これで、壁紙を隠さないボタンの出来あがりです！ ボタン以外にも、活用法はあると思いますので、いろいろと試してくださいね。 さて、今回は駆け足で素材を作ってきました。 技術的には今まで作成してきたことが大半ですので、簡単ですね。 それにしてもちょっと工夫した（？）だけで、面白いものができますよね〜。 次回は『素材作成応用編 パート３』をお送りします。

上記の内容はメールマガジンとして1999年6月9日に配信されたものです。 素材作成初級講座　第７回へ戻る 素材作成初級講座　第９回へ進む 素材作成初級講座の目次に戻る 極楽法典ホームページに戻る