Inkscapeで文字をパスに沿わせる方法

ブログが作りたい!Inkscapeの使い方 > Inkscapeで文字をパスに沿わせる方法

Inkscapeで文字をパスに沿わせる方法

Inkscapeで文字をパスに沿わせる方法

残暑お見舞い申し上げます

お暑い中、たくさんのお運びまことにありがとうございます。

さて今回は、Inkscapeのパス機能で描いた線に、文字列を沿わせる方法について書きます。

以前、GIMP(『文字をパスに沿わせる方法』)ではすでにこの方法をご紹介していますが、「Inkscapeでもできるのよ!」というところを、まざまざと見せつけてやりたいと思っています。(誰に?)

年賀状や暑中見舞い、あるいはブログのタイトルなど、ちょっと画像の中で遊びたいときに使えるのではないかしら。良かったら、ご覧ください。


文字をパスに沿わせた画像(完成例)

例えば、文字をパスに沿わせると、次のように文字列をアーチ型に配置できたりします。

影付きサンプル

ちなみに、この海っぽい写真は、「無料画像素材のプロ・フォト」さんからお借りしています。


Inkscapeで文字をパスに沿わせる方法

1:Inkscapeで画像ファイルを開く

(01)

Inkscapeを起動して、背景にする適当な画像ファイルを開きましょう。

Inkscapeで既存のファイルを開く

2:Inkscapeのパス機能で下地となる線を描く

(02)

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

ベジエツールを選択

(03)

パスで適当に線を描きます。(できれば、曲線などを入れておくと、おもしろい感じになるかもしれません)

とくにこれといった考えがない場合は、次のように、クリック、ドラッグ、クリックだけで構いません。(ゆるやかな弧を描いています)

(1)クリック、(2)ドラッグ、(3)クリック

(04)

意図した線が描けたら、終点で[Enter]キーを打鍵しましょう。

意図した線が描けたら、[Enter]キーを打鍵

3:文字の入力

(05)

左サイドのツールボックスの中から、テキストツールをクリックしてください。

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

(06)

画像の適当な箇所で、クリックしましょう。

画像の適当な箇所でクリック

(07)

お好きなように文章を入力してください。

画像の適当な箇所でクリック

4:文字列をパス上にのせる

(08)

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

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

(09)

入力した文字とパス(描いた線)を、両方選択する必要があります。

前述(08)で、矢印ツール(オブジェクト選択)に切り替えた時点で文字の方は選択されているはずなので、パス(描いた線)の方を、[shiftキー]を押しながら、クリックしましょう。

パス(描いた線)の方を[shiftキー]を押しながらクリック

(10)

入力した文字とパス(描いた線)が両方選択された状態になるはずです。

入力した文字とパス(描いた線)が両方選択された状態

(11)

上部メニュー「テキスト」から、「テキストをパス上に」を選択してください。

上部メニュー「テキスト」から「テキストをパス上に」を選択

(12)

テキスト(入力した文字)が、パス(描いた線)上にのっかります。のっかったかしら?

ただおそらく、あまりきれいな形にはなっていないはずです。パス(描いた線)をダブルクリックしてください。

テキスト(入力した文字)が、パス(描いた線)上にのっかる

(13)

パスが編集できる状態になったはずです。お好きなようにいじくり回して、形を整えておきましょう。

形を整える

5:パス線の非表示

(14)

パス(描いた線)をこれ以上は変更する必要がなくなったなら、非表示にしておきたいと思います。

左下のStrokeの隣のあたりをクリックしましょう。

左下のStrokeの隣のあたりをクリック

(15)

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

Opacityの値を、「0(ゼロ)」にしてしまいましょう。

Opacityの値を「0(ゼロ)」にする

(16)

パス(描いた線)が非表示になっているはずです。

パス(描いた線)が非表示になる

6:文字の色の変更

(17)

文字の色を変更したい場合は、文字の側をクリックしてください。

文字をクリック

(18)

文字が選択されたら、下部の色パレットにて色を選択しましょう。

色を選択

(19)

色が変更されました。

色が変更された

7:影をつける

(20)

さらに影をつけてみたりするのも良いかもしれません。

影付きサンプル

影の付け方は、記事『Inkscapeで影を作成する方法』をご覧ください。

8:吹き出しを入れる

(21)

あるいは、吹き出し(セリフ)を入れてみたりしても良いかもしれません。

吹き出し(セリフ)を入れる

吹き出しのつくり方は、記事『Inkscapeでマンガの吹き出しを描く』をご覧ください。

9:保存する

(22)

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

前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、GIMPに関する記事を書く予定です。(GIMPについて書く予定でしたが、お問い合わせがあった『Inkscapeでオブジェクトを扇形に配置する方法』について書きました)


関連記事

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

1:Inkscapeの導入

2:残暑見舞い申し上げます

カテゴリの記事一覧

作成日:2010/09/11 更新日:2010/09/11

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

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

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

パソコンむずかしいです。残暑お見舞いもうしあげます。

残暑お見舞いありがとうございます。

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

お暑いですねー。

体調を崩しやすい季節ですので、
どうぞご自愛くださいませ。

ごきげんよう。(´▽`)♪

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/673-c8b1db5c
 | トップページ | 

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
ありのごとくあつまりて