マーカーネット株式会社

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

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

関連記事

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

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

先取り!2015年に流行るWEBデザインのトレンドは!?

先取り!2015年に流行るWEBデザインのトレンドは!?

こんばんわ!あと1カ月で2014年も終わりを迎えます。。 この時期に気になるのは来年のWEBデザインの流行です! 毎年、新しいデバイスが発売され、めまぐるしい進化を遂げるWEB業界は先読みして情報を掴 …

レスポンシブデザインに対するよくある4つの誤解

レスポンシブデザインに対するよくある4つの誤解

単一のファイルで様々な機器の画面サイズにフィットする便利な手法「レスポンシブデザイン」。 最近はスマホからのPVも爆発的に増えてきたので慌ててスマホサイトを導入する企業が増え、更新の勝手から、レスポン …

フォントをまとめて比較!ウェブサービス「wordmark-it」

フォントをまとめて比較!ウェブサービス「wordmark-it」

こんにちは。マーカーネットスタッフのSです。 今回はデザイン制作に便利なサービスをご紹介したいと思います。 デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。 …

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

日頃WEBデザインの仕事に携わる関係上、素材サイト巡りをすることがよくあります。 その中で、最近面白いなと思ったサイトをご紹介したいと思います。   ヒューマンピクトグラム2.0 http: …