鬼滅の刃の文字組みで文字の中に画像を表示するジェネレーター

Pocket

鬼滅の刃、勢いが止まりませんね。

公開24日間で204億円突破らしいです。

もはや異次元過ぎて理解不能です。千と千尋超えて歴代一位になるのも時間の問題なのかと。

今回はそんな大ヒットに乗っかって、鬼滅の刃の文字組みを利用し、文字の中に画像を表示するジェネレーターを作りました。

鬼滅の刃風タイトルロゴ

 

主題歌でもあるLiSAさんの「炎」をイメージし、亀裂が入った溶岩画像を文字の中に表示しています。

その画像文字に文字を重ねて白と赤のぼかしを入れてました。

それだけだとなんとなく寂しかったので、赤い飛沫を斜めに入れてます。

イラレで画像内に文字を入れる方法は以下となります。

 

イラストレーターを利用し画像を文字内に表示する方法

1.画像を配置する

 

2.画像の上に文字を配置する

文字の大きさを調整して、鬼滅の刃風の文字デザインにします。

 

3.画像と文字を選択し右クリックークリッピングマスクを選択

 

4.文字の中に画像が表示されます

 

SVGの出力方法についてはこちら

イラストレーターでタイトルロゴを作成!SVG文字ジェネレーターを作る方法

 

他の画像も選択できるように

銀河や砂、水、雪などの画像を選択できるようにしました。

画像選択時にURLをbase64形式に変換し、svgのimgタグに設定し、文字背景のぼかしの色も変更しています。

dataURLの変換については以下の記事を参考にしました。

JavaScriptで画像をbase64形式のURLに変換するやり方

 

選択すると以下のようなイメージで画像化できます。

 

 

 

画像が変わると印象もガラッと変わりますね。

好きな文字を入れて遊んでみてください〜

鬼滅の刃風タイトルロゴ

 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です