2008/01/24
パソコンによる画像操作の例
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
■■ 「あなたにも出来る−ホームページ簡単作成」 ■■
第４３回 (Vol.43／2008.1.23)
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
第１章 パソコンによる画像操作 の説明
１．コンピュータ画像の仕組み (paint)型ツール
●画像はこのピクセルという小さな点の集
●縁をぼかしてなめらかな画像を表現する「アンチエイリアシング」
●画像の本当の大きさは見た目の大きさとは違う
解像度について
●画像解像度は１インチの中に何ドット使って画像が作られているか
をdpi（ドットパーインチ）で表す
●画面の解像度は画面の横幅×高さ（例：640ドット×480ドット）
で表す
●640×480=307,200個のドットで１画面が表現
●画面の１インチ当たりのドット数は一定（Windows95は75dpi、
Macintoshは72dpi）
ＷＥＢ用画像の圧縮
（１）・ホームページで表示される画像の圧縮形式（拡張子）は、
形式は基本的には２種類 基本的に"GIF"と"JPEG（JPG）"が主流です。
"GIF"と"JPEG（JPG）"は圧縮時の減色方法が異なるので、画像の
種類によって使い分ける！
・”プログレッシブ”や”インタレース”処理といったものは、
原則的に使用しないようにする。（※未対応ブラウザへの配慮）
・他形式の画像について…最近ではブラウザの対応もあって、"TIFF"
や"PNG"なども標準的に表示されます。…が、インターネットの
環境は、すべての人が最新のブラウザで閲覧しているわけではありま
せん。またソフトによって独自の拡張子もあり、それらを含めるとか
なりの圧縮形式(拡張子というべき？）が存在しています
もちろん、それらも注意が必要です。できるだけ、他の拡張子は避
けた方がいいでしょう。
代表的な画像ファイルを２種類
画像形式の種類 画像形式の種類は拡張子で区分される。
（１）GIF形式 特徴 256色しか使うことができない。
イラストなど同じ色が連続する画像に向く
比較的ファイルサイズが小さい。 拡張子は「.gif」
インターレースを使うことができる
任意の色を透明色として扱うことができる
GIFはペイント・ツールで描いたアイコン用のものや、『アニメー
ションG IF』とする為の元画像に使用するのが一般的です。 写真に
は向かない。
（２）JPEG形式
JPEG（ジェーペグと読みます）形式はGIF形式と並んでインターネ
ットの世界でポピュラーな画像形式です。
特徴 フルカラー16,777,216色を扱うことができる
画像を圧縮して保存する 拡張子は「.jpg」
写真に向く。 インターレースを使うことができるプログレッシブJPEG
（ただし、アニメーションにする場合はJPEGにはできません
■JPEGはこんな時に GIFのところでも書きましたが、写真やイラストレーション
など色合いを重視したい場合はJPEGにしたりします。GIFに
比べて減色圧縮）しても劣化が小さく、なおかつ容量も軽
くできる利点がありlます。
・JPEGも圧縮の段階を選択できるソフトが増えたので『高画質』
圧縮してもいいと思います。JPEG自体が画像を圧縮し、容量を
軽くしているわけですから。 スキャナで取り込んだ画像など。
プログレッシブJP
プログレッシブJPEGは、先ほど紹介したインターレースのようにジワジワと
画像を表示します。ただし、この形式に対応していないWebブラウザもあり
ますので、使用する際には注意が必要です
インターレース
インターレースは画像を走査線と呼ばれる細い帯状の行に区切って、その偶数
行から純に表示していく方式で、これをWebページ上で見ると、モザイクがか
かった画像が「ジワジワ」という感じで現れて、最終的に表示を完了した時点
で普通の画像と同じように見える方式です。
このような画像を作るには、画像ソフトで保存をするときに
「インターレース」オプションを付けます。具体的な方法はお使いのグラフィ
ックソフトのマニュアル等を参照して下さい。
フルカラー
JPEG形式ではGIF形式とは違って、フルカラーの画像を扱うことが
できます。それだけ詳細な画像表現が可能ですが、その分ファイル
サイズが大きくなってしまいます。
画像を圧縮
前述のように、ファイルサイズが大きくなってしまうために、
画像を圧縮る事が考え出されました。「JPEG」とはその圧縮方式の
名前でもあります
圧縮には圧縮率によって何段階かレベルがあって、圧縮率が大き
いほどファルサイズは小さくなり、また、画質が低下します。
ペイントとドロー ピクセル(pixel)、画素
■ .ペイント(paint)型ツール
.ペイント(paint)型ツール
.絵筆で描いていくようなツール
.縦横の画素数を決めたキャンバスに描く
.画素のひとつひとつに対する色情報
.ビットマップ(bitmap)方式、ラスタ(raster)方式ともいう
(paint)型ツール
斜めの線は階段状
.縮小とは画素を間引くこと
.拡大とは1画素の色情報を４画素に割り当てること
.拡大・縮小で画質を維持することはできない
.目的に合ったキャンバスの大きさ(縦横の画素数)を決める
ことが重要
.保存するのはすべての画素の色情報
代表的なラスタ画像形 形式 拡張子 圧縮 色数 その他の特徴
式
(paint)型ツール TIFF.tiff .tif 可逆 フルカラー CMYK対応
BMP .bmp しない フルカラー
PNG .png 可逆 フルカラー RGBA対応
JPEG .jpeg .jpg 非可逆 フルカラー CMYK対応
■ .ドロー(draw)型ツール .
ドロー(draw)型ツール
.さまざまな図形(オブジェクト)を配置して描く
.図形を配置する座標情報で描く ベクタ(vector)方式ともいう
GIF .gif 可逆 256 動画形式あり
■ 画像の操作とソフトの扱い方
１，画像の操作で主にやることは次の３つです。
（１）画像を切り取る。
（２）画像を拡大縮小する。（タテと横の比率を変える）
（３）画像に文字を入れる。 の３通りです。
あとまだ色々な事がありますが。
ソフトも色々あって、一つのソフトで３通り出来るのもあれば、何種
類ものソフトを使う場合もあります。
高機能の市販ソフトを使うのもよいが、個人的に使う程度であったな
らば「フリーソフト」もあるし、使ってみて気に入ったら払えばよい
「シェアウェア」もあります。
道具と人は使いようと言われます。すべてを一つのソフトで間に合わ
せようとすると中なかむずかしくても、個々のソフトの特徴を掴ん
で上手に使いこなせば、たいがいのことはやりこなせるものです。
私なども、何種類もの「フリーソフト」を使ってけっこうむずかし
ことをやっています。
２，画像切り抜きの方法
それでは、実際にソフトを使って切り抜きの方法を説明します。
ステップ１ ソフトを起動します。
ステップ２ 操作対象を指定します。
ロードから画像（jpeg形式）を読み込む。
ステップ３ カットアイコンをクリックします。
ステップ４ 切り取る範囲を指定してクリックします。
画像から切り取りたいところの始点、終点を指定、
マウスで四角い枠を描き終点でクリック。
ステップ５ プレビュー画面に表示された画像を確認してか
ら画像を保存
写真を撮影して不要な部分を取り除きたい時など。
編集機能で簡単な絵、文字等を書く事も可能です。
画像を制作すると Webページに表示する画像を制作するときのポイントは
きのポイントは 「ファイルサイズを小さく、見た目をきれいに作る」事です
画像の大きさの問題 この「小さくきれいに」がWebページづくりの最大の難問と
いっていいでしょう。
画像のサイズが大きければ、当然そのファイルサイズが大
きくなります。
みなさんも、アクセスしてもなかなか画像が表示されず、
ついにそのWebページへのアクセスを諦めてしまった経験
があると思います。
逆の立場を考えて見て下さい。あなたが作ったWebページを
見に来た人が、途中で諦めて「このページはいつも表示が
遅いから」とアクセスしてくれなくなったらどう思います
か？
このように見る側のことも配慮するのが、ホームページを
作る側のマナーです。
画像の大きさについて 前述の通り、画像の見た目の大きさが大きいと表示に時間
解説 がかかりますし、画面をスクロールさせなければ画像全体
を見ることができません。これは、見る側にとってとても
不便ですしファイルサイズも大きくなります。
特にどの位の大きさにしなければならない、というルール
はありませんが、目安としてみる人が画面の半分くらいの
範囲で WEBブラウザを見ているとすると、大きくても横幅
450ピクセル以下で作るとよいでしょう。
逆に小さくしすぎると、細かな表現がしにくくなってしまい
何の絵なのかわからなくなることもあります。
この辺が大変難しいところで、実際にご自身で試行錯誤して
いただくしかありません。
レイヤー 特にペイント型ツールでの描画に柔軟性を持たせる工夫のひ
とつ
.基本的な使い方
.背景レイヤー(画用紙)に背景を描く
.上に透明のレイヤーを重ね、見せたり除いたりしたい絵を描く
背景 レイヤー1 レイヤー2 重ね合わせる
第２ 【これだけは知っておきたいシリーズ】のご紹介
私、森田正弘が作成しましたレポートのご紹介
（１） 「レポート作成も簡単 使いこなし術」
「まぐぞう」専用ＵＲＬ
http://mag-zou.com/report_get.php?id=m0000175754&n=m0000175754
（２） 「遺言書の書き方」
http://mag-zou.com/report_get.php?id=m0000175754_1&n=m0000175754
（３） 「目の病気 白内障の知識」
http://mag-zou.com/report_get.php?id=m0000175754_2&n=m0000175754
（４） 決定版 「就職転職の手引き」
http://mag-zou.com/report_get.php?id=m0000175754_3&n=m0000175754
（５） 「これだけは知っておきたい マンションと不動産の知識」
http://mag-zou.com/report_get.php?id=m0000175754_5&n=m0000175754
（６） 「これだけは知っておきたい 弁護士の頼み方、付き合い方」
http://mag-zou.com/report_get.php?id=m0000175754_7&n=m0000175754
（７）「これだけは知っておきたいその７ 文章の書き方 総まとめ」
http://mag-zou.com/report_get.php?id=m0000175754_8&n=m0000175754
（８）「医療をとりまく環境の変化 病気にならないために知っておくべき
こと」です。
http://mag-zou.com/report_get.php?id=m0000175754_9&n=m0000175754
登録は「まぐぞう」及び「無料レポートランキングにしてあります。
どうぞよろしくお願い致します。
本日はそこまでとします。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
発行者 森田 正弘
mailto:qff00701@yahoo.co.jp
ホームページ
http://homepage2.nifty.com/monomal/
まぐまぐID:0000175754
このメールマガジンはまぐまぐを利用して発行されています。
解除ページはhttp://www.mag2.com/m/0000175754.htm
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
