WEB Tips ウェブ・アプリ デザイン・コーディング

Photoshop 簡単!吹き出しの作り方

2024-02-18

本記事にはプロモーションが含まれています。

Photoshop 簡単!吹き出しの作り方

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

制作物のデザインで「吹き出し」は結構使う頻度が高いのではないでしょうか。無料素材でも色々な吹き出しデザインの素材が手に入りますが、わざわざ素材を探さなくても結構簡単に作れます。

この記事ではPhotoshopで、シンプルなものから、ギザギザ風、モクモクした吹き出し、手書き風やおしゃれな吹き出しを作る方法を紹介します。

この記事では、Photoshopを使って素材を制作しています。まだ使っていない方は、Adobe公式サイトから無料でダウンロードして、7日間のお試し期間を楽しんでみましょう。多彩な機能で写真やデザインの世界が広がりますよ!
月額1,180円からの「フォトプラン」もおすすめです。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?
Adobe Creative Cloud プランの比較

Photoshopで簡単に吹き出しを作成する方法(自作)

Photoshopで吹き出しを作る時に使うのは、シェイプツールとペンツールです。

楕円形のシンプルな吹き出し

楕円形ツールを使って、楕円形を描きます。吹き出しのしっぽの部分はペンツールで三角形を描くだけです。

多角形ツールで三角を作ってもいいのですが、ペンツールでちょんちょんとつけた方が簡単かなと思います。気を付ける点は、しっぽを加える前に「シェイプを結合」を選んでからでないとしっぽの部分に色がつかなくなります。

角丸の四角いの吹き出し素材の作り方

角丸長方形の吹き出しを作る場合は、長方形のシェイプツールを使います。

吹き出しのしっぽの部分にカーブをつけたい場合は、「フリーフォームペンツール」を使うと簡単に実現できます。

多角形ツールでギザギザの吹き出し素材の作り方 

ギザギザ・トゲトゲの吹き出しを作るには多角形ツールを使います。

多角形ツールを選択し、アートボード上でクリックすると「多角形ツール」のダイアログが開きます。角数や、星の比率を変えると違った印象の吹き出しを作ることができます。

モクモクした雲みたいな吹き出しの作り方

モクモクした雲のような形の吹き出しを作るには、楕円形シェイプを組み合わせて作ります。

モクモクしたふきだしのアレンジ

手書き風の吹き出しの作り方

手書き風、アナログ感のある吹き出しを作りたい場合は、ブラシを使って作ります。

お好みの形で吹き出しを作成します。ここではシェイプではなくパスを使って吹き出しを作っています。

パスパネルを見ると、作業用パスが作成されているので保存します。(再利用しない場合は保存しなくてもいい)

ラインを描くブラシを選択します。ここではドライメディアブラシ>「Kyleの線画ボックス- ハッピーHB」(直径10px)を選びました。

パスを右クリックして「パスの境界線を描く」を選択します。

「パスの境界線を描く」のダイアログが表示されるので「ブラシ」を選択します。

吹き出しのパスにあわせて、ブラシが描画されます。

「パスの境界線を描く」ができない時は

シェイプツールを使っている場合、右クリックしても「パスの境界線を描く」はグレーアウトして選択できない状態になります。

対処法1:最初からパスを使う

対処法の一つ目は、最初からシェイプではなくパスを使ってオブジェクトを作成します。上のオプションバーからプルダウンで「パス」を選べばOKです。

対処法2:パスを保存した後、新規レイヤーを作る

対処法二つ目はシェイプツールでオブジェクトを作ってしまった、すでにシェイプレイヤーがある場合に、パスの境界線を描くやり方です。

まずシェイプツールで作成したパスを保存します。

シェイプパスのコピーの方を選択しておきます。

レイヤーもシェイプレイヤーではなく、新規にレイヤーを追加して新規レイヤーを選択した状態にします。

再度、パスを右クリックすると、「パスの境界線を描く」が選択できる状態になっています。

おしゃれな吹き出しの作り方

1. 吹き出しのふちどり(ライン)をカスタマイズ

シェイプレイヤーのラインをカスタマイズしてステッチ風の吹き出しに。

オプションバーから点線にすることができます。Illustratorのように破線のカスタマイズができるようになっています。

2. パターンで吹き出しをカスタマイズ

パスを選択した状態で、レイヤー → 新規塗りつぶしレイヤー → パターンでお好みのパターン作成します。

シェイプパスを選択して、右にあるプロパティパネルの「ぼかし」で吹き出しをぼかしています。

3. ブラシで吹き出しをカスタマイズ

Photoshopには数えきれないほどのブラシがあるので色々なアレンジすることができます。

新規レイヤー → パスから選択範囲を作成 → お好みのブラシで塗る

ブラシで作成した吹き出しはラスターデータなので拡大すると画質が落ちます。

カスタムシェイプの吹き出しを使う

オリジナルで吹き出しを作る時間が惜しい、とにかくすぐに吹き出しを作りたいという場合は、カスタイムシェイプにも吹き出しが登録されています。

吹き出しのカスタムシェイプは「従来のシェイプとその他」の中にあります。「従来のシェイプとその他」は右側のシェイプパネル、右上の3本ラインをクリックすると表示されます。上のオプションバーからは表示できないので注意。

「従来のシェイプとその他」>「従来のすべてのデフォルトシェイプ」の中に「吹き出し」があります。

以上、Photoshopでオリジナルの吹き出しを作成する方法をまとめました。

これらの手法を活用することで、デザインのバリエーションもひろがります。さらに、Photoshopを使った吹き出し作成の応用範囲は広く、様々なプロジェクトや制作物に活かすことができるのではないでしょうか。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?
Adobe Creative Cloud プランの比較

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, ウェブ・アプリ, デザイン・コーディング
-,