WEBデザイナーのソコです！
PHOTOSHOPで自然なひび割れの表現の作り方/壁・ガラスを紹介します！
今回用いる手法はフリーハンドでひび割れ表現を作るので、自然でわざとらしさがなく、自由なひび割れを作る事ができます！
それでは早速解説をしていきます！
注：当記事のレベル感は主に３カ月程度のWEBデザインスクール卒業した方に向けたHOW TOをお伝えしています。完全な初学者については、今後、初心者向けノウハウ記事や個別レクチャーを開設予定です！
目次
ひび割れ表現の解説と必要なフォトショスキル
まずは完成形を載せますね！
こんな感じのひび割れをつくっていきます。（完成図は多少ひびの形が異なります）
ちなみに今回のひび割れの表現を作るにあたっての流れとphotosopに必要な操作を先に挙げてみます。
流れは以下
- 壁紙を配置
- その下のレイヤーに割れの下地となるテクスチャを配置
- 壁紙にレイヤーマスクを駆使して割れ目を作る
という感じです。
必要な操作やテクニックは
- レイヤーマスク
- ペンツールとブラシツール（一方だけでも可能）
- レイヤースタイルのドロップシャドウ、光彩
- フィルターギャラリーのテクスチャライザ
という感じです！
では行ってみましょう！
まずは下準備
まずは黒い壁紙を用意しましょう。
壁紙は自分で用意してもOKですし、作例と同じ壁紙を使いたい時は下記から無料でDLできます。
https://www.photo-ac.com/main/detail/32097521?title=黒い壁
そしてフォトショに投げ込みます、えいっ
下地を用意
そして次にひび割れの後ろにくる下地を作ります。
- 壁紙レイヤーは一旦非表示
- 新規レイヤーを作成
- カラーコード#333333で塗りつぶす
- 作成したレイヤーを右クリック「スマートオブジェクトに変換」する
次に下地をざらざらした質感にします。
- メニュー「フィルター」から「フィルターギャラリー」を選択
- 「テクスチャライザー」を選択
- 設定が上記の画像を参照ください。
下地が準備できたら壁紙を再度表示します。
ひび割れを作ります
下ごしらえができたら、いよいよひび割れを作っていきます。
やり方はレイヤーマスクを使い、画像の一部を黒で塗りつぶしていく方法でひびを作っていきます。
ここでは２通りのやり方をお伝えしますね！
というわけで、まずは壁紙のレイヤーにレイヤーマスクを設定します。
パターン1:ペンツールを使ってひびを作る
1つ目はペンツールを使ってひびを書く方法です。
やり方は以下
ペンツールでとった形をパスウィンドウで選択範囲に変換します。
次に選択範囲の部分をレイヤーマスクで塗りつぶすとパスの形に画像が削れてひびっぽい形ができます。
しかしこれだけだとまだひびっぽくないですよね。
なので、ここで壁紙にレイヤースタイル「光彩(外側)」を追加します。
設定は画像を参考にしてください。
また、コツが掴めたら任意で最適な見え方に調整OKです！
一気にひびっぽくなりました！
パターン2:ブラシツールを使ってひびを作る
２つ目はブラシツールを使ってフリーハンドで日々を作っていきます。
まずは塗りの色を「#000000：黒」の「#ffffff：白」に設定して、ブラシツールを選択。
レイヤーマスクが選択された状態で、太めの黒のブラシで線を書きます。
ベースの線を書いたら、次にブラシの色を白にして、太さも少し細く設定。
先ほど書いた線を反転した白の色で先ほど黒で塗りつぶしたレイヤーマスクを今度は白で再度消していきます。
先ほど黒では一本線を描きましたが、今度は輪郭をギザギザさせるように消します。
自然な形のひびになりました！
動画でも置いておきますね！
仕上げとまとめ
以上の手法で作ったひび割れを増やしていって文字をいれて完成です！
今回は割れ感に合わせてかすれた文字を入れてみました！
いかがでしょうか。
この手法は画一的にならない自然な雰囲気のひびわれを作れるだけではなく、自分でひび割れの場所も自由に入れられる事で、文字の入れ位置やデザインのレイアウトもしやすくなります！
フリーハンドで描く方法も、初めての人は少し慣れが必要ですが、コツを掴めば表現の幅がぐっと広がりますので是非試してみてください！
それではまた！
