使おうよ!Photoshopを持ってるとブログタイトルロゴが4分でお洒落に仕上がるチュートリアル

タイムライン

使おうよ!Photoshopを持ってるとブログタイトルロゴが4分でお洒落に仕上がるチュートリアル

アドビに足を向けて寝られない。

インストールしてるだけでプロっぽい気分になれるアドビソフトですが、いや、持ってるなら使えよ、と激しく言いたいので言おうと思います。

いろんな方のブログブランディングをさせてもらっているので、こういう技を使いまくっています。違います、これは使い回しとは言いません。テクです。

微調整に時間はかかりますが、ぶっちゃけ10分もあればそれなりの感じになると思うので、持ってる方やよーわからんわと放置カマシてる方はお試しあれ。

最終的な仕上がり

こんな感じの奴をとりあえずさっくり作ろうと思います。

そのまま使えるかわからないけど、ファイルのダウンロード

基本「レイヤースタイル」だけでどうにでもなります。

ステップ1文字をうつ


この段階で好きな色をつけるのは止めておきましょう。
薄い色が好ましいです。白でもイイです。

書体も好きな物を、もちろんロゴのマークなどでも応用できます。

ステップ2好きな色を決める

ロゴ・文字の色は「レイヤースタイル」の「カラーオーバーレイ」で変更します。
文字を打つ段階で好きな色をつけることも出来ますが、僕は「レイヤースタイル」ですべて一括編集したいのでこうしてます。

レイヤースタイルはココにありますし、なんなら「レイヤースタイル」をかけたいレイヤーをダブルクリックでも起動します。

2012-5-15-8

色は描画モード通常、とか書いてるところの横の小窓部分で変えられます。

ステップ3グラデーションをかける

2012-5-15-9

次に「レイヤースタイル」で「グラデーションオーバーレイ」をかけます。デフォルトで白黒のグラデになってると思います。なってなかったら白黒のグラデにしてください。プリセットに入ってると思います。
角度はデフォルトで90度になってると思います。そうです、デフォルトでいいんです。

「グラデーション」をかけたにもかかわらず色が全然変わらないのは、グラデーションの上に水色の色ベタが載っているからです。
2012-5-15-10

試しに色ベタを消すとしっかり「グラデーション」がかかっています。
2012-5-15-11

では、色ベタを復活させて、ちょっと透明度を上げてみます。という言い方をするとようわからんくなるので、簡単にいうと、水色をちょっと透明にします。
うっすらグラデくらいが洒落っ気があるんじゃないですかね。

ステップ4シャドウの内側をかける

仕上げです。
2012-5-15-12

「レイヤースタイル」の「シャドウ(内側)」をかけます。こいつは死ぬほど便利です。
いきなり窪んだ感じが表現できてしまいます。アドビ最高。
2012-5-15-13

なんどでも、ほんとに何度でも言いますが、ほんのり、うっすらを心がけるとこが洒落っ気を加速させるポイントです。気がつかれないかも、、、、の不安は取り去り放り投げましょう。

終わり

2012-5-15-6

ドン!となります。多分3分51秒くらいで出来たんじゃないですかね。文章を読みながらすると無理ですけど。

さらなるブラッシュアップ編

  • ドロップシャドウをかける
  • ベベルとエンボスをかける
  • テクスチャを載せる

をレイヤースタイルでさらにやっつけると

こんな感じになります。背景色はわかりやすくなるように足しました。

走り走り解説すると、「ドロップシャドウ」を使って、くぼみ部分に「ハイライト」効果を足します。そうです、ドロップシャドウという名前だからと言って、別にシャドウに使わなくてもいいんですよ。
包括光源という、ライトの当たり具合を全部まとめてコントロールすることがPSでは出来るので、何も考えずにハイライトを足すことが出来ます。よくわからなければ、この辺無視してください。

ベベルとエンボス」は名前の通り、凹ましたり膨らませたりが一発で出来る便利な「レイヤースタイル」です。「シャドウ(内側)」がなかったことろは、こいつのお世話になりました。
「ベベルとエンボス」はシャドウとハイライトを同時にかけてくれるので、エンボス効果を加速させるために、うっすらとかけています。あるのとないのとでは、仕上がりにだいぶ差が出ます。

で、最後に質感を足すために「パターンオーバーレイ」でテクスチャをたしてます。今回は布っぽいテクスチャです。frasmロゴにもうっすらとテクスチャがかかっています。
これも、あると質感が足されてグッと洒落っ気が疾走すること請け合い。

はい、口酸っぱく言いますが、すべてを薄く載せてます。こういうことが「レイヤースタイル」を使うだけで出来るのだから、PSは神と言わざるを得ませんね。5.0の頃の苦労を思えば、よくぞココまでと半泣きになります。トラウマがよみがえります。

2012-5-15-17

すべての効果をレイヤースタイルのみで実装しています。

しかも驚くべきコトに文字としての性質も生きているので、打ち替えればすぐさま違う文字でも反映します。

つまり、レイヤースタイルを一回作っておけば、再利用楽勝なわけです、この辺にぼくがいろんな人のブランディングを高速で出来るゆえんがあります。アドビよ。

もちろん、事前にテクスチャを読み込む等の下準備は終えています。この辺応用編として、また書きます。

終わり

終わりに

これ全部やっても10分も行かないと思います。単純作業なら、およそ4分で終了。
もちろん、基本的な書体の選定や、文字つめ、文字組、タイポグラフィックな処理、図形なら事前の作成等、前準備はしっかりと。

レイヤースタイルのパラメーターは文字やロゴの大きさによって変化します。基本的にうっすらを意識すれば、直感でどうにかなると思います。

お前は慣れてるから簡単なんだ!と言わずに、一度お試しアレ。ぶっちゃけ、笑うくらい簡単ですから。
エレメントでも同じようなことが出来ると思うので、持ってる方はトライトライ!

これだけアドビ推したんだから僕のCS6、千円くらい安くならんかね、アドビよ。

文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
あー、これいいわ!アイコンフォントを使ってみたら思いの外手軽にグラフィカルな選択肢が増えるよ
次の記事(Next)
ブログタイトルをwebフォント化してみようと思う、でやってみたら満足度かなり高いな