ある日僕は思ったわけです。
様々なブログがこれを「除去ツール」として紹介しているが、これはそもそも周りに合わせて画像を作る「生成ツール」なのではないか？
ということはこれを利用すれば画像を自然な感じで拡張できる！

というわけで実際に試してみました。
小ネタです。リラックスしてどうぞ。

現場のよくある風景

クライアントから無茶な注文を頼まれることはよくある話だ。
例えばこの画像を渡されて

「君、サムネイルで使いたいからこの画像を正方形にトリミングしてくれ。あー決して猫様は見切れないように」
なんて頼まれたとする。
しかしどう考えても正方形にすると

猫は見切れる。

どこでどう切り取っても

やっぱり見切れる。
そこで思いついたのがPhotoshop CS5の新機能『コンテンツに応じた塗りつぶし』だ。

Photoshop起動

Photoshopの力を見せてやる。
これはクライアントと制作者の意地と意地とのぶつかり合いだ。
いや…違う。
Photoshopはなんでもできる魔法のツールだと思っているクライアントの夢を守るのだ。
人の夢を簡単に壊してはいけないのだ。

というわけでまずはカンバスを拡張。

とりあえず正方形だ。
しかしこれで許してくれるほどうちのクライアントは甘くない。

拡張したカンバスを選択し

「編集」メニューから「塗りつぶし」を選び、プルダウンで「コンテンツに応じる」を選択。
あとは神に祈っておそるおそるOKボタンを押すだけだ。

アーメン。

失敗した。

「せっかくなんで猫を増やしました」
なんて言い訳が通用するほど、うちのクライアントは甘くない。
「猫様は一匹で十分だ」
そう言われるに決まっている。

しかし惜しい。
めげずに邪魔な部分を選択し、もう一度塗りつぶしてみると…

文句無しの出来だ！
Photoshopが魔法のツールになった瞬間である。
クライアントの希望と、制作者の面子と、そして猫の尊厳。全て守られたのだ。
これが俗にいうWin-Win-Winの関係というやつだろうか？
とにもかくにも、これでまた一つの夢が守られた。

せっかくなので他の画像でも試してみる

先程の成功体験で多分みんなが思っている以上に興奮していた僕は、その後いろんな画像を試してみた。
おそらく勝利という美酒に飢えていたんだろう。

まずは風景写真。とうもろこし畑だろうか？

アーメン

おお！
よく見るとあやしいところはあるが、パッと見は成功だ。
何度か繰り返せば完全に拡張できると思う。

続いて「物」の写真。

アーメン

うん微妙。
まあなんとなく量が増えてお得感がアップしたのは認める。
しかし本当の問題はこれが何の野菜なのか、そもそも野菜なのか果物なのかすら僕が分かっていない点だと思う。

次は人物写真。

こ、これは…

アーメン！！！

やっぱり失敗した。
一つの夢が壊れた瞬間だ。
いや、これはただの悪ノリだ。
CS6ではぜひ補完していただきたい技術の一つである。

結論

風景写真やパターンならいい感じで拡張できる可能性が高いと思う。
使いどころによっては救いの手になるかも…
それではよきクリエイターライフを。

参考にしたのはこちらのチュートリアル。
Photoshop Tutorial: Getting that great X-PRO LOMO look

オリジナル手法も加えつつ、できるだけシンプルにまとめてみました。

ステップ1：トーンカーブ一発で色味を変える

まずは一番効果の大きいステップから。
これが元の写真です。

トーンカーブを使って色を変えます。
写真のレイヤーを選択して、イメージ ＞ 色調補正 ＞ トーンカーブを選択。
レッド、グリーン、ブルーそれぞれのチャンネルに独立したカーブを適用させるのがポイントです。

これらのトーンカーブを適用させると写真はこのように変わります。

色味だけ変えたい方はこれだけでもOKですね。

ステップ2：レンズによる歪みを与える

古いカメラってレンズによってちょっと歪みますよね。
写真に歪みを与えるには、フィルタ ＞ 変形 ＞ レンズ補正を使います。

「ゆがみを補正」の項目を-1〜-2程度に設定。
あまりやりすぎると魚眼レンズのようになりますので、大きくても-2程度におさめておいた方がベターです。

