写真はちょっと工夫するだけで雰囲気が変わる。
よくある加工方法として、写真をポラロイド風にするというものがある。
単なる写真を並べるよりも、こういったポラロイド風にすることによって立体感や質感が出てデザインに特徴が出る。
今回はポラロイドをさらにビンテージ風にしてみた。
思ったほどビンテージにならなかったけど、
ブラシや変形を駆使していけばもっともっとビンテージ風になるだろう。
とりあえず、それっぽく作る要点のみ解説する。

ポラロイド風の写真を作る

ポラロイド風の写真を作るのは簡単。
矩形ツールでポラロイドの下地を作る。
ビンテージ風にするのでちょっと暗い色を入れてみる。
実際のものを表現する際はできるだけグラデーションをかけたほうがいい。
現実世界では必ず光源があり完全に色が同じではないから。
そしてドロップシャドウをかけて立体感を出す。

何か好きな写真を用意する。
マスクでも切り取りでもなんでもいいからとりあえずポラロイドのベースより少し小さめの画像にして上に乗せる。
マスク処理の方法についてはここで解説している

まあ、これだけでとりあえずはポラロイド風写真ができる。
そんなに難しくは無いはず。

ポラロイド写真をビンテージ風にする

写真をそのまま持ってきてるので、このままだと写真がきれい過ぎる。
そこで、写真の彩度を落として古い感じにしよう。
色あせると彩度が落ちるので、古い感じを出したい場合はとりあえず彩度を落とせばそれなりになる。
写真のレイヤーを選択して次の画像のように「色相・彩度」を選ぶ。

これといった数値は無いので、しっくりくる感じに彩度を落とそう。

基本的にはこれでビンテージ風になったけれど、もう少し。
ブラシツールより適当に汚せそうなブラシを選択。

普通にそのまま描くと絵が描けるくらいに色が濃いので、
流量と不透明度を調整する。

そして、上から適当にわさわさ描いてみる。
なんとなく汚く見えるように描いてみる。
で、出来上がったのがこんなの

ちなみに別のブラシで汚し方を変えてみたらこんな感じ。

ブラシを変えると雰囲気も変わるのでいろんなブラシで試してみよう。
ちなみに、こういった汚れた感じのブラシは「グランジ ブラシ」とかで探せば出てくる。
汚れた感じのブラシは自然な感じを出すのに意外とよく使うので持っていたほうがいいと思う。
ビンテージ風のデザインを作るときはここも参考にして欲しい

もうちょっと遊んでみる

これだけだと寂しいので、もうちょっと遊んでみる。
ポラロイド写真を3枚ほど重ねてみた。
背景をちょっと格好良くしてみた。

もっと変形して反ってる感を出したり破れてる風な感じにしてみたりといろいろ試してみて欲しい。
ビンテージ風の写真ってどんな感じかを想像していろいろ試してみよう。

森のイメージ、海のイメージ、空のイメージ・・・・
ホームページを作る上でそのイメージを存分に発揮しているデザインというのは非常に見ていて楽しいもの。
そういったページは、そのホームページの雰囲気がとってもよく伝わってくる非常に良くできたデザインが多い。
イラストの存在はそのデザインをとても際立たせるのに役立つけれど、
普通の人はなかなかイラストを描くのは難しい。

しかし、簡単になおかつサイトデザインを向上させることができる。
それがテクスチャ、つまり壁紙ということ。
淡色で背景を作るよりもちょっとグラデーションをかけるほうが格好良い、
さらに自然素材的なテクスチャを使うことでもっともっと雰囲気をもったデザインになる。

その中で代表的なのが木目調のテクスチャ。
木目がランダムで、そう簡単には作れなさそうに感じるが、なんとたった３ステップで木目テクスチャが作れてしまう。

お好きなサイズで新規のキャンバスを開いて欲しい。
サイズは目的のサイズよりも少し大きめで作ること。
今回は縦横500pxのキャンバスで作ってみる。

STEP1:ノイズを加える

まずはステップ１。
新規画面でそのまま、上部メニューの
「フィルタ」→「ノイズ」→「ノイズを加える」をクリック

ダイアログが開くので次のような値で設定。
ノイズの数やその他パラメータは自由に決めてよい、サンプルと同じようにするなら真似してください。

STEP2:ノイズを木目調にする

次に上部メニューの
「フィルタ」→「ぼかし」→「ぼかし（移動）」をクリック

ダイアログの設定は次の通り。
適当に好きなように変更してよい。

これですでに木目のようなテクスチャになっている。

STEP3:色をつけて木目っぽくする

最後に色をつければ終わり。
色をつける場合は、レイヤーウィンドウの「カラーバランス」を使う。

パラメータは次の通り。
小学校の美術の時間に習っただろう、木は茶色なのでレッドとイエローの要素を強くする。
※茶色は赤＋黄色なので

これで完成。
たったの３ステップ簡単だったね。

上下左右の境界線がアルゴリズム上少し違和感が出てるのでその部分をカットして使えばよい。
パターン登録しておけばいろいろな場面で使うことができる。
パラメーターを変えればまた違った木目ができるし、色を調整すれば違う木の板ができる。
いろいろと工夫して使ってみよう。

写真を撮ったときに蛍光灯の下で撮った場合と白熱電球の下で撮った場合、太陽の下で撮った場合とシチュエーションは様々。
白熱電球の下で撮った場合はちょっとオレンジがかってしまったり、蛍光灯だとちょっと青っぽくなる。
どんなものでもニュートラルな色合いにできればそこからの色の補正もやりやすくなる。
理想は補正なんかしなくても、自然なままできれいな写真を撮ることだけどなかなかそうはいかない。
Photoshopで補正できるのであればそれの方が時間やコストもかからない。

今回は、超簡単に色かぶりを消す方法をやってみる。

色かぶりを直す方法はいくつかあるけれど、今回は正統派ではない（？）かもしれないが簡単なので是非覚えておきたいテクニック。

まずは画像を用意する。
食器の写真とか、本来は白である部分が含まれる画像を用意する。
下の画像、お皿の部分を見てもらえればわかるけれど、少しオレンジがかってる。
白熱電球の下とかで撮るとこんな風になってしまう。

これをパッときれいで鮮やかな白の食器にしよう。
使うのは「トーンカーブ」というもので、レイヤーウィンドウの下から設定できる。

「トーンカーブ」の設定画面の下にスポイトのマークが３つ並んでいるので、
その中の一番右のスポイトを選択する。
これは、白色点を指定するためのツールで、このスポイトで選択した点を白色としてレイヤーの色を全て補正する。
つまり、スポイトでクリックした部分が完全な白になり、それにあわせて周りの色も補正されるのだ。
本来白である部分を基準に、そこを白にしても問題ないはず。
そうすると周りが勝手にきれいに補正されるのだ、なんと便利な機能！

光沢部分は既に真っ白なのでその他の部分で本来白であろう部分を探す。
わかりやすく補正するには多少色かぶりがわかりやすいところがいい。
スポイトで指定した部分は無理矢理に白にするので、それよりも明るい場所は全て白になって色が飛んでしまう。
あまり色が濃い場所は避けよう。
今回は矢印の部分を真っ白に見える部分としてスポイトでクリック。

たった１クリックしただけで、次のような画像になる。

違いは一目瞭然。
こんな簡単に色の補正ができてしまう。
Photoshopってすごいです。
※この程度の機能ならPhotoshopに限らずレタッチソフトには実装されていると思います

今回はがんばれ日本！や日本一！みたいな時に使える（他のときにもどんどん使える！）デザイン。
みんなも良く見たことがあると思う、この日輪型のデザイン。
パスを使って自力で作っても作れる形だが、こんな作り方もあるという一例。
ぜひマスターして欲しい。

１．ベースとなるストライプパターンを作る

まずはストライプパターンを作る。
適当な大きさ（今回は60×100）で新しいキャンバスを作って、その上に黒と白のシェイプを並べる。

こんな感じで作れたら、レイヤーウィンドウで全てのレイヤーを結合[Ctrl+E]して画像化してしまう。
※画像化しないとこのあとのパターン定義が出来ない

