どうもです。iPhoneアプリを作ったりもしてる@mo_to_44です。
今回はちょっとPhotoshopを使っていい感じの画像を作る方法について書いてみようと思います。ちょっとPhotoshopを触ったことがある、とかそういうレベルの方向けなので特に複雑なことはしません。

こんな画像を作ってみます。
いい感じの画像をつくろう
主にやることは以下の2つ
1、画像に暗いグラデーションをかぶせる 
2、画像をぼかす
 

このように処理した画像に白文字のテキストを乗っけるだけです。 
それでは見てみましょう。

まずはレイヤースタイルで暗くしよう

こういう画像になにか効果をつけたいときはレイヤースタイルを指定すると簡単にできてしまいます。
まずはこの画像をPhotoshopに取り込みましょう。
サンプルの画像 
はい。このブログのヘッダー画像ですね。

取り込んだら、レイヤーにこの画像のサムネイルが表示されるはずなのでレイヤーをダブルクリックしてみてください。
すると、このような画面が出てきます。
Ps 131026 1

色々とありますが、今回はこの中の「グラデーションオーバーレイ」を使います。
グラデーションオーバーレイを使用
チェックを付けましょう。

Ps 131026 3
上の「描画モード」「乗算」にしてください。
するとこんな感じでかる〜く画像に暗めのグラデーションがかかります。
とりあえずこれでOKな場合もたまにありますが、もう少し暗くします。
グラデーションのカラーサンプルが出ている部分をクリックしましょう(上の画像の明るくなっている部分)。 

すると、新たな画面が出てきますが下の方に注目してください。
グラデーションの色を指定 
ピンクの枠で囲んである左側のつまみをクリックしてから、カラーの色が表示されている部分をクリックします(右側のつまみも後で変更します)。
ここで色が指定できるので、 ほんのちょっとだけ明るくしましょう。かなり黒に近くて大丈夫です。
右側のつまみは明るめのグレーに。 

グラデーションの参考
だいたいこれくらいの感じになればOKです。ちなみにバーの上にあるつまみは透明度をいじるためのものなのですが、ここでは使用しません。

途中までのサンプル
このようになるはずです。もしなっていない場合は、レイヤースタイルグラデーションオーバーレイ描画モード乗算になっているかを確認して下さい。

 

ぼかしをかけて少し変化を

次は画像に対してぼかしをかけていきます。
ぼかし(ガウス)
メニューにあるフィルター->ぼかし->ぼかし(ガウス)を選択してください。

するとこのような画面になるので、ぼかしの度合いを調整してみてください。
ぼかし数値大 
数値を44.4に設定していますが、少しでかすぎますかね。
ここではなんとなく何の画像か認識できる程度を目指そうと想います。

ちなみにiOS7では、このようなスリガラス効果みたいなのを採用していますが、結構これくらい大きなぼかしがかかっているように僕には見えます。

話がそれましたが、ここではとりあえず数値を8.2に設定しましょう。ぼかし調整後
なんとなく文字とロゴが認識できる、これくらいにとどめておこうと思います。
画像に関してはこれで完成ですが、ぼかしの加減やグラデーションの色合いなどを自分の好きなように調整してみると面白いと思います。

最後に文字をのっけて完成です。完成 

 

まとめ

Photoshopを普段からいじっている方には当たり前すぎたと思いますが、どうでしょうか?
iPhoneアプリ開発者でもコードはいけるけど、、、という人や、デザインはできるけどコードが書けないんだよなぁ、、、なんて方はたくさんいます。
まずは少しずつ、こういった簡単にできることから始めるといいんじゃないかと思います。

この本は個人的におすすめです!