【Photoshop】境界線を複数重ねる方法【レイヤースタイル】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のレイヤー効果の一つである境界線を複数適用し、2重・3重に重なった境界線を作る方法を徹底解説します。

レイヤーを何枚も重ねて境界線を作る必要は無し！
効率的に線を複数重ねてクリエイティブを加速させてみませんか？

フォトショ初心者の方にも再現できるよう、詳しく解説。
Photoshopを使った制作を更に効率化させましょう！

この記事の目次

境界線を複数重ねた例

上記のようにレイヤースタイルの境界線を複数重ねることができます。
文字オブジェクトに対して境界線を設定していますが、写真やイラストなど何にでも適用可能。

境界線を複数重ねる方法

文字オブジェクトを例に、Photoshopで境界線を複数適用する具体的な方法を解説します。
もちろん文字以外のグラフィックにも適用可能です。

STEP.1

文字を入力する

[ 文字ツール(T) ] を使って任意の文字を入力します。
文字ツールの詳しい使い方はコチラの記事で解説しています。

Photoshopは導入されていますか？
まだの方は事前にAdobe公式サイトから入手しておきましょう。

STEP.2

レイヤースタイルを追加

レイヤーパネルを開きます。
フォトショップの画面上に見当たらない場合は [ F7 ] を押すと表示・非表示できます。

レイヤーパネル下部に [ fx ] をクリックして [ レイヤースタイルを追加 ] します。
レイヤースタイル一覧の中に [ 境界線 ] が格納されています。

※レイヤー効果の基本はコチラの記事で詳しく解説しています。

STEP.3

境界線を設定する

レイヤースタイルのダイアログ画面が開きます。
[ スタイル ] → [ 境界線 ] をクリックし、境界線を設定ます。

サイズ：3px　位置：外側　描画モード：通常
不透明度：100%　塗りつぶしタイプ：カラー
カラー：お好きな色

すると左図のようになります。
グレーの背景にしているので微妙に分かりますが、白い境界線が追加されました。

このように、特に設定しなければ1つの境界線のみです。

STEP.4

境界線を追加

境界線の右側にある [ + ] を押しましょう。
すると同じ境界線がコピーされます。
※右下のごみ箱ボタンをクリックすると削除できます。

下に追加された境界線をクリックし、設定を加えます。

サイズ：7px　位置：外側　描画モード：通常
不透明度：100%　塗りつぶしタイプ：カラー
カラー：お好きなカラー

すると左図のように境界線が2重になりました。

追加した境界線は太くして色を変えると分かりやすいですよ。

STEP.5

fxでも追加可能

ついでに別の方法で追加してみましょう。
レイヤースタイルのダイアログ画面左下に [ fx ] があります。
クリックし、[ 境界線 ] を追加しましょう。

3番目に配置し、太さや色の設定を行います。
サイズ：11px　位置：外側　描画モード：通常
不透明度：100%　塗りつぶしタイプ：カラー
カラー：お好きなカラー

並び順がズレたら左下の上下の矢印ボタンをクリックして境界線の表示順を変更します。

すると左図のように境界線が3重になりました。

あとは同じパターンで境界線を追加できます。

FINISH

完成

設定が完了したらレイヤースタイルのダイアログ画面右上の [ OK ] をクリックします。

Photoshopなら簡単に複数の境界線を重ねる事ができますよ。
フォトショの導入がまだの方はAdobe公式サイトから入手できます。

他のレイヤースタイルも同様

境界線だけでなく、[ + ] が表示されている他のレイヤースタイルでも同じ効果を複数重ねることができます。
左図はドロップシャドウを色を変えて複数重ねた例です。
うまく活用してPhotoshopを使った表現の幅を広げてきましょう！

高品質なWEBデザインテンプレート

Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Business Website Layout with Blue Accents

コーポレートサイトに向いているデザインカンプテンプレートです。
ブルーの差し色は簡単に別の色に変更できます。

ダウンロード

#02 4 Web Pages on a Smartphone Mockup

スマホ用のWebデザインカンプ4パターンセットです。
モバイル主体のサイトを考えられている方にオススメ！

ダウンロード

#03 Web Site Questionnaire Layout for Health Coach

フィットネス系のサイトデザインに適したテンプレートです。
もちろん画像とテキスト内容を変更するとフィットネス以外の分野でも活用が可能です。

ダウンロード

#04 User Interface E-Commerce Website Page Layout Set

通販サイトのデザインカンプです。
汎用的なレイアウトなのでどんなECサイトにも合うでしょう。

ダウンロード

#05 Personal Website Layout with Yellow Accents

様々なサイトで使える汎用的なWebサイトテンプレートです。
個人・企業、何でも使えます。

ダウンロード

Photoshop用とIllustrator用のバナーテンプレート

【商用可】Webサイトのデザインカンプ用テンプレート35選！サイトデザインを瞬殺【Photoshop・Illustrator】

フォトショップとイラストレーター用の高品質なWEBデザインテンプレート35選です。
全て商用利用可能！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で境界線を複数重ねる方法についてでした。

先日レイヤースタイル内で境界線を重ねる事を知らない方が複数の文字オブジェクトを作成していました。
同じレイヤースタイルの重ね掛けの事を知らない方は意外と多いかもしれないですね。

よりシンプルで編集しやすいPSDを作成する上で必須の知識なので是非覚えておきましょう。

また、境界線の角を尖らす方法をコチラの記事で詳しく解説しています。
通常の [ 境界線 ] では位置を内側にすると出来なくもないですが、元オブジェクトの形状が崩れてしまいます。形状を崩さず外側にパキっとした境界線を追加する際に使えるテクニックですよ。

ではまた！