2016年公開のすごいテキストエフェクト用チュートリアル、作り方50個まとめ(Photoshop、Illustrator対応)

justflowdark-landscape2

 

2016年も残すところ1ヶ月をきったタイミングで、今年1年間のあいだに公開された魅力的なテキストエフェクトの作り方チュートリアルをまとめた総集編を今回はご紹介します。Photoshop と Illustrator で作成できるチュートリアルを一緒にまとめています。

 

 

ステップ順に進めていくことで実践的なツールの使い方を覚えながら、デザインを完成させることができるので、ますます進化するデザインテクニックを学んでみてはいかがでしょう。デザインスキルをアップさせたい、そんなひとにオススメしたいチュートリアルを揃えています。

 

 

コンテンツ目次

 

 

 

Photoshop チュートリアル

 

LED スクリーン風テキストエフェクトの作り方

電光掲示板に表示されているような風合いに仕上げる Photoshop チュートリアル。

led-screen-text-effect

 

 

 

多重露光エフェクト付きテキストエフェクトの作り方

入力した文字にお好み写真を重ね、レイヤーマスクを適用するだけの Photoshop 入門チュートリアル。

Double-Exposure-Text-Effect---850

 

 

 

花束に文字テキストを組み合わせる方法

部分的に花びらや葉っぱを文字を重ね、ドロップシャドウを加えることで、よりリアルな風合いに仕上げます。

Floral-Text-Effect---600-1

 

 

 

80年代レトロテキストのつくり方

Illustrator で作成した3Dシェイプ(Photoshopでも作成できます)に、レイヤースタイルを適用する手軽なテクニック。背景のつくり方もポイントで、参考PSDファイルも無料ダウンロードできます。

80s

 

 

 

80年代風テキストエフェクトの作り方

鮮やかなグラデーションと幾何学スタイルを組み合わさえたレトロ風テキストエフェクト。

1980-retro-text-effect

 

 

 

80年代風メタル・テキストエフェクトの作り方

ネオンピンク色の鮮やかな配色に、メタリック感を表現したクロム文字の組み合わせが素敵。

post-thumbnail

 

 

 

本物そっくりに反射する、メタリック系テキストエフェクトの作り方

まるで周りにあるものが写り込んだ様な質感に仕上げるテクニック。

reflective-text-effect-qt-850

 

 

 

トレンドの白熱灯を利用したテキストエフェクトの作り方

白熱球で文字を描いたレトロ&ビンテージなデザインを再現するチュートリアル。

light-bulb-effect

 

 

 

ピカッと光るライティングを利用したテキストエフェクトの作り方

レイヤースタイルを利用したメタルテキストに、雷のようなライティングエフェクトを追加するチュートリアル。

electric-lightning-text-effect-photoshop-tutorial

 

 

 

メラメラと燃える文字テキストのデザイン方法

炎テクスチャを描画モード「スクリーン」にすることで、背景部分を透明にすることができます。

fire-600x410

 

 

 

リアルな炎をできたテキストエフェクトの作り方

レイヤースタイルとエフェクトを組み合わせることで、本物そっくりにごうごうと燃えるスタイルを表現できるチュートリアル。

fire-text-effect

 

 

 

キラキラのラメ付き黄金テキストエフェクトの作り方

お手本通りに数値を設定していくだけで完成する、レイヤースタイルを駆使した簡単テクニック。

Royal-Text-Effect-QT---850

 

 

 

キラキラと3Dテキストエフェクトの作り方

Photoshopの3Dツールや調整レイヤーを利用し、いくつかのテクスチャを加えることでキラキラと輝くグリッターエフェクトを完成します。

3d-party-text-effect-850

 

 

 

立体的に輝くメタル文字テキストを作成する方法

Photoshopの3Dツールを活用することで、手軽に3Dエフェクトに仕上げることができ、テクスチャ素材をつかった、リアルな質感にこだわったデザインエフェクト。

worst-heroes-ever

 

 

 

布に縫い付けた文字テキストエフェクトのつくり方

レイヤースタイルを調整することで、まるでミシンで縫ったような質感に仕上げます。

Creased-Text-Effect-Using-the-Displace-Filter---850

 

 

 

プチプチでできたテキストエフェクトのつくり方

緩衝材として知られるプラスチックを、レイヤースタイルで再現します。

Bubble-Wrap-Text-Effect---600

 

 

 

ペンキのはがれた3Dテキストエフェクトのつくり方

Photoshopの3D機能を利用することで、まるで本物そっくりな立体感を演出できるテクニック。

3D-Chipped-Painted-Wood-Text-Effect---850

 

 

 

3d-neon-text-effect

 

 

 

