Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
HPあれこれメニュー
はじめに
知っておきたい事
HTMLの基本
テーブル
フレーム
レイアウト
色々なこと
HTML4.01要素一覧
XHTML
テンプレート
エイプスキン
サイトマップ


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ ペイントで絵を描いてみる
以前馬の絵をペイントで描いてた時期があったのですが、描いていく過程を数回に分けて公開した事があるので、 その時の画像を利用して、ペイントで絵を描く1つの方法をやってみます。あくまで自己流で、 誰に教わった描き方ではないので、おかしな描き方かもしれません。
まっ、こんな描き方もあるという1例です。

また今回の絵は競争馬なので、少しでも雰囲気が出るように写真を見ながら描いたものです。 TV番組を録画したものを一時ストップして、デジカメに納めPCに取り込み、それをよく絵の参考にしたものです。(笑) でも今回の競走馬にも肖像権(?)があるでしょうから、本来公開してはいけない可能性もあります。
(ん〜、どうなんでしょう?マヤノトップガンの馬主 田所 祐さん許して下さい。)

また今回は馬の絵ですが、花でも車でも同じように描けます。


馬のシルエットを描く

まず写真を見ながらおおまかな馬の形を描きます。色は1色だけで曲線ツール、直線ツール、フリーハンドで描きます。 鉛筆のような細い線は使わないで、ブラシなどの太い線で描いて塗りつぶし、馬のシルエットを描いていきます。

初めはこんな感じ(哀) (2KB)

