styly_logo_header
  • Gallery
  • Artist
  • Magazine
  • Studio
  • Business
  • 言語: JP
    • EN EN
    • JP JP
Close Button
Menu Button Search Button
Close Button
  • ALL
  • TIPS
  • NEWS
  • FEATURE
  • INTERVIEW
  • CASE STUDY
  • EVENT
  • PICKUP SCENE
  1. ALL
  2. Tips
  3. Blender

Blender

【Blender】2Dの文字やロゴを3Dモデル化する方法

2022年08月03日

  • Facebook icon
  • Twitter icon
  • Hatena Bookmark icon
  • Pocket icon
  • Feedly icon
  • LinkedIn icon
  • Line icon

本記事では主にBlenderを活用して文字やロゴを3Dオブジェクト化する方法を解説します。

以下、3D化されたメタリックなロゴや文字のことを総称して”chrometypography”(クロームタイポグラフィ)と呼称します。

今回はIllustrator、任意のドローイングアプリ、紙に手書きしたもの、の三種類で作成したロゴや文字をBlenderで3D化する方法を紹介するのでIllustratorを契約していなくても無料で作成することもできます。

今回作例で使用した元データは以下でダウンロードできるので、試しに3Dデータを作成したい方は使用してください。

元データ:ダウンロード

  • 1 Illustrator&Blender
  • 2 Blender
    • 2.1 パターン1・角を残したい場合
    • 2.2 パターン2・丸みを帯びさせたい場合
  • 3 手書き、ドローイングアプリの場合
  • 4 フォントを3D化する
  • 5 FBXをエクスポートする
    • 5.1 STYLYにアップロードする方法

Illustrator&Blender

IllustratorとBlenderを使用する場合、ロゴや文字はドローイングアプリで作成したものを使用します。

STYLYの文字を模したロゴ

STYLYの文字を模したロゴ

まずはドローイングアプリで作成したものを.pngもしくは.jpg形式で保存してIllustratorで開きます。

今回はArt&Illustrationのテンプレートを使用しました。

illustratorで新規ファイルを作成します

Illustratorで新規ファイルを作成します

Illustratorを起動して左上のFile→Placeをクリックして画像を選択します(背景は分かりやすいように緑に変更しています)。

File→Place

File→Place

画像が追加できたら画面上部のWindow→Image Traceをクリックします。

Window→Image Trace

Window→Image Trace

Image TraceタブのPresetsをBlack and white logoに設定しPreviewのチェックマークをはずしてTraceをクリックします。

Image Trace設定

Image Trace設定

Traceをクリックしたら画面右側のPropertiesの一番下にあるExpandをクリックすることで画像をパス化できます。

Expandをクリック

Expandをクリック

 

不要なパスを削除し、スムースツールを使用してパスを滑らかにしていきます。

不要なパスを削除し、滑らかにします

不要なパスを削除し、滑らかにします

スムースツールが見つからない場合はEdit Toolbarからスムースツールを追加してください。

Edit Toolbar→Smooth Tool

Edit Toolbar→Smooth Tool

滑らかに出来たら左上のFile→Save Asをクリックします。

File→Save As

File→Save As

ファイル名を決めて、保存するファイルの種類をSVGにして保存します(SVGZ形式はBlenderで読み込めなないので注意してください)。

SVGにして保存します

SVGにして保存します

Blender

Blenderを起動してカメラとライトを含むシーン上のオブジェクトをすべて削除します(画面の見やすさのための工程なので必須ではないです)。

オブジェクトをすべて削除します

オブジェクトをすべて削除します

左上のFile→ImportでScalable Vector Graphics(.svg)をクリックし、先ほど保存したSVGファイルをインポートします。

File→ImportでScalable Vector Graphics(.svg)

File→ImportでScalable Vector Graphics(.svg)

オブジェクトがそれぞれのパーツに分かれているので作業がしやすいようにオブジェクトをすべて選択して[ctrl]キー+[J]キーで統合します。

ctrl+[J]キーで統合します

[ctrl]キー+[J]キーで統合します

最初から割り当てられているマテリアルも見にくいので削除します。

マテリアルを削除します

マテリアルを削除します

次に厚みを加えます。

オブジェクトを選択してObject Data PropertiesタブのGeometryを開きます。

Object Data Properties→Geometry

Object Data Properties→Geometry

GeometryのExtrudeの数値を変化させることで厚みを調整できます。

