1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

Photoshop(フォトショップ)でテキストに縁取りをつけるカンタンな方法

Pocket

PhotoShopでテキストに縁取りをつける方法について学びましょう。

必要に応じてテキストに縁取りをつけると、デザインの幅を広げたりテキストの視認性を高めることができます。

テキストに縁取りをつける目的とは

情報量が多くカラフルな写真を背景に使ってテキストを入れるような場合や、背景と似た色をテキストに使いたい場合、背景とテキストの境目が明確でないとテキストが読みづらくなります。

テキストの後ろを長方形ツールなどで塗りつぶしてしまえば視認性は高まりますが、今度は背景が見えづらくなってしまいます。

背景の画像をできるかぎり見せたい場合は、このようにテキストと背景の境界線に縁取りを加えるとテキストの視認性が高まります。

背景を活かしたままテキストを強調したいときやバナーを作成する際のように限られた空間でテキストを少しでも目立たせたいというときに活用しましょう。

テキストから選択範囲を作成して縁取りを描くには

1.縁取りをつけたいテキストがあるレイヤーを選択し、選択範囲を作成しましょう。

選択できたら、テキストレイヤーと背景レイヤーの間に新規レイヤーを作成します。

・レイヤーにあるオブジェクトの選択範囲を作成するショートカット

Win・・Ctrl+レイヤーをクリック

Mac・・Command+レイヤーをクリック

2.メニューから「編集」→「境界線を描く」を選択します。

3.縁取りの線の太さ、カラー、線を描く位置を決め、決定ボタンを押します。

3pxの太さ、白、外側の位置で線を描きました。

選択範囲を作成して縁取りを描く方法は、作成した画像をバナーとして使用する際の枠線を作るときにも利用できます。

ファイル全体に縁取りをつけたいときは、最前面にあるレイヤー全体を選択してから「境界線を描く」を選択しましょう。

・レイヤー全体を選択するショートカット

Win・・Ctrl+A

Mac・・Command+A

レイヤースタイルを使ってテキストに縁取りをつける方法

1.レイヤースタイルの境界線を使用

わざわざテキストから選択範囲を作成しなくても、レイヤースタイルの境界線を使用すれば一瞬で境界線を描き出すことができます。

レイヤースタイルを適用すれば、後からテキストの大きさや書体を変更したり、縁取りの線の太さを調整できるため便利です。

1.テキストがあるレイヤーをクリック。

2.レイヤースタイルから境界線を選択し、好みの線の太さ、カラー、塗りつぶしのスタイル(グラデーション、パターン)を選びましょう。

レイヤースタイルを使って縁取りをつけると、テキストの内容を変更しても効果は維持されたままです。

レイヤーにあるテキストの塗りを0%にすれば、アウトラインだけが縁取りされたようなスタイルになります。

また、レイヤースタイルはテキストだけでなくカスタムシェイプなどのオブジェクトにも使用できます。

2.レイヤースタイルを利用して二重の縁取りを作るには

レイヤースタイルを駆使すれば、カンタンに二重の縁取りを作ることができます。

複数のレイヤースタイルを適用して、テキストの縁取りを二重にしてみましょう。

1で作成したレイヤースタイルの境界線にさらにスタイルを適用していきます。

1.テキストがあるレイヤーを選択した状態で、レイヤースタイルから光彩(外側)を選択します。

2.描画モードを通常、不透明度100%、スプレッド100%に設定して好みの縁取りになるまでサイズを調整しましょう。

3.レイヤースタイルの境界線と光彩(外側)が適用され、テキストに二重の縁取りが完成しました。

光彩(外側)は、本来はオブジェクトが光っているかのような効果をつけるために使用しますが、設定次第ではこのように縁取りのような効果に見せることも可能です。

さいごに

いかがでしたでしょうか?

PhotoShopでテキストに縁取りをつける方法について学んできました。

テキストに縁取りをつけることができるようになると、表現の幅が広がります。

選択範囲の作成方法や、レイヤースタイルの利用方法をしっかりとおさえておきましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る