配布資料

コンピュータ基礎実習(上級) 第 8 週
「コンピュータ基礎実習(上級)」第 8 週 Paint.net を使った CG 編集
今回の授業は、CG(コンピュータグラフィクス)の編集に関して実習します。
1. 使用するソフトウェア Paint.NET
CG(コンピュータグラフィクス)の編集作業を行うには、専用のアプリケーションが必要です。
本講義では学内の共用パソコンに最初からインストールされている [Paint.NET] を使用します。
Paint.NET は市販ソフト並みの高度な機能を備えたグラフィックソフトウェアで、
無料でダウンロードし利用できます。
参考:
ダウンロードサイト(窓の杜) http://www.forest.impress.co.jp/library/software/paintdotnet/
Paint.NET 公式サイト
http://www.getpaint.net/
2. Paint.NET の画面
[共通アプリケーション] → [Paint.NET] で Paint.NET を起動すると、
右のような画面になります。
大きなメインウィンドと小さないくつかのサブウィンドウで構成され
ます。各部分の名称は以下のとおりです。
①キャンバス：画像を編集できるエリアです。白い部分が編集できる範
囲です。
①
②
③
④
②ツール：様々な機能を呼び出します。
③カラー：色を決定します。色は２色設定でき、[プライマリ色]と[セカンダリ色]があります。
プライマリ色は主にマウスの左ボタンでドラッグした時の色や、図形の枠線の色。
セカンダリ色は主にマウスの右ボタンでドラッグした時の色や、図形の内部の塗りつぶし色になります。
④レイヤー：複数の画像を層(レイヤー)のように重ねあわせることができる機能です。
もしこれらのサブウィンドウを閉じてしまったら、[ウィンドウ]メニュー → [レイヤー] のように
[ウィンドウ]メニューからサブウィンドウを再表示させることが出来ます。
3. 画像を合成する
画像編集の例として、複数の画像をひとつに混ぜた合成画像を作成します。
コンピュータ基礎実習のページ内に、以下のような合成用の画像が用意されています。これらを一つに合成します。
jupiter.jpg
space.jpg
road.jpg
画像合成のイメージ
3.1. 作業手順
(1) 素材画像をダウンロード
コンピュータ基礎実習のサイト内に画像が用意されていますので、それらを全てダウンロードし、public_html 内に
保存します。
コンピュータ基礎実習のサイト http://www.kyoto-su.ac.jp/~shimizu/
(2) road.jpg を Paint.NET に読み込み
Paint.NET を起動し、[ファイル]→[開く] などで road.jpg を開きます。
(3) 背景部分の削除
[ツール]→[魔法の杖
] を選択します。画面上部のツールバー上にある
[許容範囲]欄を 38%前後に設定。
背景となる空の部分をクリックし、選択したら Delete キーで選択部分を消去します。
消し残しがある場合は[ツール]→[なげなわ選択 ]で消し残し部分の周囲をドラッ
-1-
背景部分を削除した例
コンピュータ基礎実習(上級) 第 8 週
グし Delete キーで更に消去します。
ポイント:
 [魔法の杖
]ツールは、クリックした点と似た色の範囲を自動的に選択します。
このとき[許容範囲]で、どれくらい似た色まで選択するかを調節できます。
 画像の一部を選択した状態で、Delete キーを押すと、その部分を消去できます。
 消去した部分は[透明]になります。(画面ではグレーの市松模様で表されます。)
(4) 背景画像の読み込み
新たな背景として、[ファイル]→[開く] などで space.jpg を開きます。
[編集]→[全て選択(Ctrl+A)] の後、[編集]→[コピー(Ctrl+C)]でコピー。
ウィンドウ右上の縮小画像をクリックして、先ほどの road.jpg に切り替えをし、
[編集]→[新しいレイヤーに貼り付け] で新規レイヤーに space.jpg の内容を貼り付けま
す。
貼り付けた内容は手前に重なるので、[レイヤー]ウィンドウ
背景部分を合成した例
→[レイヤーを背面に移動
]で space.jpg が奥に重なるよう順番を変更します。
ポイント：
 複数の画像を読み込んだ場合は、ウィンドウ右上の縮小画像をクリックして切り替えられます。
 レイヤーを分けることで画像同士を重ね合わせることができます。
 レイヤーの重なり方はレイヤーウィンドウ内の
ボタンで調整できます。
 Delete キーによる削除などで[透明]になった部分は、下のレイヤーの画像を透過します。
