1. Web3 デザイン トークス
  2. 【フォント】Glyphsでモノライ..
2024-09-28 08:14

【フォント】Glyphsでモノラインフォントが簡単に作れる話

Glyphs app
https://glyphsapp.com/learn/monoline
Freeの体験版Miniもあるようです。

文章で各ステップを確認したい方向け
https://note.com/technoglyphs/n/nadba5b92a0fc


🗓️ 週3回(火曜・木曜・土曜) 8AM (日本時間)放送予定。

Web3時代のデザインに役立つ、
☑︎ 3D、モーションデザインに興味がある
☑︎ タイポグラフィに興味がある
☑︎ 海外のデザインに興味がある
☑︎ モチベーションを高めたい
という方へ、発信をしています。

🤖 デザインコミュニティDiscordリンク(@Technoglyphs HUB)
https://discord.gg/99AAre7ps4o

📝 文章で読みたい方向け。Noteリンク (@Technoglyphs)
https://note.com/technoglyphs

🐦 X へのリンク(@Technoglyphs)
https://x.com/technoglyphs?s=21&t=dv1j0PbJxVgHrFK4gZV5pg

📸 Instagram リンク (@Technoglyphs)
https://www.instagram.com/technoglyphs.type?igsh=MXNkems1aDd5M2hkeQ%3D%3D&utm_source=qr

🌳 Linktree リンク
https://linktr.ee/technoglyphs

