デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

ガーリー系のWebデザインに使える!縫い目が可愛い”ステッチ風ボタン”の作り方


ステッチ風ボタンの作り方

こんにちは、おぎしおです!今日は『WEBデザインの基本はボタンデザインから! ~ちょっとおしゃれなボタンを作ってみよう~』というタイトルで、基本のボタンの作り方をお伝えいたしましたが、今回はちょっと個性的なボタンの作り方をお伝えしてみようと思います。

女性ファッションを扱うサイトなど「デザインを可愛らしく、柔らかい雰囲気にしたい」という場合、デザインにステッチ(刺繍)風の柄を入れていることがあります。今回は女性向けサイトにぴったりの「縫い目が可愛い”ステッチ風ボタン”」の作り方をレクチャーしていきたいと思います。

”ステッチ風ボタン”のデザインの作り方

1,土台となるボタンを作る

まずは土台となるボタンから作っていきましょう。

537_0001

角丸長方形ツールを選択します。任意でボタンのサイズを入力したら、シェイプの名前を「base_btn」と命名します。
【今回土台のサイズは下記の通り設定しました】
幅:400px、高さ:90px、半径:4px

537_0002

「base_btn」にスタイルを設定していきます。
スタイル:べベル(内側)、テクニック:滑らかに、サイズ:3px、ハイライト:不透明度0%、シャドウのモード:乗算(#cc0000)
ボタンの色より少し濃いめの色で乗算をかけていきます。

537_0003

グラデーションを設定します。
描画モード:通常、角度:-90度
透明度の設定:位置0%/不透明度100% 、位置100%/不透明度100%
カラーの設定:位置0%/カラー#ff7576 、位置50%/カラー#ffa2a3 、位置100%/カラー#ff7576

537_0004

最後にドロップシャドウを設定します。
描画モード:乗算、カラー:#666666、距離:1px、サイズ:6px

537_0005

こんなシェイプができあがりました!

2,ボタンにテクスチャを乗せる

次にボタンにテクスチャを乗せていきます。今回はテクスチャを自分で作ってみましょう

537_0006

まずは新規レイヤーを作成します。「base_btn」の上に新規レイヤーを作成し「base_btn_texter」と命名します。
塗りつぶしツールを選択、レイヤー一面を「#cccccc」で塗りつぶします。

537_0007

「#cccccc」で塗りつぶしたレイヤーにノイズを加えていきます。
メニューバーから「フィルター」→「ノイズ」→「ノイズを加える」を選択します。
量:5% で設定します。均等に分布にチェックがついていることを確認したら「OK」をクリックします。

537_0008

最後にレイヤーを土台に反映させていきたいと思います。
「base_btn_texter」レイヤーを選択したら、レイヤーのモードを「焼き込みカラー」に変更します。土台のレイヤーに“ざらっ”とした質感がプラスされます!布の繊維をイメージし、表面に凹凸をつけています。

3,ステッチを入れる

次のステップでは、ボタンの淵にステッチを入れていきます。今回は「ブラシツールを使い、パスを引き、その境界線をブラシで描いていく」という方法でステッチを表現していきたいと思います。

537_0009

まずはステッチを入れる場所を決めていきたいと思います。
「base_btn」をコピーし「base_btn_texter」の上に配置し「line_texter」と名前を変更します。「line_texter」のパスを「base_btn_texter」よりも一回り小さくします。
パス選択ツールを使ってパスの辺をつかみ、内側に7pxほど寄せていきます。四つの辺すべてを内側に寄せたら「line_texter」を右クリック→「レイヤースタイルを消去」をクリックします。
最後に「line_texter」の塗りを「0%」に設定したら、一旦設定は完了です。

537_0010

次に「line_texter」のシェイプパスから新規のパスを作成していきます。イメージとしては“チェコペンでラインを引いていく”ようなイメージですね!
「line_texter」のレイヤーを選択した状態で「パス」パネルを表示します。(パスパネルが表示されていない場合は「メニューバー」→「ウィンドウ」→「パス」をクリックし表示させます)
「line_texter シェイプパス」と書かれているパスを複製します。「line_texter シェイプパスのコピー」という名前のパスが出来上がりました。これでパスの設定は一旦完了です。

537_0011

次にステッチを引くためのレイヤーを準備します。先ほどの「line_texter」レイヤーはシェイプレイヤーなので、それとは別のレイヤーが必要になってくるのです。レイヤーパネルに戻ったら、新規レイヤーを作成し「LINE」と命名します。

537_0011_2

ではさっそくステッチを描くためのブラシ設定を行っていきましょう!
ツールボックスで「ブラシツール」を選択した状態で「ブラシパネル」を開きます。(ブラシパネルが開いていない場合は「メニューバー」→「ウィンドウ」→「ブラシ」をクリックし表示させます)。

537_0012

「ブラシ先端のシェイプ」を選択し、上の図のように設定します。
直径:7px、真円率:25%、間隔600%

537_0013

「シェイプ」を選択し、上の図のように設定します。角度のジッター:進行方向
これでステッチを入れるための設定は全て完了しました。

537_0014

いよいよ「LINE」レイヤーにステッチを入れていきます。
『レイヤーパネル』で「LINE」レイヤーを選択します。
ツールボックスで描画色のカラーピッカーが「#ffffff」になっていることを確認したら、『パスパネル』で「line_texter シェイプパスのコピー」を選択し、右クリック→境界線を描くをクリックします。

537_0015

上の図のようなメッセージボックスが表示されますので、「ツール」の横のプルダウンから「ブラシ」を選択したら「OK」を押します。

537_0016

ステッチのラインが引けました。完成まであと一歩です!

3,ステッチがボタンの土台に食い込むように陰影をつける

いよいよ仕上げの段階です!「base_btn_texter」にレイヤースタイルを追加していきたいと思います。

537_0017

「base_btn_texter」を右クリックし、光彩(内側)にスタイルを設定していきます。
描画モード:乗算、カラー:#ff8787、チョーク:5%、サイズ:10px

537_0018

光彩(外側)にスタイルを設定していきます。
描画モード:乗算、カラー:#ff8787、チョーク:5%、サイズ:5px
光彩(内側)よりサイズを少し小さめにするのがポイントです。

537_0019

最後にボタンの上にテキストを乗せていきます。
テキストのレイヤースタイルには、ボタンと同系色のカラーでドロップシャドウを入れるとなじみがよくなります。

537_0020

完成です!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着