第4回 画像の編集

戻る

前回は、ウェブページ上に画像を表示させる方法を紹介しました。

<img src="画像ファイル名">
<img src="mycat.jpg">

ウェブページでは文字以外の多くのものを画像で表現する必要があります。
写真はもちろん、タイトルロゴやスイッチ・ボタン、マーク類など、文字で表現できないさまざまなものを画像で表現する必要があります。

上記のようなものを自分で作るには、画像を編集して作らないといけないわけです。

そこで今回は、ホームページ作成に役立つ画像の編集方法を解説します。

画像編集用のアプリを使って簡単な画像を作成し、提出してもらいます。実際に作業しながら、操作方法を確認してみましょう。

全部で２つの課題に取り組んでみましょう。

画像の編集作業を行うには、専用のアプリケーションが必要です。

ここでは「paint.net」を使用します。paint.netは、市販ソフト並みの高度な機能を備えた、無料のグラフィック編集アプリです。

自分用のパソコンで使いたい場合は、無料でダウンロード・インストールができます。

paint.net公式サイト
https://www.getpaint.net/
ダウンロードサイト(Vector)
https://www.vector.co.jp/soft/review/winnt/art/se493364.html

ここからもダウンロードできます。paint.net.5.1.7.install.anycpu.web.zip

paint.net を初めて利用する場合は、インストールを行って初回セットアップをする必要があります。
以下の手順でインストールを行ってください。

1. ダウンロードしたものはZIP圧縮されています。ダブルクリックして中身をデスクトップなど好きな場所に取り出してください。
2. 取り出した paint.net.5.1.7.install.anycpu.web.exe のようなファイルをダブルクリックすると、インストールが始まります。画面の指示に従って進んでください。

インストールが完了したら ZIPファイルや paint.net.5.1.7.install.anycpu.web.exe は不要になります。

インストールができたら、paint.netを起動しましょう。

Windows ボタンを押し、paint と入力すると paint.net アプリが見つかるのでクリックして起動します。

paint.netを起動すると、次のような画面になります。
大きな「メインウィンドウ」と小さないくつかの「サブウィンドウ」で構成されます。 各部分の名称は以下のとおりです。

1. キャンバス：画像を編集できるエリアです。白い部分が画像編集に使う作業範囲です。絵を描くことは、このキャンバス部分にしかできません。
2. ツール：ブラシや選択や塗りつぶしなど、様々な機能を呼び出します。
   
   マウスカーソルを各ボタンに重ねてしばらく待つと、ツールの機能説明がポップアップで表示されます。
3. カラー：色を決定します。色は２色設定でき、「プライマリカラー」と「セカンダリカラー」があります。
   「プライマリカラー」はマウスの左ボタンでドラッグした時の色や、図形の枠線の色になります。
   「セカンダリカラー」はマウスの右ボタンでドラッグした時の色や、図形の内部の塗りつぶし色になります。
   

   paint.netには
   プライマリカラーとセカンダリカラーの
   ２色があります。
4. レイヤー：複数の画像を層のように重ねあわせることができる機能「レイヤー」を管理するためのサブウインドウです。
   
   現在のレイヤーの重なり方が表示されます。詳しい使い方は後述します。

もしこれらのサブウィンドウを「×」ボタンで閉じてしまったら、「ウィンドウ」メニュー →「レイヤー」のように「ウィンドウ」メニューから選択するか、ウインドウ右上にあるボタンを押すことで再度表示できます。

今回の演習で使う素材画像をダウンロードしてください。以下のリンクからダウンロードできます。

素材画像の詰め合わせ： jyokyu04_pictures.zip

圧縮フォルダになっていますので、好きな場所に保存し、展開してください¹⁾。
中には３つの画像ファイル jupiter.jpg road.jpg space.jpg が入っています。

jupiter.jpg

road.jpg

space.jpg

画像編集の例として、複数の画像をひとつに混ぜた合成画像を作成します。ページに掲載するための写真を加工したい場合などに応用できます。

上でダウンロードした素材画像の詰め合わせには、以下のような合成用の画像が用意されていますので、これらを一つに合成しましょう。

なおもし操作を間違えたら「元に戻す（Ctrl+Z）」を押すと、直前の動作を取り消せます。失敗しても安心です。

1. 画像の読み込み
   road.jpgをpaint.netに読み込みます。paint.netを起動し、「ファイル」→「開く」などでroad.jpgを開きます。（画像ファイルを直接paint.netのウインドウ上にドラッグしても開けます。）
   

   road.jpg
2. 背景部分の削除
   「ツール」→「自動選択」を選択します。 画面上部のツールバー上にある「許容範囲」欄を38%前後に設定します。
   
   背景となる空の部分をクリックし、選択したらキーボードのDeleteキーで選択部分を消去します。
   もし消し残しがある場合は「ツール」→「なげなわ選択」で消し残し部分の周囲をドラッグしDeleteキーで更に消去します。

   背景部分を削除した状態

   ポイント:
   • 「自動選択」ツールは、クリックした点とある程度似た色の範囲を自動的に選択します。このとき「許容範囲」で、どれくらい似た色まで選択するかを調節できます。許容範囲を下げるほど、似た色と判断される条件が厳しくなります。
   • 画像の一部を選択した状態で、Deleteキーを押すと、その部分を消去できます。
   • 消去した部分は「透明」になります。(画面ではグレーの市松模様で表されます。)
   • このように背景に色々なものが映り込んでいても、許容範囲を操作すればまとめて削除できるのです。
3. 背景画像の読み込み
   新たな背景として、「ファイル」→「開く」などでspace.jpgを開きます。
   「編集」→「全て選択(Ctrl+A)」の後、「編集」→「コピー(Ctrl+C)」でコピーします。
   ウィンドウ右上の縮小画像をクリックして、先ほどのroad.jpgに切り替えをし、「編集」→「新規レイヤーに貼り付け」で新しいレイヤーにspace.jpgの内容を貼り付けます。
   
   貼り付けた内容は手前に重なるので、「レイヤー」ウィンドウ→「レイヤーを背面に移動」でspace.jpgが奥に重なるよう順番を変更します。レイヤーを直接上下にドラッグして順番を入れ替えてもＯＫです。

   レイヤーの重なり方を調整する

   

   レイヤーが重なり合う
   イメージ

   

   背景部分を合成した状態

   ポイント：
   • 複数の画像を読み込んだ場合は、ウィンドウ右上の縮小画像をクリックして切り替えられます。
   • レイヤーを駆使すれば、簡単に画像同士を重ね合わせて合成できます。
   • レイヤーの重なり方はレイヤーウィンドウ内の ボタンで調整できます。
   • Deleteキーによる削除などで「透明」になった部分は、下のレイヤーの画像を透過します。
4. 木星の画像を合成
   さらに「ファイル」→「開く」などでjupiter.jpgを開きます。
   「ツール」→「自動選択」を選択し、「許容範囲」を25%程度に設定し、背景である黒い部分をクリックします。
   背景部分が選択されたら「編集」→「選択範囲を反転(Ctrl+I)」で選択範囲を反転し、木星部分が選択された状態にします。
   「編集」→「コピー(Ctrl+C)」で木星をコピーし、ウィンドウ右上の縮小画像クリックで、先ほどのroad.jpgに切り替えをしたら、「編集」→「新規レイヤーに貼り付け」で新規レイヤーに木星画像を貼り付けます。
   「編集」→「選択を解除」(またはCtrl+D)で選択範囲を解除したあと、「レイヤー」→「回転/ズーム」で木星を傾けたり、ドラッグして位置を調節したりして完成です。

   完成例

   ポイント：
   • レイヤーは好きなだけ作れます。たとえば 前景＋タイトルロゴ＋キャラクター＋背景……のような複雑な重ね合わせも行えます。
5. ファイルの保存
   でき上がったら、「ファイル」→「名前をつけて保存」などでデスクトップなど好きな場所に保存してください。
   ファイル名は 学生番号 氏名 合成写真.pdn としてください。(例) 123345 山田太郎 合成写真.pdn
   ファイルのデータ形式は paint.net の専用形式でかまいません。

もしこの画像をウェブ上で使用したい場合は、改めて JPG、PNG、GIF 形式のいずれかで保存し直す必要があります。

具体的には、もう一度「名前をつけて保存」を選択し、「ファイルの種類」をPNGなどに変更しましょう。ウェブページに掲載する画像は JPG PNG GIF 形式のどれかでないと、ブラウザで正常に表示できない場合があるからです。

では、paint.net専用形式のファイルが不要かと言うと、そうでもありません。

paint.net専用形式のファイルは、別途大切に保管しておきましょう。
画像を後で編集し直したくなった場合に、もし JPG PNG GIF 形式で保存してあると、レイヤーの状態などが保存されないため再編集が難しくなります。
paint.net専用形式のファイルが残っていれば、レイヤーの状態なども正しく保存されるので、再編集しやすいです。

このように、後から加工する場合に備えて、paint.net専用形式のファイルも残しておくのがおすすめです。その後、ウェブページ掲載用に JPG、PNG、GIF 形式のいずれかでもう一度保存し直す（そしてCtrl+Zで元の編集状態に戻す）といった流れが良いでしょう。

ウェブページに掲載する画像は、基本的に原寸大で表示されます。

もし写真が大きすぎる場合などは、縮小を行ってサイズを調整しましょう（逆に小さすぎる場合は拡大もできます）。
以下の操作で画像のサイズを拡大や縮小して調整しましょう。

• 「画像」→「画像サイズを変更(Ctrl+R)」

  画像サイズを変更する画面

「幅」や「高さ」欄に値を入力することで、画像のサイズを調整できます。
「％指定」を選んで「50」などと入力すれば、半分の大きさにするといった設定もできます。

ページに掲載する画像サイズは、大きなものでも横幅600ピクセル程度を目安にすると良いでしょう。²⁾
小さめの画像なら300ピクセル程度でも十分です。 意外と小さめですね！ ページに掲載する画像の大きさ感覚として参考にしてください。

たとえば最近のスマホで撮影した写真であれば、横幅は3,000～4,000ピクセルもあるので、そのままでは画面から大きくはみ出してしまいます。縮小が必要でしょう。

このようにpaint.netでは選択範囲をうまく設定してコピーや削除をしたり、レイヤーを使ったりすることで簡単に合成写真を作ることができます。また、「透明」を駆使することで、ページの背景ときれいに重なる画像を作ることもできます。写真掲載をするときや、ロゴを合成してタイトル画像を作る時などに活用してください。

HTMLの表現能力は限られています。そのため、ウェブページでは例えばサイト内を移動するためのボタンや、小さなマークなどを表現するためにも、画像が使う必要があります。

そこで今度はpaint.netを使って、下のようなボタンに見える画像を制作しましょう。

1. キャンバスの準備
   paint.netを起動したら、キャンバスサイズを調整します。
   「画像」→「キャンバスサイズを変更」で 幅:200ピクセル 高さ:50ピクセルに設定します。
   （「縦横比を維持する」チェックがＯＮになっている場合は、幅と高さが連動して変化するので、ＯＦＦにする必要があるでしょう）
   

   キャンバスを準備する

   ちなみに作成済みの画像の大きさを、後から変える場合は「画像」→「画像サイズを変更(Ctrl+R)」で同様の設定を行えば縮小・拡大できます。
2. グラデーションをかける
   「カラー」ウィンドウでプライマリ色をグレー、セカンダリ色を白に設定し「ツール」→「グラデーション」を選択。キャンバス上で縦にドラッグをしてグラデーションを設定します。

   色の設定とグラデーション
   赤い矢印の部分をクリックすると、それぞれ
   「プライマリ」「セカンダリ」カラーを設定できます。

   グラデーションを描く様子を記録した動画

   
   やり直す場合は、再度ドラッグしなおせば何度でもやり直せます。
   良いグラデーションができた場合は、キーボードのEnterキーを押して完了させます。

   グラデーションをかけた例

   ポイント:
   • グラデーションを使用した際は、「カラー」ウインドウで設定した「プライマリ色」から「セカンダリ色」へと色が変化します。
   • グラデーションのためにドラッグするとき、Shiftキーを押していると、ドラッグする角度をある程度固定できます。垂直・水平方向などに正確にグラデーションを作成するのが簡単になります。
   • 画面が小さくて細かな操作がしづらい場合は、「ツール」→「ズーム」で画面を拡大して作業すると良いでしょう。左クリックで拡大、右クリックで縮小です。
   • 応用として、あらかじめ好きな形の選択範囲を作成したあとでグラデーションを実行すると、選択範囲の内側だけにグラデーションを描画できます。
3. 影色の設定
   プライマリ色がグレーの状態で、「ツール」→「図形」を選択し、「四角形▼」、「図形の輪郭」、「ブラシ幅」を1に設定したら、ボタンの周囲を囲むようにドラッグしてボタンの枠線をひきます。ひき終わったら、Enterキーを押して完了します。

   枠線を引いた例
   周囲にグレーの縁取りができました。

   

   四角形を描くための設定
   ①～⑤の順番に
   設定を進めましょう。
4. ハイライト色の設定
   プライマリ色が白の状態で「ツール」→「図形」を選択し、「四角形▼」、「ブラシ幅」を1に設定したら、先ほどの枠線の1ピクセル内側をドラッグします（先ほどの設定のまま、プライマリ色を「白」に変えただけです）。
   これで光沢のような立体感のある表現ができます。Enterキーを押して完了させます。

   立体感が生まれました

   

   左上部分を拡大した様子
   グレーの枠線の内側に
   白い枠線が引かれています。
   • 細かい操作が難しい場合は「ズーム」を活用しましょう。
5. 飾りの追加
   更にボタンの周囲に飾りをつけるため、プライマリ色を緑など好きな色に設定し、「図形」を選択し、画面上部のツールバーで「塗りつぶした図形」を選択したら、ボタンの左右に四角形を配置します。Enterキーで完了です。

   飾りを追加した例
   左右にある緑色の四角形です。

   

   飾りを描くための設定
   先ほどの設定との違いは、プライマリ色を変えたことと、
   「塗りつぶした図形」を選択したことです。
6. 新規レイヤーに文字の入力
   「レイヤー」→「新しいレイヤーの追加」で新しく「レイヤー2」を挿入します。

   レイヤーの追加

   レイヤー2が選択されている状態で、「ツール」→「テキスト」を選択します。
   プライマリ色を好きな文字色に設定し、フォントを「メイリオ」など好きな日本語フォントに変更し、文字の大きさを18程度に設定したら、キャンバス上をクリックして、ボタン名を入力します。
   文字の位置がずれた場合は、「ツール」→「ピクセルの移動」で文字の位置を調整できます。

   ボタン名を追加した例

   もし前の工程で選択範囲が残っている場合は、「編集」→「選択を解除（Ctrl+D）」で選択状態をキャンセルしてください。選択範囲が残っていると、その範囲内にしか書き込みが行えない仕様のため、文字が入力できない場合があるからです。（逆にこの仕様を応用すると、選択範囲からはみ出さないように色を塗ったり線を引いたりするといったことが可能になります）

7. 別の文字の入力
   さらに「レイヤー」→「新しいレイヤーの追加」で新しく「レイヤー3」を挿入します。
   レイヤー3が選択されている状態で、「ツール」→「テキスト」を選択し、別のボタン名を入力します。
   入力した文字は重なって表示されますが、レイヤーウィンドウの右端にあるチェックボックスをOFFにすると、レイヤーは一時的に見えなくなるので、レイヤー2のチェックボックスをOFFにして、正しい表示にします。
   

   レイヤーの表示切り替え
   ON/OFFを切り替えて
   指定レイヤーを画面に表示するかどうか
   調整します。

   
   

   別のボタンに作り替えた例

   
   

   レイヤーの重なり方イメージ

   ポイント:
   • 同じデザインで一部の表示だけが異なるパーツをたくさん作りたい場合、このようにレイヤーの表示ＯＮ／ＯＦＦで切り替えるようにすると、簡単に似たパーツを量産できます。最初から作り直す必要はないので便利ですね！ サイトデザインの参考にしてみてください。
   • ホームページの見た目をイイ感じにするには、こういった小さなパーツを作って飾ると良いでしょう。😋
8. ファイルの保存
   でき上がったら、「ファイル」→「名前をつけて保存」などでデスクトップなど好きな場所に保存してください。
   ファイル名は 学生番号 氏名 ボタン.pdn としてください。
   ファイルのデータ形式は paint.net の専用形式でかまいません。

今回作成した２つの画像ファイル 学生番号 氏名 合成写真.pdn と 学生番号 氏名 ボタン.pdn の両方をmoodleにアップロードして提出してください。ファイルのデータ形式は paint.net の専用形式でかまいません。

提出期限は、次週の授業日いっぱいまでとします。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

moodleへの課題提出方法が分からない場合は、こちらを参照してください。
moodleに課題をアップロードする方法

今回は、画像編集アプリpaint.netを使って、画像の合成や、新規作成を行いました。他の画像編集アプリ（Adobe Photoshop等）でも、おおむね同じ作業工程で画像編集ができますので、参考にしてください。

さらにpaint.netを使った画像編集について知りたい場合は、基礎実習（上級）ページの「補足資料」コーナーにある「paint.netによるさまざまな画像編集」を参考にしてください。

以上で今回の作業は終了です。おつかれさまでした。

htdocs フォルダ内の index.html に、今回作ったファイルを掲載しても良いかもしれません。

ただし日本語ファイル名のままでは掲載できないので、半角英数字の名前に変更する必要があります。
ここでは gousei.pdn と button.pdn に変更したものとします。
これらはダウンロードリンクとなるでしょう。（もし画像として掲載したい場合は、paint.net の「ファイル」メニュー → 「名前をつけて保存」でウェブに対応した PNG または JPG 形式で保存し直し、そちらを掲載する必要があります）

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>基礎実習の課題ページ</title>
</head>
 
<body bgcolor="wheat" text="brown">
<!-- 本文ここから -->

<h1>コンピュータ基礎実習（上級）課題のページ</h1>

<p>ここにはコンピュータ基礎実習で作成した課題を掲載しておきます。</p>

<h2>課題</h2>

<p><a href="jikosyokai.html" target="_blank">自己紹介ページはこちら</a></p>
<p><a href="page2.html" target="_blank">２ページ目</a></p>

<p><a href="gousei.pdn" target="_blank">合成写真</a><br>
<a href="button.pdn" target="_blank">ボタン画像</a></p>

<h2>リンク集</h2>

<p><a href="https://www.cc.kyoto-su.ac.jp/~shimizu/" target="_blank">基礎実習のページ</a> <a href="https://cclms.kyoto-su.ac.jp/" target="_blank">moodle</a></p>

<p><a href="https://www.kyoto-su.ac.jp/entrance/index-ksu.html" target="_blank">学内TOP</a></p>

<!-- 本文ここまで -->
</body>
</html>

戻る