![見出し画像](https://assets.st-note.com/production/uploads/images/114105816/rectangle_large_type_2_c7e0396955dfb594165d6e4fa20c8c9c.png?width=800)
ベクタースキャン風フォント「VectorScanFont」公開しました。
ベクタースキャン風なフォントが欲しいなと思って検索してみたのですが全然出てこなかったので作成してみました。
ダウンロードはコチラ↓
https://drive.google.com/file/d/12L2XOWN3BeZb2lz5dkHfw6fJcE73r3xX/view?usp=sharing
商用利用・個人利用など用途にかかわらず無償で使用して頂けます。
詳しくはファイル内readmeをご参照下さい。
収録文字は下記となります
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!"#$%&'()*+,-./:;<=>?@[]^_`{|}~
![](https://assets.st-note.com/img/1692781877900-AD2EIPSfrL.png?width=800)
フォントファイルは4つあります。
VectorfontA14x14.ttfとVectorfontA8x14.ttfが通常のフォントファイル
VectorfontB14x14.ttfとVectorfontB8x14.ttfがフォントの端っこを光ったように見せるためのフォントになっています。
(以下通常のフォントをAタイプ、光らす為のフォントをBタイプと呼びます)
![](https://assets.st-note.com/img/1692777995321-ljrKpHS6Nx.png)
ベクタースキャンっぽいフォントにするためには文字の端っこが若干光ってる感じにするのが良いのですが普通にフォントを使用しただけでは光った感じは出せません。
そこでBタイプのフォントを使って画像加工で光ってる感じを出すとベクタースキャンっぽくなります。
![](https://assets.st-note.com/img/1692778505849-iVRS5rCQCx.png?width=800)
まずは同じ文字を使ってレイヤー別にAタイプとBタイプのフォントを作成します。
![](https://assets.st-note.com/img/1692778665458-cl4HsQcz0I.png?width=800)
タイプBのフォントをタイプAのフォントに重ねてガウスぼかしなどでタイプBのフォントをぼかします。
![](https://assets.st-note.com/img/1692781547007-3PZCm78FzJ.png?width=800)
更にタイプBのフォントを重ねて端っこが光ってる感じを出します。タイプAの方のフォントも好みにでぼかしても良いかもしれません(画像はぼかしています)
フィルターでビデオっぽい効果を使うとよりベクタースキャンっぽくなります。
![](https://assets.st-note.com/img/1692781718338-It9CzgbtF6.png?width=800)
好みでタイプAの方のフォントの透過率を下げたり上げたり調整して下さい
この記事が気に入ったらサポートをしてみませんか?