フォトショップ エレメンツ ビギナーのために
                        Windows編

直線、斜め線、矢印の線を描く

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

直線、斜め線、矢印線を描く − 概要



ホームページなどへ掲載する画像にコメントを入れ分かり易くする場合があります。
でもコメント文章だけでは分かりずらい時もあり美しい直線、矢印の線で描くと、
さらにその写真画像が分かり易くなる場合があります。。

この 「直線、矢印線を描く」 ページでは、ラインツールを使用し、画像に直線や矢印の線を描く操作を説明します。


■ 直線を描くイメージ ■



          

オリジナル画像(画像サイズ2048×1536)       画像サイズの縮小    直線を描く・文字を書く(画像サイズ500×375)


※オリジナル画像をダウンロードすることができます。 ダウンロードし 「操作方法」 に従い操作を試してみてはいかがでしょうか。

■オリジナル画像のダウンロード方法
@ オリジナル画像をクリックすると画像イメージが表示されます。
A 表示画像内を 「右クリック」 し 「名前をつけて保存」などを選択するとダウンロードできます。
  なお画像サイズは、2048×1536です。



直線、矢印線を描く− 操作方法


1. モードの確認
モードの確認
モードの確認
「画像編集モード」 、 「スタンダード編集」 であることを確認します。

2. 画像を開く

(1)画像を開く

   ファイルの開き方は、「 ファイルを開く 」を参照ください。
(2)オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
オリジナル画像が表示されます。

レイヤーパレット(ウインドウ右側)には、背景のレイヤーのみが表示されています。
今回の直線、矢印を描くでは、ラインツールを使用します。
ラインツールを使用する毎にレイヤーが自動作成されますのでレイヤーを意識しておきましょう。

オリジナル画像は表示倍率33.33%で表示されています。この値は環境により変わります。

3. 画像サイズの縮小

オリジナル画像サイズは、2048×1536px(ピクセル)で少し大き目です。
画像に文字、線を描く時、最終画像サイズに合わせておくとフォントサイズ、線の太さ(ピクセル数)を指定し易くなります。
このためオリジナル画像を最終画像サイズに縮小しておきます。

 <オリジナル画像サイズ>  <最終画像サイズ>
  2048×1536    →     500×375

(1)画像サイズ縮小の選択、サイズの指定
画像サイズ縮小の選択
画像サイズ縮小の選択
画像サイズを縮小します。

『メニューバー』 → 『イメージ』 → 『サイズ変更』 → 『画像解像度』を選択します。

あるいはショートカットキー:Ctrl + Alt + I キーを入力します。

これで 『画像解像度』 ダイアログが表示されます。
画像サイズ指定
画像サイズ指定
画像解像度ダイアログに最終画像サイズを指定します。

『縦横比を固定』 、 『画像の再サンプル』にチェックを入れます。
幅に最終画像サイズの幅500pxを指定します。
高さは『縦横比を固定』にチェックを入れることにより自動表示されます。
OKをクリックします。
(2)縮小サイズで表示、100%表示
縮小サイズで表示
縮小サイズで表示
画像サイズが縮小され表示されます。

このときの表示倍率は、33.33%のままで表示され、小さく作業しずらいため100%表示にします。

ウインドウ左下の表示倍率に100を指定します。



100%表示
100%表示
表示倍率100%で表示されます。

100%表示の時、実際にホームページなどに掲載した時、モニターに表示される大きさになります。

4. 直線を描く

(1) ラインツールの選択

ラインツールの選択
ラインツールの選択
『ツールボックス』 から 『ラインツール』を選択します。

ツールボックスにラインツールが表示されていない時には、『長方形ツール』などのアイコン右下の三角印を長めにクリックし続けます。
プルダウンメニューが表示され、その中にラインツールがあります。

オプションバーの表示
オプションバーの表示
『ラインツール』 が選択されるとラインツール用のオプションバー表示になります。
このオプションバーで矢印有無、線の太さ、線の色を設定します。

(2) 直線(矢印なし)の設定
矢印なしの直線指定
矢印なしの直線指定
白色の直線を描きます。

オプションバーの三角印をクリックすると矢印設定のプルダウンメニューが表示されます。
矢印の開始点と終了点にチェックがないことを確認します。これで矢印なしの線になります。

線の太さをピクセル値で設定します。
例では、2ピクセルを設定しています。

線の色を設定します。詳細は「 カラー設定(カラーピッカー) 」を参照ください。
例では、白色を設定します。
(3) 直線・斜め線(矢印なし)を描く
直線を描く
直線(矢印なし)を描く
矢印なしの直線を描きます。

画像上の直線を描きたい場所をクリックしドラッグします。
このクリック地点が開始点となりドラッグし終わった地点が終了点になります。
開始点と終了点が斜めであれば斜め直線を描けます。

例では、画像左上に2ピクセルの白い線を右から左へドラッグし描いています。

ラインツールで線を描くとシェイプnの名称でレイヤーが作成されます。
線の色を変更する時にはこのレイヤーを指定し変更します。
レイヤーは、ラインツールを使用する毎に作成され、線の数が多くなると線と該当するレイヤーが 分かりずらくなります。
このため線を多く描く時、レイヤー名称を変更しておくと後で役にたちます。
レイヤー名の変更は、該当するレイヤーを右クリックで 『レイヤー名の変更』 を選択し、名称変更します。

例では 『上線』 に名称変更しています。

次に線の太さを変えて2本の線を描きます。

(4) 直線・斜め線(矢印なし)を描く − 線の太さを変えて描く
線の太さ変更
線の太さを変える
線の太さを変えて直線を描きます。

オプションバーの 『線の太さ』 で次の描く線の太さを設定します。

例では、8pxを設定しています。

線を描く
太さを変えて線を描く
オプションバーの 『線の太さ』 で太さを設定し直し直線を描きます。

例では、
・4pxに設定し、画像左の中程をドラッグし線を描いています。
 レイヤー名を 『中線』 に変更しています。

・8pxに設定し、画像左の下をドラッグし線を描いています。
 レイヤー名を 『下線』 に変更しています。

5. 矢印あり直線を描く

(1) 矢印線の設定
矢印線の設定
矢印線の設定
矢印線の矢印部分を設定します。
線の太さ、線の色の設定は、『項番4.直線(矢印なし)を描く』と同じです。

オプションバーの三角印をクリックすると矢印設定のプルダウンメニューが表示されます。

・開始点 : ドラッグ開始点に矢印を描く時にチェックを入れます。
・終了点 : ドラッグ終了点に矢印を描く時にチェックを入れます。

矢印の設定
・幅  : 『矢印の幅』 を 『線の太さ』 のパーセントで設定します。
      例)矢印の幅を線の太さの3倍にする時、300%を設定します。

・長さ : 『矢印の長さ』 を 『線の太さ』 のパーセントで設定します。
      例)矢印の長さを線の太さの5倍にする時、500%を設定します。

(2) 矢印線(直線・斜め線)を描く
矢印線を描く
矢印線を描く
両端に矢印有りの線を描く時、
オプションバーの矢印設定の開始点と終了点にチェックを入れます。
片側のみ矢印有りの線は、矢印設定の開始点あるいは終了点にチェックを入れます。

矢印の幅、長さを上記(1)に従い設定します。
線の描き方は、『項番4.直線(矢印なし)を描く』と同じです。

例では線の太さ3px、矢印の幅500% 長さ1000%で両端矢印線1本と片側矢印線2本を描いています。
6. 直線、矢印有り直線を描くの終わり

(1) 必要に応じて文字(テキスト)を書く

文字を書く
文字を書く
直線の描きは終わりです。
必要に応じて文字(テキスト)を入れるとコメントとして分かりやすくなります。
文字の入力方法は、 「 文字の入力 」を参照ください。

例の画像に 『赤色の文字』 でサイズを記載しておきます。

ラインツール、文字入力をするとレイヤーが自動作成されます。
線の色変更、削除、文字の変更などを行うときにレイヤーを使用します。
多くのレイヤーが作成された場合、ファイル保存時にPhotoshop形式(*.PSD)で保存すると容易に変更・削除ができます。
(2) 完成イメージ(100%表示)

直線を描く  画像サイズ
  幅500 × 高さ375px

 横の直線
  上から 2px 4px 8px

 矢印直線
  線の太さ 3px
  矢印の幅   500%
  矢印の長さ 1000%

 100%表示イメージです。
 実際にモニターで見た時の
 サイズで表示されています。
 画像サイズ、線の太さの
 参考イメージです。




7. 画像ファイルの保存

   ファイルの保存は、「 ファイルを保存 」 および 「 Web用に保存 」を参照ください。

この『画像の合成』ではレイヤーを使用しています。
保存の時にファイル形式を、JPEG形式(サイト掲載用)以外にPhotoshop形式(*.PSD)で保存しておくと
先々変更が楽にできます。