ペイントを使った簡単HP素材の作り方 
|
<ペイントで素材を作るには?>
ペイントは必ずと言っていいほどPCに最初から入っているお絵描きソフトです。
ウィンドウズなら、左下の「スタート」から「すべてのプログラム」→「アクセサリ」→「ペイント」
・・・でたどりつけると思います。
ひぃなも最初はペイントを使って素材作りをしてました☆
このページでは、その方法の一部をご紹介していきたいと思います。^^
うちのこモデルの自作ペッツ素材を作っちゃいましょう♪
ちなみにひぃなは説明書嫌いなので、適当にいじりながら使い方を覚えていきました・・。
そんな程度の知識なので、おかしいところもあるかもしれませんが・・そこはご愛敬。^^;(ぇ
ヘルプを読んだ方が分かりやすかったりして・・?( ̄▽ ̄;)
1. まずペイントを開くとこんな感じ。
実際はもっと大きいと思いますが、右下のカド(赤マルのところ)にアイコンを合わせ、矢印が変化したところで左クリックしたまま動かすと自由に好きな大きさに変えられます。
これは解説しやすいようにちょっと小さめにしてます。 |
2. 紙の大きさを決めます。 上の方に書いてある「変形」を押して「キャンバスの色とサイズ」をクリック。 |
3. ←こんな感じにメニューが出るので、自由に紙の大きさを設定してみてください。
今回はとりあえず縦横20ピクセルにしてみます。
ミニミニアイコンサイズです。 |
4. 小さい物を描く時は、拡大してマス目をつけた方が描きやすいです。
左の虫めがねマークで最大の「8×」にしたら、「表示」→「拡大」→「グリッドの表示」でマスをつけます。
「グリッドを表示」の上にある「拡大率の指定」でも大きさを変えられます。 |
5. マスがついたら、左の欄から「鉛筆」を選択。 下の色パレットで色を選択。描いてみるとこんな感じ。
間違えたら慌てず騒がず、「編集」の「一つ戻る」を押せばやりなおしがききます☆(確か2・3回まで。)
こんな感じでマスを塗るようにポツポツと描いていきます。 |
6. 青で塗りつぶして、光と陰のつもりで周りを違う色で囲ってみたりして。 この青系5色は全部下のパレットにある色で描いています。 |
7. これだけだとちょっと寂しいので茶系で肉球を描いてみたり。これも下のパレットの色で描いております。
ポチポチと根気よく色を塗っていきます。
最初は拡大の方法が分かっていなくて実サイズで描いてました。^^;実際のサイズでどう見えるかが分かりやすいけれど、細かすぎてペンがズレてしまって難しかったです。。近くで凝視するから目も疲れるし。 |
8. とりあえず完成☆ さっき大きさを変えた「虫めがねマーク」で、実際のサイズ「1×」に戻してみます。
するとこんな感じ。影をつけたのでぷくっとしてみえるでしょうか。
スイッチにするには、これの影を逆にしたものを作って、クリックしたときに画像が変化するようにすると、ぴこっと押したかんじになるようなならないような。(?)
☆完成品はコチラ☆

押すと影を逆につけた絵に変わるようにしてみました。へこんで見えるかなー?
矢印をあててみてください。↑
これが縦横20ピクセルの実物サイズ。
押したら変わるタグはこちら↓
<img border="0" src="botan_sample1.gif" onmouseover="this.src='botan_sample2.gif'" onmouseout="this.src='botan_sample1.gif'">
|
9. 出来上がったら左上の「ファイル」を開き、「名前を付けて保存」で好きな形式で好きな場所に保存。 本当は最後だけでなくこまめに保存した方が、アクシデントが起きた時に最初から作りなおしになってしまうのを防げます。
形式は素材にはGIFがオススメですが、色が変わってしまう時があるので、
まず先にPNGで保険を取っておく方がいいかも?PNGはそのままの色で保存されます。 一度色が変化して保存されてしまうと、もう元には戻らないので。。 |
10. 色の作り方。 色はパレットにうわがきされちゃうので、まずは使わない色を選択しておきます。
そして上の方ににある「色」の欄をクリック。 「色の編集」を選択すると、下画面↓の左半分が現れます。この基本色の中から選ぶもよし、「色の作成」を押して新しい色を自分で作ってもよし。「色の作成」を押すと左半分も現れます。 大きい虹色の画面で色を決められ、右の縦に長い画面についてる黒三角(赤マルのところ)を上下するとその色の明るさを変えられます。
 |
11. コピーの仕方。 上の(2)のやり方で、大きさを縦横40ピクセルに変更しました。できた余白にもう一個同じ絵をコピーしてみます。 左の欄の一番上、「選択」を押して、コピーしたい部分を囲みます。 囲めたら上の欄から「編集」→「コピー」を押します。次に「編集」→「貼り付け」を押します。 一瞬、何事も起こっていないように見えますが、最初の絵の上に同じ絵がコピーされて重なっています。 |
重なっている上の画像をどかしてコピーを置きたい場所に移動します。 |
余った白いところは水色で塗ったらこんな感じ。壁紙・・にしてはちょっと色が濃すぎて目が痛くなりそう。(^^;)でもラインぐらいなら。。
こちらが完成品↓
余った白いところ、水色で塗らない方がよかったっぽいです。派手派手。(笑)
    |
左のメニュー、消しゴムや、スポイト、流し込み、スプレー、ブラシ、線や図形は・・・自分で使って試してみてください。(適当)
1. お絵描き掲示板などで描いた画像や、デジカメで撮った写真などを使って素材を作ってみます。
まず左上の「ファイル」から「開く」で使いたい画像を選択して開きます。
今回はいちご画像を使っていますが、このままだと大き過ぎて何が何だか分かりません。画像を小さくするには上にある「変形」→「伸縮と傾き」を押します。 |
2.
するとこんな画面が出てきます。デジカメ画像そのままでは、かなり大きいので、縦横を10%まで縮めてみます。 |
3.
いちごの顔が出てきました♪
さっきまでは画像が大き過ぎて左上角のほんの一部しか出ていなかったわけです。
ここで注意!!一度縮めた画像はもう二度と元には戻らないので「上書き保存」は絶対にダメ!NG!です。元のデジカメ画像までもが小さくなって、取り返しのつかない事態に落ち込む事しかできなくなります。こうなっては現像もできません。><
新しく「名前を付けて保存」で違う名前にしてから保存しましょう。 |
4.
今度は上にある「編集」から「全て選択」で画像を紙から浮かせて、いちごの顔が左上にくるように動かしてみます。
それが出来たら、次は紙のはじっこ(赤マルのところ)を持って動かし、紙の大きさを小さくしてみます。 |
5.
大きさを変えたら、「鉛筆」の下にある「エアブラシ」で周りをピンクに塗ってみます。
また周りに影っぽい色で縁取りつけてみました。 |
6.
今度は文字を入れてみます。あらかじめ文字色にしたい色を選択しておきます。
左の「A」のマークを押して、文字を入れたい場所を囲います。横長の「書式バー」なるものが出てきますが、出てこない場合は上の「表示」から「書式バー」を選択。下にある「フォント」と書いてあるのがそうです。今回はポップ体でサイズは12にしました。
このままだと囲った部分が白くなってしまうので、背景を透明にする意味のマーク(赤マルのところ)をクリックしてから文字を入れます。 |
7.
文字が入りました。「変形」→「伸縮と傾き」でさらに小さくして、ミニバナーサイズにしてみました。
文字は縮小してみたら小さ過ぎて潰れてしまったので、縮小後にもう一度書き直しています。さらに白だといまいち目立たなかったので、濃いピンクで文字周りに縁取りを描きました。
いちごバナーの完成☆
↓完成品↓

ちょっといちごの画像が暗めだったかも。。色も適当過ぎました。^^;
ほとんど色を作らないでやっちゃったのですが、実際は毛並の周りをピンクと茶色の中間色で埋めていくと、背景と馴染んで見えるようになったはず。周囲の影も、もっと自然な色でないと少々浮いちゃってますね。。まぁ、これはあくまで例ですので。(^^;ヾ皆さんのセンスを生かして素敵な素材を作ってください♪
|
最後に。。
PC上に表示されている画像は全てドット(点)の集まりです。ドットが縦横10目ずつ並んだ画像なら、「10ピクセル×10ピクセル」となります。
試しに画像をペイントに取り込んで、限界まで拡大してみると、その画像がどんな色の点で出来ているか見る事が出来ます。そうやって研究してみるのもいいかもしれません。^^
画像全てが、ただ色の点の集まりなのだから、ペイントで物理的に描けない画像はない!・・はず。大きな画像を描くには気力もいるし、0から描くには想像力やセンスや知識も多少いるでしょうけれど。(^^;ヾ
興味が沸いたら、まずはいじってみてください。素材の手作り、意外と楽しいです♪慣れてきたらピクシアとか無料のお絵かきソフトをDLするのもいいですし。お手軽なペイントが、自作素材に興味を持つきっかけになればと思います。
以上、ひぃなのペイント初歩講座でした。(^−^)/☆
|
|