WEBで記事を書いていると、記事内で画像を使って解説することがあると思います。操作画面をキャプチャして分かりやすく見せたり、遷移先のページイメージを見せておいたりしますよね。
ただ、縦に長くなるような画像では、一部を省略した方が見やすいです。以下は当サイトのトップページの例ですが、ヘッダーとフッターのみを見せたい時は、以下のようにスッキリ省略できます。
中間を省略するとページが無駄に長くなることを防げてスマートです。当記事では、PhotoShopを使って上記のような省略線（波線）を引く方法をご紹介いたします。
PhotoShopでの波線の作り方の基本
PhotoShopの長方形ツールを使うと簡単です。下記の3ステップで省略線として使える波線をつくれます。
- 長方形ツールで線を引く（ここで色、太さ変えれます）
- 引いた線を波形に変更する
- 波の形を整える
1.長方形ツールで線を引く
下記箇所で別のアイコンが表示されている方は、右クリックで長方形ツールを選択いただけます。
画像上でドラッグして線の位置や太さを画像に合わせましょう。
2.引いた線を波形に変更する
先ほど引いた線を波形に変更するには、フィルターから「変形」を選び、「波形」を選択します。
その後、「スマートオブジェクトに変換」をクリックします。
3.最後に波形を整えます
表示される下記ウィンドウでは、波形の種類（正弦・三角・矩形）や以下の数値を調整できます。
- 波数
- 波長（波一つの横幅）
- 振幅（波一つの縦幅）
- 比率
それぞれつまみを動かして形を整えてみてください。波長や振幅にもよりますが、基本は波数を1にして波長と振幅のみを変更すると調整しやすいです。
波形がぐちゃぐちゃになってしまった場合は、command（Winの場合はCtrl）を押している間は「初期設定」と表示されるので、こちらで元に戻して波数を1にすると再調整しやすくなります。
【おまけ】波線を省略線として使う時のコツ
画像やグラフなどに省略線として使える波線ですが、綺麗に見えるコツをご紹介いたします。
上下の画像の境目に太めの波線をひく
画像の途中で省略線として使いたい時は、上部と下部で分けて2枚の画像を用意してください。上下をつなげて、先ほどの手順で波線を引くと省略線の完成です。
当記事のサンプル画像は以下のように2枚を組み合わせて、境目に波線を引いています。
波線が細すぎると省略線に見えずに不格好なので、適度な太さを維持しておく方がベターです。
波線に境界線をつける
画像の種類によっては、波線に境界線をつけた方が綺麗に見えます。背景と波線が同じ色の場合などは、下記箇所で境界線をつけられます。
追加した波線のレイヤーを右クリックして「レイヤー効果」内の「境界線」にチェックを入れると、太さやカラーを選択可能です。
まとめ
PhotoShopを使った波線の作り方を解説いたしました。記事内に縦長の参考画像やグラフなどを挿入する際に、省略線としてご活用いただけます。余分な画像を省略して、記事内を見やすく整理してみてください。
