creatersnest25

Illustratorで立体的なタイポグラフィを作るチュートリアルまとめ


文字とデザインを兼ねたタイポグラフィーはデザイン性もそうですが
伝えたいことを文字で訴えることも出来る一石二鳥の表現方法です。
今回は立体的なタイポグラフィーから変わったものを集めて見ました。
ブラシを使うものや3Dツールを使うもの、反対に基本機能のみで出来るものなど
色々な作り方がありますので参考にして見てくださいね。

 

ロープで作るタイポグラフィー

1

画像出典:envato tuts+

ロープ状のブラシを作るチュートリアルです。
ロープとしてブラシに記憶することで
フリーハンドで描いた線のタイポグラフィーを立体的に装飾することが出来ます。

 

実験器具のようなタイポグラフィー

2

画像出典:envato tuts+

完成図からどんな風に作っているのか気になる実験器具のようなタイポグラフィーです。
グリッド線を活用して管を描いていくだけという簡単さです。
色を塗るときにもパスを上手く活用していますね。

 

まるで手編みのセーターみたいなタイポグラフィー

3

画像出典:envato tuts+

冬に最適な手編みセーターのようなタイポグラフィーです。
網目のでこぼこを表現するまでの塗り方は参考にしていきたいですね。
網目にがたつきがあるように見えますが実際は1種類の楕円しか使われていないのが不思議です。

 

電飾タイポグラフィー

4

画像出典:envato tuts+

電飾というとネオン管のイメージがありますが、ツリーにつけるような電飾です。
ソケット部分の作り方が詳しく書いてあります。
1つ作れば、オブジェクトを再配色することで好きな色のソケットに変えることが出来ます。

 

中がへこんでいるようなタイポグラフィー

5

画像出典:envato tuts+

アピアランスパネルを有効活用したチュートリアルです。
線を重ねていき透明度を調節することで文字の中に影をつくってへこみを表現しています。
アピアランスだけですべての作業が完結していてスマートですね。

 

基盤のようなタイポグラフィー

6

画像出典:envato tuts+

簡単そうに見えて結構手がかかっている上に
良く見たら細かい部分も拘ってるタイポグラフィーです。
機械が大好きな人は完成を楽しみにしながら作ることが出来ますね。

 

ビーズで描くタイポグラフィー

7

画像出典:envato tuts+

アイロンビーズを並べたような可愛らしいタイポグラフィーです。
基本は円の形が6種類、色が4種類。
基本形のアレンジ次第でポップにもスタイリッシュにも変えられます。
自分で組み合わせるときは配色センスが必要になりますね。

 

ブロックでタイポグラフィー

8

画像出典:envato tuts+

ブロックへ愛を感じるチュートリアルです。
タイポグラフィーにした時には色んな色のブロックを組み合わせないと
文字としては読みにくいかもしれません。
丸みや影のつけ方まで細かく紹介されているので一度作ってみたいと思わせるデザインです。

 

USBコードでタイポグラフィー

9

画像出典:vectips

本物みたいなUSBコードのブラシが作れるチュートリアルです。
グリッド線を使って、ドット絵のように配色していきます。
ブラシを登録した後はペンツールで文字を書けば完成です。

 

ミイラ化したタイポグラフィー

10

画像出典:vectips

包帯を巻いたような不気味でキュートなタイポグラフィーです。
初心者でも仕上げられる基本的な機能を使って作られています。
テクスチャーを使って包帯の質感を出せることには驚きです。

 

埋め込み型タイポグラフィー

11

画像出典:vector voom

アピアランスパネルを使って掘り込んだようなタイポグラフィーができます。
革に印字された文字や壁に削られた文字などにも使うことが出来ますね。
色や背景は様々ですがよく使われるデザインなので覚えておきたいところです。

 

スライムのようなタイポグラフィー

12

画像出典:vectips

ペンツールを使って範囲を指定してグラデーションで着色をしています。
オリジナルのデザインに応用するには練習が必要なテクニックではありますが、
蛍光色に光ったような表現をしたいときや
イラストと文字を合体させたタイポグラフィーを作るときの参考になりますね。

 

キルティング風タイポグラフィー

13

画像出典:vectips

キルティングっぽい素材感を出したタイポグラフィーです。
グリッドツールオプションを使うチュートリアルはあまり見かけませんね。
縫い目をつけたタイポグラフィーにも応用できますね。

 

アルファベット積み木タイポグラフィー

14

画像出典:vectips

3Dツールとグラデーションを活用して作るタイポグラフィーです。
作り方は難しくなく、写真も多いので分かりやすいです。
最後のペンツールで影を作っていく部分は少し時間がかかりそうですね。

 

切り分けられたタイポグラフィー

15

画像出典:vectips

テキストが途中で切り分けられたタイポグラフィーです。
加工前にパスファインダーで分割してから3Dツールを使って作成します。
最後のシャドウをつけたり、無駄な部分を消す作業でひと手間かければ完成です。

 

てんとう虫が可愛い葉っぱのタイポグラフィー

16

画像出典:envato tuts+

可愛らしい葉っぱとてんとう虫のタイポグラフィーです。
どちらかと言えばイラスト要素の大きいデザインですね。
水滴やてんとう虫の描き方もマスターできます。

 

にぎやかなネオンサインタイポグラフィー

17

画像出典:envato tuts+

ネオンサインの看板のようなレトロ感溢れるタイポグラフィーです。
ネオン部分はアピアランスパネルを使って表現しています。
動画が紹介されているので流れも分かりやすいですよ。

 

はじけるタイポグラフィー

18

画像出典:envato tuts+

カラフルなアルファベットがはじけ飛んでいるようなタイポグラフィーです。
一部のテキストにぼかしを入れることで写真で瞬間を切り取ったようなデザインになっています。
最後に入れたシャドウで白いテキストも立体的に見えますね。

 

POPなタイポグラフィー

19

画像出典:Design Instruct

3D効果をつけた後のグラデーションを使った効果のかけ方や
各テキストオブジェクトの重なり部分も丁寧に解説されています。
小さい部分は拡大して色もしっかり指定してくれていますよ。

 

四角におさまった三角のタイポグラフィー

20

画像出典:envato tuts+

こちらはペンツールでトレースしてから、
3Dツールを使わないで立体化していくチュートリアルになっています。
一部シャドウの付け方も少し面白い方法を使っています。

 

ガラスのようなタイポグラフィー

21

画像出典:WEGRAPHICS

ガラスのような透け感のあるタイポグラフィーです。
テキストを拡張して3D効果をかけた後に細かい部分を修正してから
グラデーションを使ってガラスのような透明感を出していきます。

 

SFっぽいタイポグラフィー

22

画像出典:Transfuchsian

宇宙空間に浮かぶテキストを光で表現したようなタイポグラフィーです。
SF映画のロゴにありそうですね。
3D効果をかけた後のパスの消し方が小さいですがまとめられています。

 

ウエスタン風タイポグラフィー

23

画像出典:envato tuts+

西部劇に出てくるような看板風のタイポグラフィーです。
シャドウをつけたあとの修正ポイントと手順も丁寧に説明されています。
銃痕や煙は鉛筆ツールを使って描かれています。

 

ペーパークラフトなタイポグラフィー

24

画像出典:envato tuts+

厚紙を重ねて作ったようなタイポグラフィーです。
シャドウを1つ1つに入れて重なりを表現しています。
さらに立体感を出すために紙の間に細長いリボン状のオブジェクトを加えていますね。

 

メタリックなタイポグラフィー

25

画像出典:web.bypeople

硬質な金属っぽい表現のタイポグラフィーです。
表面の光沢はマットな鈍い輝きでテカテカし過ぎていません。
ポイントにはピンクがかった線が入っていて読みやすいです。

 

ヘッドフォンを使ったタイポグラフィー

26

画像出典:Naldz Graphics

Illustratorとphotoshopを両方使える人にはこちらを紹介したいと思います。
最初ヘッドフォン部分も描いたのかと思ったら適当なデータを用意するみたいです。
仕上げにはphotoshopが使われています。

 

新聞紙でタイポグラフィー

27

画像出典:envato tuts+

本物みたいな新聞紙で作ったテキストが無造作に転がっているタイポグラフィーです。
新聞紙部分の描き方も非常に丁寧に解説されています。
貼ってある面とない面のメリハリも立体感の演出が際立ちやすいのかなと感じますね。

 

本当の芝生みたいなタイポグラフィー

28

画像出典:envato tuts+

テキストの上に上手く画像をのせてphotoshopで作ったよね?と思いました。
見事に芝生の質感をIllustratorのみで表現されています。
てんとう虫と花はシンボルからで全然違和感ないですね。

 

アメコミ風タイポグラフィー

29

画像出典:SPOON Graphics

アメコミ風のタイポグラフィーです。
テキストをブレンドツールで立体化して、ハーフトーンを使っています。
違う色でアメコミ風にするには色の組み合わせをコミックを見て参考にすると雰囲気が出ます。

 

カラフルキャンディーのようなタイポグラフィー

30

画像出典:Websoulz

重ね合わせて作ったタイポグラフィーです。
カラフルな配色にすることでPOPでお菓子のようになっています。
配色を変えたらスタイリッシュな場面でも使えますね。

 

おわりに

いかがでしたか?
なるべく色々なパターンの立体的なタイポグラフィーを集めてみました。
簡単な機能だけで出来るものも多いですが、
シャドウの入れ方や配色でセンスが問われるものが多い印象ですね。
3Dツールを使うことが多いので細かい部分の修正にも気をつけて活用して見てくださいね。

 

 

 

 

 

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next ArticleレイヤーをそのままIllustratorからPhotoshopに移動させる方法