のんでざ!

艦これ、デザイン、webに興味があるただの大学生のブログ

艦これ風の砕ける文字エフェクトの作り方Part1文字を作る

 

こんにちはAirです。今回は艦これネタでいきます。

 

タイトルにある砕ける文字エフェクトと言うのはこちらです。

f:id:pinebook0416:20170412160239g:plain

 

 

やはり浜風

 

と、今回はこの「大破」という文字のエフェクトをIllustratorとAfter Effectsを用いて再現していきます。

 

文字作成

こちらはIllustratorを用いてやっていきます。

 

1.アートボードを作成する

f:id:pinebook0416:20170412162450p:plain

 

2.文字ツールを選択する

f:id:pinebook0416:20170412170237p:plain

 

3.適当な文字を入力する。(今回はそのまま「大破」を用います)

フォントは明朝体であればなんでもいいと思います。

今回は最近リリースされた源ノ明朝のウェイトHeavy、400ptでおこないます。

f:id:pinebook0416:20170412171256p:plain

 

4.袋文字をつくる

1.ウィンドウ→アピアランスパネルを表示する

f:id:pinebook0416:20170412172229p:plain

 

3.ハンバーガーメニューを選択

f:id:pinebook0416:20170413005125p:plain

3.「新規線を追加」を選択

f:id:pinebook0416:20170413005344p:plain

 

4.「線」を「文字」の下に移動

f:id:pinebook0416:20170413010341p:plain

 

こんな感じになればOK

f:id:pinebook0416:20170413010427p:plain

 

5.文字色を変える

f:id:pinebook0416:20170413011016p:plain

 

画像のところをダブルクリックして、次のように色を指定します。

f:id:pinebook0416:20170413011050p:plain

 

R:253, G:99, B:99 と設定し、「OK」を選択します。

こうなるはずです。

f:id:pinebook0416:20170413011358p:plain

 

6.線の色を変える

f:id:pinebook0416:20170413011612p:plain

 

スウォッチパネルから「ホワイト」を選択してください。

 

f:id:pinebook0416:20170413011748p:plain

 

これでは、背景の色と線の色がかぶってしまい、線の太さがわからないので、

文字の後ろに長方形ツールを用いて色をつけます。

 

7.長方形ツールを選択

f:id:pinebook0416:20170413091325p:plain

 

8.アートボードに合わせて長方形を描く

色はお好みでどうぞ

 

重ねたら右クリックで重ね順を「最背面へ」を選択してください。

f:id:pinebook0416:20170413091840p:plain

 

9. 再び「大破」の文字を選択して線の太さを変える

画像の矢印の場所を40pt程度に変更します。(画像は24ptになっていますが)

こんな感じになります。

f:id:pinebook0416:20170413162114p:plain

 

10.赤い文字の周りに線をつける

ここは細かい部分なのでこだわりがなければ飛ばしてもらっても大丈夫です。

f:id:pinebook0416:20170413092950p:plain

 

上の画像のように文字の周りにうっすらと線が入っています。

これを作成していきます。

 

手順3から4と同じようにして「新規線を追加」します。

 

追加した線を「文字」と、最初に作った「線」の間に移動します。

f:id:pinebook0416:20170413094325p:plain

 

線の色と太さを変更します。

 

色はR:139, G:61, B:61とします。

このときShiftを押しながらスウォッチパネルを押すとRGBで入力できます。

先の太さは10pt程度に設定します。

f:id:pinebook0416:20170413094743p:plain

 

 11.文字の位置を調整する

もとの「大破」の画像をみると「破」の文字が少し下に下がっているので、これも再現していきます。

 

「破」の部分を選択します。

f:id:pinebook0416:20170413095346p:plain

 

「ウィンドウ」→「書式」→「文字」を選択します。

f:id:pinebook0416:20170413095628p:plain

 

このようなウィンドウが表示されます。

f:id:pinebook0416:20170413164822p:plain

 

①文字サイズの変更
②ベースラインのシフト

これらの設定をします。

 

文字サイズは「破」の文字を350pt程度、ベースラインを-120程度にシフトさせます。

f:id:pinebook0416:20170413165414p:plain

 

「大」と「破」の間にカーソルを置いて、optionキーを押しながら一回ほど「→キー」

を押します。

 

完成です。 

f:id:pinebook0416:20170413170319p:plain

 

Part2ではAfter Effectsを使ってこれにエフェクトを付けていきます。

 

ここまで読んでくださってありがとうございます。

 

  

参考資料

http://www.nishioka.co.jp/note/fukuro-moji