(5) 木星の画像を合成
さらに[ファイル]→[開く] などで jupiter.jpg を開きます。
[ツール]→[魔法の杖
] を選択し、[許容範囲]を 25%程度に設定し、背景である黒い
部分をクリックします。
背景部分が選択されたら[編集]→[選択の切り替え]で選択範囲を反転し、木星部分が選択
された状態にします。
[編集]→[コピー(Ctrl+C)]で木星をコピーし、ウィンドウ右上の縮小画像クリックで、先
ほどの road.jpg に切り替えをしたら、[編集]→[新しいレイヤーに貼り付け] で新規レイヤ
ーに木星画像を貼り付けます。
[レイヤー]→[回転/ズーム]で木星を傾けたり、ドラッグして位置を調節したりして完成です。
完成例
(6) ファイルの保存
出来上がったら、[ファイル]→[名前をつけて保存]などで好きな名前をつけて保存します。初期設定では Paint.NET
の専用形式で保存されます。
(7) ウェブ用に書き出し
この画像をウェブ上で使用したい場合は、もう一度[名前をつけて保存]を選択し、[ファイルの種類]を JPG などに変
更、ファイル名を半角英数文字で決め、public_html フォルダ以下に保存してください。
ポイント:
 レイヤーなど編集途中の状況を残しておきたい場合は、Paint.NET 専用形式で保存してください。
 ウェブで使用する場合は、改めて JPG PNG GIF 形式のいずれかで保存しなおしてください。
このように Paint.NET では選択範囲をうまく設定してコピーや削除をしたり、レイヤーを使ったりすることで簡単
に合成写真を作ることができます。また、[透明]を駆使することで、ページの背景ときれいに重なる画像を作るこ
ともできます。ウェブの写真掲載などに活用してください。
4. ボタンを制作する
HTML の表現能力は限られているため、例えばクリックするためのボタンやサイト内を移動するためのメニューを
作るためには、画像で表現する必要があります。
今回は Paint.NET を使って、ボタンのような表現の画像を制作します。
完成例
-2-
コンピュータ基礎実習(上級) 第 8 週
4.1. 作業手順
(1) キャンバスの準備
Paint.NET を起動したら、キャンバスサイズを調整します。
[イメージ]→[キャンバスサイズ]で幅:200 ピクセル高さ:50 ピクセルに設定します。
キャンバスの準備
(2) グラデーションをかける
[カラー]ウィンドウでプライマリ色をグレー、セカンダリ色を白に設定し
[ツール]→[グラデーション ]を選択。キャンバス上で縦にドラッグをして
グラデーションを設定します。
グラデーションをかけた例
ポイント:
 グラデーションは、プライマリ色 → セカンダリ色に色が変化します。
 グラデーションのためにドラッグするとき、Shift キーを押していると、垂直・水平方向にドラッグするのが簡
単になります。
 画面が小さくて操作しづらい場合は、[ツール]→[ズーム
]で画面を拡大すると作業しやすいでしょう。
(3) 影色の設定
プライマリ色がグレーの状態で、[ツール]→[四角形
むようにドラッグしてボタンの枠線をひきます。
] を選択し、[ブラシ幅]を 1 に設定したら、ボタンの周囲を囲
(4) ハイライト色の設定
プライマリ色が白の状態で[ツール]→[四角形
] を選択し、[ブラシ幅]を 1 に設定したら、
先ほどの枠線の 1 ピクセル内側をドラッグします。これで光沢のような立体感のある表現
ができます。
(5) 飾りの追加
更にボタンの周囲に飾りをつけるため、プライマリ色を緑に設定し、[四角形
]を選択し、
画面上部のツールバーで[
塗りつぶし図形を描く] を選択したら、ボタンの左右に
四角形を配置します。
(6) 新規レイヤーに文字の入力
[レイヤー]→[新しいレイヤーの追加
]で新しく[レイヤー2]を挿入します。
レイヤー2 が選択されている状態で、[ツール]→[テキスト
]を選択します。
プライマリ色を文字の色に設定し、文字の大きさを 18 程度に設定したら、
キャンバス上をクリックして、ボタン名を入力します。
文字の位置がずれた場合は、[ツール]→[ピクセルの移動
]で文字の位置を調整できます。
枠線を引いた例
飾りを追加した例
ボタン名を入力した例
(7) 別の文字の入力
さらに[レイヤー]→[新しいレイヤーの追加 ]で新しく[レイヤー3]を挿入します。
レイヤー3 が選択されている状態で、[ツール]→[テキスト
]を選択し、別のボタン名を入力
別ボタンの例
します。
入力した文字は重なって表示されますが、レイヤーウィンドウの右端にあるチェックボックスを OFF にすると、レ
イヤーは一時的に見えなくなるので、レイヤー2 のチェックボックスを OFF にして、正しい表示にします。
ポイント:
同じデザインで一部表示が異なるものをたくさん作りたい場合、
このようにレイヤーの表示 ON OFF で切り替えるようにすると、
簡単に量産ができるので、便利です。
貴方のサイトをデザインする際の参考にしてみてください。
以上
-3-
レイヤーを使ってボタンを
使い分けるイメージ

Download Report