凝ったテキストのデザイン画像ができれば、いろいろな場面で活用できますよね。
というワケで、今回はGIMPで実践できる【テキストをかすれさせた画像】を作る方法を紹介します。
作った画像をワードプレスのヘッダーに設定するやり方も合わせて解説していきますので、参考にしてください。
※バージョンは【GIMP 2.10.14】
GIMPでテキストをかすれさせる
大きい画像をヘッダーロゴにした場合は、スマホでもキレイに表示されるようにCSSを設定しなければいけません。
なので、スマホ表示でも問題なく全体が見られるように、最初から適切なサイズの画像を作ることにしました。
ヨコ300px・タテ100px程度が無難かなと思います。
GIMPを起動させて、「新しい画像を作成」⇒「幅300px、高さ100px」に設定⇒「OK」をクリックしていきます。
「テキストツール」を選択後にテキストを入力していきます。
表示されているテキストツールでもフォントやサイズを変えられますが、テキストツールを選択すると出てくる左の画面でも細かい設定が変更できます。
ココで文字間隔やインデントを変更する場合は設定してください。私は文字間隔を少し変更しました。
テキストが入力できたら、「レイヤー」⇒「レイヤーマスク」⇒「レイヤーマスクの追加」をクリックします。
「完全不透明（白）」を選択後に「追加」をクリックします。
メニューから「ツール」⇒「描画ツール」⇒「塗りつぶし」を選択します。
塗りつぶしの設定で、お好みのパターン色を選びます。
テキストの上にマウスを持っていくとバケツのアイコンになっているので、左クリックするとテキストがかすれたようになります。
次は「レイヤー」⇒「レイヤーマスク」⇒「レイヤーマスクの適用」をクリックします。
私が調べた方法ではこれで完成のはずですが、まだテキスト周りの点々が残っています。
そこで、最後に「下のレイヤーと統合」をクリックすると、テキスト周りの点々が消えて完成です。
これでかすれたテキストの出来上がり。
出来上がった画像をJPEGで保存して、ヘッダーロゴに設定します。
Cocoonでヘッダーロゴを設定する
当ブログは無料テーマの「Cocoon」を使わせていただいています。
無料とは思えないほどの高機能が揃っているので、非常に重宝しています。
WordPressの管理画面から「Cocoon 設定」⇒「ヘッダー」を選択します。
「ヘッダーロゴ」のところで「選択」をクリックして、ローカルにあるさきほど作った画像をアップロードします。
アップロードした画像を選択するだけで、ヘッダーロゴが設定されます。
これでヘッダーロゴに作った画像が表示されます。
おわりに
GIMPの使い方を説明しているサイトを見ながら実行したのですが、私が使っているGIMPとはツールやメニューの場所が違っていました。
なので、GIMPのバージョンによって違うんだと思います。
とりあえず透明のレイヤーを作って、パターン色で塗りつぶして統合するとテキストがかすれるということなのでしょう。（←あんまりわかってない）
以上、かすれさせたテキスト画像をヘッダーロゴ【Cocoon】に設定する方法でした。