はいはい、画像を表示して笑ったそこの人・・・笑わないようにお願いします。
見せてる自分だって恥ずかしいですよ。(^^;

右クリックで青・左クリックで茶にしておき、描き足したり削ったりして整えます。
自分はこれを描く行程が一番嫌いで、でも最も重要なところだと思っています。

主線描いてその中に色を付けていく描き方もありますが、キャラクターのようなものを描く場合ですよね? 自分の場合は、どちらかと言うと油絵の描き方っぽく、適当な色で形を作ったものを、少しづつ別の色で塗り重ねていく感じです。

ちなみにあそこまでに1時間かかっていると、当時のHTMLに書いてありました。
適当な形を描く訳ではないので、以外に時間がかかるものですよね。


形を整えながら目印に色を付ける

ある程度形が出来たら一休みをし、新たな気持ちで更に形を整えていきます。
フリーハンドではなく曲線ツールを使ったり、部分的には絵を拡大して(400%)
鉛筆ツールで1ピクセルづつ直します。

また今回から何色かの色を使っていますが、それはこれから描き込んでいく上で目印になる事と、 この辺で派手な作業をする事で気分がまぎれるからです。地味な作業ばかりしてると嫌になっちゃうのでね!

馬らしくなってきた♪ (3KB)

ゼッケンの下地になる部分を描き込んだ時、胴が短く感じたので3ピクセル胴を伸ばし、 また顔を少し大きくして首も太くしました。バランス的におかしな部分はこの辺で直しておいた方がいいです。 色々描き込んでからでは大変なのでね。また、実際にはジョッキーが乗っているので見えない部分がりますが、 そういう部分はなんとなく流れで描いておきます。

今回の作業も1時間くらいです。だいぶサラブレッドらしくなってきましたね。
馬を描くのはとても難しいです。と言うか全身を描くのが難しいです。キャラクターなども顔だけ描くのと全身を描くのでは、 難しさが全く違うでしょうね。全体のバランスをとるのが難しいって事でしょう。


パーツと影を付ける

影になる部分を濃い茶色を作り入れてみました。この時点で茶は2色ですが、 かなり雰囲気が出てきます。他にも影の部分と明るい部分を色分けします。 そして取りかかるのに手頃な部分からパーツを描いていきます。

雰囲気が出てきた! (6KB)

ゼッケンや顔はほぼこれで完成です。ゼッケンの数字は拡大してフリーハンドで描きましたが、 名前はテキストツールで描きました。しかし丁度良いサイズで描けないので、描いた後に、 高さ=110%・幅=50%に伸縮しました。またその際、直接ゼッケン内に書くのではなく、 余白に書いて調整したものを移動して貼り付けます。ちなみにゼッケンの布地は、 左側を濃くなるようにグラデーションしています。

顔は拡大して少しづつ鉛筆ツールで描きました。と言ってもほとんど影なのでハミと手綱等の馬具を描いて、 まぶた等の少し明るい所を描いただけです。

気になるジャギ(色の境のギザギザ)を軽く消してみました。明暗や反対色を使うとどうしても目立つので、 中間色や色の濃さを近づける事でギザギザを目立たなく出来ます。 鞍をとめる腹帯を前回のものと見比べてみると効果が分かると思います。今回の作業は1時間半くらいです。

ここまで描ければ、後は自分の好きな所から手を加えていけば良いと思います。


色数を増やして更に描き込む

例えば同じ茶色でも少しづつ違う色を用意して、濃淡を更に付けていきます。 またこの辺までくると、失敗したら取り返しがつかないので、コピーしたものに手を加えていった方が良いです。 色も同系色で10色以上は使うでしょう。

重量感が出てきた! (8KB)

この絵は後ろから光が照らしているので、白に近い茶の部分があったのですが、 その色を上手く出せなかったのと、濃い茶から徐々に薄くしていく過程が大変だったので、 この後の仕上げで極端に明るい部分を少し暗くしています。

またここでしっぽを付けましたが、その時お尻の形も直しています。部分的に描く時、 その部分のおかしなところが見えてきます。


馬を仕上げてジョッキーも乗せる

資料のようには描けない部分は無理してまで描く必要はないですね。 という事で無理のない色へ変更しながら仕上げました。また馬と同じような感じで描いたジョッキーを、 馬の上に位置を調整しながら貼り付けました。この過程で出る不具合やジャギも修正します。 絵の完成は描いた人が満足出来るかどうかなので、もう少し手を加えたいと思えば、更に完成度は上がっていきます。

サラブレッドの出来あがり♪ (12KB)

色を付けていく上で大切なのが色の編集ですが、自分の場合一箇所色を決めたら、 後はその色の明るさを変える事で作っています。それで合う色が出来ない場合に、 色合い(赤〜緑〜青〜)や、鮮やかさ(原色〜グレイ)を変えています。ちなみにこの絵は色数は166色でした。 166色も色を作ったんですね。

ここまではマウスを使いWindowsのペイントだけで描いています。ペイントでも十分絵が描ける事が伝わりましたよね? しかし初めはペイントで全く描く事ができませんでしたね。 ペイントは絵が描けるソフトとないっていますが、実際には描けないものと思っていたんです。 しかし単純な絵から始めてたまに描いているうちに、ペイントに慣れて徐々に描けるようになっていきました。

また良いソフトなら簡単に奇麗な絵が描けるとも思っていたのですが、それは間違いでした。 奇麗な絵を描くのは、奇麗に描く技術とソフトの使い方を詳しく知ってないと無理なんです。 ただ良いソフトはペイントより便利なツールが揃っているので、使い方さえ理解すれば同じような絵を早く描けるでしょうね。


描いた背景に馬を載せて完成

描いた背景画像と馬を合成して完成ですが、馬の絵と背景にもジャギが出てきます。 なのでそのジャギを消して完成になります。

レース中のサラブレッドの完成♪ (26KB)

背景はペイントには無いぼかすツールを使い遠近感と言うか、ピントを馬に合わせた写真のようにしてあり、 またぼかす事を前程に背景は描きますので、馬の時ほど大変ではないし、気楽+適当に描いても結構上手くいくものです。

また背景のぼかしは全体を軽くぼかしてから、範囲を決めて段階的にぼかし、 遠くになればなるほど強くぼける感じにしてあります。 また馬を合成してからほんの少しだけ馴染むようにぼかしてあります。

(背景のぼかしは、Paint Shop Pro で行いました。  Paint Shop Pro
■ おまけ
馬の絵は色数が少ないのでGIFですが、背景を付けた完成の絵はぼかしを入れた都合、 256色では表現できないのでJPEGにしました。しかし色数が増えると、それなりに重くなるのが分りますね。

ちなみにペイントで描いた状態のBMPは、色数には関係無く大きさが同じなら同じ重さです。 その理由は1px単位で全ての色の情報を持っているからです。真っ白なキャンパスの状態でも、 1pxごとに白の情報を持っているので、何処にどんな色を使ってあっても関係無く、縦横のサイズで重さが決まります。

それに対してGIF・JPEG・PNGなどは、圧縮する事で軽くなる画像フォーマットなんです。 それらは軽い画像を作れるからWEBで多く使われます。

圧縮についてちょっとだけ説明

BMP(ビットマップ)の場合は、1pxごとに色の情報を持っています。 それをHTMLで簡単に表現するとこんな風になります。

■■■ ←これをBMP風にフォントタグで書くと下のような感じです。
<font color=ff0000></font><font color=ff0000></font><font color=ff0000></font>

■■■ ←これならこんな風にもフォントタグで書けますよね。(圧縮)
<font color=ff0000>■■■</font>

これが圧縮の原点ですね。絵を描く場合は1pxごとの情報が必要ですが、表示するなら1pxごとの情報は必要無いです。 そこで画像の圧縮技術が生まれたと思います。

これは画像についての話ですが、圧縮の説明をフォントタグでしたように、 HTMLを作るのにも、同じ事が言えると気がつきますよね。CSSを上手く使うのは、ある意味HTMLの圧縮と言えますし、 同じように表示されたHTMLも、タグの使い方などで重くも軽くもなります。
 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.