文字装飾の様々な方法（Illustrator）
2023/12/05
目 次
１ 文字装飾はバナー作りの際に必須の技術
Webコンテンツ作成の中で重要になってくるのが、バナーづくり）です。
バナーとは…ウェブページ上で他のウェブサイトを紹介する役割をもつ画像（アイコンの一種）のことです。 本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着しました。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用されています。」（引用：ウイキペディア）
とある。
このバナー作りの際に、必要となってくる技術に１画像装飾、２イラストづくり、3文字装飾がある。
今回は、文字装飾の際に必要なスキルをいくつかまとめたので、サイト来訪者の為、自分の備忘記録の為、記録しておきたいと思います。
２ 今回の作成事例
今回、板橋診断士協会のバナー再制作に携わらせていただき、その際の試作品をサンプルとして取り上げさせていただきます。
（１）文字フォント
文字のフォントを決める際に、デザイン性が高い「モリサワフォント」や既存のWebフォント、フリーのWebフォントから、バナーの雰囲気にあったものをジャストに選ぶことは重要だが、これは難しい。
理由は、有料のモリサワフォントは高すぎで手に入れることが難しかったり、IllustratorやPhotoshopなどのAdobeCCツールで使えるフォントは多すぎて探している間に日が暮れてしまうほどだからである。
自分である程度、フォントの味などを覚え、「このような雰囲気にはこのフォントなど」と当たりを付けられるようになるまでには、それなりに時間を要するものである。
その中で、最近自分が良く使うフォントは、「NotoSans Japanese（源ノ角ゴシック）であります。
（2）文字色選び
文字色選びには、操作画面にカラーピッカーがあり、無限の数値指定の組み合わせで配色を選ぶことはできます。しかし、赤、茶、紺などオオソドックスの色を選びたい場合は、スウォッチライブラリーから選ぶほうが、キレイな色が撮れて良いような気がします。
（３）グラデーション
アピアランスから「塗」の追加を選択、そして「塗」を反転させた状態で「グラデーションツールから「グラデーション」マークをクリックする。その中で上下・左右などの角度の設定や色（グラデーションする最初の色から変更後の色）を設定します。
ここで、色の遷移によって、文字のイメージが決まってしまうので、派手派手しくならないような色を指定するのがコツです。
（４）文字のぼかし
文字のぼかしは、ラスタライズが必要なので、その前に全ての作業を終わらせておく必要があります。具体的には、①カーニング、②文字色をつける（中心にある文字とマッチするぼかし色を選ぶ、③線を２～４ピクセル位太らせておく。
そして、ラスタライズーぼかしーガウス、背面へペースト（CTR-B）する。
（５）白の薄い背景
真っ白（＃FFF)で長方形を書く。そして、不透明度を上げて、文字が軽く透過して見えるように設定する。
（６）文字自体に象形文字のように意味を持たせるような遊びココロの装飾
イラストACから、イラストレーター形式でできた筋肉マークを背景の背の左右につける。そして、同じように、グラデーションをかける。
（７）完成品
（※ このバナーは個人的に担当者として練習用として作ったもので採用はされておりません。）