映画スーサイド・スクワッドのロゴデザインを作成する方法

アメリカで公開が始まったばかりのスーパーヒーロー映画で使われている、立体的でカラフルなロゴを完全再現します。

suqicide-squad-colorful-text-effect

 

 

 

豪華なメタリック文字エフェクト用アクション素材の作り方

実際にPhotoshop のデザイン作業をアクション用に記録することで、次回からボタンひとつでスタイルを表現できます。

gladius-metalilc-text-effect

 

 

 

リアルなメタルテキストの作り方

水滴が表面についた、光沢と立体感まで表現できる、レイヤースタイルのみで完成のお手軽チュートリアル。

metal-realistic-text

 

 

 

青白く光るレトロ系テキストエフェクトの作り方

複数のテキストレイヤーに、それぞれ異なるレイヤースタイルを組み合わせることで、立体感のあるデザインに仕上げるテクニック。

glowing-retro-text-effect-850

 

 

 

写真と文字を組み合わせたテキストエフェクトの作り方

文字テキストが部分的に建物に隠れる、ダイナミックなデザインエフェクト。

type-dramatic-effect

 

 

 

ロマンチックなバラをつかった文字テキストエフェクト

ビンテージな花がらデザインと文字テキストを立体的に重ねた、オーバーレイエフェクト・チュートリアル。

floral-illustration-text-effect-850

 

 

 

リアルな葉っぱでできた文字テキストエフェクトのつくり方

大小さまざまな葉っぱをつかい、ドロップシャドウを利用した動画チュートリアル。

eco-text-effect

 

 

 

ダイヤモンドの3D文字テキストの作り方

キラキラと輝くダイヤモンドを使って、3Dテキストエフェクトに追加する方法を学ぶ動画チュートリアル。

diamond-text-effect-tutorial

 

 

 

ピカッと光るライティングを利用したテキストエフェクトの作り方

レイヤースタイルを利用したメタルテキストに、雷のようなライティングエフェクトを追加するチュートリアル。

electric-lightning-text-effect-photoshop-tutorial

 

 

 

文字を立体的に重ねて表示するテキストエフェクト

部分的に文字テキストを重ね、織り込んだように表現できるデザインチュートリアル。

latesttutorial2016nov-top

 

 

 

黒板にチョークで文字を書いたようなデザインエフェクト

Photoshop の便利機能レイヤースタイルを利用することで、数値を調整するだけで完成するお手軽チュートリアル。

chalk-text-effect-qt-850

 

 

 

立体的なレトロスタイルの文字テキストの作り方

ほんの少し奥行き感を演出できるテキストエフェクトで、こちらもレイヤースタイルを中心とした基本デザイン。

retro-photoshop-text-effect

 

 

 

申年モチーフ、毛皮でフサフサの文字テキストエフェクトを完成させる方法

アクション素材を利用することで、見た目以上に楽にデザインできる、実践的なテクニックを利用するチュートリアル。

chinese-monkey-year-text-photoshop-tutorial

 

 

 

モコモコとした毛でできた、文字テキストエフェクトの作り方

シンプルなテクスチャとブラシツールをうまく設定するだけでデザインできるチュートリアル。

The-Ugly-Duckling-Text-Effect---850

 

 

 

葉っぱでできた文字テキストエフェクトの作り方

ピーターパンの世界を表現した、葉っぱや枝など自然にインスパイアされたエフェクトを学びます。

Peter-Pan-Text-Effect---850

 

 

 

リアルな芝生でできたテキストエフェクトの作り方

草テクスチャを加工することで、本物そっくりの質感を表現できるチュートリアル。

Spring-Text-Effect---600

 

 

 

Illustrator チュートリアル

 

スポンジでできた文字テキストの作り方

Photoshopで制作したような細部まで詳しくデザインされたテキストエフェクト。

spongetext0

 

 

 

お好みの文字をチェリーパイで作成する方法

パイのサクサクとした質感や上にかかっている粉砂糖、チェリーどれもIllustrator のみでデザインできる、本格的なテキストエフェクト用チュートリアル。

diana_cherry_pie_text_effect_tut_final-min

 

 

 

ビスケットでできたテキストエフェクトの作り方

ツールでパスを描くだけでで、どんなシェイプにもビスケットの形に完成させることができるチュートリアル。

diana_biscuit_text_effect_tut_finala

 

 

 

歯磨き粉テキストエフェクトの作り方

最初にパターンブラシを作成することで、どんな文字形のパスにも適用することができます。

ToothpasteText0

 

 

 

幼虫をつかったテキストエフェクトの作り方

いまにもウニョウニョと動き出しそうなリアルな立体感で描くデザインチュートリアル。

