Inkscapeでマンガの吹き出しを描く

ブログが作りたい!Inkscapeの使い方 > Inkscapeでマンガの吹き出しを描く

Inkscapeでマンガの吹き出しを描く

Inkscapeでマンガの吹き出しを描く

ペットの写真が、かわいらしさ 2割増!?

ブログに、ワンコとか、ニャンコとか、自分のペットの写真を掲載している人は、けっこういらっしゃいます。

写真を見るにつけ、「かわいくて仕方がないのだろうなぁ」と、見ている私の方も、何だかほのぼのとしてきます。

しかし不思議なもので、ただ写真をブログにアップするだけでは、だんだんと物足りなくなってくるようです。「このかわいらしさを、もっと伝えたい!だって、この子は世界一かわいいのだから!」といったところかしら。

そこで今回は、Inkscapeでマンガの吹き出しを作成し、写真にその吹き出しを合成してみようと思います。おそらく、かわいらしさが 2割くらいアップするはずです。


吹き出し付きの写真(完成例)

今回は、例えば次のような、写真の中に吹き出し(セリフ)が入っている合成画像を作成します。

Inkscapeで吹き出しを作っておくと、吹き出しの再利用がしやすくなるので、とても便利ですよ。

写真で吹き出しを使う(完成)

もし作成してみたいということであれば、お好きな写真をご用意ください。

ちなみに、この猫の写真は、「無料画像素材のプロ・フォト」さんからお借りしています。これといった写真をお持ちでない場合は、探しに行ってみてはいかがでしょうか。


Inkscapeでマンガの吹き出しを描く

1:Inkscapeで新規ファイルを作成

(01)

Inkscapeを起動して、新規ファイルを作成(「desktop_640x480」)してください。

新規ドキュメント2が表示される

ファイルを作成するときのテンプレート(ひな型)は、どれでも構いません。

おそらく、640x480の大きさは、わりとデジタルカメラなどでも一般化していると思うので、サイズ感覚がはかりやすいと考えて「desktop_640x480」を選びました。

写真に吹き出しを入れる場合のサイズ感覚が、とりやすいものを適当に探してみてください。

ファイルの新規作成方法が分からない場合は、記事『Inkscapeで円形を描いてみる』をご覧ください。

2:Inkscapeで吹き出しを描く

(02)

左サイドのツールボックスの中から、「ベジエ」ツールを選択してください。

ベジエツールを選択

(03)

「ベジエ」ツールで、まず吹き出しのふくらみの方を描きます。ポイントになるところを、クリックまたはドラッグしていきましょう。

おおよそ、ポイントを 5つほど打ってみてください。(曲線にしたい箇所は、ドラッグです)

ポイントを 5つほど打つ

後々、サイズや形状を変える場合に、これくらいのポイントがあると、再形成しやすくなります。

(04)

さらに前述(03)に続けてポイントを打ちます。

付け加えるポイントは 3つです。最後の9個目で、最初に打ったポイントの上をクリックして閉じましょう。

9回目で閉じる

最初に打った点の近くに、カーソルを近付けると四角い小さい赤いマークが表示されるはずです。

四角い小さい赤いマークが表示された状態で、クリックしてみてください。うまく閉じることができます。

ベジエツール(パス)が、うまく使えない人は、記事『Inkscapeで矢印を描く』から読み直していただくと、よろしいかと思います。

3:吹き出しの形を整える

(05)

1回できれいな形に作成できることはまれです。吹き出しの形を整えていきましょう。

「パス編集(Edit Paths by Nodes)」ボタンを、クリックしてください。

「パス編集(Edit Paths by Nodes)」ボタンをクリック

(06)

パスが編集できる状態になります。

例えば、右側をもう少しふくらましたいときは、右のポイントをクリックしましょう。

例えば、右側をもう少しふくらましたいときは、右のポイントをクリック

(07)

そうすると、クリックしたポイントが編集可能状態になります。(ハンドルも表示されます)

クリックしたポイントが編集可能状態になる。(ハンドルも表示される)

(08)

例えば、ハンドルをドラッグすれば、ふくらみます。

パスの操作がよく分からない場合は、予め記事『Inkscapeで矢印を描く』、『Inkscapeで曲がった矢印を描く』をご覧ください。

(09)

もし、点と点の間がせまくって作業しにくいときは、画面表示倍率を上げてください。

作業しにくいときは、画面表示倍率を上げる

(10)

ちょこちょこと時間をかけていじっていると、わりとよい形になってくるはずです。

吹き出しの形が整った

うまくできるかどうかは、慣れです。あきらめずに何回か作っていれば、必ずうまくできるようになります。

4:吹き出しに色をぬる

(11)

矢印ツール(オブジェクト選択)を、クリックします。