次に出来た画像を選択[Ctrl+A]して、その状態で「パターンの定義」を行う。

これで、まずはこのストライプのパターンが完成。

２．パターンを変形して日輪型にする

次に新しいキャンバスを開く（1000×500くらい）。
さっき作ったストライプパターンで画面を塗りつぶす。

次にメニューより[変形 - 極座標]を選択。

できた画像はモノトーンなので、カラーオーバーレイを使って赤色にでもしてやる。

こんなに簡単に作れちゃう

３．いろいろ飾ってみる

例のごとくいろいろ飾ってみる。
太陽から明かりが差しているようにするためにまん中に太陽を描く。
円形シェイプを使うだけ。

この上に矩形シェイプにグラデーションをかけたもの（海）と「がんばれ日本！」の文字を入れる。
難しくないはず。
バランスのいい部分で切り取って完成。

色鮮やかな日の出の太陽、どうでしょうか。

今回はグラス風のボールボタン。
やることはスクエア風とほぼ同じ、そんなに難しくない。

これだけ覚えておけば大丈夫。Web2.0風のボタンを作る方法。  Web2.0風の輝くボタン

１．レイヤー効果でガラス風にする

ガラス風にするには２つの光を考える。
一つは直接ガラスの表面に当たる光。
もう一つはガラスを通って床に反射する光。
この２つの光を入れるとそれっぽくなる。

まずは表面の光。
これはベベル効果を使えば簡単。

次にガラスを通って床に反射する光。
これはガラス玉の下側を光らせるようにすると良い。
ちなみにこの光は「オーバーレイ」を使って表現するときれいなことが多い。

床に届く光というのは光を通す部分が薄いほど多くの光が反射する。
なので厚みの部分のいわゆる玉の縁の部分は光が届きにくいので暗くなる。
それを「光彩-内側」で表現する。

立体感をつけるためにドロップシャドウをつけて出来上がり。

個人的にもっと輝いてる感を出したかったので上にブラシで光ってる部分を付け足した。

簡単にガラス玉が作れた。
これはいろんな形で応用できるので、いろいろ挑戦してみよう。

今回はメタル風のフレームを使った覗き窓
覗き窓風にしたのは格好良くするためで、ココで学ぶのは次のようなメタル風のフレームを作る方法。
簡単だと思うので、レパートリーとして覚えておくと良い

１．フレームのベースを作る

まずはフレームのベースを作る。
これができたらほぼ完成みたいなもん。

このように２つの円を作る。
※わかりやすいように色を変えている
この円の作り方は今まで何度かやっているので割愛。
楕円ツールの組み合わせで作れる

２．グラデーションでメタル風に

それぞれの円にグラデーションをかける。
外の円は下を暗く、上を明るく。
内側の円は下を明るく、上を暗くする。
たったこれだけでメタル風のフレームになる。

３．アレンジ

あとはアレンジするだけ。
まずは内側にかっこいい画像を入れる。
何でもいいけれど、なんとなく船から外を見てる感を出したかったので海の写真。
飛行機の中からとかなら空の写真もいいかもしれない。
まあ、なんでもいいのだ。
ついでに立体感を出すためにドロップシャドウをつけてみた。

テクスチャがあれば貼り付ければ雰囲気が出る。
シーンが思い浮かぶようなデザインになると最高だ。

もっともっとアレンジしてかっこいいものを作って欲しい。

今回はちょっと面倒かもしれない
以前作ったネタを思い出したので今回紹介してみる
今回は、平面の画像を組み合わせて立体のリングを作るためのチュートリアル。
使うのはワープ機能であとはごにゃごにゃやるくらい。
関連：変幻自在！ワープ機能

ちょっとした種明かしもあるのでお楽しみに。

１．チュートリアル概要

タイトル画像に使った素材は最後に格好良く飾っただけで、
実際には次のようなシンプルな３Dリング

このリング、実は２つの部分に分かれる。
ココが種明かし

つまり、この２つの画像を作るとよいのがわかる。
その時に使うのがワープ機能なのだ

２．下書き

さて、リングの元となる２つの画像を作るけれどいきなりワープ機能を使って画像をごにょごにょするのは
いびつな形になって綺麗にできない原因。
とりあえず形を先に決めるためにパスを使って簡単にアウトラインを考える。
こんな感じ。

まずは左側から

いきなりパスで書くのは難しいので、
まずはこうやって楕円を組み合わせてくり抜けば綺麗なのができる。
同じように反対側も作ってみよう。

反対側はこのように３つの図形を組み合わせて作る。
これら２つをそのままでは多少違和感があるので「パス選択ツール」を使ってうまく形を調整しよう。
※このあたりはセンスとか慣れが必要

組み合わせると次のような画像が完成

３．ワープ機能で画像をラップする

あとはワープ機能を使って画像を貼り付けるだけ。
今回使用した画像はここからダウンロードできる
白いボタン背景のアドビアイコンセット

さて、これらをまずはリボン状に縦に並べよう。

これを１枚のレイヤーにまとめて１つの画像にしてしまう。
するとワープ機能が使えるようになる。
関連：変幻自在！ワープ機能

すでに下書きで形は決定してるので、慎重に画像を変形させていくだけ。

うまく重なっただろうか。
また、リングの反対側はリボンの向きに注意しよう。
反対側は上から下に向かってリボンを貼っていく。

このように綺麗にできただろうか。

さて、うまくワープで重ねることが出来たら立体感を出すためにそれぞれの画像にグラデーションをかけてやろう。
手前の画像は下が陰になる。奥の画像は上部が陰になる。
するとサンプルのような画像になる。

これで３Dリングの完成

４．仕上げ

せっかくなのでそれっぽく仕上げる。

・背景をグラデーションさせる。
・サイドにリボンを添える
・リングの間に星を散らばせる

とりあえずこれで綺麗なデザインにしてみた。

以上、今回はリングだけれどこだわればいろんな形のものが作れる。
今回のチュートリアルをベースにいろんなものを作ってみよう。

ちょっと仕事でボタンを作らないといけなかったので、せっかくなのでここで作り方も公開する。
今回、特に新しいテクニックがあるわけではないが、
これらのボタンは簡単に作れるし、そこからバリエーションを増やせば簡単にカッコいいものがたくさん作れる。
今回大切なのはこれらのボタンの形をどうやって作るか。
シェイプの使い方がわかっていれば簡単。

１．ボタンの枠を作る

まずはボタンの形を作る。
全てに共通するのは枠なので、とりあえず枠の作り方。
枠の作り方はシェイプの組み合わせが扱えれば問題ない。
この枠は円の大小のシェイプを２つ重ねている。
ここは後で応用が効く基本部分なので少しだけ詳細に説明する。

次に同じレイヤーに小さめの円を作る。
円を作るときに目的のレイヤーを選択して[Shift]を押しながらシェイプを描く。
このとき、カーソルに[+]マークがつくのがわかると思う。

これが１つのレイヤーに２つのレイヤーが重なった状態。
さて、このままではだめなので、それぞれの円を選んで整列させよう。
その後に、まん中の円をくり抜くために重なっている部分をくり抜く。
２つの円を選択状態で下のアイコンを選べばよい。
※ちょっと説明をはしょってるのでわからない人はコメント欄とかに書き込んでください

じゃあ、下のようになったはず。

２．ボタンのベースを作る

とりあえず重要な部分は終わったのでここからは一気に。
順番はどうでもいいが、
ボタンのベースを作るのにまずは背景を入れる。
色をつけた円を枠のレイヤーの下にもぐりこませるだけ。

次にまん中の記号を作る。
何でもいいが、例えば今回はバッテン。
バッテンは長方形の組み合わせで作る。
※日本語フォントであれば[×]を拡大しても良い。
とりあえずできればなんでもよいのだ。

ベースが出来たので、背景をグラデーション
・グラデーションを[オーバーレイ]でかけてみた

外枠をメタルチックにするだけ
・外枠をグラデーションを使ってメタル風に
・ベベルをかけて少し盛り上がってる感じに

これだけで十分カッコいいボタンが作れた。

３．バリエーション

