スポンサードリンク

プロブロガー風のアイキャッチ用文字画像の作り方(For Inkscape)

文字画像の作り方

ブログ用の画像探しに疲れた亭主から、「アイキャッチ用の文字画像の作り方を解説して」というリクエストがあったので、フリーソフトのInkscapeを使って作る方法を説明する。

ちなみに、アイキャッチとは、記事のタイトル下に入る画像のこと。私はフリー素材のPexelsなんかを愛用しているが、記事によっては合うものがなかなか見つからず、苦労することは多い。

で、亭主の言う「アイキャッチ用の文字画像」は、こういうの。某移住プロブロガーの方がよく使ってるあれですな(画像はイメージです)。

文字だけのアイキャッチの例

では、そのような文字画像をInkscapeで作る方法を解説しよう。ざっくり言うと、

1.長方形を描く
2.文字を描く
3.サイズを調整して重ねる

という流れになる。急遽、というリクエストで、全部を懇切丁寧に説明するのは難しいので、既存のInkscapeの使い方サイトへのリンクも交えるが、ご了承いただきたい。

長方形を描く

まず、Inkscapeを起動。

Inkscape起動

長方形の描き方は、「矩形ツール」をクリック→画面をドラッグするというもの。サイズは、左上部で確認できるが、後でいくらでも調節できるので、だいたいでいいです。ここでは幅500pxぐらいで作成。

Inkscape 矩形ツール

四角のオブジェクトの作成方法

作成した長方形の色の変更や、枠線の変更は、下記のリンクをご覧いただきたい。この解説記事では、黄色、枠線なしにしてみた。

オブジェクトを描く #1(四角形)

文字を描く

「テキストツール」をクリックして、文字を入れたい場所をクリック。後で移動できるので、ここもアバウトでOK。

Inkscape 文字の作成

文字の入力を始めると、日本語の場合、なぜかあさっての方向に文字が表示されるが、気にせず入力を進めること。

Inkscape 日本語入力

ある程度入力されると、指定の場所に文字が表示される。

Inkscape 文字の表示

大きさを変えるには、選択ツールをクリックして、文字を選択し(選択されると、周囲に矢印が表示される)、Ctrlキーを押しながら右下隅の矢印をドラッグ。

Inkscape 文字の拡大

そして、文字を選択状態にしたまま上のバーの「T」のアイコンをクリックすると、「テキストとフォント」ダイアログが開き、フォントやら太さ、入力内容を変更することができる。

Inkscape 文字の編集

詳細はこちらをご参考。

文字(フォント)を入力する

なお、入力内容の編集は、「テキスト」タブをクリックして行うが、この画面で改行を入れると、それが文字に反映される。編集できたら、「適用」をクリックするのをお忘れなく。

Inkscape テキスト編集

サイズを調整して重ねる

文字ができたら、先ほど描いた四角と合成する。ドラッグして位置を調節し、背景の長方形と同時に選択。選択ツールをクリックして、全てを囲うようにドラッグするとできる。

Inkscape 複数オブジェクトを同時選択

選択できたら、「ビットマップにエクスポート」しよう。

Inkscape ビットマップにエクスポート

「ビットマップサイズ」に仕上がり幅を入力し、「参照」で保存場所とファイル名を指定。「エクスポート」をクリックすると、PNG形式の画像が出力される。

幅800で出力してみた。できあがり。

文字画像の作り方

ということで、今日はInkscapeを使ったプロブロガー風の文字だけアイキャッチ画像の作り方を解説してみた。

かなり駆け足なので、亭主から全然わからん!というクレームが発生するかもしれない。その時はまた追記をするなり補足記事を立てたりすることにします。

今月の人気記事

サブコンテンツ

このページの先頭へ