バナーっぽく仕上げる！文字入力と配置の基本操作｜これから始めるPhotoshop入門 #11｜基本の使い方講座

文字で仕上げる、伝わるデザイン

イラストや写真に文字を重ねるだけで、見る人にしっかり届く【伝わるデザイン】が生まれます。

たとえば、ウェブでよく見かけるバナー画像。
ただの写真ではなく、文字が添えられていることで、内容がすっと伝わってきます。

この参考画像のように、タイトルやキャッチコピーを加えるだけで、ビジュアルの印象は大きく変わります。

ということで、第11回は文字の入力方法をやさしく解説していきます。

横書き文字ツール

ツールバーから「横書き文字」ツールをクリックします。

オプションバーから下記の設定を行うことができます。

・フォントの種類
明朝体やゴシック体など様々なフォントに変更できます
・フォントスタイル
太字や斜体などフォントによって変更できます
・フォントサイズ
文字の大きさを変更できます
・アンチエイリアスの種類
文字の輪郭の滑らかさを指定できます（初期はシャープ）
・文字の配置
左揃え・中央揃え・右揃えから選べます
・テキストカラー
文字の色を変更できます

ここでは以下の設定にします
フォント：任意のゴシック体
サイズ：100pt（数値は手入力できます）
文字の配置：左揃え
カラー：任意の黒
に設定します。

入力したい部分をクリックします。

文字ツールで画像上をクリックすると、文字レイヤーが自動的に作成されます。

「SALE 1,980円」と入力します。

文字の決定はオプションバーの「〇」をクリックします。

これで横文字を入力することができました。

文字の移動

入力した文字を移動させるには、移動させたい文字レイヤーを選択します。

ツールバーから「移動」ツールをクリックします。

「移動」ツールに変わると、文字の周りに枠（バウンディングボックス）が表示されます。

画像上をドラッグすると文字の位置が変わります。

この時に操作しているのは文字そのものではなく『文字レイヤー』のため、文字上をドラッグする必要はありません。
あくまでも触っているのはレイヤーという感覚を覚えておきましょう。

縦書き文字ツール

ツールバーから「横書き文字」ツールを長押しし、一覧を表示させます。

「縦書き文字」ツールを選びます。

先ほど横書きで設定したオプションバーの設定は引き継がれます。
フォントの種類を任意の明朝体に変更し、フォントサイズを「115pt」に変更します。

画像上をクリックします。

「お肌の新体験」と入力し、オプションバーの「〇」をクリックします。

これで縦文字を入力することができました。

文字の位置は横書きの時と同様に、「移動」ツールを使用し調整します。

横書きでも縦書きでも自動的に文字レイヤーが作成され、入力した文字がレイヤー名として表示されます。

音声と練習用データは
メンバーシップ限定でダウンロードできます

スキルキットのメンバーシップでは、
LINEでの質問サポート、動画・音声、限定記事などで、
学びたいことをまるごとサポート。