編集部アイコン

編集部
Photoshopで文字デザインまでするの?イラストレーターで良くない?

カメラマンアイコン

カメラマン
いえいえ、今はPhotoshopでもイラストレーターと同じくらい文字編集とデザインができるように進化してるんですよ。

画像の編集に最適なフォトショップをPhotoshopを画像の編集や、画像の合成、色調補正だけに使っていいる人は多いんです。

文字関連の作業、たとえば装飾や文字の枠、ふちどりなど、レイアウトやデザイン制作に関しては、イラストレーターで行っている人も多いんじゃないでしょうか?

今回の記事では、フォトショップでの文字のふちどりや、線幅の付け方、白抜きの方法などをご紹介します!

スポンサーリンク

フォトショップでもできる文字のふち取り

長くAdobe製品を使っている人はこんな風に思っているのではないでしょうか?

Photoshop Illustrator
画像処理・合成 平面デザイン
ペイントソフト ドローソフト

確かにそうなんですけど、でも、今のフォトショップは、イラレと同じくらい、様々な文字装飾やデザインをすることができるんです。

フォトショップで簡単に文字のふちどりができる

背景の色や、画像によっては文字をのせても、背景と同化してしまい見えづらい場合があります。

そんな時文字がふちどられていれば、とても見やすく、一眼で判断することが可能です。

Photoshopで文字ふち手順1

↑こんな風に、背景の色と文字の色が、同化してしまい見えづらい場合、当然、文字が読めるように、なにか処理をしますよね?

普段はIllustratorを使って処理することも多いけど、じつは、フォトショップではそんな文字のふちをレタッチすることも簡単に行うことができます。

Photoshopで文字ふち手順2

縁取りだけではなく、文字に影や線をつけることも可能です。文字レイヤーからレイヤー効果のパネルを操作するだけで一瞬で文字の装飾ができるようになります。

こんな風に、Photoshopを画像処理に使用するだけではなく、文字についても、さまざまな場面で使用することで仕事の作業効率なども格段に変わってきます。

フォトショップでは隠れている文字ふち取りパネル

編集部アイコン

編集部
自分はMacintoshを使ってるんだけど、ちょっと操作がわかりづらいよ。

カメラマンアイコン

カメラマン
そうかもしれませんね。ちょっと隠れてますから。

 

フォトショップで、線の細さなどを調整して文字のふちどりをしましょう。文字の枠やふちどりをするには、文字レイヤーのレイヤースタイルを調整する必要があります。

Windowsmacではレイヤースタイルの表示方法が若干異なる部分があるけど大丈夫です。ちょっとその辺りも含めて、見てみましょう。

文字を入力する

Photoshopで文字ふち手順3

まず、画像に文字をのせたい場合は、画像を開いた後に文字をフォトショップで入力します。

たまたま、背景の写真の色調が、文字と同じような色だった場合、どの色でふちどりをすれば文字がしっかり目立つか大体の見当をつけておきましょう。

●文字をどんな色にするか?
●ふちどりの色はどんな色にするか?

など、背景の写真の色調はもちろん、デザインのテーマに沿った配色をイメージしておくと作業効率が上がってきますよ。

レイヤースタイルを使って文字の枠ふちどりをする

Photoshopレイヤースタイル手順1

入力した文字のレイヤーを選択し、レイヤーパネルの下部にある「fx」というボタンを押してレイヤースタイルを表示させます。

macでは、文字レイヤーを右クリックで、レイヤースタイルを表示させることもできます。

すると、レイヤー効果のウインドウが開きます。こんな画面です。

Photoshopレイヤースタイル手順2

Photoshopレイヤースタイル手順3

レイヤー効果の境界線で様々な文字の装飾が可能

Photoshopレイヤースタイル手順4

フォトショップでは、レイヤースタイル内のレイヤー効果で、様々な文字の枠組みや装飾ができます。

線の細さを変えることや、そこから描画モード内で文字にかかる効果を選択できたり、色を調整したりすることが可能です。

文字のふちどりをするにはレイヤー効果内の「境界線」を選択します。境界線内では文字の外側にふちどりをするのか、内側をふちどりにするのかなどを選べます。

また、「塗りつぶしタイプ」を「カラー」にするとシンプルな単色のふちどりを作ることができ、「グラデーション」にするとその名の通りふちどりをグラデーション使用にすることが可能です。

「パターンオーバーレイ」では色という概念にとらわれず、森や水といった様々なシーンを表現したふちどりが可能になっています。

Photoshopレイヤー効果一覧
●ペベルとエンボス
-輪郭
-テクスチャ
●境界線
●シャドウ(内側)
●光彩(内側)
●サテン
●カラーオーバーレイ
●グラデーションオーバーレイ
●パターンオーバーレイ
●光彩(外側)
●ドロップシャドウ

