kansei

Illustratorで立体的な文字を作成するチュートリアル


立体的な文字を使ったデザインは数多くありますが、難しいと思っていませんか?
文字を中心としたデザインやロゴなどにもよく利用される立体文字は
Illustratorの機能を使えば簡単に作成することが出来るんです。
今回は【3D押し出し・ベベル】と【ブレンド】の2種類を使った立体文字作成方法を紹介していきます。

 

立体文字の作り方
(3D押し出し・ベベル)

 

文字を書く

mozi

まずは文字ツールで立体にしたい文字を書きます。
複雑な形や入り組んだ文字じゃない方が後ほど効果をつけるときにエラーが発生しにくいです。

 

文字に押出し・ベベルを適用する

beebru

メニュー→効果→3D→押し出し・ベベルを選択する。
押し出し・ベベルの数値設定パネルが現れます。

 

プレビューを見ながら設定する

【プレビュー】のチェックを入れた後、立体の種類・角度やベベルの設定などを行います。
ベベルの詳細設定はパネル下の方にある【詳細設定】ボタンで展開することが出来ます。

この時に注意することは、左下に【ベベルが交差する可能性があります】とメッセージが出ると
設定結果がおかしな表示になる場合があるので、プレビューを見て調節すると良いでしょう。
また内側にベベルを設定すると交差が起きやすくなります。

 

細かく調整して完成

irokaeL

変更がなければ【アピアランスの分割】を行ってアウトライン化しましょう。
全体の仕上がりをみて変更をかけるかもしれないという人は【アウトライン化】を行って
3D・ベベルの変更、配色の変更が可能な状態のままにしておく方が良いですね。

hikaku

参考までに【アウトライン化】したものと【アピアランスの分割】をしたものを紹介しておきます。
前者は【グループを解除】で3D効果が消えてしまうので注意が必要です。

 

【3D・ベベル】パネルの内容

setei

パネルは設定する項目が多く、難しく感じますが
プレビューを使うことで感覚的に設定していくことも出来ます。
【3D押し出し・ベベル】パネルの設定方法でよく使うものを紹介しておきます。

【位置】X・Y・Z軸の傾きを角度で設定できます。
【遠近感】前面から後ろにかけて遠近感をつけることが出来ます。
【押し出しの奥行き】押し出し具合を調節できます。
【ベベル】オブジェクトの縁を設定に応じて削ったような形に変更できます。
【表面】光源の設定ができます。金属のような質感から鈍く光る表現まで調節次第で可能です。
【マッピング】3D化したオブジェクトの表面にテクスチャなどを設定することが出来ます。

setei2

ボタンの方も使う機会が多いです。覚えておくと表現の幅が広がりますね。

立体文字の作り方(ブレンド)

ブレンドで立体文字を書くこともできます。
飛び出してきたような立体文字を表現をしたいときはこちらを使っていきます。

文字を書く

bre2

立体にしたい文字を描きます。太いフォントの方が立体感が出やすいです。
今回は1文字ずつ色を分けました。

文字を複製する

bre3

文字を300%で拡大コピーして再度違う色を配色しておきます。

 

コピー元の文字のカラーを編集する

bre4

【編集】→【カラーを編集】→【カラーバランスの調整】 でブラックの項目を100%に変更します。

 

選択した状態でブレンドを行う

bre5

オブジェクトを2つとも選択した状態で、ブレンドを行います。
実行前に【オブジェクト】→【ブレンド】→【ブレンドオプション】で
間隔をステップ数200に設定しておきます。

 

大きなオブジェクトを複製して立体感を出す

bre9

大きな方のオブジェクトを複製して、ぴったり重なるように最前面に配置します。
塗りに【グラデーション】を設定し、【透明】パネルで【乗算】を設定しておくと
飛び出したような文字が完成です。
ブレンド後も文字の位置を変えることで飛び出しの角度を変えることも出来ます。

bre8

 

いかがでしたか?

この他にも3Dを使わず立体のような効果をつける方法もたくさんあります。
今回は基本の【3D押し出し・ベベル】機能と【ブレンド】機能を使って文字を立体化してみました。

冒頭のチョコレートのようなイラストは
用意した3つのオブジェクトそれぞれに【3D押し出し・ベベル】を適用したものです。
文字部分やチョコ部分に【ドロップシャドウ】を使えば
もっとリアルなチョコレートが表現できそうですね。

是非参考にして色々な立体文字にチャレンジしてみてください。

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

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

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


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

Next Article【写真家みたいに仕上がる】風景画像のレタッチに使えるチュートリアル20選