イトウ先生のTips note【Photoshop CC 2017】OpentypeSVGフォント

Tipsnote-photo-2016023

こんにちは、イマジカデジタルスケープの伊藤和博です。
今回のブログは2016年最後のブログとなりましたが、Photoshop CC 2017から新機能で、「OpentypeSVGフォント」をご紹介します。
OpentypeSVGフォントとはSVGアートワークを含んだOpentypeフォントで、フォントとして入力した後、レンダリングして画像として使用してもいいですが、SVG書き出しすることでHTMLの中に取り込むことが可能です。今回のPhotoshop CC 2017では、通常のテキストのように使用できるものと、絵文字の各1書体づつ搭載しています。
ちなみに以下が今回のPhotoshop CC 2017スタートアップになります。

PScc17_ops022

●さっそくやってみよう!

文字ツールを選択し、オプションバーからフォントを選択すると、フォント名の横にOpentypeの「O」に「SVG」が合体しているフォントがあるのがわかります。この「Trajan Color」と「EmojiOne」の2書体が、OpentypeSVGフォントになります。

PScc17_ops001

アルファベットと数字を入力する場合は「Trajan Color」で入力します。「トラヤヌス」とも言われるこのフォントは非常に歴史あるフォントで、古代ローマ・トラヤヌス碑もそうですが、アメリカ映画のタイトルやポスターなど、今では様々なところで使用されている有名なフォントです。なお、このフォントにはもともと小文字がありませんので、アルファベット大文字と半角数字のみの入力となります。

PScc17_ops002

OpentypeSVGフォントは、「ColorFont」ともいい、カラーピッカーでフォントカラーを指定するのではなく、あらかじめ指定されたカラーから選択して使用します。

PScc17_ops004

ただし、SVGフォントとしてこのままSVG書き出した場合でも、フォントがなければWebブラウザ上ではSVGフォントとしては表示されませんので、TypeKitからフォントを入手・同期・CSS指定するか、またはラスタライズして画像として使用するか、になります。

PScc17_ops005

PScc17_ops008

●絵文字

絵文字は「EmojiOne」というフォントで入力しますが、キーボードからではなく、字形パネルから入力したいキャラクタをクリックで入力します。

PScc17_ops012

なお、特定のキャラクタ同士を組み合わせ、合字として使用することも可能で、例えば、Uの次にSをダブルクリックすると、自動的にアメリカの国旗になります。

PScc17_ops013

また、キャラクタの上にマウスカーソルを合わせ、「字体組版/分解」というタイトルが表示されるキャラクタは、ベースとなるキャラクタにカラーを合成したキャラクタになります。

PScc17_ops015

キャラクタにカラーを合成する場合は、ベースとなるプレーンのキャラクタを入力しておき、その後カラーのベースとなるカラーのキャラクタをダブルクリックすると自動的に合成されます。

PScc17_ops016

ちなみに、Photoshop CC 2017をインストールすると、TrueTypeの「Apple Color Emoji」というフォントもインストールされ、こちらは「EmojiOne」よりも少々リアルな絵文字になっています。なお、これらの絵文字もフォントがなければWebブラウザ上ではSVGフォントとしては表示されませんので、TypeKitからフォントを入手・同期・CSS指定するか、またはラスタライズして画像として使用するか、になります。

PScc17_ops018

●ブラウザ上でWebフォントとして使用する

フォントを入手し、CSSで指定を行うために参考になるのが、以下OpentypeSVGフォントを使用したサンプルサイトです。

color.typekit.com
https://color.typekit.com

PScc17_ops010

PScc17_ops011

font-face規則でフォント指定し、CSSからfont-familyでフォントを指定しますが、このサイトはCSSが全てstyle要素に書いてあるため、ソースを確認することで具体的な指定の仕方がわかるかと思います。
なお、上記のcolor.typekit.com内にもリンクがありますが、Trajan Color及び絵文字のフォントデータは以下のサイトにてダウンロード可能です。Trajan ColorはAdobe IDでログインする必要があります。

Adobe TypeKit Trajan Color(Trajan Color)
https://typekit.com/fonts/trajan-color

PScc17_ops009

github.com(Emojione)
https://github.com/Ranks/emojione/tree/master/assets/fonts#emojione-svg-based-color-fonts

PScc17_ops019

ただし、color.typekit.com内にも記載がありますが、2016年12月末現在で、このOpentypeSVGフォントをサポートするのはFirefox及びEdgeという記載があります。

PScc17_ops020

今後OpentypeSVGフォントを使用できるブラウザが増えればこれらのフォントもより普及していくのかもしれませんが、現時点ではSVGのメリットを活かして好きなようにサイズ変更しラスタライズして使用する、という方法が具体的なのかもしれません。なお、画像アセットの機能をご存知の方は、「Apple Color Emoji」フォントで入力したテキストレイヤーに関しては、レイヤ名に拡張子.svgを加えて書き出すと、SVGファイルとして使用することも可能ですのでぜひ試してみてください。

それでは、2016年も1年間お読みいただき、誠にありがとうございました。また来年も皆様にとって良い1年になりますように!!

PScc17_ops021


この記事を読んだ方にオススメの講座はこちら!

▼Photoshop CC 2015 の使い方・基本トレーニング
メインビジュアル:Photoshop CC 2015 の使い方・基本トレーニング


イトウ先生が、Twitterを始めました!みなさんもぜひ、フォローしてくださいね!
itoh_sensei

イトウ先生のTips noteアーカイブ【2016年~】