前回はレイヤーパネルの使い方を学びました。
レイヤーパネルはPhotoshopの基本中の基本で、
レイヤーパネルなしではデザイン作業は進められません。・・・というお話でしたね。
今回は文字パネルの使い方をレクチャーしていこうと思います。
Photoshopの基本設定
Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、新規ファイルを作っておいてください。
文字パネル・文字ツール
文字パネルを表示させる
最初にですが、初期設定では文字パネルは出ていたり出ていなかったりします。
文字パネルを出すために、一番上の「ウィンドウ」から「文字」を選択してみましょう。
すると、文字パネルが表示されます。
文字を入力する
文字パネルはその名の通り、文字を追加するためのものです。色やサイズ、文字間や行間を調整するのも文字パネルで行えます。
早速文字を入力してみましょう。
左側ツールパネルの「T」アイコンを選択して入力できるように
まず左側にあるツールパネルから、「T」のアイコンの文字ツールを選択しましょう。
選択すると文字を入力できるようになります。
キャンバス上をクリックして文字を入力する
文字の入力作業は普通にキーボードで文字を打ち込むだけです。
注意点として、フォントカラーを背景色と同じ色にしていると、
入力しても「あれ？あれ？おかしいな・・・文字がでない？」
みたいなことになっちゃうので、フォントカラーだけは指定した方が無難です。
フォントカラーについては後で説明します。
テキストボックスにする
文字ツールを選択した状態で左クリックしたまま右下に伸ばすとテキストボックスが生成されます。
キャンバス上を左クリックした時とテキストボックスの何が違うか？というと、
入力した文字が折り返しされるかどうか？の違いになります。
テキストは文字を打てば打つほど横にどんどん伸びていきますが、
テキストボックスはボックスのサイズに収まらなくなると勝手に改行をしてくれます。
例えば、コンテンツの本文部分をデザインしていると、いちいちテキストを生成せずに折り返して欲しくなる時もあります。そんな時に勝手に改行をしてくれて、テキストボックスの縦のサイズが小さくなってきたら縦に伸ばしてしまえばサイズは可変になってくれてとても便利です。
以上が文字ツールのお話です。
文字パネル
左側のツールパネルの「T」アイコンは「文字ツール」、
左側の「A」アイコンは「文字パネル」です。
別に二つも必要ないよね？？って思うかもしれませんが、それぞれちゃんと役割があります。
文字ツールの役割については先ほど説明した通り、文字を入力するためのものです。
じゃあ文字パネルの役割は？というと、
打ち込む文字のフォントや色、文字間や行間を調整したりするためのものです。
では、それぞれの項目について説明していきましょう。
フォントファミリー
入力する文字のフォント（書体）の選択を行います。
ここに表示されるのは使っているPCの中にインストールしてあるフォントのみで、
新しいフォントをインストールするとここに表示されるものがどんどん増えていきます。
ちなみに先生のPCはフォントが増えすぎてスッチャカメッチャカになってます・・・。
少ないとデザインするときに困りますが、増やしすぎるのも問題です・・・。
フォントスタイル
太さだったり、斜体（イタリック）だったり、フォントの状態を指定します。
ここはフォントによって選択できたりできなかったりします。
フォントが細いから太くしたいなぁ、とか、斜めにしたらオシャレじゃね？とか、
ここで調整してみるのもいいかもしれませんね。
フォントサイズ
フォントのサイズの指定です。
皆さんには毎回Photoshopの基本設定で調整してもらっているので「px」で表示されるはずですが、設定していないと「pt（ポイント）」だったりすることがあります。
ちなみにここには6pxから72pxまでのあらかじめ指定されている文字サイズがプルダウンで表示されていますが、もっと大きい文字がいい！とか、もう1px小さい文字にしたい！というときは直接数字を入力することもできます。
行送り
行と行の間隔を「行送り」といった名称で呼びます。
1行のテキストだとあまり意味をなしませんが、
2行以上になると読みやすさを考えてここの値を調整することがあります。
デザインにもよりますが、コンテンツの本文部分などであれば、
フォントサイズの1.5倍〜2倍ほどの数値にすること、読みやすさが格段に上がります。
カーニング
文字間隔を調整するためにあり、指定した文字の右側の間隔を調整するために使います。
これは非常によく使う機能ですが、詳しくは今日の実践で説明します。
文字トラッキング
これも文字間隔の調整のためにあります。
こちらはテキスト全体に対して等間隔に調整を行ってくれます。
これも今日の実践で説明します。
文字詰め
こちらは文字の前後の間隔を調整するもの。
これも今日の実践で説明します。
垂直比率
垂直比率は文字の横幅はそのままに、縦の大きさを変えることができるもの。
ただ、長年この仕事をしていますが、これ使ったことない（笑）
水平比率
水平比率は垂直比率とは逆に、文字の高さはそのままに、横の伸ばすことができるもの。
同じくこれも使ったことない（笑）
ベースラインシフト
ベースラインシフトは、文字の縦位置の調整です。
例えば和文英文を混在させた文章を扱うとき、文字サイズの違いが大きいと非常に気になることがあります。その際には、小さい文字のフォントサイズを少し上げて、縦位置を調整することで綺麗におさまることがあります。
数値をプラスしていくと文字位置が上に、マイナスしていくと下に移動していきます。
フォントカラー
その名の通り文字色の指定を行います。
プロが認める一工夫！「テキストカーニング：文字詰め」
ここでデザインクオリティアップのヒントをひとつ、
「文字詰め」（カーニング）を伝授します。
プロの現場では、これをやるとやらないとでは評価が全然違います。
まずは下の画像をみてください。
上の文字と下の文字、どう違うかわかりますか？？
上の文字は文字の間隔がバラバラなのに対し、下の文字は文字の間隔が均一です。
文字は形状の違いで、認識される文字の間の面積が変わります。
面積が狭い部分は文字間が詰まって見え、広い部分は空いて見えてしまいます。
Photoshopなどを使って文字を打ち込んでそのまま表示すると上の文字のままになりますが、
打ち込んでからひと手間加えることで、読みやすさやわかりやすさを向上させることができます。
そのひと手間が今回紹介する「文字詰め（カーニング）」です。
平仮名・カタカナ・漢字で構成される日本語では、読みやすさを作るために文字詰めが必要です。
早速レクチャーです。
文字を打ち込む
まずは文字を打ち込むところから始めていきましょう。
今回は下の画像の例文の文字を打ち込んでください。
「Alt + 十字キーの左右」で、間隔を詰める
文字を入力し終えたら、一文字目の右側にカーソルを持っていき、
Altを押したまま、 十字キーの左を何度か押してみてください。
文字間が詰まっていくのがわかりますか？？
では今度は反対にAltを押したまま、 十字キーの右を何度か押してみてください。
文字間が広がっていくのがわかりますか？？
こうやって文字の間隔をバランス良く詰めていきます。
詰めすぎるくらい詰めちゃうのがコツです。
文字を全選択して、トラッキングで間隔を広げる
さて仕上げです。
先ほどまでで文字間を詰めすぎるくらい詰めましたよね？
これでは読みづらいので、今度は広げていきましょう。
ただし先ほどの調整ですでにバランスは取れているはずなので、
今回は一文字ずつ詰める必要はありません。
トラッキングを使って文字間を広げます。
編集し終わった文字レイヤーの文字を全選択し、
文字パネルのところのトラッキングにカーソルを持っていき、
プルダウンの中から、「100」もしくは「200」を選択してください。
どうですか？？文字がバランス良く配置されましたか？？
もちろん文字詰めの作業は文字数が増えれば増えるほど大変ですが、
デザインに重きを置いた会社は、パンフレットやブックレットでも一文字ずつ詰めています。
例えば、面接などで持参するポートフォリオの文字なども、
きっちりと文字詰めしてあればかなりの好印象を与えると思います。
逆にみんなが面接先の会社の制作物を見せてもらって、
ちゃんと文字詰めをしているかどうかチェックしてみたらいいと思うよ！
「テキスト画像」にはできるけど「システムフォント」にはできない！
実践するとデザイン面で文字詰めがどれだけ重要で有効かを理解できると思いますが、
残念なことにシステムフォント部分（本文など）に使用する方法は未だ確立されていません。
画像内に文字を書き込んでいる、いわゆる「テキスト画像」限定の技術です。
（だからPhotoshopやIllustratorで調整するんだけども）
ウェブで使用するフォントは余白に強く影響を受ける上にフォントによって余白が違います。
使用文字の多いシステム部分を全て文字詰めするにはJavaScriptでの処理が必須ですが、
地道に1文字ずつ処理をすることになり、かなり負荷が高く現実的ではないからです。
一部の有料フォントサービスでは実装されるかも？？と言われていますが、
やはり一部での技術になりそう・・・今後の技術の進歩に期待ですね。
文字詰めを実践（そして課題提出）
ではもう一度実践してみましょう。
さらに今回の課題提出はこの文字詰めです。
今度は、以下の文章をPhotoshopの文字ツール（テキストボックス）を使ってコピペし、
レクチャーした内容を参考に文字詰めをしてください。
春はあけぼの。やうやう白くなり行く、山ぎは少しあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり。やみもなほ、ほたるの多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。
課題の提出
今回はこの文字詰め課題を提出しましょう。注意点ですが、jpg以外は受け付けられないようになっていますので、必ずjpgに書き出して提出してください。
では提出用にjpgで書き出してみましょう。
手順は以下。
- 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
- Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
- 一番下の「保存」をクリック。
- ファイル名を以下のようにして保存をクリック。
「文字詰め課題」→ 学籍番号-kerning
では下のフォームに、書き出したJPGを添付して送信してください。
本日のまとめ
今日は文字ツールや文字パネルの使い方をレクチャーしました。
長方形ツール同様頻繁に使う機能ですので、是非抑えておいてください。
ウェブサイトデザインを行うにあたり最も重要な「コンテンツ=文字情報」を扱うので、
ただ入力すればいいわけではありません。
文字間はデザインによって使い分ける
みなさんはどんなウェブサイトデザインを作るつもりですか？
シンプルなもの？？可愛いもの？？高級感のあるもの？？
様々なデザインテイストがあり、ものすごいパターンの作り方がありますが、
全てに共通しているのは、最も重要なのはコンテンツだということ。
コンテンツとは何か？？それは文字情報です。
画像や動き、動画などに目を奪われてしまいがちですが、
ウェブサイトの主役は「コンテンツ=文字情報」なんです。
その文字情報をより魅力的に見せるために、
採用されるデザインにふさわしいフォントファミリーの選択や、
文字間、行送りの高さなどの調整を細かく行いましょう。
文字詰めができるのは画像で制作する文字に限られますが、
サイトやページのタイトルなどには画像を使うことが多いので、
今回の文字詰めを覚えてクオリティの高いデザインを作ってみましょう。