Extrudeで厚みを調整できます

Extrudeで厚みを調整できます

厚みは後からでも変更できるので今回はExtrudeの数値を0.02にしました。

Extrude0.02

Extrude 0.02

オブジェクトを選択し右クリックしてConvert To→Meshをクリックすることでカーブからメッシュに変更します。

Convert To→Mesh

Convert To→Mesh

次の工程は、丸みを帯びたシェイプにしたい場合とある程度の角を残したい場合の2パターンに分けて解説します。

パターン1・角を残したい場合

オブジェクトのメッシュを整えるためにRemeshモディファイアを追加します。

Modifier PropertiesタブからRemeshを追加しVoxel Sizeを0.001に変更します。

Modifier Properties→Remesh→Voxel Sizeを0.001

Modifier Properties→Remesh→Voxel Sizeを0.001

追加出来たらApplyします。

Apply

Apply

Sclptingウィンドウに移動し、スカルプト機能で面を滑らかにしていきます。

Smoothブラシを選択し、Strengthを1に変更します。

Radiusでブラシの太さを変更できます。

好みの太さでよいですが今回は195pxにしました。

数値を変更します

数値を変更します

mesh symetryのZ軸を有効にし、ブラシを全体的に塗りどんどん滑らかにしていきます。

滑らかにしていきます

滑らかにしていきます

ある程度の丸みができたらShadingウィンドウに移動しマテリアルを追加してみます。

オブジェクトを選択し新規マテリアルを追加します。

Metalicの値を1に、Roughnessの値を0.15にしました。

Metalic=1、Roughness=0.15

Metalic=1、Roughness=0.15

これでオブジェクトは完成です。

オブジェクトの完成です

オブジェクトの完成です

パターン2・丸みを帯びさせたい場合

丸みを帯びさせたい場合はSVGをインポートした際に[ctrl]キー+[J]キーで統合せず、パーツごとにObject Data PropertiesタブのGeometryで厚みを調整してください。

端の部分をきれいに尖った形に仕上げるために端の大きさを変えます。

角のあるパーツを選択し編集モードに入り画面上部のProportional Editingを有効にします。

Proportional Editingを有効にします

Proportional Editingを有効にします

角ばっている箇所の先端あたりの辺を選択し、[S]キーを押して拡大縮小モードにし、Z軸の大きさを変更したいので[Z]キーを押して数字の0を押して大きさを0にします。

Proportional Editingの影響範囲はマウスホイールで変更することができます。

影響範囲を示す灰色の円が表示されない場合はサイズが大きすぎて画面からはみ出している、もしくは小さすぎる可能性があるのでマウスホイールを動かして大きさを確認してください。

[S]キー→[Z]キー→大きさを0にします

[S]キー→[Z]キー→大きさを0にします

Proportional Editingモードではマウスホイールを動かすことで拡大縮小する範囲を調整できるので尖った部分がなるべくなだらかになるように調整して下さい。

この操作を尖っている全ての箇所に行います。

尖っている全ての箇所に行います

尖っている全ての箇所に行います

調整出来たら全てのパーツを[ctrl]キー+[J]キーで統合し、パターン1と同じ工程に移動します。

スカルプト機能で面を滑らかにする際は角ばっている箇所がなくなるようにブラシを塗って完成です。

丸みを帯びたシェイプの完成です

丸みを帯びたシェイプの完成です

手書き、ドローイングアプリの場合

手書きの場合は写真を撮り、アプリケーションで書いた場合は画像にして保存して下さい(どちらの場合も線は白のほうが後ほどBlenderでカーブを描く際に見やすくなります)。

線は白のほうが後ほどカーブを描く際に見やすくなります

線は白のほうが後ほどカーブを描く際に見やすくなります

Blenderを起動しビューポイントをZにし、左上のAdd→Image→Referenceをクリックして保存した画像を追加します(画像が傾いている場合はObject PropertiesからRotationを0にしてください)。

Add→Image→Reference

Add→Image→Reference

シーンに配置された画像の輪郭をなぞるようにベジェカーブを配置していきます。

[Shift]キー+[A]キーでCurve→Bezierでベジェカーブを追加します。

Shift+[A]キーでCurve→Bezier

[Shift]キー+[A]キーでCurve→Bezier

編集モードでベジェカーブを移動させて輪郭に沿って配置します。

ベジェカーブは[G]キーで移動、[R]キーで回転、[E]キーで新たなハンドルを追加することができます。

ベジエカーブを移動させて輪郭に沿って配置します

ベジェカーブを移動させて輪郭に沿って配置します

ベジェカーブを輪郭に沿って一周配置出来たら最初と最後のハンドルを両方選択し[F]キーで統合することができます。

[F]キーで統合することができます

[F]キーで統合することができます

ベジェカーブを選択しObject Data PropertiesでResolution Previewの数値を大きくすることでカーブをより滑らかにできます。

Object Data Properties→Resolution Preview

Object Data Properties→Resolution Preview

全てのカーブが配置出来たらObject Modeに戻りベジェカーブを選択し右クリックしてConvert To→Meshをクリックすることでカーブからメッシュに変更します。

Convert To→Mesh

Convert To→Mesh

編集モードでオブジェクトを選択し[F]キーを押すと、メッシュが埋まります。

[F]キーを押すとメッシュが埋まります

[F]キーを押すとメッシュが埋まります

穴の部分も埋めて、わかりやすいようにZ軸で上に移動させておきます。

穴の部分を上に移動させておきます

穴の部分を上に移動させておきます

編集モードに入り、穴になるところ以外を[ctrl]キー+[J]キーで統合し、面を選択して[E]キーでメッシュを0.05押し出します。

ctrl+[J]キーで統合し、面を選択して[E]キーでメッシュを0.05押し出します

[ctrl]キー+[J]キーで統合し、面を選択して[E]キーでメッシュを0.05押し出します

ブーリアンモディファイアを使用して穴をあけるために穴の部分を統合し、ほかの部分より厚くなるように押し出します。

穴の部分を押し出します

穴の部分を押し出します

ロゴ本体部分にブーリアンモディファイアを追加し穴をあけます。

Objectに穴の部分のメッシュを指定し、SolverをFastにします。

ブーリアンモディファイアを追加します

ブーリアンモディファイアを追加します

厚みのあるメッシュが作成できました。

穴があきました

穴があきました

ここからの工程は前述したパターン1・角を残したい場合、パターン2・丸みを帯びさせたい場合、の箇所を参照してください。

パターン2を使用する方はあらかじめめ編集モードで[P]キーを押してオブジェクトを各パーツに分離させておいてください。

編集モードで[P]キーを押して各パーツに分離します

編集モードで[P]キーを押して各パーツに分離します

フォントを3D化する

ここからは既存のフォントを利用してクロームタイポグラフィを作成します。

Blenderのシーン上で[Shift]キー+[A]キーでTextをクリックしてテキストを追加します。

Shift+[A]キー→Text

Shift+[A]キー→Text

Object Data PropertiesのFontからフォントを変更できるので、Regularの右側のファイルボタンをクリックして追加したフォントを追加します。

ここにはWindowsに標準搭載されているフォントが表示されます。

デフォルトではインストールしたフォントは表示されません

デフォルトではインストールしたフォントは表示されません

自身でダウンロードしたフォントを使用したい場合はファイルパス入力箇所に

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fonts

と入力するとダウンロードしたフォントの保存場所を開けます。

「ユーザー名」には自分のPCのユーザー名を入力してください。

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fonts

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fonts

ファイルパスを入力する方法ではなくファイルを辿ってフォントの保存場所を開きたい場合は右上の三角マークを押してShow Hiddenにチェックマークを入れて隠されたファイルを表示できるようにしてください。

Show Hiddenにチェックマークを入れて隠されたファイルを表示できるようにしてください

Show Hiddenにチェックマークを入れて隠されたファイルを表示できるようにしてください

フォントファイルをクリックするとBlenderのフォントが変更されます。

テキスト内容を変更するときはテキストオブジェクトを選択し編集モードに入ることで文字を変更することができます。

編集モードに入ることで文字を変更することができます

編集モードに入ることで文字を変更することができます

Object Data PropertiesのGeometry→Extrudeで厚みが変更でき、Spacing→Character Spacingで文字同士の間隔を変更することができます。

Extrudeの値は0.02にしました。

Object Data PropertiesのGeometryで数値を変更できます

Object Data PropertiesのGeometryで数値を変更できます

テキストオブジェクトを選択し右クリックしてConvert To→Meshをクリックすることでテキストからメッシュに変更します。

Convert To→Mesh

Convert To→Mesh

ここからの工程は前述したパターン1・角を残したい場合、パターン2・丸みを帯びさせたい場合の箇所を参照してください。

パターン2を使用する方はあらかじめ編集モードでオブジェクトを各パーツに分離させておいてください。

今回使用した「Ladi」フォントはこちらからダウンロードすることができます。

Ladi Display Font:ダウンロード

FBXをエクスポートする

エクスポートしたいオブジェクトを選択し、左上のFile→Export→FBXを選択します。

File→Export→FBX

File→Export→FBX

エクスポート設定を画像のようにし、保存先のフォルダを選択してExport FBXをクリックします。

Export FBX

Export FBX

これでオブジェクトは完成です。

STYLYにアップロードする方法

STYLYアカウントを作成する

アカウント作成方法

STYLY アカウント作成の流れ
STYLY アカウント作成の流れ

STYLYにアップロードする方法

取り込めるアセットを理解しよう
取り込めるアセットを理解しよう

UnityからSTYLYにアップロードする方法

UnityからSTYLYにプレハブとシーンをアップロードする方法
UnityからSTYLYにプレハブとシーンをアップロードする方法

 

3Dモデルがオブジェクトとして配置されると下記のように表示されます。
これでSTYLYへのアップロードは完了です。
お疲れ様でした。
 

STYLYに配置しました

STYLYに配置しました

 

STYLYに関する質問、バグ報告、改善してほしい要望はSTYLY FORUMまで
https://jp.forum.styly.cc/support/discussions

Certified (QA) by Shota Shawn Yoshizawa
Edited by SASAnishiki

  • Facebook icon
  • Twitter icon
  • Hatena Bookmark icon
  • Pocket icon
  • Feedly icon
  • LinkedIn icon
  • Line icon
  • 3D
  • logo
  • nyu

nyu

ファッションデザイナー。ファッションとCG、AR/VRを組み合わせた表現の方法を模索しています。

Related Articles

  • Unity

    Visual Scripting:DateTimeで日付や現在時刻を表示する方法

  • Unity

    UnityのCinemachineでシネマティックな演出を作成!Dolly Cartでオブジェクトを自在に動かす方法

  • Unity

    Visual Scripting : Custom Eventを活用する方法

  • Unity

    STYLY for Vision Pro:マイクで録音&再生する方法、Unity Visual Scriptingで簡単実装

  • Manual

    STYLY Modifier(モディファイア)マニュアル

  • Manual

    日本都市向け ARシーン制作 マニュアル

  • Manual

    JACKSON kaki Modifier(モディファイア)シーン 解説

  • Manual

    Unity Plugin for STYLY アップロード時 エラーになった場合の解決方法

  • Manual

    【STYLY Modifier】Style Change活用マニュアル

  • Manual

    Light Probeを活用したテンプレートシーン/アセット マニュアル

Pick Up

6/19(水)発売 『Apple Vision Proが拓くミライの視界 スマホがなくなる日』(幻冬舎)

10年後のテクノロジーを誰が想像できるだろうか──。

2024年、ついに「空間を身にまとう時代」の実現を加速するデバイスが登場!⼈類はスマホの⼩さな画⾯から解放され、空間という無限のキャンバスを⼿に⼊れる。

スマホがなくなる日、次世代デバイスでどんなミライをつくれるのか。
スマホがなくなる日──。この先に続くミライは、本書を読んで創造してみてください。

カテゴリー

Ranking articles

  • 【Blender入門】モデリングを始める⑤ 手動でボーンを入れる【Blender入門】モデリングを始める⑤ 手動でボーンを入れる
  • 【Blender】VRMファイルを扱う【Blender】VRMファイルを扱う
  • 【Unity】人型アバターのFBXファイルをVRMファイルに変換する【Unity】人型アバターのFBXファイルをVRMファイルに変換する
  • 【Blender入門】モデリングを始める④ テクスチャの貼り方【Blender入門】モデリングを始める④ テクスチャの貼り方
  • 【Blender入門】覚えておくべき便利なショートカットまとめ【Blender入門】覚えておくべき便利なショートカットまとめ
styly_logo_footer

利用規約

プライバシーポリシー

会社概要

採用情報

Qiita

Gallery

Artist

Magazine

Studio

STYLYについて

マニュアル

ドキュメント

リリースノート

ダウンロード

フォーラム(JP)

フォーラム(EN)

NEWVIEWスクール

NEWVIEWアワード

アーティストプログラム

料金プラン

お問い合わせ

STYLY mobile

download
download
Copyright © 2017 STYLY, Inc.