#web3 #3ddesign #metaverse #VR #タイポグラィ #モーショングラフィックス #NFT #AI #海外生活 #移住 #英会話 #デザイン #メタバース #ゲーム #3Dデザイン #モチベーション #アート @standfm
---
stand.fmでは、この放送にいいね・コメント・レター送信ができます。
https://stand.fm/channels/6657b124316143a771e89ee6
00:05
こんにちは、Web3 デザイン トークスのテクノグリフスです。
本日もニューヨークからお送りします。
このチャンネルでは、Web3 時代における3D デザイン、モーション グラフィックス、タイポグラフィーなどについて、
新しい発見や学びを共有していきたいと思います。
プロフィール欄には、デザインコミュニティのディスコードリンクもあるので、ぜひチェックしてみてください。
はい、ということで、本日は、初めてフォントを作る方におすすめな、
モノラインフォントの作り方についてお話をしてみたいと思います。
まず、モノラインフォントとは何かということなんですけれども、
これは線の太さが均一のフォントのことですね。
ですので、モダンな仕上がりにすることもできますし、
実際に線の太さなどを気にせず、形だけを追えるので、
これから初めて作るという方には、ビットマップフォントと合わせておすすめな方法です。
このフォントを作るにあたっては、まずはアプリケーションの説明からしないといけないと思うんですが、
普段僕はグリフスと呼ばれるアプリケーションを使っています。
これは広く使われているアプリケーションでして、
YouTubeなどで検索すればたくさん使い方が出てきますし、
ウェブサイトでもLearnというところでそれぞれ使い方のチュートリアルも見れるので、
ちょっと英語なんですけれども、それぞれの箇所はそちらでご確認いただければと思います。
今回はグリフスアップについてなんですけれども、
どうしてこのお話をしようと思ったかと言いますと、
現在Technogryphs Encrypted Oneという以前作ったNFTのコントラクトを移行しようと思っていまして、
以前はOpenSeaのシェアドコントラクトで作っていたんですけれども、
ちょっとあまり格好が良くないなということとか、
自分なりのコントラクトが欲しいなというところで、
移行の準備を進めています。
その際に付与されるフォントに関しても少しクオリティを上げようと思いまして、
それでグリフスというアップを使ってブラッシュアップをしていました。
そこでちょっとしばらく最近使ってなかったんですけれども、
気づいた点がありまして、それが今回お話しするモノラインフォントに関するアップデートです。
これは普段フォントを作る際に、まずベースとなるベクターと呼ばれる線を引くんですけれども、
これまではその線を文字のアウトラインに沿って書かないといけませんでした。
ちょっとこの辺り言葉だけだと分かりづらいと思うので、
コミュニティの方にスクリーンショットを貼っておきたいと思います。
これはですね、アウトラインを書いて、
03:04
その太さを決めるというのがそれなりの技術・習練度が必要なんですけれども、
モノラインフォントでしたら、その辺り考えずに作成することができます。
要はその骨となる部分だけを書いて、肉付けの部分をアプリケーションに任せるということですね。
以前もそういったことをしてくれるプラグインスクリプトがあったんですけれども、
これは若干使いづらい部分もあったりとかして、
ただすごく有効なものだったので、それでおそらくアプリ自体に含まれたのではないかと思います。
具体的にその使い方に関してお話をさせていただくと、
まず骨となるラインをご自身で書いていただきます。
例えばアルファベットのIだったら縦型に1本線を入れるというイメージですね。
そしてウィンドウの右下の方にオフセットカーブという欄があるんですけれども、
そこのホリゾンタルとバーティカル、要するに横と縦の幅の肉付けの量を決めることができます。
そこで例えば10×10などイーブンの量にしておけばモノラインのフォントが作れますし、
もし少し太さに強弱をつけたような平筆で書いたようなイメージにしたい方は、
例えば20×10のようなアンイーブンな数字を入れることも可能です。
ちょっとこの具体的な話はこの説明だけで話しても分かりづらいと思うので、
リンクを貼っておきますので、詳しいことはそちらでご確認ください。
この配信では主にどんなところが使いやすいかだとか、
ケーススタディみたいなことを紹介しようと思います。
まず使いやすい部分なんですけれども、
こちらは線を引いて太さを変えられるという話を先ほどしたんですが、
その骨となる線の形状を変えても、
アウトラインが変わらないというところがいいところです。
これは以前のバージョンを知らない人にはちょっとピンとこないかもしれないんですけれども、
以前はスクリプトを使った場合、
もうその線がアウトライン化されてしまって、
形状を後から変更するということができませんでした。
ただ今回のアップデートといっても直近ではないんですけれども、
そういったバージョンではノンディストラクティブといいますが、
非破壊的な構造になってまして、
骨となるラインの位置を変えても、
アウトラインの形状もそれに伴ってついてくるという設計になっています。
そしてどういった書体に向いているのかということに関しては、
06:02
例えばアールデコ調の直線とか幾何学的な形状の書体ですね。
ああいったものには非常に使いやすいですし、
もしくは逆に曲線で手書きで書いたような書体なんですけれども、
少しモダンな印象にしたいということで、
線が均一な書体を作るみたいなことにも向いているかなと思います。
この手法を使うと非常に素早くワンセットの書体、
特にアルファベットだったら素早く作ることができるので、
一度自分なりの書体を作ってみたいという方にはお勧めの方法かと思います。
ということで、本日はGlyphsUpでモノラインのフォントが
簡単に作れるということについてお話をさせていただきました。
もし今回の内容が興味深い、面白いと思っていただけたら、
ぜひ画面下のいいね、またコメント欄に感想なども書き込んでみてください。
皆さんの反応が今後の放送の励みになります。
またこのチャンネルは週3回、日本時間の火曜日、木曜日、土曜日の午前8時をめどに配信をしています。
フォローしていただけると通知がされるので便利かと思います。
最後におまけトークになります。
おまけトークはDiscordのコミュニティについてちょっとお話をしてみようと思います。
以前、このコミュニティのミッションステートメントについてもお話をさせていただきましたが、
最近少しリファインをしまして、
よりユニークに、より何がしたいのかということを明確にするために短く簡潔にしました。
新しいステートメントではWeb3テクノロジー×タイポグラフィというように定義付けて、
これまでも行っていた3Dだったりモーションだったりオンチェーンのものだったり、
そういったものはWeb3という言葉に集約してより簡潔にまとめました。
このあたりもまた別の機会に詳しくお話をできたらと思います。
ということで、本日も最後までお聞きいただきありがとうございました。
また次のトークでお話しします。
ではまた。
08:14

コメント

スクロール