まん中の記号を変えたり、背景の色を変えるだけで様々なバリエーションが出来る。

他にも中央のロゴだけ金色にするとか
※作ってみたはいいものの、あんまりかっこよくなかった・・・

とにかく、こんな感じでなんぼでもバリエーションを作れるので、
PSDファイルとかで残しておくと便利だと思う。

WEB素材MaterialandExでアイコンを配布したのでよかったらどうぞ
かっこいいメタリックボタンアイコン

今回も前回とよく似た光沢のあるボタンを作ってみる。
今回はボタンを作るのがメインではなく、光沢感を出すためのグラデーションの一つとしていつでも使えるようになってもらうのが目的。
ではどうぞ。。

１．ベースボタンを作る

説明するまでも無いがまずはボタンを作る。
矩形シェイプにドロップシャドウをかける。
色は今回は何でもよい。

２．光沢感を入れる

次にボタンに効果をつける。
ここが今回のメイン。
グラデーション効果を入れる。
Web2.0風ボタンのときに説明したけれど、
光沢感を出すには反射している感じを出すためにグラデーションの段階を途中で大きく変える。
説明しにくいのこんな感じ。

でもって、ボタンはこんな感じになる。

これだけでも光沢感があるけれど、今回はもう一手間加えよう。
直接当たる光のほかに反射してくる光の影響も考えるとちょっとリアルになる。
どういうことかというと、今回は上から光が当たっているので床からの反射を考えて反対側にちょっとだけ光を入れる。
こんな感じ。

で、それを反映したボタンがこれ。
わかりやすいように、並べてみた。

少しの違いだけれど大きな違い。
こういった微妙な部分が決定的な差になるのでぜひ身に着けよう。

３．おまけ

今回はいろんな色でグラデーションを作ってみた。
それがタイトルの画像。
さらに、それをグラデーションファイルとして保存したのでよかったらダウンロードして使ってください。

ここから「.grd」ファイルをダウンロードできます

MaterialandExでボタンも配布しているのでよかったらどうぞ

いわゆるWeb2.0風って言われるようなボタンなどの素材。
既にいろんなところで頻出だけれども、これを知ってるだけで簡単にかっこいいデザインが出来るのでぜひ覚えておこう。

１．ボタンを作る

まずは何でもいいのでシェイプでボタンを作る。
べベルをかけたりしてちょっと立体感を出しておこう。

こんな感じで。あとグラデーションをかけておこう。
※グラデーションはあまりわかりやすく多用すると全体がでこぼこして見えてよくないが、
現実世界では必ず光の加減があるのでかすかなグラデーションをかけておくことは非常に大切。

２．光沢をつける

Web2.0風というのはいわゆる光沢があるようなボタンのこと。
光沢があるというのはある部分に光の反射が起こるので、特に白く輝かせる。
本当はいろいろなものを映りこませることでリアルに出来るが、そんなことをする必要はなく、
ちょっと左上に白くグラデーションをかけるだけでよい。
とりあえず、グラデーションをかけるように次のように楕円の領域を作る。

わかりやすいように色をつけている。
光の反射をあらわすときは重ね合わせのモードはスクリーンを使う。
また、あまり白すぎてもウソっぽいのでグラデーションをかけて加減する。
楕円の部分をグラデーションツールで色を塗るだけ。

こんな感じ。
実はこれだけでボタン部分だけ見るとWeb2.0風になっている。
あとはマスクをかけて余分な部分を取り除くだけ。

ボタンの枠を選択範囲にしたいときは、ボタンのレイヤーをCTRLを押しながら左クリック。
その領域を使ってマスクをかけるだけ。

たったこれだけで、光沢のあるボタンの出来上がり。
カンタン、カンタン！これをいろいろなものに使えばどんなものでも光り輝くボタンになる。

３．おまけ

いろんな形でやってみた。

なんでもかんでも光沢のあるものになる。
写真でもキャラクターでもなんでもいいのでとりあえずこのやり方をすればWeb2.0風になる。

タイトルに使ってるボタンはMaterialandExに登録した。
こういうかっこいいボタンも、作るのはそんなに難しくないのがわかったね。