photoshopだけでレザーの質感たっぷりのボタンを作るチュートリアル

今回はこのようなレザー質感のボタンを作ってみたいと思います。
効果を使用する際、色々な数値がでてきますがその通りにされなくても結構です。
自分の作りたいサイズによってサイズの数値は変わってきますし、見た通りにならない場合があります。ただ、比率の参考にはなると思います。
最終的にはご自分の目でバランスを調整していくのが一番いいと思います。

STEP1 型となるベースを作る
新規作成をします。サイズは自分の配置したい場所に合わせて
作成していただいて結構です。 

 

新規作成したらまず、シェイプ生成ツールの中の角丸長方形ツールを

選択し、角丸の四角を描きます。

右上に角丸の丸みを入力するボックスがあります。
今回は40pxにしてみました。

STEP2 レザー質感を作る

レザーテクスチャを入手し、作業中のファイルにドラッグします。

レイヤーパレットでSTEP1で作成した角丸をCommand（windowsだとCtrl）をクリック
して選択範囲を作ります。そしてレザーのレイヤーを選択した状態で下の画像の赤丸の部分をクリックし、レイヤーマスクを作成します。
すると、下の画像のように右側にマスクが表示されます。

次にレザーのレイヤーにメニューバーの「レイヤー」＞「レイヤースタイル」＞光彩（内側）を選択し、下のように設定します。

ここはお好みでいいのですが、今回はまわりをしめるため
1pxのグレーで境界線を適用してみました。

STEP3 縫い目を作る
角丸で選択範囲を作り、メニューバー「選択範囲」＞「選択範囲を変更」＞「縮小」
を選択し、5pxに設定しました。

次に今作成した選択範囲でパスを作ります。
「パス」のパレットにいき、下のパス選択範囲からパスを作成をクリックします。
注：選択範囲からパスを作成するとギザギザになります。
　  ペンツールで作成した方が綺麗なブラシが描けます。（参考まで）
　  今回はギザギザが逆に糸のほつれっぽくていいかなと思い、そのまま進行しました。

パスを作成したら、ツールボックスのブラシを選択し、ブラシの設定を行います。
固さ100%を選び、間隔と真円率を下のような感じに設定します。
真円率は図形の丸をドラッグして調節することも可能です。

シェイプを選択し、角度のジッターを「進行方向」に合わせます。
これをすることでパスにそったブラシを描く事ができます。

そして、新規レイヤーをレザーテクスチャの上に作成し、パスパレットに戻り、
右上のオプションボタンから「パスの境界線を描く」を選択するとさきほど設定されたブラシが下図のようにパスに沿って新規作成されます。

あとはレイヤースタイル適用します。今回は白のブラシで描いた後、縫い目が目立ちすぎるのが気になったため、「カラーオーバーレイ」でグレーに設定しました。他には「ドロップシャドウ」 を適用しています。今回はしていませんが、これに「ベベルとエンボス」を適用してあげると作るサイズによってはより立体感を演出できます。今回は適用してもあまり変化がわかりずらかったため、適用していません。

完成！！
最後にボタンにドロップシャドウを適用し、立体感をだしました。あとはテキストをいれてボタンとして完成です。テキストにもドロップシャドウをかけることを忘れずに！！

自分が実際参考書などを片手につくっていた時わかりずらかったりしたことがあったので、なるべくわかりやすく書いていこうと思っています。
初めてこういう記事を書いてその伝える難しさを痛感しています。わかりずらい点などあるかもしれませんが、お気軽に声かけてください。他にも色々やり方もありますし、もっと綺麗にできる方法もあると思います。
普段からこういう記事を書く事を前提でやっていくと文字にすることを考えるので自分の理解力も深まり、技術向上に繋がるのではないかと感じました。
最後までおつきあいいただきありがとうございます。