違いがわかりますか？
見ただけだとわかりずらいかもしれませんが、実際は写真がちょっと膨張気味に変化してます。

ステップ3：中央から外に向かって強くなっていくぼかしを再現

トイカメラで撮影された写真でよく見られる、中央付近にしかピントが合ってない雰囲気を再現します。
まずはチャンネルパレットで「新規チャンネルを作成」ボタンをクリック。
すると新たにアルファチャンネルが作られるので、グラデーションツールで灰色（#777777）から白（#ffffff）への円形グラデーションをかけましょう。

そしたらcommandキー（Ctrl）を押しながらアルファチャンネルレイヤーをクリックしてみてください。
選択範囲が作成されるはずです。
実はこのこの選択範囲、「選択範囲」自体にグラデーション（強弱）がかかってます。
クイックマスクモードにしてみるとわかりやすいと思います。
この強弱のついた選択範囲にぼかしを適用することで、徐々に写真がぼけていく感じを作り出します。

それでは選択範囲はそのままでレイヤーパレットから写真のレイヤーを選択し、
フィルタ ＞ ぼかし ＞ ぼかし（レンズ）を選択。
虹彩絞りの形状を「三角形」にし半径を適当に設定してお好みのぼかしを作ってみて下さい。

ここでは半径は「5」にしてみました。
これで中央から外に向かって徐々に強くなっていくぼかしを再現することができました。

ステップ4：写真のふちにできる影を再現する

さていよいよ大詰めです。
トイカメラと言えば写真の四隅にできるあの「影」が特徴的ですよね。
あれを作ります。

まずは最前面に真っ黒に塗りつぶしたレイヤーを配置。
そしたらレイヤーパレット下部にある「ベクトルマスクを追加」ボタンを押してマスクをかけましょう。

次にブラシツールを選択して、ブラシパレットで硬さ50%のブラシを作ります。
大きさは「直径」と「真円率」で調整し、カンバスの4隅がはみ出る程度に設定しましょう。
描画色を白にして、これでカンバスの真ん中をクリックすれば四隅にだけ影が残ります。

これでOKです。
あとはお好みで影の不透明度を変えたり、ノイズを足したりして調整して下さい。

いかがでしたか？
使う場面は限られそうですが、フィルタの効かせ方なんかは色んな場面で応用できると思いますので是非トライしてみてください。
それでは良きクリエイターライフを。

Photoshop Tutorial: Getting that great X-PRO LOMO look

例えば下の画像。

奇麗な女性ですね。しかし右側で寝そべってるカップルが残念です。
そんな時は、なげなわツールやペンツールで消し去りたいものの周りに選択範囲を作り

「編集」メニューから「塗りつぶし」を選びます。
するとダイアログが開くので、プルダウンから「コンテンツに応じる」を選択してOKします。

するとどうでしょう。カップルが消えるばかりか、消えた場所が周りの風景に合わせてばっちり補完されちゃいました。

いやーおっかないですね。
もちろん画像によってはうまく処理できない場合もありますが、これまであの手この手を駆使してやってたことが、こんな簡単にできるようになるのは嬉しいような寂しいような…

ちなみに同様の効果をスポット修復ブラシツールでも行えます。
例えば下の画像

ツールパレットからスポット修復ブラシツールを選び、ツールオプションバーで「コンテンツに応じる」にチェックを付けます。
あとは消し去りたい物をドラッグして塗りつぶせば…

ハイ消えた！消えましたよ！
ここにベンチがあっただなんて誰がわかるでしょうか？

なんとまあすごい機能だこと。
いっそのこと僕の恥ずかしい過去も奇麗さっぱり消し去ってくれないかしら…

CS5の新機能なかでも最も実用的な機能じゃないでしょうか。
それでは良きクリエイターライフを。

HDR（High Dynamic Range）とは、通常の写真や映像で表現されるダイナミックレンジ比べてより幅広いレンジのことで、HDR写真とは有り体に言うならば「暗い部分も明るい部分も人間の目で見たように加工して合成した写真」のことです。

通常の写真や映像では、暗いところに露出を合わせれば極端に明るいところが白飛びし、明るいところに露出を合わせれば極端に暗い部分が黒潰れを起こすので、レンジの広い（露出差の激しい）写真や映像は人間の目で見るようには表現できません。
そこで露出の異なる複数のイメージを合成して、なるべく人間の目で見たように加工した写真がHDR写真です。
今回紹介する方法を使えば、通常の写真に比べて全ての部分がくっきりとした、まるでプロが撮ったようなインパクトのある写真を簡単に作ることができます。

以下、僕なりの解釈をつけてチュートリアルを見ていきます。あくまで「僕なりの」なので間違ってても怒らないで下さい。

ステップ1：中間色のレイヤーを作成する

まずは画像を準備。

これに「イメージ」＞「色調補正」＞「シャドウ・ハイライト」でシャドウ50%、ハイライト50%を適用させます。

シャドウ部分もハイライト部分も平均的に表現した中間色のレイヤーができました。この先これを元にして加工を進めていきます。

ステップ2：シャドウ部分とハイライト部分を強調する

先程の中間色レイヤーを複製し、「イメージ」＞「色調補正」＞「彩度を下げる」を適用し、白黒のレイヤーを作成します。
これを中間色レイヤーの上に配置してレイヤーの描画モードを「オーバーレイ」に設定します。

これでシャドウ部分とハイライト部分が共に強調された画像になりました。

ハイパスフィルタでよりリアルに

それでは仕上げです。
再び中間色レイヤーを複製し、最前面に配置します。
このレイヤーに「フィルタ」＞「その他」＞「ハイパス」を適用させます。
ハイパスフィルタでは適用半径をピクセルで指定することになるのですが、この数値は画像によって掛かり方が変わってきますので一概に何ピクセルがいいとは言えません。
目安としては、ピクセル数を極端に小さくするとグレー一色になりますので、そこから徐々に上げていき、被写体がうっすら色付くくらいが良いと思います。

今回僕は12.5pxに設定しましたが、お好みでいい感じの設定を見つけてみて下さい。
そしたらこのレイヤーの描画モードを「ソフトライト」にしましょう。
これで完成です。

Adobeの説明によるとハイパスフィルタは

カラーが極端に変化している部分で指定した半径内のエッジのディテールを保持し、それ以外の部分についてはエッジのディテールを抑えます。 半径に 0.1 ピクセルを指定すると、エッジのピクセルだけが保持されます。 ハイパスフィルタは、線数の少ないディテールを画像から削除して、ぼかし（ガウス）フィルタとは逆の効果を加えます。

とのこと。
ここでハイパスが使われているのはおそらく、ステップ2でシャドウ・ハイライト部分が強調されることによって埋もれてしまう「中間色のディティールのエッジ」を強調（補正）するためではないかと思われます。

といろいろ難しく考えてみましたが、要はこの手法はかなり簡単に写真をかっこよく見せることができるってことです。
手順も3ステップと簡単で実用的ですので、是非この機会にみなさんも身につけておくが吉ですよ。
それでは。

まずは背景を準備し、動かないようロックをかけます。
ちなみに今回の素材は写真素材ルームさんからお借りしました。

次にカンバス全体を覆う真っ白なレイヤーと、描きたい文字のレイヤーを準備。背景の上にセットします。
文字は黒で透過度を下げると作業がやりやすくなります。ここでは10%に設定しました。

ここからが肝です。
消しゴムツールを選択し、モードを「ブラシ」にしてぼかしの効いたソフト円タイプを選択します。流量は30%くらいがベターです。
これで文字の輪郭の外側をクリックして白いレイヤーを消していきます。

全ての文字の周りを消したら一旦テキストレイヤーを非表示にしてみましょう。なんとなく形になってきました。

あとは余計な部分を消してしまえばOKです。周りの部分は大きめの消しゴムで流量も上げて消した方が早いですが、完全には消さずにうっすらと残した方が雰囲気が出ます。お好みで調節して下さい。

少し大雑把にやってしまいましたがこれで完成です。
やってみると意外と簡単ですよ。夏に大活躍しそうなテクニックなので是非この機会にトライしてみてください。

作り方はいたって簡単です。まずは素材を準備。

反射させたい文字を複製して下側に配置。
「編集」→「変形」→「垂直方向に反転」で反射素材を作ります。

次にレイヤーパレットで反射素材のレイヤーを選択し、「レイヤーマスクを追加」ボタンを押す。
そしたらこのままの状態で（くれぐれも他のレイヤーをクリックしないように）ツールパレットからグラデーションツールを選択します。
グラデーションの設定は黒と白のグラデーション、線形を選択。
そしたら図の矢印の方向にグラデーションツールをドラッグ＆ドロップしてみましょう。

これでOKです。いい感じに透過グラデーションがかかりましたね。グラデーションツールの開始点や終了点を変えるとグラデーションの掛かり方が変わってきますのでお好みの反射具合を見つけてください。

補足説明ですが、レイヤーマスクは黒に塗った部分の透過度は0％に、白に塗った部分の透過度が100％になります。すなわち黒白のグラデーションをかけることによって透過度が0％〜100％になるということですね。もっとうっすらと反射させたいって方は黒→グレーのグラデーションを使ったり、レイヤー自体の透過度を下げることによって微調整が効きますよ。

やり方はいたって簡単。まずは素材となるテキストを準備。フォントは太目のものが相性良しです。ちなみに今回使用したのは『Stencil Std』のBold。

そしたらテキストのレイヤーを選択した状態で、レイヤーパレット下部にある『レイヤーマスクを追加』をクリック。レイヤーマスクをした状態では黒に塗った部分の透過度が0%になるという性質があります。
この性質を利用していい感じにかすれさせるんですが、ここで今回はブラシを使ってそれを再現します。
ツールパレットからブラシを選択し、ブラシパレットのプリセットから『はね』を選択します。はねの大きさは作る文字にもよりますが、今回ぐらいの大きさのテキストであれば『はね 39pixel』あたりがおすすめです。そしてツールオプションバーのところで『流量』を40％〜50％くらいに設定します。

ここで一旦確認を。

• レイヤーパレットではテキストにかけたレイヤーマスクが選択されている
• ツールパレットではブラシが選択されている（流量は40〜50％）
• 描画色が黒になっている

以上3点が大丈夫ならテキスト上をポンッと軽くクリックして叩いてみてください。クリックした部分が少しかすれましたか？ドラッグすると汚くなるので軽くですよ。

これで全体をポンポン叩いてかすれさせますが、よりかすれさせたい部分は何度も叩いて調節します。結構強弱つけちゃった方が雰囲気出ます。

これでOK。あとは配置、背景等お好きなように飾っちゃってください。うーん、やっぱりデニムとかストリート系とは相性良いですねぇ。

ファッションだけでなくスポーツや飲食なんかでもよく使われてますよね。使えるデザインの割には簡単なのでこの機会にどうぞ！

ちなみに今回デニムのテクスチャこちらから頂戴いたしました。
jeans texture 2 – Flickr

まずは雰囲気を出すための背景画像、そしてボタンを準備。背景画像には図のような縦のグラデーションをかけます。ボタンは後で色を変えるのでここでは何色でも構いません。

次にボタンに質感を加えるためにいくつかレイヤースタイルを加えます。使用するのは「ドロップシャドウ」、「光彩（内側）」、「グラデーションオーバーレイ」の3つ。各レイヤースタイルの設定は下図を参考に。

さあレイヤースタイルを一つ一つ設定していく度にボタンの質感がグングン上がり、きっとテンションの方もだいぶ上がっていることでしょう。だいぶいい感じになりましたね。

それでは今回の主役でもあるプレス文字を作ります。まずはお好きなテキストを打ち込んでください。あまりにも細すぎる字体は向いてません。ちなみにここではみんな大好きHelveticaのBoldを使用。本来iPhoneのボタンのテキスト色はもっと濃い色なんですが、今回はプレス効果をわかりやすくするために、あえてグレー（#333333）を使ってます。

さあここからが今回の山場です。あの絶妙なへこみ具合を演出するレイヤースタイルは「シャドウ（内側）」と「ドロップシャドウ」。基本的にどっちも垂直方向に、ほぼ最小値に近い設定で適用させます。詳しい設定は下図を参考に。

ドロップシャドウは白（#ffffff）をかけるのがポイントですよ。上部のシャドウは「シャドウ（内側）」で、下部のハイライトは「ドロップシャドウ」の白で作るってわけです。これでばっちりですね。いい感じのプレス文字ができましたか？

あとは複製してお好きなように配置してください。

これで完成です。
ほんの少し手を加えるだけでデザインが見違えるいい例ですね。簡単なのでみなさんもトライしてみて下さい。それでは。