*情報教育演習II 第9回 [#vb11c74c] **コンピュータ上の画像の扱い [#n240d5ba] ***コンピュータの画面はどうやって写るのか? [#a1c9b41f] 光の3原色(RGB) ***コンピュータの中で画像はどう扱われるか? [#qa395631] RGBの三色に分解しサンプリング コンピュータでは、画像は 「ドット」や「ピクセル」という点の集まりに分解されています。 それぞれの色の強さを、数字で表す。 原色から、どれだけ暗い色になるか それぞれの点には、色の情報が数値化されています。 最近では、おもに、 RGB(赤・緑・青)の3色の情報をもち、 それぞれの色の階調を数値で表します。 原色を一番多い数値として、徐々に暗くして、最も暗い色(黒)が一番少ない数値となります。 >>例:256階調で表す場合 |CENTER:~階調|255|...|192|...|063|...|000| |CENTER:~色|BGCOLOR(#ff0000): |...|BGCOLOR(#bf0000): |...|BGCOLOR(#3f0000): |...|BGCOLOR(#000000): | コンピュータで表現できる色 -約1670万色(24ビット) -約65000色(16ビット) -256色(8ビット) 最近のパソコンで表現できる色数は、次のとおりです。 10年以上前のパソコンでは、64色や16色、8色というものもありました。 -フルカラー(1670万7216色、24ビット) --赤 256階調 × 緑 256階調 × 青 256階調 -ハイカラー(65536色、16ビット) --赤 32階調 × 緑 64階調 × 青 32階調 -インデックスカラー(256色、8ビット) 以前は、64色や16色、8色というものもあった **バナーの作成 [#k3659194] ペイントを使って、バナーを作成する ***グラフィックソフト [#z29a57a2] -ペイント系 -ドロー系 Windowsに標準で付属しているグラフィックスソフト''「ペイント」''を使って、 ''「バナー」''を作成します。 >>''「バナー」''とは、インターネット上での広告のひとつ。 サイトへのリンク用のアイコンで、 クリックした利用者を自分のサイトへ導くための「旗印」のようなもの。 &br; バナーの大きさ(幅×高さ)は次のような種類があるが、とくに定められていない。 -88×31、120×60、200×40、224×33、392×72、468×60 &br; ([[IT用語辞典 e-Words:http://e-words.jp/w/E38390E3838AE383BCE5BA83E5918A.html]]参照) **バナーを作成 [#zbb6b32a] 88x31のバナーを作成し、自分のページの窓口に作成する ***グラフィックソフトの種類 [#z29a57a2] グラフィックソフトは、描画の仕方によって、2種類にわけることができます。 :ペイント系| --画面上のドット(点)の一つひとつを描画する --データには、すべての点の色の情報が記録される ---拡大・縮小すると、絵が歪んでしまう --ペンや筆で紙に絵を描くような感覚で、絵を作ることができる :ドロー系| --「線」や「四角形」「円」などの図形を描画する --図形の位置や線の長さ、角度、色などの、図形としての情報が記録される ---拡大・縮小しても、絵が歪むことない --貼り絵の感覚で、絵を作ることができる **画像のフォーマット [#lc62a5de] ***バナーを作成 [#zbb6b32a] まず、バナー用に、キャンバス(絵を描くスペース)のサイズを変更します。 +メニューから、「変形」→「キャンバスの色とサイズ」を選択 +「幅」を「88」、「高さ」を「31」に設定し、「OK」ボタンをクリック バナーの中には、次のような内容を入力・描画してください。 -学籍番号と名前(本名、ニックネーム) -イラストと背景(パターン)を自作 作成できたら、次のようにして、保存してください。 +メニューから、「ファイル」→「名前をつけて保存」を選択 +「保存する場所」を、「マイドキュメント」→「My Pictures」に設定 +ファイル名に、「自分の学籍番号」+「.bmp」を設定~ (例:学籍番号がC2023000の場合、ファイル名は「C2032000.bmp」) ***画像のフォーマット [#lc62a5de] 画像データのフォーマット(形式)には、次のようなものがあります。 :BMP(ビットマップ)(*.bmp)| --Windows標準の画像フォーマット(「ペイント」で作成できる) --ファイルサイズが大きい(24ビットカラーの場合) --Webページでは使えないので、ほかの形式に変換する必要がある :JPEG (*.jpg, *.jpeg)| --写真、イラスト向き(フルカラーが扱える) --ファイルサイズが小さい(圧縮率を変える) :GIF (*.gif)| --アイコン、バナー向き(最大で256色しか扱えない) --Compu Serve(現在はAOL)が定められたフォーマット --透過GIFやアニメーションGIFなど機能が豊富 :PNG (*.png)| --GIFファイルに代わるフォーマット --GIFファイルに特許問題が生じたため、それ避ける目的で作られた -参考リンク --情報機器と情報社会のしくみ素材集:http://kyoiku-gakka.u-sacred-heart.ac.jp/jyouhou-kiki/index.html ***素材集の利用 [#va9d0460] インターネットに公開されている「素材集サイト」にアクセスして、 アイコンの素材を集めます。 ただし、 ''素材集サイトを利用するときには、利用に関する注意事項を確認しましょう''。 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。 +Yahoo! JAPAN( http://www.yahoo.co.jp)にアクセス +「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む +登録されているサイトにアクセスし、画像ファイルを探す +気に入った画像があったら、画像を右クリックする ++メニューから「名前をつけて画像を保存」を選ぶ ++ファイルの保存場所を指定して、「保存」ボタンをクリック |