Photoshop(フォトショップ)でフォントを加工する方法

Photoshopでフォントを加工する方法 Photoshop
ウサギさん
Photoshopでフォントをかっこよく加工する方法ってないかなぁ?
モチ
かがみはよくロゴとか作るときに加工してるよね!

今回はこんな悩みにお答えします。

Photoshopを使えば、フォントの加工は自由自在。簡単にかっこいい文字を作ることができますよ。

本記事を読めば、Photoshopを使ったフォントの加工方法が分かります。

 記事でわかること

  • ・Photoshopを使ったフォントの加工方法

 記事の信頼性

筆者のかがみ@cony_tas)はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

Photoshop(フォトショップ)でフォントを加工する方法

Photoshopでフォントを入力して何か画像を作るとき、そのまま使っても問題ありませんがちょっと味気ないですよね。

グラデーションやテクスチャを工夫するだけでも見栄えのいい文字にすることはできますが、ちょっと慣れれば簡単にフォントの加工をできるようになりますよ。

今回は僕がよくやる文字加工を2パターンご紹介します。

最初にベースとなるテキストを用意する

Photoshopを開いて、まずは何でもいいので加工したい文字を入力しましょう。
フォントの書体はなんでも大丈夫ですが、ゴシック体より明朝体の方がカリグラフィー風に加工がしやすいのでおすすめです。

Photoshopで「ブログ継続」の文字を入力したところ

自分に言い聞かせる気持ちで、「ブログ継続」と入力してみました。笑

入力できたらテキストレイヤーを右クリックして、シェイプに変換しておきましょう。
シェイプに変換すると、テキストのアウトラインのパスを取れるようになるので、変形させたり合体させたい時に便利です。

文字をシェイプに変換

カリグラフィー風に加工してみる

文字をシェイプに変換したら、パスを使って加工してみます。
まずは、カリグラフィー風加工です。

いずれかの文字の曲線部分から流れるように、そしてエレガントにパスを引いていきます。

文字をカリグラフィー風に加工したところ

フォントを明朝体にしておいたほうがいいのは、曲線からの流れが作りやすいからです。ゴシック体だと角ばってしまうことが多いので流れを作るのが難しいのです。

上の例だと割とシンプルですが、ゲームのガチャやイベントの訴求画像でロゴっぽいものが必要になった時は、もっと派手にやることもあります。笑

あとカラーやテクスチャ、エフェクトをかけることでも見栄えがだいぶ変わるので、いろいろ試してみてくださいね。

角を尖らせてかっこよく加工する

2つ目は、文字の角を尖らせてかっこよく(?)加工してみます。
各文字の角の上から尖るようにパスで追加していきましょう。

文字の角を尖らせてかっこよく加工

どうでしょうか?
ちょっと力強くなりましたね。ファンタジー系ゲームにも合いそうです。
ここからもう少し文字に動きがでるように、それぞれの文字サイズを変えて調整してみましょう。

文字のサイズを変えて微調整

文字サイズを変えて配置調整をすると、ロゴっぽくなってきましたね!
テクニックとして、単語の1語目を大きめに調整するとバランスが良くなるのでおすすめです。

最後に、この文字にレイヤースタイルで装飾していきます。

「ブログ継続」の文字をレイヤースタイルで装飾

レイヤースタイルで金色のちょっと豪華な文字に装飾しました。
そして上から少しエフェクトも追加。
見やすいかどうかは置いておいて、アイキャッチ画像とかにも使えそうですね。

最後に:Photoshop(フォトショップ)でフォントを加工する方法

今回はPhotoshopで文字を加工する方法を2つご紹介しました。

加工テクニックは他にもあるのですが、僕は今回紹介した2パターンで文字加工と装飾をしていくことが多いです。

ロゴなどにも応用できるので、ぜひ実践してみてくださいね。

それでは、今回はこの辺で!

ウサギさん
いつも遊びにきてくれて、ありがとう……♪