矢印ツール(オブジェクト選択)をクリック

(12)

オブジェクト(吹き出し)が選択された状態になるはずです。

色を選びましょう。(何色でも構いませんが、とくに理由がなければ、白色にしておきましょう)

色を選ぶ

うまくいけば、左下のFillのところが、noneから白色に変わります。

色ぬりがうまくいかない場合は、記事『Inkscapeで色をぬる』をご覧ください。

5:線の太さを変更する

(13)

また、「線(ストローク部分)が細いかな~」と思ったら、線の太さを変更しましょう。

左下の「Strokeの横の色部分」をクリックしてください。

左下の「Strokeの横の色部分」をクリック

(14)

右側に「フィル/ストローク」画面が表示されます。

「ストロークのスタイル」のタブをクリックしましょう。(すでに表示されている場合は、もちろんクリックする必要はありません)

幅の数値を変更してください。(お好きな値でかまいません。「4.5」くらいがいいかもしれません)

幅の数値を変更

線を太くするとギザギザに見えるかもしれません。その場合は、Blurの値を少し上げてみてください。(1未満でじゅうぶんです)

(15)

吹き出しができました。一度つくってしまえば、あとは楽です。

吹き出しができた

6:保存する

(16)

吹き出しが納得のいく形でできたら SVG保存しておきましょう。(保存場所を覚えておいてくださいね)


写真に吹き出しを入れて遊ぶ

吹き出しを作っただけでは意味がありません。さっそく使ってみましょう。

1:Inkscapeで既存の写真を開く

(01)

Inkscapeで適当な写真を開いてください。

写真を開く

2:吹き出しをインポートする

(02)

作成しておいた吹き出しをインポート(写真へ挿入)します。

上部メニューの「ファイル」をクリックし、「インポート」を選択(クリック)しましょう。

「ファイル」をクリックし「インポート」を選択

(03)

「インポートするファイルを選択」画面が表示されます。

作成しておいた「吹き出しのファイル」を探して、選択しましょう。

「吹き出しのファイル」を探して選択

(04)

選択したら、[Open]ボタンをクリックしてください。

[Open]ボタンをクリック

(05)

写真の上に、吹き出しの画像が挿入されるはずです。

吹き出しの画像が挿入される

3:吹き出しの調整

(06)

吹き出しを写真にあわせて、調整します。

まず、位置があっていないようなら、挿入した「吹き出し」の画像をドラッグして、よき場所へ移動させましょう。

「吹き出し」の画像をドラッグして移動させる

(07)

また、写真の内容によっては、吹き出しの左右が反転している方がよい場合もあるはずです。

そのようなときは、[水平に反転]ボタンをクリックしましょう。(選択オブジェクトを水平に反転)

[水平に反転]ボタンをクリック

(08)

吹き出しが左右反転できました。

吹き出しが左右反転できた

左右反転させることで位置があわなくなったら、改めて位置を調整してみてください。

また、形状が写真とあっていないような場合も、うまいこと前工程の経験をいかして、調整してみてください。

4:セリフの入力

(09)

左サイドのツールボックスの中から、テキストツールをクリックします。

テキストツールをクリック

文字の入力がよく分からない場合は、記事『Inkscapeで文字を入力する』をご覧ください。

(10)

フォントや、フォントサイズを選択しましょう。

フォントはお好きなものを選んでください。フォントサイズは、16~20くらいの間で選ぶと良いかもしれません。

フォントや、フォントサイズを選択

(11)

文章を入力するあたりをクリックしてください。

文章を入力するあたりをクリック

(12)

写真にあったセリフを入力しましょう。

写真にあったセリフを入力

(13)

矢印ツール(オブジェクト選択)を、クリックしてください。

矢印ツール(オブジェクト選択)をクリック

(14)

文章がオブジェクト化するはずです。

吹き出しの中で、文章の位置をうまく調整しましょう。

文章の位置を調整

5:保存する

(15)

はい、できましたー。

完成したら、一度 SVG保存しておきましょう。

写真で吹き出しを使う(完成)

JPEGで上書き保存してしまうとエラーになるみたいです。保存するときは、拡張子をsvgに変更して保存してください。

(16)

さらに、ブログで使いたい人は pngで保存(エクスポート)してみてください。

png保存(エクスポート)の方法は、記事『Inkscapeでpng保存する』をご覧ください。


その他の制作例

Missdiamondさんの作品です。(モデルは、かよ坊さん)


吹き出しの素材

作ってみようとトライしてみたけどうまくいかなかった人や、作っている時間がないような人は、吹き出しの素材を配布してくれているサイトへ行ってみると良いかもしれません。

前の記事へ
次の記事へ

次回予告

お疲れさまでした。この猫かわいいですよね。次回も、Inkscapeについて書く予定でいます。(Inkscapeで影を作成する方法


関連記事

画像編集ソフトInkscapeに関連する記事を、ご紹介します。

作成日:2010/08/28 更新日:2010/09/02

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

エスプレッソラテを返して

KumaCrowさん、こんにちは♪
いやぁ~今日もお暑うございます。

最初の画像で、Caffe Latteを吹いてしまいました。
今も腹筋がふるふるするくらい可笑しいです。
猫の表情がまたニヒルだ。

これから最近日課となったウォーキングをしてきますが
帰宅しておちついたらさっそく吹き出しを作ってみたいと思います。
インクスケープでやれば綺麗なのができるんだぁ。
パソコンに入っててもそれを思いついて使い方を知らないとフリーソフトの持ち腐れですね。

うまく作れたら、うちのリアル猫とバーチャル猫にいろいろ言わせたいと思います。
いつも使える技を教えてくださってありがとうございます。


NGワードがあると出て、どこだろうと思ったら
Caffe Latte のオールカタカナ表記だった・・・。
コメ本文を直したのにまだNGワード有りと出てなに?と思ったら
タイトルもだった。
KumaCrowさんに対して書いてるのではなくこの風潮に対して思うのです。
言葉狩りはだんだん使える言葉がなくなっていくので個人的に反対。
でもスパム対策には仕方ないのですが。

ポイズン

Missdiamondさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

いやぁー、残暑がきびしいですなぁ。
まいっちゃいます。(´Д`;)まいっちんぐ

お暑い中、ウォーキングお疲れさまです。
どうぞ、熱中症にはお気をつけくださいませ。

インクスケープ、お役に立ちそうで良かったです。
かよ坊のセリフが今から楽しみです。ヾ(*´∀`*)ノわーい


NGワード・・・お手間をかけてしまって申し訳ないです。
言いたいこともいえない世の中じゃあポイズンですよね。

FC2さんでも、禁止ワードをあててガードしているみたいだから、
私は外した方がいいのかしらねー。面倒よねー。

のーのー、そのままで

再びこんばんは~。

お邪魔します。
禁止ワードはそのままでよろしゅうございますわ。
外すとどんどんスパムが入るかもしれませんし。
どうぞそのままで。


ウォーキング後にさっそく吹き出しを作ってみました。
絵に描いたようにスムーズな感じじゃないですが、今度合成してみます。
脳裏で思い浮かぶ吹き出し(雲みたいなやつ)も作ってみましたよん♪


そういえばアメーバでは「台所っぽいね」という意味で使った
「kitchenぽい」(オールひらがな)もNGワードになったそうです。
もう笑っちゃうしかないって感じです。


では取り急ぎ。

きちんきちん

Missdiamondさん、再ばんは!( ・∀・)ノぐいさた
コメントありがとうございます。

それではとりあえず、そのままでー。
きちんきちん、ぽーい。(´Д`;)

吹き出し作成、お疲れさまでした。
思い浮かぶ吹き出しですかぁ。なるほどねー。

たしかにあると使い勝手が良さそうです。(´▽`)♪

わーい、かよ坊が

KumaCrowさん、こんにちは。
もう何回も書いてる気がしますが、お暑うございます。

うちのかよ坊を載せてくださってありがとうございます。
背景にボウルなど写っていて生活臭が出てますが気にしないでください。

吹き出しで写真4コマブログを作ってみたいんですが
展開のさせかた(起承転結のもってきかた)がけっこう難しいですわ。
画像の空いているところにあわせて吹き出しの大きさを滑らかに変えられるのが素敵です。
各種一枚あれば使いまわせますものね。


そうそう、フィルの色。
うちの子が白いのでなんとなくクリーム色にしてみました。
でも白くても問題なさそうなのでもう一回吹き出しからつくってみようかなと思ってます。

では。

かよ坊さん

Missdiamondさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

難しいですよねー、写真4コマって。

私もじつはやろうと思ったんですが、
オチが考えつかなかったのと、写真がそろわないので、

断念いたしました。(´Д`;)


フィルの色は、白以外でもいいですよねー。
クリーム色とか、おしゃれ感がでています。

日曜午後のティータイムくらい、おされです。ヾ(*´∀`*)ノ

台風が近付いているようなので、
どうぞお気をつけて。(*´-`)(´-`*)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/671-a8b51d7a

猫に物言わす

うちのかよ坊のゴハン事情。 少食なのでカリカリは常備。 生産国が変わると敏感に嗅ぎとって食べなくなるので 念のために2つの種類のカリカリを給餌している。 その他に、ウェットなマグロのゴハンも朝と夕方に食べている。 かよ坊としてはオールウェットがいい...
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて