mayy

Blog

Photoshopのカスタムシェイプで手描き風ボタンを作る

カテゴリー
チュートリアル
タグ
,
Photoshopのカスタムシェイプで手描き風ボタンを作る

手描き風のデザインで使える質感のあるボタンを簡単に作る方法。もちろん手描きするのもありですが、あとでサイズ調整できるようカスタムシェイプを使ってみました。簡単に1分くらいでできます。

ボタンのベースを作る

まずはボタンのベース作りです。
カスタムシェイプ(ショートカット:U)で適当な大きさの形を作ります。
分かりづらくなったのですが、白の部分がキャンパスで茶色の部分がボタンです。

ボタンのベース

次にレイヤースタイルをあてていきます。
まずはテクスチャ。今回はぽよしさん(@poyosi)がブログで配布しているテクスチャ素材を利用させていただきました。
Webデザインで使えるフリーシームレステクスチャ100枚 | poyosicom

レイヤースタイルのパターンオーバーレイを以下のように設定

パターンオーバーレイ設定

これだけだとまだ外枠が直線でぱきっとしているので外枠を手描き風に調整します。
レイヤースタイルの光彩(内側)を以下のように設定。

光彩(内側)の設定

これでだいぶ手描きっぽくなりました。
画像では描画モード「通常」になっていますが、「ソフトライト」にすると背景に色がついている場合もうまく馴染みます。

ボタンベースレイヤースタイル設定後

テクスチャを重ねて質感をあげる

これだけでもだいぶぽくなったのですが、さらにこの上にテクスチャを重ねます。
まずこのボタンの上に1枚レイヤーを追加、暗い色で塗りつぶします。(サンプルでは#000000)
次にフィルタ→描画→雲模様でフィルタをかけ、フィルタ→ピクセレート→水晶でさらに模様を変形。水晶はセルの大きさ「10」にしていますが、好みで変えてください。

フィルタ水晶の設定

下の画像のような模様ができます。

自作テクスチャ

仕上げ

このテクスチャをボタンとグルーピング。
オーバーレイ、不透明度50%にし、文字を適当に入れて完成!

完成

ボタンの形を変えたり、わざと外枠を歪ませたりするともっと良い感じになると思います。
ボタンという表現をしましたが、バナーの質感をプラスしたりラベルで使うなど色々用途があると思うので是非試してみてください。

最近見つけたWebデザイナーになりたい方向けのおすすめサイトです。
Webデザイナーに就職・転職相談所

カテゴリー

タグクラウド