基礎から学ぶPhotoshopで文字を自由自在にデザインする方法

Webサイトにアップする画像に文字を入れたいと思った事はありませんか？ Photoshopでは、既存の画像に好きな文字を調整して入力することが可能です。使い方を覚えれば、用途に合わせて自由に文字のデザインができるようになります。

今回は、Photoshopの基本的な文字の機能と文字を変形させる方法を紹介します。

文字ツールの基本的な使い方

「文字ツール」を開く

「文字ツール」を開きましょう。ツールバーの「T」で表示されています。

Photoshopでは、縦書き文字・横書き文字の両方を入れられます。横書き文字または縦書き文字に変更したい場合、文字ツールを右クリックします。右クリックをすると、隠れていた文字ツールが表示され切り替えられます。

画像をクリックして文字を入力する場所を決める

文字ツールを選択したら文字を入力したい地点でクリックします。クリックをするとサンプルテキストとして「Lorem Ipsum」が表示されます。

サンプルテキストを選択した状態でキーボードを打つと文を入力できます。今回は「Photoshop」と入力してみました。

文字を移動させる

入力した文字を移動させたい場合は「移動ツール」を使います。「移動ツール」は選択した画像や文字を移動させる機能です。

「移動ツール」を選択した状態でテキストをドラッグすると好きな位置に移動することができます。

以上が基本的な文字入力の方法です。

パスを使って文字を入力する

パスとはペンツールや楕円ツールなどで描く細い線を指し、選択範囲を作成したり、文字列を表示させたりできる線が描けます。パスツールを使うことで自分が書いた線の通りに文字列を表示させられるので、文字の配置の自由度が高まります。ここでは、パスを使った例として、「楕円形ツール」を使って、文字を円形に入力していく方法を解説します。

円形に文字を入力していく方法

vパスを円で作成する事で、円に沿って文字を描く事ができます。

まず、「楕円形ツール」で円形のパスを作成します。

「楕円形」ツールを選びます。他のツールに隠れてしまっている場合がありますので、その時は下の画像で赤く囲われているツールのどれかがツールバーに表示されています。表示されているそのツールを右クリックすることで隠れてしまっていた「楕円形ツール」を選ぶことができます。

円を作成する前にツールバーの丈夫で円を「パス」に変更します。

現在シェイプになっているところをクリックすると、以下のメニューが表示されます。円形パスを描くときは「パス」を選択します。

作成する円を「パス」に変更したら円を作成します。正円を描きたい時は、Shiftを押しながらドラッグすることで正円を描くことができます。

パスに合わせて文字を入力する

作成した円にそって文字を入力するには、まず円の縁をクリックします。

円の縁をクリックしキーボードを入力すると、円に沿って文字を描くことができます。

以下の画像のように文字を入れることができます。

パスで書いた線は画像扱いでは無く、下書きとして扱われるのでこのまま保存しても保存した線が画像に表示されることはありません。

「楕円形ツール」を使用してパスを作成しましたが「ペンツール」では自分の書いた通りにパスを描く事ができるので、自由度が高い文字列を試す事ができます。

テキストの設定

Photoshopでは、テキストの設定をおこない、文字の大きさ・行間・フォントなどを変更できます。以下の画面がテキストの設定画面です。

テキスト設定画面は「ウィンドウ」→「文字」をクリックすることで表示できます。

文字テキストの機能を順に解説します。

①文字のフォントの変更 ②文字サイズの変更 ③字間の調整する ④文字の両側の空間を調整する ⑤文字の縦幅を調整する ⑥文字の上下の位置を調整する ⑦文字の太さの調整 ⑧行間の設定 ⑨範囲選択した文字の字間調整 ⑩文字の横の長さを調整する ⑪文字の色の変更それぞれ以下で説明します。

①文字のフォントの変更文字のフォントを変えることができます。クリックするとサンプルが表示されるので好みのフォントを一目で探すことができます。

②文字サイズの変更数値を入力することで文字の大きさを調整することができます。「pt」とは出版物の印刷に使われる単位で、1ptは約0.35mmです。

③字間の調整する文字と文字の隙間を調節する事ができます。以下の画像の上の文の字間は0%、下の文の字間は200%になっています。

④文字の両側の空間を調整する文字の両側の空間の余白を調整することができます。余白を少なくすることで文全体の字間が短くなり、引き締まった印象になります。

⑤文字の縦幅を調整する文字の縦幅を調整することができます。上の「Photoshop」が120%下のが300%になっています。（横の長さは120%で設定しています）縦幅を大きくすることで、伸ばしたかのような文字を作成できます。