2重ふちも白抜きも簡単。フォトショップの文字作業

編集部アイコン

編集部
確かにPhotoshopも便利だね。文字と装飾が一体化されたら、イラストレーションみたいに文字と縁がいつの間にかずれたりしないのはいいね。

 

カメラマンアイコン

カメラマン
そうなんです。Photoshopでもイラストレーターと同じことがもっとできるんですよ。いろいろ試すと楽しいですよ。

 

フォトショップの文字の装飾はふちどりだけではありません。文字に2重ふちを施したり、白抜きをすることも簡単にできてしまいます。

他にも文字に影をつけたり、ぼかしたり。文字の装飾を幅広く施すことが可能です。先述したレイヤースタイルから線の細さを変えたり様々な文字を制作してみましょう。

先述したレイヤースタイルから線の細さを変えたり様々な文字を制作してみましょう。

内側と外側に文字ふちをつける

フォトショップでの文字の枠ぐみやふちどり方法と同様に、入力した文字のレイヤーを選択し、レイヤーパネルの下部にあるレイヤースタイルを選択します。

ふちどりしたい色や線の細さを選択後、レイヤー効果の「光彩(外側)」をチェックします。

描画モードを「通常」に設定した後「不透明度」と「スプレッド」は100%の数値にします。さらにカラーやサイズをお好みのものに変更します。

(描画モード(通常)(スプレッド100%))の写真を入れる

Photoshopレイヤースタイル手順5

すると文字に2重のふちどりが施されるようになります。

文字レイヤーにはレイヤー効果として「境界線」「光彩(外側)」が表示されるようになります。微調整を加えたい時には、ここをクリックするとレイヤースタイルの画面に戻ることができます。

文字に影をつけたり、ぼかしを入れてみる

Photoshop文字サンプル

フォトショップではふちどりした文字に影などのシャドウをつけたり、ぼかしを加えることが可能です。

影枠を付け加えるにはレイヤースタイル内のドロップシャドウを選択します。ドロップシャドウ内では影の細かな調整が可能ですので、お好みのスタイルにあった影を制作しましょう。

また、文字にぼかしを加える場合はぼかしたい文字のレイヤースタイルを調整します。

レイヤースタイル内の「光彩(外側)」を選択します。

Photoshopレイヤースタイル手順6

「エレメント」のテクニックを精細に設定し、数値を大きくしていきます。お好みのぼかし具合を見ながら数値を設定していきましょう。

カメラマンアイコン

カメラマン
レイヤー効果を組み合わせると、いろいろな文字表現ができるようになります。試すだけで面白いですよ。

Illustratorと違うPhotoshopの魅力はほかにも

このほかにも、Photoshopでは、Illustratorとは違ったデザインをすることができます。

フォトショップのブラシ機能で自由自在に線を描く

フォトショップのブラシ機能

フォトショップでは、ブラシを使って自由自在に線を描くことができます。

ペンタブに繋げれば直感的な操作でスムーズに思うままにイラストを描くことが可能です。イラレではこの機能はフォトショップに劣ってしまいます。

また、元から入っているブラシ素材以外にも、様々なブラシ素材をダウンロードすることにより、幅広いイラストを描くことができます。

フォトショップはレイヤーごとに作業をすることがとても簡単なので、不要なレイヤーはすぐに削除することができます。

フォトショップでボタンを制作できる

フォトショップでボタンを制作

フォトショップでは写真の編集や線を描いたり文字のふちどりだけではなく、webページなどに使われる「ボタン」も制作可能です。

昨今ではweb媒体が基本となっていますので、多種多様なアクションが存在するwebページに注目が集まります。その中で注目を集めるようなボタンをフォトショップでデザインすることも重要です。

フォトショップではアクションごとにレイヤーが分かれるので、削除なども簡単に行うことができ、簡単に枠やデザインを制作することができます。

画像だけじゃない。フォトショップで文字デザインを楽しもう

昔からAdobe製品を使っている人にとっては、フォトショップは、画像の編集、加工だと思っている人が多いかもしれません。

でも、フォトショでも、簡単に文字の加工、装飾・ふちどりができます。

この機会に、是非、Photoshopでのデザインを試してみてください。テキストのレイヤーを選択するだけで簡単に文字の加工ができるのでスムーズで効率の良い制作が可能ですよ。

>>Adobe Photoshopno 無料体験版

あなたはその編集ソフトで満足してますか?

Youtuberから映画制作の現場まで、ほとんどの編集者が使用している動画編集ソフトがAdobeのPremiere Proです。直感的でわかりやすい操作性でありながら、その表現の幅は無限大。Premiere Proを使えば、あなたの動画のクオリティも向上すること間違いないでしょう。まずは、体験版でその価値を試してみませんか?

 

 

 

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事