maggottexteffect0

 

 

 

文字テキストを立体的に分解する方法

グラフィックデザインでもよく見かけるデザインエフェクトのひとつで、3Dツールを利用することで、まるで文字が分解されたような効果を見事に仕上げます。

exploded-typography

 

 

 

サイケデリックな70年代風タイポグラフィーのつくり方

Illustrator の基本となるシェイプツールの使い方から、ペンツールをつかったフリーハンドによるデザインまでステップごとに学びます。

44-love-lettering600

 

 

 

カラフルな3Dテキストエフェクトの作り方

Photoshop などでおなじみの立体感や質感を、Illustrator スタイルのみで作成できるお手軽チュートリアル。

colorful3dtext0

 

 

 

花がらイラストとタイポグラフィーの組み合わせ方

某インテリアショップ袋でも使われていたテクニックを、Illustrator で実現する動画チュートリアル。グラデーションツールを利用した、立体感のある影の付け方も参考に。

floral-letters-tutorial-with-ai

 

 

 

カラフルな切り絵風テキストエフェクトの作り方

ポップでクールな文字テキストデザインを制作する動画チュートリアル。

music-colorful-text-effect

 

 

 

ブループリント風テキストエフェクトのつくり方

まるで色鉛筆で手描きしたような文字エフェクトを実現するチュートリアル。

BlueprintText0

 

 

 

スタンプ風テキストエフェクトのつくり方

まるでインクをつけたスタンプを押したような風合いに仕上げるテクニック。ポイントはテクスチャの使い方にありました。

result

 

 

 

水彩ペイントの文字テキストの作り方

すぐに実践できる3つのデザインテクニックを紹介する動画チュートリアル。英語ですが、ステップごとに詳しく解説されているので分かりやすさも◎。

watercolor-typography-in-illustrator

 

 

 

文字とタイポグラフィーを組み合わせるデザインチュートリアル

動物のイラストをトレースし、手書きブラシフォントを組み合わせ、グランジテクスチャの質感をアップ。

vintage-dear-typo-logo

 

 

 

割れたガラスの文字テキストエフェクト

パスファインダー機能を利用することで、自由にガラスの割れ目を表現することができるテクニック。

step34

 

 

 

プレミアム・テキストエフェクト

 

デザインを制作している時間があまりない、そんなひとはボタンクリック一発でテキストエフェクトを完成させるプレミアム素材を利用してみてはいかがでしょう。

 

どれも5-8ドル(560-900円ほど)と比較的お求めやすい価格となっており、プロジェクト予算が厳しいときにも重宝し、プロ顔負けのエフェクトを短い制作時間で作成することができます。

 

 

Food Typography PSD Actions

文字テキストを小麦粉やパプリカ、ココア、砂糖などで立体的に再現する Photoshopアクション素材セット。

flour-type-slide-1

 

 

 

FlowerType for Photoshop

文字テキストと一緒に立体的に美しい本物の花がらを重ねるデザインコレクション。

flower-type

 

 

 

Glitz + Glam Kit

キラキラ感たっぷりでゴージャスなグリッターエフェクト36種類が揃ったデザインキット。

glitz-glam

 

 

 

Liquid Gold for Photoshop

キラキラの黄金色と水彩ペイントを組み合わせた、独特な風合いを演出できる素材集で、レイヤースタイルから一緒に利用できるブラシ素材など豊富に揃います。

liquid-gold

 

 

 

POWDR – Black Edition

パウダーを空中に振りあげ文字テキストを重ねる、クリエイティブなデザインを可能にする素材集。

powdr-text-effect

 

 

 

Retrolift – 3D PSD Actions

立体的な3Dテキストエフェクトをボタン一発で仕上げる、レトロスタイルのPhotoshopアクション素材セット。

retrolift-style

 

 

 

Sweet Text Styles vol.1

sweet-text-styles

 

 

 

Text to Watercolour Actions

どんな文字テキストも水彩ペイント風に仕上げることができるアクション素材セットで、豊富なカラーパレット数にも注目です。

text-to-watercolor

 

 

 

50 Vintage Text Effects Bundle

合計50種類のビンテージ風テキストエフェクトを収録したセットで、どれも立体的な風合いをボタン一つで再現できます。

 

 

 

Digital Clay – Layer Styles & More

粘土の質感を見事に再現できるレイヤースタイルで、21種類の豊富なカラーリングが収録されています。

clay-effect-styles-preview-1b

 

ほんの数クリックで完成!文字をかっこよくするPSテキストエフェクトまとめ

 

サムネイル@ : Just Flow Bundle – Light & Dark – CreativeMarket