イトウ先生のTipsnote Photoshop CC 2017・OpentypeSVGフォント

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Photoshop CC 2017:OpentypeSVGフォント 】 

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

APScc17_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 title=

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

PScc17_ops015 title=

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

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

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |