本記事には広告（アフィリエイトリンク）を含みます。
こんにちは、コムたんです。サムネやデザインをPhotoshopで作ってます。
結論：同じ文字に12種を当てて並べたら、僕がサムネで使うのは線形・くぼみ ‐ 深く・リングの3つだけになりました。残りの9種は線形と見分けがつかないか、文字より光のほうが先に目に入るかのどちらかです！
サムネの文字装飾をPhotoshopで数え切れないほど作ってきたのに、光彩の「輪郭」だけは、ずっと既定のままいじらずに通していました。内蔵で12種もあるのに、同じ条件で全部並べて見比べたことが一度もなかったからです。それで文字も色も光彩の設定も固定したまま、輪郭だけを12種入れ替えて、全部描いて横に並べました。
同じ文字で12種、分かれたのは4グループだけ
結論から書きます。内蔵の輪郭は12種あるのに、同じ文字に当てて並べた時に見分けがつくのは4グループだけでした。柔らかい発光、薄く広がる面、輪っか、強い発光。この4つです。12種を上から順に当てて見比べる作業を一通りやってみて、名前の数ほど見え方は分かれていない、という所に落ち着きました。名前が12個もあるのに見え方は4つw
そして僕がサムネで実際に使うのは3つに絞りました。線形、くぼみ ‐ 深く、リング。この3つで「際を明るく光らせる」「薄い面で文字を浮かせる」「輪っかで飾る」という用途が全部埋まります。
- 柔らかい発光：線形／ガウス／半円／角丸ステップ／ぎざぎざ 1
- 薄く広がる面：くぼみ – 浅く／くぼみ ‐ 深く／円錐 – 反転／ローリングスロープ – 下向き
- 輪っか：リング／リング – 二重
- 強い発光：円錐
この4グループで12種全部です。意外だったのは角丸ステップとぎざぎざ 1 で、名前からして段が出る輪郭なのに、サムネで使う太さの光彩だと線形と並べても見分けがつきませんでした。円錐は1つだけで1グループにしています。同じ設定なのに一番明るく、一番広く光るので、ほかのどれとも一緒にできなかったからです。
並べ方：文字側と光彩の設定は一切動かしていない
条件を全部同じにしないと、輪郭の差なのか別の差なのか分からなくなります。なので文字は200px、書体は源暎きわみゴ Ultra、本体は紺のグラデーションに白い縁8px（僕がいつも使う、暗い本体に白い縁の土台）で固定。そこに光彩（外側）をオレンジ・サイズ60px・スプレッド10%・描画モードはスクリーン・不透明度100%で当てて、輪郭だけを12種入れ替えました。土台の考え方はサムネ文字の縁取りと影を測った時と同じです。
- 文字サイズ：200px
- 書体：源暎きわみゴ Ultra
- 本体：紺のグラデーション＋白い縁8px
- 光彩：オレンジ・60px・スプレッド10%・スクリーン・不透明度100%
- 輪郭だけ12種入れ替え。色・位置・文字は全部固定
並べる途中でもう一つ分かったのが、内蔵の輪郭は名前で選べるということ。曲線の点を自分で並べなくても、「くぼみ ‐ 深く」のように名前を書けばその輪郭がそのまま当たります。この環境での正確な名前は、次の12個でした。
- 線形／円錐／円錐 – 反転
- くぼみ ‐ 深く／くぼみ – 浅く／ガウス
- 半円／リング／リング – 二重
- ローリングスロープ – 下向き／角丸ステップ／ぎざぎざ 1
並べて見えた違い
並べて一番はっきりしたのは、輪っかになる2種の存在感です。リングとリング – 二重は、光の外側の境目がくっきり切れていて、文字の外に線がもう一本出てきます。リング – 二重まで行くとその外にもう一本細い線が足されて、マジで輪っかのほうが主役。文字を読ませる所に当てる物ではなく、完全に飾りの枠として使う物だと思いました。
次に目立ったのが円錐。同じオレンジ・同じ60pxなのに、12種の中で一番明るく、一番広く光ります。線形の隣に置くと光の量が倍くらいに見えるので、これだけ1つで「強い発光」のグループにしました。逆に拍子抜けだったのが角丸ステップとぎざぎざ 1。段が出る輪郭のはずなのに、この太さでは線形と見分けがつかない。段を狙って選んでも、サムネの大きさでは出ません。
差が小さかったのが、柔らかい発光の5種（線形・ガウス・半円・角丸ステップ・ぎざぎざ 1）。文字の際が明るくて、外に向かって素直に薄くなる、ふつうの光です。薄く広がる面の4種（くぼみ – 浅く・くぼみ ‐ 深く・円錐 – 反転・ローリングスロープ – 下向き）はその反対で、際はほとんど光らず、薄いオレンジの面が遠くまで広がります。文字を光らせるというより、文字の後ろに薄い板を敷いて背景から浮かせる使い方です。
サムネで使う3つと、使わない物
12種を一通り見た上で、僕がサムネで使うのは次の3つだけです。
- 線形：既定の柔らかい光。際を明るく、自然に光らせたい時
- くぼみ ‐ 深く：際は光らず、薄い面が広がる。文字を背景から浮かせたい時
- リング：文字の外に輪っかが出る。飾りたい時
使わないのは、まず角丸ステップとぎざぎざ 1。段が出る設定なのに、サムネの太さでは線形と同じに見えるので、わざわざ選ぶ理由がありません。円錐は一番明るいぶん、文字より光のほうが先に目に入るので、飾り以外では使いません。それと、曲線の点を自分で置いた方で一番強かった反転も、影には使いません。べた塗りの光に近い出かたなので、影ではなく輪郭線が欲しい時だけの物。結局、文字の読みやすさは輪郭より詰め方と縁の太さで決まるので、輪郭は最後に味を付ける所だと思っています。
設定値の早見表（曲線の点と見え方）
名前で選ぶ12種とは別に、曲線の点を自分で置いて作った12種もあります。こっちは点の位置が数値で残るので、見え方と設定値が紐づく。同じく影に当てて描いた控えがこれです。
| 輪郭 | 曲線の点 | 見え方 |
|---|---|---|
| 線形 | (0,0)(255,255) | ふつうの柔らかい光。既定 |
| 円弧 | (0,0)(64,140)(128,200)(192,236)(255,255) | もっと外まで柔らかく広がる |
| 逆円弧 | (0,0)(64,20)(128,56)(192,130)(255,255) | 内側に締まる。輪郭が細い |
| 山 | (0,0)(128,255)(255,0) | 輪っかになる。文字との間に隙間 |
| 二山 | (0,0)(64,255)(128,0)(192,255)(255,0) | 二重の輪。内側の縁がくっきり光る |
| 階段 | 段状 | 段ごとに濃淡が切り替わる |
| 反転 | (0,255)(255,0) | 一番強い。べた塗りの光に近い |
| S字 | (0,0)(80,30)(175,225)(255,255) | 中間が締まって外が柔らかい |
| 尖り | (0,0)(200,30)(255,255) | 細く鋭い縁 |
| 半円 | (0,0)(128,255)(255,255) | 中くらいの広がり |
| 谷 | (0,255)(128,0)(255,255) | 内と外が光り中が抜ける |
| 三山 | 3つの山 | 三重の輪。硬い輪郭線になる |
この表で言うなら、柔らかい発光なら線形かS字、輪郭線として使うなら反転・三山・二山、文字と離れた輪っかなら山。描画モードを20種並べた時と同じで、名前を12個覚えるより、まとまりが何個あるかを覚えたほうが早いという話に落ち着きました。迷った時はこの表に戻ってきます。
つまずきやすいところ
「くぼみ ‐ 深く」が名前で選べない
ハイフンの文字が違うのが原因です。「くぼみ ‐ 深く」のハイフンは U+2010（‐）で、他の項目で使われている U+002D（-）とは別の文字でした。手で打つとまず当たらないので、名前で指定する時はこの表記をそのままコピーして使ってください。僕もここで一度つまずきました。
12種の中で一番強いのはどれ
曲線の点を自分で置いた方で比べると、一番強いのは反転です。(0,255)(255,0) の2点だけで、べた塗りの光に近い出かたになります。輪郭線として使いたいなら反転・三山・二山、柔らかい発光が欲しいなら線形かS字。影としてなじませたい用途に反転を持ってくると、まず強すぎます。
輪っかが文字にくっついて見える
輪っか系は2種類あって、出かたが違います。山（0,0）(128,255)(255,0) は文字との間に隙間ができるタイプの輪っかで、文字から離れた線になります。二山は二重の輪で、内側の縁がくっきり光るほう。離れた輪っかが欲しいなら山、縁を光らせたいなら二山です。
段が見えるのを消したい
段が出るのは不具合ではなく、その輪郭の性質です。ただ、角丸ステップとぎざぎざ 1 をサムネで使う太さ（60px前後）の光彩に当てた限りでは、線形と見分けがつきませんでした。段が気になる大きさで使っているなら、同じ場所を線形かガウスに替えてください。柔らかい発光のグループなら、濃淡の切り替わりは出ません。
毎回12種を開いて迷ってる人→線形・くぼみ ‐ 深く・リングの3つだけ覚えればもう迷わないです。装飾でガツンと遊びたい人→リング – 二重と三山をいじってみてほしい！
描画モード20種を並べた、190pxの縁取りと影の数値、サムネ文字の詰め方3種も合わせてどうぞ。
この記事で使っているソフトは Photoshop です。まだ持っていない人は、Adobe公式のPhotoshopのページから無料体験で始められます。
この記事の設定をそのまま使えるレイヤースタイル（定番500種・第1集）は、BOOTHで配布しています。ショップ名は「くりねくんの研究成果」（ショップ全体）です。
コメント