18

3. 画像処理の基本

3.1. Ｐａｉｎｔで写真を加工する

5

3.1.1. 写真を撮ろう

デジタルカメラで写真を撮ります。

友達同士で撮影会をするのも良いでしょう。

風景・建物・室内の様子などでも OK です。 10

撮るものは何でも結構！

フレームいっぱいに撮ろう！

3.1.2. 撮影したデータをＰＣにコピー

15

3.1.3. 画像サイズの変更

デジタルカメラで撮影した画像はでかすぎる！

1600×1200 ﾋﾟｸｾﾙなど

（ 新のものはモット！） 20

画像サイズは「プロパティ」で確認

幅 400 ピクセルに変更

ＳＤカードなどからＰＣのフォルダにコピー

ドラッグ＆ドロップ

コピー先 デスクトップのフォルダ

19

高さは自動的に変更

プロは PhotoShop などのソフトを使用

無料のソフトでもできる

3.1.4. Paint を使った画像の縮小 5

PC にコピーした画像を選択

画像を選ぶ時には「Picture and Fax ビューアー」を使って選んでください。

画像ファイルのアイコンを右クリック

プログラムから開く 10

メニューから「ペイント」を選びクリック

ペイントが起動し画像の一部が表示されます。

この段階で画像がハミ出しています。

表示された部分だけでなく全体を選びます。

メニューバー「編集」→「すべてを選択」 15

画像の周りが点線に変わります。

サイズ変更をします。

メニューバー「変形」→「サイズ変更と傾斜」

ウィンドウが表示されます

20

3.1.5. 画像の保存

縮小された画像が表示されます。

周りが点線表示され選択された状態になります。この状態でコピーします。 25

「変形」→「キャンパスの色とサイズ」を選び、幅・高さをそれぞれ「0」にします。

「編集」→「貼り付け」を選びます。

ウィンドウの大きさに合って表示されたらば「上書き保存」で保存します。

それぞれ25にする

OKをクリックする

20

3.2. 画像処理の方法

コンピュータによる画像処理は、その処理方法によりいくつかの種類に分けることがで

きます。その基本的な分け方はドロー（ペイント）系ソフトとベクター系ソフトです。ド

ロー系ソフトは、フォトレタッチソフトなどを含みます。ここでは基本的な機能の違いを

整理します。 5

ドロー系ソフト

画像を点(ピクセル)の集まりとしてとらえる考え方です。一つひとつの点が色のデータ

を持つことで、それがまとまり絵になっていく方法です。テレビの画面を拡大すると小さ

な点の集まりであることがわかります。この表現方法をそのまま適用した描画方法です。10

自然風景などを保存する方法に優れ、現在のパソコンが処理するデジタル表現では

16,777,216 の色を表現することができます。ビデオカメラやデジタルカメラなども同様な

保存方法を使っています。

「画素数」は記録する画像の点の数を示したものです。横 1,024×縦 768 の画面ですと15

786,432(=786K)画素ということになります。1,024×768 という画面サイズは現在使われ

ているパソコンの画面でよくつかわれるサイズです。ホームページに表示する画面の大き

さを考えると十分すぎる大きさと言えます。画素数の大きなデジタルカメラは、大きな用

紙にプリントする目的などの場合に使います。

20

ドロー系ソフトで、画像の拡大・縮小をすると線になっている部分がギザギザになって

しまうことが多くあります。これは、点の位置を中心に情報が管理されているため、他の

線の部分との関係が一切管理されていないからです。これは「仕方のないこと」と言えま

す。

その他に、「切りぬき」「塗りつぶし」「線描画」「文字描画」「色調補正」「フィルタ処理」25

などさまざまな機能が用意されています。

ドロー系ソフトの中でも、写真の加工・合成などに特化したものをフォトレタッチソフ

トといいます。

30

ドロー系ソフトの代表は Adobe 社の「Photoshop」で、プロのデザイナーの 90%以上が

使用しているともいわれています。フリーソフトも数種類出回っています。「GIMP」や

「PictBear」がよくつかわれているようです。

Web 上でフォトレタッチソフトの処理を無料で提供しているサイトもあります。35

「Picnik」「Photoshop Express」は自分のパソコンにソフトウェアをインストールする必

要はなく、ブラウザを開いて対象のページにアクセスすれば、フォトレタッチの機能を利

用することができます。文字挿入などの機能も使えるのですが、残念ながら日本語には対

応していません。

21

ベクター系ソフトウェア

「点と点を直線で結ぶ」「点と点をベジェ曲線で結ぶ」処理をするのがベクター系ソフ

トです。工業デザインの分野などでは従来から定規やコンパスなどが使われていましたが、

そのやり方をコンピュータ上に展開した方法です。会社のロゴマークなどの分野のデザイ

ンに使われます。 5

「 初に点と点があり、それを結ぶ」わけですから、拡大・縮小しても点の座標位置が

変わった後で線を引くので線などがギザギザになることはありません。点をつないでいく

ためには、多くの点を設定し、全体のバランスを見ながら位置調整するなど細かい作業が

必要になります。

10

ベクター系ソフトで代表的なものは Adobe 社の Illustrator です。の多くの工業デザイ

ナーが使っています。フリーソフトはあまり数多く出回っていません。ベクター系のフリ

ーソフトでは「Inspace」が有名なものです。

15

20

25

ベクター系ソフトウェアによる描画の例

30

直線 ベジェ曲線

35

■ドロー系フリーソフト

GIMP2 を使おう http://www.geocities.jp/gimproject/gimp2.0.html PictBear http://www.fenrir.co.jp/pictbear/

■ドロー系オンラインソフト Picnik http://www.picnik.com/ FotoFlexer http://fotoflexer.com/ Photoshop Express https://www.photoshop.com/

■ベクター系フリーソフト Inkspace http://www.inkscape.org

無料画像処理ソ

22

4. フリー画像処理ソフト GIMP

GIMP は、1995 年にアメリカ カリフォルニア大学バークレイ校の二人の学生が開発を

開始し、その後各種改良が加えられ現在に至っているフリーの画像処理ソフトです。日本

語では「ぎんぷ」と発音することが一般的ですが、「じんぷ」と言う場合もあります。

当初から Adobe Photoshop を意識したものであること。Web ページで利用する画像加5

工を前提として作られています。ですから、印刷業者が紙媒体等に印刷するための機能は

多少弱いところもあります。一方で Web ページ用の画像加工や、一般ユーザが使う紙印

刷などの機能は充分カバーできるものとなっています。

Web ページ上で日本語での情報はあまり多くありません。ほとんどの場合以下のページ

を利用しているようです。 10

gimp2 を使おう (2009 年 8 月 31 日現在)

http://www.geocities.jp/gimproject/gimp2.0.html

このページには、「ソフトウェアのダウンロード」「マニュアル」などがまとめられていま

すので参考になるかと思います。

15

4.1.1. GIMP の起動と終了

【GIMP の起動】

GIMP のインストールが完了するとデスクトップ上に、 のアイ

コンが作成されますのでダブルクリックします。 20

右のウィンドウが表示され、GIMP の起動が始まります。

初の起動の場合時間がかかることがありますが、そのまま待ってくださ

い

25

30

次のように 3 つのウィ

ンドウが開き GIMP が起

動します。 35

メインのウィンドウは

23

中央上部に表示されているメニューバーが表示されている横長のウィンドウです。このウ

ィンドウに画像が表示され加工などの作業が行われます。

両サイドのウィンドウは作業用のアイコンが表示され、イロイロな作業をおこなうとき

のツールの切り替えなどに使われます。

5

【GIMP の終了】

次のいずれかの操作で終了することができます。

１） メインウィンドウのメニューバー「ファイル」→「終了」の順にクリックします。

２） Ctrl キーを押しながら Q キーを押します。 10

３） Alt キーを押しながら F4 キーを押します。

メインウィンドウのタイトルバーの終了ボタンをクリックしただけでは、終了しません。

両サイドのウィンドウが表示されたままですので、それらのタイトルバーの終了ボタンを

クリックして終了させなければなりませんので注意が必要です。 15

4.1.2. 写真データの加工

Web ページの画像を作成する上で、ベースの素材として利用される多くのものは画像デ20

ータです。特にデジタルカメラが発達した今日では手軽に Web ページに掲載することが

できるようになっています。ブログのページによっては、デジタルカメラとパソコンをつ

なぎ、画像を指定してアップロードすれば、自動的にサイズ調整してくれるサイトもある

ようです。

Web ページ制作に際して必要となる 少の加工技術は以下の３点です。 25

サイズの変更

明るさ・コントラストの変更

フィルタ

これらを習得すれば効率良い、写真入の Web ページを作成することができます。

30

4.1.3. 写真データの呼び出し

写真を加工する前に保存されている写真データを呼び出さなくてはなりません。

デジカメをパソコンに USB ケーブルなどで接続し直接データを呼び出す方法もありま35

す。デジカメのデータを一旦パソコンに保存してから、それを呼び出す方法もあります。

どちらの方法でもかまいませんが、データが「どこに」保存されているのかはしっかりと

把握してください。

24

写真が保存されているフォルダを開き

ます。フォルダが開いたら、ターゲットと

なるファイルを選びます。ファイルのアイ

コンを GIMP のメインウィンドウにドラ5

ッグ＆ドロップします。

または、メニューバー「ファイル」→「開

く」の順にクリックし、Word などのアプ

リケーションと同様に開くファイルを指10

定します。

25

4.1.4. サイズの変更

インターネット上で写真を公開したり、メールに画像を添付する場合などには注意しな

ければならないことがあります。データの大きさです。Web ページなどでデジカメで撮影5

した画像をそのままの大きさで送ってもブラウザのウィンドウからはみ出してしまいま

す。HTML の機能で画像を縮小表示させればはみ出すことはありませんが、送るデータの

大きさが同じならば、データを送る時間は変わりません。

Web ページの場合、表示される時間が長いと、閲覧者はほかのページへ移ってしまいま

す。メール添付の場合、膨大な量の画像ファイル添付のメールを受信してからでないと次10

のメールが受信できない仕掛けになっている場合もあります。このような場合ですと受信

者に迷惑をかけてしまうことになりますので、特に注意が必要です。

適切なサイズに変更して、ネット上でやり取りする通信時間を短くする工夫をしましょ

う。

15

Step-1

メニューバーの「画像」→「画像の拡大・

縮小」の順にクリックします。

20

Step-2

画像の拡大・縮小ウィンドウが開きます。

幅の大きさが 1600(単位はピクセル)と表

示されていますので、このフィールドを選25

び、300 と入力します。

このとき、幅と高さのフィールドの右にあるチェー

ンがつながっている状態ですと、高さのフィールドの

数値も自動的に変化します。この数値は縦横の比率を

保つための数値です。チェーンのマークをクリックす30

ると、チェーンが切れた状態になります。この状態で

すと幅を入力しても高さの数値は変わりません。必要

に応じて使い分けることが大切です。

拡大縮小のボタンをクリックすると新しい大きさの画面が表示されます。

35

Step-3 表示サイズの調整

Windows の基本操作としているので共通の操作である場合がほとんどです。ファ

イルメニューの「編集」→「元に戻す」、または、Ctrl キーを押しながら Z キーを押

すと 1 つ手前の操作を取り消すことができます。失敗してもあわてないでください。

操作を取消したいとき

26

新しいサイズで表示されると、

画像自体が小さくされたり、ウィ

ンドウからはみ出してしますよ

うな場合があります。

この後で加工作業をするとき5

に不便なのでサイズを調整しま

す。

メインウインドウの下の行に

33.3%などと表示されている部

分があります。この右にある∇の10

マークをクリックしますと、比率

がメニューになって現れます。適

当な比率を選びます。今回は

100%を選びましょう。

15

比率が 100%の画像が表示さ20

れます。

細かい作業をするときなどに

はこの比率を 400%や 800%にし

て作業をすることもあります。 25

30

35

27

4.1.5. 明るさ・コントラストの変更

デジタルカメラで撮影した画像などを利用する場合に、その画像の明るさがイメージ通

りでないこともあります。その場合には、適切な明るさに調整します。 5

Step-1

メニューバー「色」右や「明る

さ・コントラスト」の順で開きま10

す。

15

20

Step-2

明るさ・コントラストウィンドウが開きます。

明るさとコントラストを調整するためのスライドバーが

表示されます。このスライドバーをマウスで左右にドラ

ッグすることにより明るさ・コントラストが調整されま25

す。

調整している 中に画面に表示される画像が変化する

ことがわかるかと思います。適切な明るさとコントラストになったらば、OK ボタンをク

リックします。

30

28

4.1.6. フィルタ

画像データを加工していると、どうしても細かいところがボケた感じになってしまうこ

とがよくあります。コントラストを強くしても、画像の全体を見るとボケているのです。5

このような場合にはフィルタのシャープ処理で画像を引き締めます。

GIMP にはシャープ以外にも多くのフィルタがあります。いろいろと試してみてくださ

い。

Step-1 10

ファイルメニューか

ら「フィルタ」→「強調」

→「シャープ」の順に選

びます。

15

20

Step-2

シャープウィンドウが表示されます。シャープ度がスライドバーで調整できるようにな

っています。マウスドラッグで調整してください。シャープ度を強くしすぎると中間色の25

ないガチガチの画像になってしまいますので注意が必要です。プレビューウィンドを見な

がら調整してください。

調整が完了したらばＯＫボタンをクリックしてください。

30

35

29

(シャープ度の強弱による画像の変化を確認してください。)

シャープ調整した画像が表示されます。

描画ソフトウェアで図形を新規に作成する場合などは「対角線指定」を用いるこ

とが多くあります。点を２つ指定すれば、その点を対角頂点とする四角形が決まる

という考え方です。この方法により四角形を描画することができますし、範囲指定

をすることもできます。

また、四角形に内接する円を描くこともできます。

正方形・真円を描きたいときには Shift キーを押しながら対角線指定をすると、正

方形・真円が描けます。

対角線

30

4.1.7. 画像データの切り抜き

一枚の画像の中から必要な部分だけを切り抜き、大きく表示させることもできます。背景

ばかりが大きな画像ではなく、必要なところだけをピックアップさせる方法です。 5

ツールボックスから「矩形選択ツール」を選びます。

画像の中でピックアップしたい部分を対角線指定により指定します。

10

15

20

選択した範囲を切り出す操25

作をします。

ファイルメニューバー「画

像」→「キャンバスを選択範

囲に合わせる」の順に選びま30

す。

35

31

ファイルメニューバー「画像」

→「キャンバスサイズの変更」

を選びます。 5

10

15

キャンバスサイズの変更ウィンドウが表示され

ます。

幅・高さがよければＯＫボタンをクリックしま

す。 20

25

30

画像の保存画面が表示されます

ので必要事項を指定します。

ファイルを保存するフォルダの35

位置を間違えないように気をつ

けます。ファイル名には「.jpg」

の拡張子を忘れずにつけてくだ

さい。

32

ファイルのエクスポートウィ

ンドウが表示されます。

特に問題のない項目ですので、5

エクスポートボタンをクリック

します。

10

「JPEG 形式で保存する」ウィンドウが開きます。

圧縮品質を聞いてきます。品質が高いほどきれいな画像

で保存されますが、データ量も大きくなります。 15

品質が決まったらばＯＫボタンをクリックして完了

です。

これで、切り抜いた画像が保存されます。

20

33

4.1.8. オーバルプレートの切り抜き

写真を楕円形に切り抜いて印刷する場合があります。このような処理を「オーバル(楕円

形)プレート切り出し」といいます。 5

河馬の画像を例に処理してみます。

河馬の画像を表示させます。

10

15

20

ツールボックスから「楕円選択」ツールを選びます

25

30

34

描画ウィンドウの河馬の顔の

部分が選択されるように対角線

指定します。

楕円ツールの場合、慣れるまで5

は範囲指定が思ったとおりにい

きません。うまくいかなかった場

合には、あわてずに「操作の取消」

をして、再トライしてください。

10

15

範囲選択ができたらば、

ファイルメニューバー「選択」

→「選択範囲を反転」を選び選択

範囲を反転させます。

20

25

河馬の顔の外側が範囲選択さ

れていることを確認します。 30

ファイルメニューバー「編集」

→「消去」を選び、外側の部分を

消去します。

35

35

ここまでの操作がうまくいくと、右

のような画面になります。

再度、「選択範囲の反転」をした上で、5

「キャンバスサイズの変更」を選ぶと

コンパストなサイズで保存することが

できます。

10

15

オセッカイな注記

このような画像を Word などの文書に貼り付ける場合、白い部分でも Word で打った文20

字が消えてしますことがあります。画像の「順番」を「再背面」に指定してください。そ

うすれば解決します。

36

4.1.9. 描画画像の作成

画像処理をする場合に自分で絵を書いていく場合もあります。

ここでは基本的な操作を学びます。 5

Step-1

【キャンバスの準備】

初に画像を描くためのキャ10

ンバスを用意します。

メニューバー「ファイル」→

「新しい画像」を選びます。

15

Step-2

新しい画像を作成ウィンドウが開きます。 20

画像サイズを幅 640×高さ 480ピクセルに指定します。

ＯＫをクリックします。

新しいキャンバスが表示されます。

25

参考

新しいキャンバスでなくても画像を作成することができます。前節で説明した写真ファ

イルの呼び出しを参照し、画像ファイルを表示してください。

30

GIMP や PhotoShop などで画像を描画する際に「レイヤー」という概念があり

ます。

透明なセロファン紙に部品を描き、それを組み合わせ、重ねることによって一枚の

絵が完成するというものです。これをうまく利用すれば「目を開いた顔」「目を閉

じた顔」などを効率よく作っていくことができます。また、文字などもひとつのレ

イヤーにより構成されますので、完成イメージを表示しながらチェックすることも

レイヤーの

37

4.1.10. ツールボックスの利用

描画の際にはツールボックスから

パーツ(部品)を選び、それぞれの機能5

を利用していきます。

・ 塗りつぶし

・ ブレンド

・ 鉛筆

・ 絵筆 10

・ 消しゴム

・ エアブラシ

・ インク

・ スタンプ

・ 色混ぜ 15

・ にじみ

・ 暗室

・ 文字

などを使い分け、思ったようなイメー

ジを描画していきます。 20

同様にレイヤー，チャンネル，パス，

アンドゥなどの機能も使うと効率的

な作業を進めることができます。

25

38

4.1.11. ブラシの使用

ツールボックスのブラシアイコンを選びます。

ルールボックス下の「ブラシで描画」の中で、ブラシの種類や太さを選びます。ピーマ5

ンもあります。レイヤーボックス下のブラシウィンドウでも同様に指定することができま

す。

10

15

20

25

カラーボックスをクリックし、描画色を変更（カラーピッカー）を選びます。

自分の使いたい色を選びＯＫをクリックします。

30

35

39

描画ウィンドウ上でマウスを左ボタンクリック

しながら動かすと、その軌跡に沿って図形が描か

れます。ブラシの形状・色などを変え、いろいろ

な図形を描画してみてください。 5

10

エンピツツールを使っても同様なことができます。

15

20

40

4.1.12. 図形の利用

【矩形選択ツール等による描画】

ツールボックスから矩形選択ツールを選びます

5

10

15

描画ウィンドウに、対角線指定で矩形の枠を指

定します。対角線指定のときに Shift キーを押しながら指定すると正方形になります。 20

ツールボックスからペイントツールを選びます。

25

30

35

描画ウィンドウの範囲選択された枠の中で

マウスクリックすれば選択された範囲が塗

りつぶされます。

40

41

【自由描画ツールによる描画】

矩形描画ツール等の利用以外にも、エンピツツールなどによる描画&塗りつぶしも可能

です。ツールボックスからエンピツツールを選び、絵を描きます。このときポイントにな

るのは閉じた図形であること。線が途切れたりしているとインクがこぼれてしまい、塗り

つぶすことはで5

きません。

10

15

20

図形が描けたらばツールボックスから「ファジー選択ツール」を選びます。

先ほど描いた図形の中をクリックし、範囲を選択します。選ばれた範囲が点線で表示され25

ます。

30

42

ツールボックスから「ブレンド(グラデーション)」ツールを選びます。

範囲選択された図形の中で、グラデーションの始点・終点を指定します。始点でマウスの

左ボタンを押し、そのまま終点までマウスを移動し、終点で左ボタンを離します。

マウスボタンを離した瞬間グラデーションで塗りつぶされます。 5

10

15

20

43

4.1.13. 文字の挿入

画像の中に文字を挿入することもできます。Office シリーズの「オートシェィプ」での文

字挿入と似た感覚で作業を進められます。 5

ツールボックスからテキストツールを選びます。

描画ウィンドウに文字を挿入する枠を対角線指定で指定します。

枠自体の大きさは後から調整できますので、大きめにとっておい10

たほうは無難です。

文字挿入枠が設定できると GIMP テキストウィンドウが表示さ

れます。

枠の中に表示したい文字を入力してください。

入力が終わり、閉じるボタンをクリックすると描画ウィンドウ15

に指定した文字列挿入枠に文字が表示されます。

20

25

30

44

文字のフォントを変えてみます。

ツールボックスした部分のテキスト指定部分で指定します。

「フォント：」でフォントの種類を選ぶことができます。 5

「大きさ」でフォントのサイズを指定することができます。

「色」でフォント色を指定することができます。

このほかにも、「字間」「行間」の指定などをすることができます。

バランスを考えて調整してください。 10

15

フォントを変更してみた結果です。

20

45

4.1.14. データの保存

作成した画像データを保存します。

一般的な画像形式である JPEG 形式で保存します。

5

ファイルメニューバー「ファイ

ル」→「名前をつけて保存」の順

に選びます。

10

15

「画像の保存」ウィンドウが開きます。 20

ファイル名とフォルダを指定します。ファイルを

保存するフォルダの位置を間違えないように気を

つけます。ファイル名には「.jpg」の拡張子を忘れ

ずにつけてください。

25

「JPEG 形式で保存する」ウィンドウが開きます。

圧縮品質を聞いてきます。品質が高いほどきれいな画

像で保存されますが、データ量も大きくなります。

品質が決まったらばＯＫボタンをクリックして完30

了です。

46

4.2. 画像の合成

フォトレタッチソフトなどでは画像を合成することがあります。ベースになる画像に、部5

分的に切り抜いた画像を貼り付ける方法です。この方法と前の章で説明した文字挿入など

によりいろいろな楽しみ方ができます。

まず、ベースとなる画像を開きます。今回はクマの画像を開きます。

10

4.2.1. マスク処理

ドロー系のソフトではオーソドックスになっている方法です。レイヤーという概念が説

明されていましたが、それを応用した概念と思ってください。画像が描かれているレイヤ

ーに墨を塗ってしまい見えなくしてしまいます。必要なところを抽出しその部分だけがコ15

ピーできるという仕掛けです。

画像を呼び出します。

描画ウィンドウの左下に四

角い点線のアイコンがありま20

す。これをクリックします。

25

47

画像全体が赤いマスクで覆わ

れます。これがマスク指定された

状態で、これから必要な部分を抜5

き出していきます。

10

15

ツールボックスの｢矩形選択ツー

ル｣を選びます。一羽のオウムの

周りを矩形で選びます。キーボー

ドの Delete ボタンを押すと切り

抜かれます。 20

25

細かい部分の処理をするため

に画像を拡大して表示します。 30

35

48

ツールボックスから「消しゴム

ツール」を選びます。

枝の部分にかかっているマス

クを消しゴムルールで丁寧に消5

します。

マスク消去範囲の指定が終わ

ったらば、マスク指定時と同じく、

描画ウィンドウ左下にある四角10

い点線のアイコンをクリックし

ます。

15

マスク解除で指定された範囲

が選択範囲として表示されてい

ることが確認できます。

20

25

選択範囲を確認してコピーし30

ます。

ファイルメニューバー「編集」

→「コピー」を選びます。

35

49

クマの画像に切り替えます。

ファイルメニューバー「編集」

→「貼り付け」を選びます。

5

10

画像が貼り付けられました。 15

20

25

貼り付けられた画像の大きさがアンバランスですので、画像の

大きさを調整します。

ツールボックスから「拡大・縮小」アイコンを選びます。 30

このとき描画ウィンドウ中の選択範囲が維持されていること

を確認してください。

35

50

拡大・縮小ウィンドウが表示さ

れます。この段階で、描画ウィン

ドウの選択範囲をドラッグ＆ド

ロップで拡大・縮小することもで

きます。 5

10

実際の数値を指定することも可能です。 15

20

適切な大きさに変更されたら

ば完成です。

25