マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

投稿日:2014年9月2日 更新日:

デザインをしている時に、最も人の目に触れるメインの処理について悩む事はありませんか?
そんな時、フォントをPHOTOSHOPで少し凝ったエフェクトを使ってデザインすることで、デザインの質が2倍にも3倍にもなります!

クール・かっこいい系のサイトデザインの際にもってこいのクールなフォントの処理をご紹介します。

【STEP1】新規レイヤーを作成し、テキストを打ちます。打ったらそのレイヤーをコピー作成します。
01

【STEP2】コピーしたレイヤーのレイヤースタイルを下記のように調整します。フォントサイズによって異なりますので、後で調整ください。
02

【STEP3】レイヤースタイルを調整すると下記のようなデザインになります。
03

【STEP4】次に最初に作ったレイヤーのレイヤースタイルを下記のように調整します。
05

【STEP5】レイヤースタイルを調整すると下記のようなデザインになります。先ほどSTEP2で作成したレイヤーを表示させ重ねます。
04

【STEP6】背景にレザーを敷き、その上に新規レイヤーを作成しブラシツールで枠周りをペイントします。ペイント後は塗りの色を半透明に調整してください。
文字の幅を詰めると繋ぎ合わさったようなデザインが完成します。
06

-WEBデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

色のイメージとWEBサイト【ピンク・紫編】

こんにちは、新人Aです。 おととい、昨日とWEBサイトの配色についてお話しました! 【黄色・赤編】【青・緑編】の次は・・・ 今日は【ピンク・紫編】でお届けしようかと思います! 【ピンク】 ちふれ ht …

え、うそ、なんか今っぽい。

え、うそ、なんか今っぽい。Photoshopで写真をDuo Toneにする方法 https://www.markernet.co.jp/blog/2015/09/02/post-6033/ Faceb …

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …