Web

【GIMP】文字縁取りの応用技3選

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
GIMP文字縁取り応用技3選

こんにちは!

オリンピックとワクチンの話題で慌ただしい今日この頃、いかがお過ごしでしょうか。

我が家もずっと浮足立っていましたが、両親のワクチン接種の目途がようやく立ち、落ち着きを取り戻してきました。

ただ、私を含む元気な中年世代のワクチン接種は一番最後になりそうとの報道…

なんとか今年中に接種できますように、と願わずにはいられません。

さて、話題変わって今月も「GIMP」のお話です。

前回の記事で予告した通り、今回は「文字縁取りの応用技」を紹介します。

特にサムネイルやバナーの見栄えがワンランクアップする技を3つ選びましたので、GIMP初心者の方は是非覚えて帰ってください。

事前確認

応用技を覚えるためには「文字縁取りの基本」が必要になります。

特に「レイヤー」の概念はこの先の説明でも多用するので、内容が難しいと感じた人は前回の記事「サムネイル作りに役立つ文字の縁取りを解説」を参考にしてみてください。

技1.2重に縁取り

前回の記事では、書いた文字の下に1枚レイヤーを追加して縁取りしました。

今回の応用技は、さらにもう1枚レイヤーを追加して、2重に縁取りをします。

なぜ2重に縁取りをするとよいのか?

下の写真を見ると、その意味が分かると思います。

まずは縁取りなしです。

空の青に赤い字がそのまま載ると、見ずらいですよね。

続いて前回同様、1重の縁取りです。

これでだいぶ字が見やすくなりました。

上の写真であれば1重でも字が見やすくなりますが、一番右の「畑」という字の縁取りが空の色と同化しそうになっています。

そこでもう一つ縁取りを重ねます。

全ての字の縁取りがはっきりと見えるようになりました。

このように縁取りを2重にすることで、どのような背景であっても対応できるようになります。

このテクニックは一般的に広く使われており、Youtubeのサムネイルでもよく見かけます。

縁取り方法

縁取り用にレイヤーをさらに1枚追加しています。

3つのレイヤーを重ねたとき縁が見えるよう、下のレイヤーの文字を少しずつ大きくします。

レイヤーを重ねて真上から見たところが想像できるようになったら、縁取りマスターへ一歩前進です。

具体的なGIMPの操作方法は前回の記事「サムネイル作りに役立つ文字の縁取りを解説」を参考にしてください。

技2.縁をぼやかす

このように文字の周りをぼやかすことで、柔らかいイメージになります。

これも縁取りの応用で、下に重ねる文字にぼやかす処理を追加しています。

また色を変えると、

暗闇の中に文字が浮かび上がっているように見せることもできます。

縁取り方法

これまでの縁取り方法と途中まで同じです。

  1. 「不透明部分を選択範囲に」で文字周囲を選択します。
  2. 文字の下にレイヤーを1枚追加します。
  3. 縁取りの幅ぶん「選択範囲の拡大」で選択の破線を広げます。
  4. 下に追加したレイヤーに選択範囲を移します。

普通の縁取りは、追加したレイヤーの文字を「塗りつぶす」だけですが、縁をぼやかす場合はここでひと手間加えます。

メニューの「選択」>「境界をぼかす」

ここで設定する「縁をぼかす量」を増やすほど、文字を覆う縁取りがフワッと淡く広がります。

縁をぼかす量を決めたら「OK」を押します。

後は追加したレイヤーの文字を「塗りつぶす」とぼやかした縁取りの完成です。

縁取りの幅、ぼかす量は文字の大きさに応じて調整をしてください。

技3.文字に影を付ける

影をつけると文字が立体的に見えます。

これも縁取りの応用で簡単にできます。

  1. 「不透明部分を選択範囲に」で文字周囲を選択します。
  2. 文字の下にレイヤーを1枚追加します。
  3. 今回は「選択範囲の拡大」はしません。
  4. 追加したレイヤーに選択範囲を移して、黒で塗りつぶします。

最後に「移動」ツールを使って、下の文字を少しずらしたら完成です。

これが移動ツールです。

動かしたい文字やレイヤーをマウスや矢印キーで動かすことができます。

下のレイヤーの黒い字を右と下に数ピクセルずらすと、影がついたように見えます。

もっと簡単に影を付ける

上記のように影にするレイヤーを自分で追加する方法を紹介しましたが、実はGIMPには初めから影を付けるフィルターが実装されています。

メニューの「フィルター」>「照明と投影」>ドロップシャドウ

影を付けたい文字を選んで、この「ドロップシャドウ」を選ぶだけです。

自分でレイヤーを追加する手間がありません。

この「ドロップシャドウ」を選ぶと以下のような設定項目が出てきます。

「X」「Y」は、影が映る位置の設定です。

「X」の値を増やすと右方向へ、「Y」の値を増やすと下方向へ影が移動します。

「Blur radius」は、影をぼやかす設定です。

この数値が0だとぼかしなし、数値を増やすとリアルな影っぽくなります。

「Opacity」は影の色の濃さの設定です。

この数値は0~2の間で設定します。

0に近づくと色は薄く、2に近づくと濃くなります。

上の設定内容のままOKを押すとこんな感じで影が付きます。

まとめ

画像に文字を重ねる際に便利な「縁取り」について、2回に分けてご紹介しました。

前回の基礎編「サムネイル作りに役立つ文字の縁取りを解説」では縁取りの仕組みを図解で説明しました。

今回はその基礎に少しだけ手を加えた応用技を3つご紹介しました。

  • どんな背景にも対応できる「二重縁取り」
  • 柔らかく文字を浮きだたせる「ぼかし」
  • 文字が立体的に見える「影」

いずれもYoutubeのサムネイルや、広告のバナーなどでよく見かける手法です。

ほんのちょっとの手間で文字が劇的に見やすくなるので、GIMPを使おうと思っている方は是非活用してみてください。