ブログ

【初心者OK】IllustratorCCで漫画風吹き出しの作り方 -超初級編-

吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など

こんにちは。小さい頃は漫画家になりたかったデザイナーのTantanです。
漫画風の吹き出しをIllustratorで作成する方法をご紹介します。
web漫画や同人誌、デザイン作成などにお役立てください。
Illustratorに馴染みのない初心者のためにできるだけ詳しく解説しますので、ぜひ超初級編から順にチャレンジしてみてください。

※IllustratorのバージョンはCC 2017で解説しています。

目次

超初級 楕円の吹き出し

楕円ツールで作るシンプルな楕円の吹き出しの目次画像
シンプルな楕円の吹き出し
ペンツールと複合シェイプで作る直線しっぽのついた吹き出しの目次画像
直線しっぽのついた吹き出し
複合シェイプで作る2つくっついた形の吹き出しの目次画像
2つくっついた形の吹き出し
楕円ツールとパスファインダーで作る曲線しっぽのついた吹き出しの目次画像
曲線しっぽのついた吹き出し

初級 ふくらんだ楕円の吹き出し

効果ワープでこぼこで作る少し膨らんだ楕円の吹き出しの目次画像
少し膨らんだおさまりのいい楕円の吹き出し
ダイレクト選択ツールで少し膨らんだ楕円の吹き出しを手動で作る方法の目次画像
少し膨らんだ楕円の吹き出しを手動で作る
線幅ツールで吹き出しの線に強弱をつける方法の目次画像
線幅プロファイルで線に強弱をつける
鉛筆ツールとスムーズツールでフリーハンドの吹き出しの作り方の目次画像
鉛筆ツールでフリーハンドの吹き出し

中級 さまざまな吹き出し

ペンツールで作るトゲトゲ叫び吹き出しの目次画像
トゲトゲ吹き出し
ペンツールで作る直線的な形の吹き出しの目次画像
直線的な形の吹き出し
もくもく雲形吹き出しの作り方の目次画像
雲形の吹き出し
大声で叫ぶ吹き出しの作り方の目次画像
叫び表現の吹き出し

上級 パターンブラシで作る吹き出し

線幅とパターンブラシでフラッシュ吹き出しを作る目次画像
フラッシュ吹き出し
線幅とパターンブラシでベタフラ吹き出しの作成方法の目次画像
ベタフラ吹き出し
少女漫画のモノローグ風吹き出しをパターンブラシで作る方法の目次画像
少女漫画風吹き出し

超初級 楕円の吹き出し

超初級では、Illustratorをほとんど使ったことのない方のために、楕円の描き方から解説します。

超初級レベル1:超簡単!楕円の吹き出し

楕円ツールでシンプルな楕円の吹き出しの作り方の見出し画像

今回紹介する中で一番簡単な作り方。
まず楕円ツールを選択します。
長方形ツールなどの裏に隠れている場合は、長方形ツールを長押しすると出てきます。(英字のLキーを押せばショートカットで選択可)

楕円ツールの選択の仕方の説明画像

楕円ツールでドラッグすると楕円が描けます。 ドラッグをものすごく細かく説明すると、開始地点でマウスボタンを押して、マウスボタンを押したままマウスを移動、終了地点でマウスボタンを離します。 (ゴミ箱にファイルを捨てるときのような操作ですね)

楕円を描くときのマウスボタンプレスとマウスボタンリリースの説明画像

一番簡単に作るなら、これで完成でもいいでしょう。

超初級レベル2:直線しっぽのついた吹き出し

直線しっぽのついた吹き出しの作り方の見出し画像

 

 

話者の方向を示す小さい三角形(尻尾?ひげ?ちょろ?なんて呼ぶの?)を付けてみましょう。
ペンツールに持ち替えます。
三角形の頂点をクリックし、開始点に戻ってパスを閉じます。ペンツールの選択の仕方と吹き出しのしっぽの描き方の説明画像

吹き出しの楕円と尻尾を両方選択します。
選択ツール(黒い矢印ツール)でshiftを押しながらひとつずつクリック。
そして、「パスファインダー」のウィンドウメニューから「複合シェイプを作成」を選択。 すると、楕円が吹き出しとくっつきます。2つのオブジェクトを選択して複合シェイプを作成する説明画像

複合シェイプを使うメリットは、後から尻尾の位置を動かせることです。
ダイレクト選択ツール(白い矢印ツール)で尻尾をクリックすると、尻尾だけ選択できます。
あとは変形するもよし、回転するもよし。

ダイレクト選択ツールは、頂点だけをピンポイントに選択することも可能です。
頂点を動かして向きや長さを変えることができます。
ダイレクト選択ツールで変形やポイントを動かす説明画像

超初級編レベル3:ふたつくっついた形の吹き出し

2つくっついた形の吹き出しの作り方の見出し画像

セリフの区切りやコマ割りのバランスによってはこのようにくっつけたいときがありますよね。
「直線しっぽのついた吹き出し」と同じ要領で、複合シェイプで作れます。
まずは楕円2つとしっぽを用意。 そして、「パスファインダー」のウィンドウメニューから「複合シェイプを作成」を選択。 すると、すべてくっつきます。
オブジェクトを選択して複合シェイプを作成する説明画像

超初級編レベル4:曲線しっぽのついた吹き出し

曲線しっぽのついた吹き出しの作り方 見出し画像

ふきだしのしっぽをカーブした形にしてみましょう。

楕円とパスファインダを使った簡単な作り方を紹介します。
まず、楕円ツールで横長の楕円を描きます。
次に、もう一つ縦長の楕円を重ねて描きます。
吹き出しのしっぽを作る楕円の説明画像

適当に拡大縮小などをして、いい感じの重なりに調整してください。

パスファインダーで切り抜いてしっぽを作る重なり方の説明画像

2つの楕円を選択してパスファインダーの「前面オブジェクトで型抜き」を実行

吹き出しのしっぽをパスファインダで作る型抜きの説明画像

さらに、長方形ツールで四角を書き、しっぽとして使いたいところを囲みます。
楕円をくり抜いた三日月型と、囲んだ長方形を両方選択して、 パスファインダーの「交差」を使います。
このとき、キーボードのoptionキーを押しながら「交差」ボタンをクリック。

吹き出しのしっぽを作るパスファインダの交差と拡張の説明画像

あとは、楕円の吹き出しと重ねて、先程の「複合シェイプを作成」をかければできあがり!

吹き出しのにょろの作り方の複合シェイプの説明画像

次は、初級編「膨らんだ楕円の吹き出し」です→

目次に戻る→

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. mitene566ec83f-5ffe-402c-b7ff-dd34677a2c6b 広島で最先端のアートに触れる「チームラボアイランド」へ行ってきま…
  2. チェックリストイラスト オフィスでコーチングのタイプ診断をしたら楽しい結果になった
  3. top-chocolate-illust バレンタインなので SEOを恋愛に例えてみる
  4. オープン記念のイラスト エム・フィールド広島オフィス 1周年!
  5. carp_1-1 【カープ】#2 広島、5月5日以来23日ぶり首位奪回!!
  6. IMG_0826 濃厚魚介スープが旨い!!永斗麺でサンマラーメンいただきました
  7. webdesign IllustratorとPhotoshop カンプ制作ソフトにつ…
  8. blog_twitter 流行語大賞2016 in MF広島オフィス ノミネート候補発表

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP