むけいかくなひと、しごとをさがす

むけいかくに生きていくとどうなるか実験中のブログです

Illustratorを使わずにIllustratorのチュートリアルを試す!〜レトロな文字編〜

前回の日記で、無料ツールGIMPを使って遊んでみましたが、初心者なりに色々こねくりまわすのは楽しかったので、今回は海外のサイトで見つけたIllustratorチュートリアルGIMPで無理矢理再現してみました!

 

今回試したのは、Vectips - Adobe Illustrator® Tutorials, tips, tricks, and resourcesというサイトの"Create a 3D Style Retro Text Effect - Vectips"という記事です。

All the Rage: 3D Style Retro Text Effect Tutorial Tutorials May 20th, 2014 5 Comments Tweet 19 In this tutorial you’ll learn how to create dimensional text inspired by vintage packaging designs and logotypes. Pour a cup of coffee, sit back, and let’s create some text with the help of Illustrator effects, the Blend Tool, and textures fit for the branding of a coffee house. Tutorial Details Program : Adobe Illustrator CS5-CC Difficulty : Intermediate Topics Covered : 3D Text, Blend Tool, Textures...

 

3Dでレトロなテキストエフェクト、ということですが、これはかわいい!自分でも作ってみたい…!

と思い、出来るのか出来ないのかも分からぬまま制作開始です。ツールはもちろんGIMPのみです。

 

 

テキストはアルファベットでも良かったのですが、日本語で作りたかったので、タワーゴシックというフォントを使わせていただきました。

クールな日本語フォント「タワーゴシック」のダウンロード

 

《1》テキストを入れる

1. テキストツールで好きな文字を入れます

ムケイカク

文字間の幅などを調節する必要がない場合は、《2》へ進みます。

 

幅を調節したい場合は…

 

2. 画像ウィンドウ右側のレイヤーダイアログで、テキストレイヤーを右クリックし、「テキストをパスに 」を選択します。

 

3. レイヤー・チャンネル・パス・作業履歴のウィンドウでパスのダイアログを開き、左端のほうをクリックして目を出します。

お目めをクリック

 

4. 逆に、テキストレイヤー本体は見えなくします。

レイヤーダイアログに戻り、目をクリックして見えなくします。

パスだけにします

5. 新しいレイヤーを追加し、もういちど一文字ずつ重ねていきます。

文字間隔を自由に調整

パスの赤い線を参考にして、一文字ずつ場所を決めていきます。

文字のレイヤーをフォルダにまとめておくと、すっきりします。

元々の文字のレイヤーとパスは消してしまってかまいません。

グループ化

 

《2》プラスα

パスツール

参考にしたチュートリアルの中では、元々のフォントに装飾をつけていたので、私も真似して「ム」の頭をピヨンとさせてみました。

1. 新規レイヤーを装飾したい文字本体のレイヤーの上に追加し、そのレイヤー上にパスツールでうまいこと形をつくります。

おおまかにポイントを打って、ポイントとポイントの間の線をドラッグしてびよーんと曲げます。

 

2. 左のツールボックスの下のツールオプションの「パスを選択範囲に」ボタンを押して、パスを選択範囲にします。

選択範囲に変換

 

3. 選択範囲を塗りつぶしツールで塗りつぶします。

塗りつぶし

なんか○ヒみたいですね…

この後、下の文字本体のレイヤーと統合します。右クリックから「下のレイヤーと統合」を選択します。

 

4. 文字をパスに変換します。

文字のレイヤーを右クリックします。

装飾を追加した文字は「不透明部分を選択」→画像ウィンドウ上部のコマンドで「選択」>「選択部分をパスに」で変換

特にいじっていない文字は、右クリックから「テキストをパスに」で変換します。

パスダイアログ

装飾をつけるときにパスツールを使った場合、今変換した文字のパス以外のパスが残っていると思いますが、これはもう使わないので消してかまいません。

 

《3》3D化

1. 文字たちを複製します。

グループを複製

文字のフォルダをクリックして選択しておいて、ダイアログの下の方の複製ボタンをクリックして、フォルダごと複製します。

 

2. 複製したフォルダの各レイヤーを、右クリック→「レイヤーをキャンバスに合わせる」をしておいてください。

※ショートカット(右クリックして(I))を使うと楽です。

これをしておかないと、レイヤーが文字の大きさ分しかないので、3Dの部分が切れちゃいます。

 

いよいよ3Dにするのですが、この方法は「GIMP思い込みチュートリアル(GIMPの使い方)」さんの「テキストやアイコンを立体的にする方法(GIMPチュートリアル)」という記事を参考にさせていただきました。自分では絶対に思いつかなかったので助かりました!ありがとうございます!(前回のロングシャドウもこれで良くね?ってかんじです)

3. 「モーションぼかし」をかけます。

モーションぼかしダイアログ

フィルター>ぼかし>モーションぼかし で一文字ずつかけていきます。次のレイヤーを選択して、Ctrl+Fを押せば最適用できます。(Windowsの場合)

ぼけてるところ

 

4. ぼかし部分をはっきりさせます。

色>トーンカーブ でダイアログを開き、チャンネルを「アルファ」に変えます。

座標の真ん中あたりをクリックして、アンカーを上の図のように左上に引っぱります。

トーンカーブダイアログ

プリセットをプルダウンすると、前回の設定が出てくるので、一文字ずつ調整する場合も楽です。

まっくろ

 

 

このあと文字を着色していきます。次回へ続きます!

 

sponsored link

 

 

 【GIMPに関するその他の記事】