★★誰でも出来るペイント講座★★

1、前書

素材を自分でオリジナルなものを作ってみませんか??
高価なグラフィックソフトなんて不要です。
ウインドウズに標準で入っているペイントという
お絵かきソフトを使えば誰でも簡単に作れます。
友達に自分で作ったよ〜って自慢してみては…(笑)。
当ページの基本部分は、ペイントで作ってあります。

2、ペイントについて

グラフィックソフト「ペイント」は米マイクロソフト社の
登録商標です。Windowsに標準で入ってます。
このソフトの一番の魅力は、他の高価なソフトにはない
簡単で軽くかつシンプルな操作性です。
覚えるのも簡単ですし、手軽に作れます。
ただ、唯一の弱点は、せっかく作った素材を
メールやホームページにのせれるようGIFという形式で
保存する時に、色がイメージと違う感じになって
しまうことです。
そのため、今回カラーパレットなるものを作って
色を忠実に再現できるようにしましたので
弱点も克服できると思います。

 

●もくじ●

1〜5
 ペイントについて

6〜14
 アイコンの制作

15〜
 バナーの制作

22〜
 高度な色変換

3、カラーパレットについて

GIF画像は、一つの画像に対して色を256色まで使う
ことが出来るんですが、ペイントに標準で入ってる色が
素材制作にあっていない濃い色ばかりなのです。
素材を作りやすい色を、今回256色選びましたので
下記の方法を行えば、その色を使えるようになります。
まず、右にある虹色の画像を右クリックしてください。
画像をマイドキュメントに保存します。

 

4、ペイントの起動

左下のスタートを左クリック、
プログラム→アクセサリー→ペイントと移動して
左クリックすれば、ペイントが立ち上がります。
このページを読みながら実際に操作したい場合は
画面の一番下のスタートの横の何も書いてない
部分を右クリック→左右に並べて表示を左クリック。
こうすると二つ並んで見やすいですよ。
もちろん、印刷でもOKですが(笑)。

 

5、カラーパレットの読み出し

ペイントの「ファイル」を左クリック→開くを左クリック
ここで、上がマイドキュメントを選んで、下の部分の
ファイルの種類をGIF形式に替えてください。
すると真ん中に先ほど保存した「color」が
出てくるので、これを左クリック→開くを押します。
虹色の画像が出来たら、色対策は完了ですので
上の「変形」→「すべてをクリア」を選択すれば、
真っ白なキャンパスに戻ります。

 

6、アイコンの制作


「変形」→「キャンパスの色とサイズ」を選び
そこで、幅100、高さ100にしてください。
単位がピクセル、色がカラーになっていれば
OKを押してください。
この大きさが出来上がる素材の大きさだと
思ってください。
ただ、このままだと絵を書きにくいので
「表示」→「拡大」→「拡大率の指定」を押します。
今回は400%にしてください。

 

7、輪郭の制作(楕円の書き方)

ファイルの下に並んでいる箱をツールボックスって
いいます。ここの左下の円を押すと円形・楕円形を
作ることが出来ます。
そこを、押すとツールボックスの下に三つ楕円が
出てきますが、上の段が輪郭のみ、
真中は輪郭と中の色を別々の色にする時、
下は同じ色で塗ってしまう場合に使います。
今回は一番上の輪郭のみを使います。
マウスをキャンパスに持っていくと下の中央に
数字が出ますが、これが座標軸となります。
左側が幅方向、右側が高さ方向です。
今回は100×100なので中央に持ってくると
50、50になるというわけです。
10、20なにるようにマウスを移動させたら
左ボタンを押つづけて、右下方向に移動します。
すると、先ほどの座標軸の右横に数字が出ます。
これが円の大きさになります。
この大きさを、80×70にしてください。
同じ要領で、5,10から45×45、50、10から45×45
15、20から25×25、60、20から25×25と
20、60から60×30
合計六つの円を描いてください。
右図のようになります。

 

8、修正の方法(消しゴムの使い方)

まず、間違えたと思ったら「編集」→「元に戻す」で
以前の状態に戻せます。数回繰り返し出来ます。
うまく出来たら、右のように線を消してください。
ツールボックスの左二段目の消しゴムを利用します。
ツールボックスの下に4段階で大きさが替えれます。
端の辺は、小さいものを使い、関係のない所は
大きいので消すと使いやすいですよ。
輪郭線が消しすぎて切れてしまうと、後で
調子が悪くなるので、線が繋がっているか
確認してください。

 

9、目鼻を描く(ブラシの使い方)

ツールボックス右4段目のハケマークが
ブラシです。選択するとツールボックスの下に
色々種類が出て来るので、使い分けると便利です。
今回は左上の丸を使います。
座標を30、50にもっていき、左ボタンを押しながら
下に少し移動させます。目の完成です。
50、50の所で同じ操作をしてください。
あと、50、60の所のあたりで下三角形に
ほんの少し移動させてください。鼻の完成です。

 

10、口を描く(ペンの使い方)

ツールボックスの左4段目のペンマークが鉛筆です。
細い線をフリーハンドで書く時に使います。
鉛筆を使って、鼻の下の70、50あたりから
左ボタンを押しながら移動させましょう。
人という字を書く感じで…口の完成です。

 

11、色の選択(カラーボックスの使い方)

一番下の段に色のいっぱい入ってる箱があります。
これを、カラーボックスっていいます。
この中の色を使って色塗りをします。
カラーボックスの一番右上の茶色を左クリックします。
すると、右端が、今まで使っていた黒から、茶色に
変化すると思います。
その下が、白になってると思いますが、これは
右クリックをすると使える色です。
二色同時に操作したい時に便利ですが、
なれないうちは、1色づつが良いです。
この茶色は濃いので、微妙に色を変えてみましょう。
茶色の部分をダブルクリックして、色の作成に進むと
色を微妙に変化させれます。
右のメーターを上に移動すると明るくなるので、
明るさの数字が90なるまで移動させてください。
色の追加→OKと押すと、その色で描けます。

 

12、色塗り(塗りつぶしの使い方)

作った茶色を使って色を塗ります。
ツールボックスの右上2段目を塗りつぶしといいます。
輪郭で覆われた範囲を一瞬で塗りつぶせます。
顔と、耳を左クリックするだけでいいです。
口のまわりと、耳の内側を、カラーボックスの
下段の右から6番目の黄色を右クリックして
色を交換します。
口のまわりと、耳の内側を右クリックします。
下のようになりましたか??
色が背景や他の部分にはみ出してしまった方は
輪郭が繋がっていない状態です。
「編集」→「元に戻す」で以前の状態に戻して、
カラーボックスの左上の黒を選択。
鉛筆で輪郭を繋げてください。

 

13、背景を透明に

このままでは、背景と素材の間に白が残ってしまい
あまりよくありません。
「変形」→「キャンパスの色とサイズ」を選んで、
下の部分の背景色に透明を使用のチェックボックスを
左クリックして、色の選択に進みます。
右上表の色のサンプルの一番左下の白を選んで
OKに進んでください。もう一度OKを押すと背景が
透明になり、壁紙との境が綺麗になります。
あと、WinXPの場合、透明化の機能が付いてない
場合があります。Office付属のフォトエデッターで
透明化して下さい。

 

14、画像を保存する

画像のサイズが大きく表示されたままなので
「表示」→「拡大」→「標準に戻す」を選択してください。
出来上がりはどうですか??
「ファイル」→「名前を付けて画像を保存」を選択して
好きな場所や名前で保存してください。
ファイルの種類の所は、GIF形式のままで。
これで、アイコンの制作は完了です。
作ってみて、座標がめんどくさいって思われたと
思います。今回は誰でも同じ形になるように、
座標指定をしただけで、普段は、座標のことは
忘れてもらっていいです。

 

15、バナーの制作

バナーとは、クリックするとリンク先にジャンプ
できるような画像をいいます。
自分のホームページのアピール方法です。
互換リンクのために、ぜひ作ってみましょう。
サイズは88×31とか200×40(ピクセル)が一般的です。
決まり事ではないので、好きな大きさでいいですが。

 

16、バナー内の画像の用意(伸縮の使い方)

今回は、先ほど作ったくまのアイコンを利用します。
100×100のサイズのものを30×30に縮小します。
先ほどのアイコンを出して、「変形」→「伸縮と傾き」から
伸縮の水平方向、垂直方向の数字を30%に変えて
OKに進むと、縮小されます。
ここままでは、見にくいので表示を拡大します。
ツールボックスの右三段目の虫眼鏡のアイコンを
左クリックするとツールボックスの下に1、2、6、8x
と出るので拡大・縮小が簡単に変更出来ます。
ここで、一つ注意してもらいたいのは、「表示」の拡大・
縮小は、虫眼鏡で大きくしたり、小さくしたりで…
「変形」の伸縮は、実際の画像サイズの変更ということ。
くまの外まわりの輪郭がボケているので
鉛筆で右のようにひとマスづつ補正します。
それを別名で保存すれば画像の準備はOKです。

 


3倍拡大表示
17、バナーの用意

バナーのサイズは88×31にしますので、以前説明した
5〜6の操作を行ってください。サイズは幅88、高さ31。
表示は8倍がいいです。

 

18、画像の貼り付け(選択の使い方)

ツールボックスの右の一段目が選択ツールです。
画像を移動させたり、切ったり、コピーしたり、貼ったり
できます。
キャンパスの左上から左ボタンを押しながら右下に
マウスを移動させてください。
その点線の四角の中で右クリックすると表の中に
「ファイルから貼り付け」があるので、左クリック。
GIF形式にして、縮小させたくまの画像を出します。
マウスを画像の上に移動させて左ボタンを押しながら
移動させれば位置が微調節できます。
決まったら画像以外の所で左クリックすれば決定です。
12の方法で背景を好きな色で塗りつぶしてください。

 

19、文字の貼り付け(テキストの使い方)

ツールボックスの右5段目のAマークの所をテキストと
いって、文字を貼り付けることが出来ます。
テキストは、表示が一倍でないと使えないので、
虫眼鏡か、「表示」から一倍(標準)に変更してください。
文字を書きたい所に左上から左ボタンを押しながら
右下にマウスを移動させてください。
すると、書式設定というバーが表示されます。
表示されない場合は「表示」の書式バーにチェックを
いれれば、表示されるはずです。
一番左がフォントの種類。その隣がフォントのサイズ。
その隣のBが太文字、Iが斜体文字、
uがアンダーライン付き文字です。
テキストの時、ツールボックスの下に表示される
二種類の選択は、上は文字周りが白くなり、
下を選ぶと背景がそのまま残ります。
バーナーが小さいのでフォントサイズは最小の8が
いいと思います。
フォントの種類は丸文字はHGP創英角ぼっぷ体とか
英字はComic Sans Msなどが楽しいですよ。
カラーパレットで好きな色を指定してから好きな文字を
を入力します。あくまで見本ということで…(笑)。
四角の範囲外を左クリックすれば決定です。
位置は選択ツールで移動させて調整してください。

 

20、バナーの仕上げ(色の選択の使い方)

鉛筆ツールを使って文字に変化をつけても面白いです。
その場合、同じ色で修正する時に色を拾う便利な
方法があります。
ツールボックスの左3段目の色の選択(スポイト)です。
画像上でマウスをクリックした位置の色を吸い取ります。

 

21、額縁を付ける(直線・曲線の使い方)

四隅に何か色を付けるとまた雰囲気が変わります。
直線で色を付けてみましょう。
ツールボックス左6段目の所で直線が書けます。
ツールボックスの下に線の太さが表示されるので
好きな太さで引くことが出来ます。
線の引きたい端から端へ左ボタンを押しながら
移動させます。
余談ですが、直線の右隣が曲線を書く所で、
まず、直線を書き、山を作りたい所で左ボタンを
押しながら垂直方向に移動させて気に入った所で
指を離してから、もう一度左を押せば決定です。
もう一度押す時に移動させなければ単純曲線。
別のところに移動させると複雑な曲線が作れます。
ちょっと難しいですが…。
ということで、バナーは完成です。
この方法で、リンクのボタンなど同様に作れます。

22、高度な色変換

今回は最初にカラーパレットを開くなんて、面倒な方法をとりましたが、
画像変換ソフトさえあれば、好きな色に自在に変換できますし、
カラーパレットを開く必要もありません。
例えば、フリーソフトの「padie」が有名です。
そのソフトがあれば、そのままの色で保存が出来ます。
例をあげて説明しますね。

#FFD5D5 #FFEAD5 #FFFFD5 #EAFFD5 #D5FFD5 #D5FFEA
#FFEAEA #FFF4EA #FFFFEA #F4FFEA #EAFFEA #EAFFF4
#F4DFDF #F4EADF #F4F4DF #EAF4DF #DFF4DF #DFF4EA
#D5FFFF #D5EAFF #D5D5FF #EAD5FF #FFD5FF #FFD5EA
#EAFFFF #EAF4FF #EAEAFF #F4EAFF #FFEAFF #FFEAF4
#DFF4F4 #DFEAF4 #DFDFF4 #EADFF4 #F4DFF4 #F4DFEA

上の表は画像ではなく、表とセルを使って色を付けてある状態です。
カラーコードと呼ばれる形式も付けておきました。
上のような、薄い色で素材を作ってペイントで通常どうりGIFで保存すると
下のように変換されます。

これでもか〜ってくらい、変な色になっています(笑)。
これは、256色のウインドウズ標準色に変換されたためです。
一昔前のコンピューターやソフトが256色しか表示できずそのころのなごりが
現在も残っています。
ただカラーコードは6文字で表現しないといけませんが、256色の場合は
たった2文字で表現できます。
A〜F・0〜9の16文字×2=256色ということです。
コンピューターは16進法が基本となっています。
だから、GIFの256色の画像はファイルサイズが軽く良く使われます。
昔の256色のころの薄い色は、色と色の間に白などの色を入れて交互交互に
並べて表現していたので、基準色に入っていません。
でも、GIFはどんな色でも256色までなら使用できるんです。
ここで、ウインドウズ標準色とは別の256色を選んだのが、一番上の3の
カラーパレットです。薄い色と淡い色を追加して、濃い色を削ってあります。
ためしに、このパレットを使って変換すると下になります。

z

ペイントのGIF変換よりはかなり近い色になっていると思います。
ですが、微妙に色が違うのが解ると思います。
そこで、上に書いた「padie」で変換してみましょう。下のようになります。

ほぼ、100%に近い感じで表現が可能です。
そのつど、256色以内のカラーパレットを新規で作成するためです。
「padie」はここからダウンロードしてください。約2分位です。
操作手順は、一番上の5のカラーパレットの読み出しをせず新規作成。
ペイントで完成した画像を「24ビット ビットマップ」で保存。
「padie」でその画像を開いて、減色して「256色 ビットマップ」にして保存。
再度、ペイントで「256色 ビットマップ」をGIFに変換保存して完了です。
詳しくは、作者のホームページ(ヘルプ)をみてください。
いままでJPEGでしか表現できない写真なども、上の手順でGIFに保存すると
びっくりするくらい綺麗に軽く画像が出来ます。試してみてくださいね。

もちろん、フォトショップなどの高価なグラフックソフトを購入すれば
一番なのですが、今回はあくまで「タダ」のソフトの講座ということで…(笑)。

♪TOP♪