【最大99%オフ】商用利用可能なデジタルデザイン素材集が期間限定販売中!

SVGフォントの色を変える方法【フォトショップ・イラストレーター・その他アプリケーションで使える】

SVGフォントの色を変える方法【フォトショップ・イラストレーター・その他アプリケーションで使える】

こんにちは! Keiko(@kmy_design)です。

本記事では、PhotoshopとAdobe IllustratorでSVGフォントの色を変える方法を解説します。

記事の最後に、おすすめのSVGフォントも紹介しています。

では、さっそく見ていきましょう。

SVGフォントの色を変える方法【フォトショップ・イラストレーター】

▼こちらの動画ではOpulent + SVG Fontを使った色の変更方法を解説しています。

ここからは写真とテキストでSVGフォントの色を変える方法を解説していきます。

フォトショップでSVGフォントの色を変える方法

SVGフォントの色を変更する前の状態

フォトショップはPhotoshop CC 2017または上位バージョンがSVGフォントに対応しています。

フォトショップを開き、SVGフォントに設定したテキストを配置した状態から説明を始めます。

SVGフォントの文字レイヤーを選んだ状態で「レイヤー効果」をクリック

SVGフォントまたはSVGフォントのあるレイヤーを選んだ状態で、レイヤーパネル右上のアイコンをクリック→出てきたウィンドウから「レイヤー効果」を選んでクリックしてください。

SVGフォントの文字レイヤーを選んだ状態で「レイヤー効果」をクリック
カラーオーバーレイで表示色を調整

下のようなウィンドウが出てきます。左側の列から「カラーオーバーレイ」にチェックを入れてください。

カラーオーバーレイで表示色を調整

ウィンドウ中央で、描画モードや色、不透明度を自分の好みに設定したあと右上の「OK」ボタンをクリックしてください。

「プレビュー」にチェックを入れておけば、実際の色を確認しながら調整できますよ。

仕上がりを確認して完成

仕上がりを確認し、問題なければ作業終了です。

仕上がりを確認して完成

色を変えたい時は、Step1に戻って作業を進めてください。

イラストレーターでSVGフォントの色を変える方法

イラストレーターでSVGフォントの色を変える方法
SVGフォントの色を変更する前の状態

イラストレーターはIllustrator CC 2018または上位バージョンがSVGフォントに対応しています。

イラストレーターを開き、SVGフォントに設定したテキストを配置した状態から説明を始めます。

u003cstrongu003eSVGフォントのテキストを選んだ状態で「オブジェクト」の「ラスタライズ…」をクリックu003c/strongu003e

SVGフォントのテキストを選んだ状態で、画面上の「オブジェクト」をクリックし、続いて表示された選択肢の中から「ラスタライズ…」をクリックしてください。

SVGフォントのテキストを選んだ状態で「オブジェクト」の「ラスタライズ...」をクリック
ラスタライズウィンドウで背景「透明」を選ぶ

ラスタライズウィンドウが表示されたら、必ず「背景」設定内の「透明」にチェックを入れてください。

ラスタライズウィンドウで背景「透明」を選ぶ

解像度やカラーモードは用途に応じて設定してください。設定が終わったら右下の「OK」ボタンをクリックしましょう。

これでSVGフォントは画像データに変換されたことになります。

ラスタライズしたものを選択した状態で「カラーバランス調整…」をクリック

ラスタライズした文字を選択した状態で、画面上の「編集」をクリック→「カラーを編集」から「カラーバランス調整…」を選んでクリックしてください。

ラスタライズしたものを選択した状態で「カラーバランス調整...」をクリック

「カラー調整」で色を変更する

「カラー調整」ウィンドウがあらわれます。ウィンドウ中央部分のスケールを左右に動かすか数値を入力して色を変更してください。

設定が終わったら、右下の「OK」ボタンをクリックしてください。

「カラー調整」で色を変更する

「プレビュー」にチェックを入れておけば、実際の色を確認しながら調整できますよ。

※カラーパネルやアピアランスで色を変更することは出来ません。

u003cstrongu003e仕上がりを確認して完成u003c/strongu003e

仕上がりを確認し、問題なければ作業終了です。

色を変えたい時は、Step3に戻って作業を進めてください。

PSDデータが扱えるアプリならSVGフォントと同じ表現が可能

現在(2019年8月)SVGフォントに対応しているのは、フォトショップイラストレーターのみです。

フォトショップとイラストレーター以外のアプリケーションでも、PSDデータに対応したアプリケーションなら、画像化済みのSVGフォントを配置することで、同じ表現が可能になります。

Keiko
Keiko

Opulent + SVG Fontのように最初からPSDデータを収録したフォントセットもありますよ。

PSDデータのないSVGフォントを使いたい場合は、まずフォトショップ体験版でSVGフォントをPSDデータに変換してから、使いたいアプリでPSDデータを開いてください。

そもそもSVGフォントって?

OpenType-SVG は、OpenType フォントの字形のすべてまたはほんの一部が SVG(Scalable Vector Graphics)アートワークとして表されるフォント形式です。これにより、1 つの字形で複数のカラーおよびグラデーションを表示できます。こうした機能から、OpenType-SVG フォントを「カラーフォント」とも呼んでいます。
OpenType-SVG フォントを使用すると、こうしたグラフィックの画質でテキストを表示できると同時に、編集、インデックス化、検索もできます。また、代替字形または異体字を可能にする OpenType の機能が含まれることもあります。

OpenType-SVG カラーフォント – Adobe Help Center
Stay Dreaming SVG Font
上がSVGフォント、下が通常フォントの使用例(Stay Dreaming SVG Font

SVGフォントなら普通のフォントでは難しかった繊細な色の重なりをカンタンに表現できるのがポイント。写真に文字を重ねる時も、より自然な表現になります。

英文フォントには少しずつSVGフォントが増え始めています。新しいフォントも積極的に使っていきたいですね。

SVGフォントを早速使ってみよう

もっとSVGフォントを見てみたい、使ってみたい方におすすめのSVGフォントをご紹介します。どのフォントも複数の商用プロジェクトに利用OKです。

画像またはリンクつきテキストをクリックすると、詳細ページに移動します。

おすすめのSVGフォント

▼この記事でも使用例に使った「Opulent + SVG Font」。PSDデータつきで、PSDデータが取り扱えるアプリケーションにも対応しています。

Opulent + SVG Font

Opulent + SVG Font

▼「Black Caviar SVG Font」は、かすれかけたポスターカラーで書きなぐったような、力強さとラフな雰囲気が魅力のフォントです。PSDデータつき。

Black Caviar SVG Font

Black Caviar SVG Font

SVGフォントの色を変える方法【フォトショップ・イラストレーター・その他アプリケーションで使える】

今ダウンロードできる無料デザイン素材【期間限定&商用利用可能アイテム多数】

フォント・イラスト素材・各種ブラシ・動画テンプレート・ワードプレステーマなど今ダウンロードしてすぐに使える無料デザイン素材情報を紹介しています(新しいフリー素材を見つけるたびに随時更新)。

無料でも商用利用可能で高クオリティの素材がたくさん!ほとんどの素材が期間限定なので、気になるものがあればすぐにダウンロードしておくといいですよ。

まだまだたくさん!高クオリティの無料デザイン素材

高クオリティの無料デザイン素材はまだまだたくさんあります!

無料ハロウィンイラスト&デザイン素材

NATURAL-HALLOWEEN-GRAPHIC-SETハロウィンの無料イラスト&デザイン素材2020【海外のおしゃれでかわいい素材が商用利用可能】

無料フォント・レタリング素材

▼無料フォントを探している方には、こちらの記事がオススメです。

かっこいい&おしゃれなデザイン英語フォント一覧【SF・スポーツ・今っぽい】かっこいい&おしゃれなデザイン英語フォント一覧【SF・スポーツ・今っぽい】EvolveInline1クラシックでエレガントなおすすめ英語フリーフォントまとめ【無料&商用利用可能】BriskInlineGrungeDeeezy1無料&商用利用可能なヴィンテージ英語デザインフォント一覧【アンティーク風】クセがスゴい!用途が限定されるけどインパクト大!ユニークな英語フリーフォント【商用利用可能】無料&商用利用可能!デザイナーなら集めておきたいフリーセリフフォントリスト無料&商用利用可能!デザイナーなら集めておきたいフリー&おすすめの
美しい英語セリフフォントenvato elementsの無料会員登録方法【フリー素材も商用利用できる】無料で動画・写真・テンプレートなどの海外フリーデザイン素材をダウンロードしよう【商用利用可】GIN-KO-Textured-Watercolor-Graphics-coverフォント・Procreateブラシ
テクスチャ・モックアップなど
30点以上がすべて無料&
商用利用可能!
フリーデザイン素材バンドル

▼質感がリアルでユニークな無料レタリング素材を紹介しています。

無料&商用利用可能!加工なしで使える質感がリアルな3Dアルファベット・数字素材【保存版】

無料Procreate(プロクリエイト )ブラシ

▼何かと使える無料プロクリエイトブラシを集めました。

無料Procreate(プロクリエイト)ブラシ無料配布Procreate(プロクリエイト)ブラシ【今すぐ使える!デザイン素材2020】

無料Affinity Designer & Photoブラシ

▼無料配布中のAffinity Designer & Photo対応ブラシと、PhotoshopやProcreateブラシをAffinity対応に変更する方法などを紹介しています。

無料Affinity Designer & Photo対応ブラシをダウンロードしよう

無料写真素材

▼無料写真サイトの多くの写真の中から、特にインスタやブログで使えそうな写真をピックアップしました。

インスタグラムやブログデザインに!おしゃれな厳選フリー画像一覧【写真AC】インスタグラムやブログデザインに!商用利用可能&おしゃれな厳選フリー画像素材【写真AC】すやすや眠る赤ちゃんインスタグラムやブログに!海外のおしゃれな無料写真サイトPexels【商用利用可能】envato elementsの無料会員登録方法【フリー素材も商用利用できる】無料で動画・写真・テンプレートなどの海外フリーデザイン素材をダウンロードしよう【商用利用可】

無料パワーポイント&キーノートテンプレート

▼無料で使えるパワーポイントやキーノートのテンプレートを集めました。

BASICS - FREE MINIMAL PPT & KEYNOTE TEMPLATEシンプルな無料パワーポイント&キーノートテンプレート【商用利用OK&時短デザイン】envato elementsの無料会員登録方法【フリー素材も商用利用できる】無料で動画・写真・テンプレートなどの海外フリーデザイン素材をダウンロードしよう【商用利用可】

無料ワードプレステーマ

▼毎月3点のワードプレステーマを無料配布しています。

themeforestでwpテーマを無料ダウンロードしようデザイン性の高い有料ワードプレステーマを毎月無料でダウンロードしよう【ThemeForest】

無料デザイン素材サイト(+おまけ)リスト【フォント・ワードプレステーマ・各種テンプレートなど】

無料デザイン素材サイト(+おまけ)リスト

フォント・写真・イラスト・プロクリエイトブラシ・Wordpressテーマ・動画・音声素材など各種無料デザイン素材配布サイトやデザインツール、ポートフォリオ作成サイトなど、あなたの仕事や趣味に活用できるサイトへのリンクを合計50以上集めました。

デザイン関係以外の、知っておくと便利な無料サイト・ツールリストも追加!無料デザイン素材に興味がある人もそうでない人も、ぜひチェックしたい記事です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

期間限定多数&最大99%オフ
最新のデザイン素材バンドルはこちら
期間限定多数&最大99%オフ
最新のデザイン素材バンドルはこちら