⑥文字の上下の位置を調整する数値を入力することで文字位置を調整することができます。以下の画像が元の位置です。

＋50を入力した場合です。文字が上部に移動しています。

-50を入力した場合です。反対に文字が下方向へ移動しています。

⑦文字の太さの調整文字の太さを調整することができます。サンプルが表示されるので好きなフォントを選択します。ただし、フォントによっては文字の太さを変えることができません。

⑧行間の設定数値を入力して行間を変更することができます。行間の値が30%の場合

行間の値が60%の場合です。上の画像よりも1文目と２文目の間隔が空いているのが分かります。

⑨範囲選択した文字の字間調整範囲選択した文字レイヤーに含まれる文字列の行間を調節できます。 0%の場合です。

-100%の場合です。値をマイナスにすると行間が少ない文字、プラスにすると１文字1文字が離れます。

⑩文字の横の長さを調整する選択した文字の横の長さを調整することができます。上の「Photoshop」に120%、下のPhotoshopに150%を入力しています。（縦の数値には120%を入力してあります。）

⑪文字の色の変更文字の色を変更することができます。カラーピッカーと呼ばれる絵の具のパレットのようなものから色を選択します。使用したい色をクリックするか「HSB」「RGB」「Lab」「CMYK」等の色空間に数値を入力して色を調整します。

文字装飾の応用

基本的なテキストの設定は、上記の①〜⑪でできます。しかし、以下で紹介している機能が使いこなせると、細かい文字のレイアウト調整に役立ちます。

文字を太字で表示する

選択した文字を太文字に変更できる機能です。ただし、太さなどは選べず、ただ単に文字が太くなるだけです。

文字を斜体に

選択した文字を斜体に変更します。

文字を全て大文字にする（オールキャップス）

選択したアルファベットを全て大文字に変換する機能です。

小文字を大文字にする（スモールキャップス）

アルファベット表記の小文字のサイズをそのままにして大文字として表示します。

文字を変形させる

画像に文字を入れるとき、文字が飛び出すかのようなレイアウトにしたい時や文字に奥行きを出したい時があるかと思います。 Photoshopでは文字の大きさや形を自由に変更することができます。より自由度の高い表現をすることができるようになるので覚えると画像作成に役立ちます。

ワープテキストを使用して文字を変形させる

Photoshopのワープテキストという機能を使用して文字を変形させます。まず変形させる文字を選択します。

文字を選択するとがメニューの下に表示されるのでクリックします。黄色い部分が変形させるための編集ボタンです。

ワープテキストが表示されるので「スタイル」をクリックします。

ワープテキストでは以下の15種類の効果を使って文字の形を変形させることができます。

プレビューが表示されるので好みの形になるまで調整を行います。

「OK」を押すと変形が適用されます。変形の種類によって変えられる形が違うのでプレビューを確認しながら好みの形になるように調整しましょう。

自由変形の機能を使って文字を変形させる

既存のワープテキストを使用しなくても文字を変形することが可能です。ワープテキストとは違い、自分の好きなように文字の角度、大きさ、遠近感を変更することができます。独自の形に変形しいときは、自由変形を使いましょう。

自由変形機能を使う場合、文字レイヤーをシェイプに変更する必要があります。 Photoshopでは画像を拡大、収縮させると画質が劣化してしまうのですが、シェイプには画像劣化を防ぐ効果があります。

シェイプに変形させるレイヤーを右クリックします。以下の画像のウインドウが表示されるので「シェイプに変換」をクリックします。

文字レイヤーがシェイプに変換されたので、画質が劣化することなく大きさを変更することができます。

画面の上の部分から「編集」→「自由変形」をクリックします。

「自由変形」をクリックすると、このような状態になります。

文字の周りにある四角をドラッグすると文字を変形させることができます。

文字の周りの四角を、command（Ctrl）を押しながらドラッグすることで遠近感を出すことができます。自由変形を行うことで背景に合わせた文字が作成できます。

自由変形を行うことで自分の思うように画像の変形させることができます。自由度が高い変形を行えるので、形の調整が非常に行いやすいです。

まとめ

Photoshopでは、画像に文字を入れるだけでなく、入力した文字のレイアウトを調整したり、変形させたりことができます。遠近感を出したり、文字列を円形にしたりできるので、デザインの幅も広がるでしょう。今回紹介した文字入力ツールやレイアウトツールを活用して、魅力的なアイキャッチや広告画像を作成しましょう。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。