Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Photoshop(フォトショップ)でテキストにグラデーションをかけて加工する方法

Photoshop(フォトショップ)でテキストにグラデーションをかけて加工する方法

Photoshop(フォトショップ)でテキストにグラデーションをかけて加工する方法

フォトショップでテキストをちょっとおしゃれにする方法です。Tipsが紹介されているサイト(英語)がありましたので実際にやってみました。その手順をメモしておきます。このやり方を身に付けておくと様々なデザインに利用できそうですね。

フォトショップでテキストにグラデーションをかけて加工する方法

フォント・サイズ・グラデーションなど下準備
文字の色は黒。フォントは「Impact」を選択します。フォント・サイズ・グラデーションなど下準備

続いて文字に効果をつけていきます。文字レイヤーをダブルクリックします。そして境界線を設定していきます。境界線のカラーは「白」にします。(背景も白のなのでこの時点で変化はみられませんが…)フォント・サイズ・グラデーションなど下準備

続いて同様にグラデーションオーバーレイに効果をつけます。右端が「#9a0000」、中央に「#ca0000」と設定します。(別に何色でもいいのですが…)フォント・サイズ・グラデーションなど下準備

さらに、ドロップシャドウを設定します。描画モードは「乗算」、不透明度は「100%」、距離「1」、スレッド「0」、サイズ「8」で設定しています。フォント・サイズ・グラデーションなど下準備

するとなんとなくそれっぽくなってくるのが分かります。
ペンツールを使ってパスを描きます。
まずレイヤーを1つ新規作成をします。次にパスパレットに移動し、ペンツールに持ち替えます。そして、やや真ん中辺りから左→右にペンツールで線を描きます。(この時、左側をクリックして「Sift」を押しながら右側をクリックすると直線が引けます。)ペンツールを使ってパスを描きます。

次に、ペンツールのまま、引いた線の2/5、4/5辺りをクリックします。すると基点が追加されます。そこで、パス選択ルーツ(白矢印)に持ち替え、クリックしたところ上に持ち上げたり、下に下げたりします。ペンツールを使ってパスを描きます。

再びペンツールに持ち替え、下記のように囲みます。ペンツールを使ってパスを描きます。

次に、選択範囲をとります。(パスの部分をCtrl+クリックで選択範囲がとれます。)そして、その部分を「白」で塗りつぶします。ペンツールを使ってパスを描きます。

レイヤーパレットに戻り、テキスト部分をctrl+クリックで選択範囲をとり、「Shift+Ctrl+I」で選択範囲を反転させます。そして、バックスペースキーを押し、不透明度25%にすれば完成です。ペンツールを使ってパスを描きます。

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

楽してプロっぽいデザイン|Forty-N-Five Blog Comments

検索から拝見し、最近はRSSにて購読させていただいております。
質問ですが、上記のPhotoshopのバージョンはいくつでしょうか。
自分は6を使っておりますが、画面表示が少し違うようでそのためか
説明文中にあるコマンドをいくらさがしても見つかりません。
「レイヤー」はあっても「文字レイヤー」が細かくメニューになかったり・・・
イラストレータも使い慣れてないので、ぜひPhotoshopでこのような作業をやりたいです。

恐れ入りますが、コメントいただければうれしいです。
こちらでももっと探して加工できるように試行錯誤してみます・・・

コメントありがとうございます。
ご質問の件ですが、PhotoshopのバージョンはCS2で作成しています。
すいません6を使ったことがなくて、どのような画面になっているのかが分からず、ご説明のしようがなくて恐縮です。
要は文字に対していろんな効果を付けていくのですが…なんとか試行錯誤して頂ければと思いますが、何かご協力できることがあればまたご連絡下さい。

sakashita:

ご返信が遅くなり、申し訳ありません。
エレメンツだからNGなのかなー。。。と感じました^^;

自分でも工夫してできるようにがんばります。
また役立つ記事を書いてくださいね!応援しています。

あべたけ:

こんにちは、初めまして!あべたけと申します。現在ポートフォリオを作成してる途中にこの記事を拝見しました。自分にジャストミートな記事でした。とても参考になりました!ありがとうございます。

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

Photoshop(フォトショップ)でテキストにグラデーションをかけて加工する方法の前後の記事

前の記事は「世界各国の優れたwebデザインを紹介しているサイト

次の記事は「面白いジェネレーターがまとめられているサイト

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.