こんにちは、デザイナーのサリーです。
今回はブログのアイキャッチにも使えるテキストエフェクトのフリー素材をまとめてみました（今回のアイキャッチでも使ってます！）。
PSDファイル形式なので、Photoshopでちょちょいと編集するだけで手の込んだエフェクトが使えちゃいます。
テキストエフェクト素材の使用方法
今回は「Grand Motel Text Effect」という素材を利用して、ざっくりした使用方法を説明していきます。素材によって微妙に使い方が異なりますが、基本的には同じような方法で編集できると思います。
STEP1. PSDファイルを開く
こちらのPSDファイルのレイヤー構成はこんな感じ。
レイヤー構成は素材によってさまざまです。
こちらの素材は丁寧にレイヤー名に「Your text here(double-click the layer thumbnail)」と書いてありますね！
スマートオブジェクトになっているこのレイヤーをダブルクリックします。
STEP2. オブジェクトを編集する
スマートオブジェクトの中身です。
エフェクトがつく前のテキストが2つありますね。
この中身を好きなように編集しましょう〜！
フォントを変えたり、アイコンを置いてみたり……。
STEP3. オブジェクトを保存する
オブジェクトを保存して、もとの素材ファイルに戻りましょう。
オブジェクトが更新されて、編集が反映されているはずです。これで完成です！
とっても簡単ですね。
それでは以下、素材をカテゴリー別に紹介していきます。
素材の質感がすごいエフェクト
1. Psd Concrete Rock Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-concrete-rock-text-effect
岩です。ごつごつ・ざらざら感がすごい。
2. Psd Snow Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-snow-text-effect
真っ白ふわふわの雪です。
3. Psd Woody Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-woody-text-effect
紐で垂れ下がった木製のオブジェ。
4. Gel Text Effects （PS Layer Styles）
http://www.premiumpixels.com/freebies/gel-text-effect-ps-layer-styles/
ぷにぷにの透明ゲル。
5. Glass Text Effects
http://www.designfreebies.com/2010/11/16/glass-text-effects/
透明ガラス。すりガラスっぽいエフェクトもありますね。
6. Psd Wall Poster Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-wall-poster-text-effect
壁から浮き上がった文字の質感がリアルですね。
7. Soft White Text Effect
http://www.designfreebies.com/2010/11/16/glass-text-effects/
白壁にうつる影がきれい。
レトロ・ビンテージのエフェクト
8. Grand Motel Text Effect
http://graphicburger.com/grand-motel-text-effect/
今回のアイキャッチに使用したのはこちら！ 色合いがきれいです。
9. Stripes Shadow Text Effect
http://graphicburger.com/stripes-shadow-text-effect/
シンプルなストライプの影が付いたエフェクト。5つのスタイルが用意されています。
10. Authentic Text Effect
http://graphicburger.com/authentic-text-effect/
こちらは1pxのドットで打たれたストライプです。
11. Old School Retro Psd Text Effect
http://www.pixeden.com/photoshop-text-effects/old-school-retro-psd-text-effect
こちらもストライプです。
12. Earth Quaking Text Effect
http://graphicburger.com/earth-quaking-text-effect/
ザ・レトロ！な印象。
13. Psd Boulevard Retro Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-boulevard-retro-text-effect
今にもカートゥーンが始まりそう。
ぼわっと光るネオンなエフェクト
14. Neon mock up free
https://www.behance.net/gallery/14102741/Neon-mock-up-free
ギラギラなネオン街！ PSDの中に色々な色のネオンが用意されています。
15. Psd Neon Text Effect Photoshop
http://www.pixeden.com/photoshop-text-effects/psd-neon-text-effect-photoshop
光の途切れた感じがリアルなネオン。
16. Lightbox Text Effect
http://graphicburger.com/lightbox-text-effect/
ネオンとはちょっと違いますが……トレース台みたいなライトボックスが作れちゃいます。
ポップで美味しそうなエフェクト
17. Vanilla Text Effect
http://graphicburger.com/vanilla-text-effect/
「バニラ」という名前のとっても甘そうなエフェクト。
18. Popcorn Text Effect
http://graphicburger.com/popcorn-text-effect/
この色の組み合わせと書体は、たしかにポップコーン！
19. Psd Chocolate Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-chocolate-text-effect
溶け出しそうなチョコレート。
20. Psd Candy Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-candy-text-effect
ヴェルタースオリジナルみたいな、美味しそうなキャンディーですね。
21. Psd Candy Cane Text Effect
http://www.pixeden.com/photoshop-text-effects/psd-candy-cane-text-effect
こちらは定番の紅白しましまキャンディー。
22. Plump Text Effect
http://graphicburger.com/plump-text-effect/
「plump」は「肉付きのよい」という意味らしいです。
23. Muesli Text Effect
http://graphicburger.com/muesli-text-effect/
「muesli」はフルーツ・グラノーラみたいなシリアル食品らしいです。シリアルのパッケージをイメージしてるそうな。
光沢のあるシルバー・メタルのエフェクト
24. Classic Metal Psd Text Effect
http://www.pixeden.com/photoshop-text-effects/classic-metal-psd-text-effect
光沢おさえめのメタルがシックでかっこいい。
25. Metal Text Effect （Photoshop Layer Style）
http://www.premiumpixels.com/freebies/metal-text-effect-photoshop-layer-style/
ふちのついた分厚いメタル。
どこかで見たような映画ロゴっぽいエフェクト
26. Cinematic Title Text Effect
http://graphicburger.com/cinematic-title-text-effect/
ダークファンタジー映画っぽい。七人の神……。
27. Cinematic 3D Text Effect
http://graphicburger.com/cinematic-3d-text-effect/
SF大作が始まりそうですね！
28. Type Zilla Psd Text Effect
http://www.pixeden.com/photoshop-text-effects/type-zilla-psd-text-effect
レトロ・ムービーをイメージしたエフェクト。
味のある手描き風のエフェクト
29. Chalkboard Typography Text Effects
http://graphicburger.com/chalkboard-typography-text-effects/
チョークで書いた文字のエフェクト。4つのスタイルが用意されています。
30. Sketch Text Effect PSD
http://graphicburger.com/sketch-text-effect-psd/
鉛筆で書いたようなスタイルが3つ用意されています。
まとめ
いかがでしたでしょうか。
そのまま素材として使用しても良いですが、ファイルの中身を見ることができるので、レイヤー効果の使い方の勉強にもなります。
有料のテキストエフェクト素材にはもっとクオリティの高い素材もたくさんあるので、気に入ったら購入してみるのもありですね！
ではでは。
【デザイナー向けのフリー素材まとめ】
※ ハイクオリティなフリー素材がPSD形式でダウンロードできるサイト20選
※ 親しみやすさ断然アップ！手書き風のフリー素材イラストまとめ
※ デザイナーが選ぶデザイナーのための無料写真素材サイト、厳選10個！
※ ガーリーなデザインがしたい！！方におすすめのサイト＆テクニックまとめ
※ ガーリーなデザインがしたい！！方にオススメの素材サイトまとめ
【株式会社LIGについて】
わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。エフェクトを活かした制作実績も！Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
