FHW BLOG仮

アイコンやタイトル周りの飾りに使えます。
上の小さいハートが透過しているので
背景に柄や写真があるとより効果的！
PSDを配布しているので、
ご自分で好きなカラーバリエーションでどうぞ。

STEP1:キラキラをつくる
【ポイント】鋭角に作るときれいにみえます。
イラストレーターで作ります。

1.イラストレーターを立ち上げて、新規でファイルを開く。
　線をなし、塗りを黒で設定。
　続いて、
　スターツールを選んでクリック。

　大きさを設定してOKボタンをします。
　設定数値は任意です。いい感じのところを見つけてください。
（画像の数値を参考に）

2.完成。

　こんな感じのが出来ます。
適当な名前で保存しておきます。


STEP2:でかいハートを作る
【ポイント】WEBで使いたいので、ココから先はフォトショップで作っていきます。
色合いの変更も楽だと思います。

1.フォトショップを立ち上げて、新規でファイルを開く。
　とりあえず100px ×100pxぐらいがお手頃サイズ。

2.カスタムシェイプツールで♥を選択。
　適当な大きさで描き、角度を-10に設定。






3.2のレイヤーにレイヤースタイルをかける。
【ポイント】光彩（内側）を濃いめの色で焼き込むと、
ぼんやり光るハートも輪郭がはっきりします。

●光彩（外側）

描画モード 乗算／#ff8de5／不透明度44％／サイズ6px


●光彩（内側）

描画モード 焼き込みカラー／ #ff8de5／不透明度44％／チョーク3%／サイズ9px


●グラデーションオーバレイ

描画モード 通常／不透明度100／角度90


●グラデーションエディタを開き、　#ff6998　から #ffa2dd　までのグラデーションを設定


4.完成。





STEP3:ちっこいハートを作る
【ポイント】透けるハートを重ねて透明感を出します

1.STEP2で作ったレイヤーをコピーして、55％縮小して左斜め上に配置。
   塗りを白に変更、レイヤースタイルを消去。 　 レイヤーを乗算に設定。






2.1のレイヤーにレイヤースタイルをかける。

●光彩（外側）

描画モード 乗算／#ff8de5／不透明度44％／サイズ6px


●光彩（内側）

描画モード スクリーン／#ffffff／不透明度79％／チョーク3%／サイズ9px


●グラデーションオーバレイ

描画モード 通常／不透明度100／角度90


●グラデーションエディタを開き、　#ffffff　から #ffffff  までのグラデーションを設定。
スライダの一方を位置20％に設定。



●不透明度の分岐点スライダを設定。

不透明度100％／位置　0％ と 不透明度80％／位置100％


　3.完成。

※フォトショップは閉じません。


STEP4:ハートにキラキラを合体させる
1.STEP1で作ったファイルをイラレで開き、オブジェクトをコピー。
　　　フォトショップに切り替えてシェイプレーヤーにチェックしてペースト。



2.レイヤースタイルをかけて発光させます。
●光彩（外側）

描画モード  スクリーン／＃ffffff／不透明度100％／サイズ10px／輪郭 二重リング


3.2〜3個コピーしてサイズをそれぞれ適当に変更して配置。


4.完成。




これを適当な背景画像の上に置くと効果的。
使用例↓

　　　　　　

PSDダウンロードはこちら！

ゆるい感じのボタンを作りました。
誰でも出来る簡単なボタンです。
クライアントには不評でしたが、
せっかくなので...みてみて！

↓↓↓こんなの↓↓↓


STEP1:枠を作る
【ポイント】アホっぽい感じを出す為に、枠線は細く、歪ませませる為にイラストレーターで作ります。


1.イラストレーターを立ち上げて、新規でA4サイズでファイルを開く。
　続いて、73px ×25px の角丸枠を描く。（　ボタンの大きさは任意で。）

2.角丸枠の塗りを#FFFFFF、線を#B2B2B2、線の太さを0.5pxに設定。
↓↓↓こんなの↓↓↓


3.線にゆがみをかけます。
　角丸枠を選択し、効果→パスの変形→ジグザグを選択。
　大きさ：0.23px   折り返し：21　ポイント：滑らかに


　設定数値は任意です。いい感じのところを見つけてください。


4.枠完成。
↓↓↓こんなの↓↓↓

＊イラレは閉じちゃダメです。



STEP2:ボタンを作る
【ポイント】WEBで使いたいので、ココから先はフォトショップで作っていきます。
色合いの変更も楽だと思います。


1.フォトショップを立ち上げて、新規でファイルを開く。
  　とりあえず100px ×100pxぐらいがお手頃サイズ。

2.STEP1のイラストレーターに戻り、作った角丸枠をコピー。
　  今度はフォトショップに戻り、ペーストします。
　  このときスマートオブジェクトを選択。

↓↓↓こんな感じ↓↓↓




3.ボタンの文字「もっと見る」を打ち込んでいきます。
　FOT-スーラ Pro　　10px 
　カーニングをオプティカル
 文字のトラッキングを30に設定

 書体、大きさは好きなものでOK。

↓↓↓こんな感じ↓↓↓



4.ボタンだとわかるように三角もつけてみます。
 　 シェイプツールで●を選択。9px ×9pxの丸を作成。
   塗りを＃FF8A00にします。

5.カスタムシェイプツールに持ち替えて、▲を選択。
　  塗りを#FFFFFFに設定、4の○の中に3px 3pxの三角を描く。

↓↓↓結果、こんな感じ↓↓↓



6.ぼたんに色を付ける
　  角丸長方形のシェイプルールに持ち替えて、丸み30で73px ×25pxのオブジェクトを作成。
   レイヤースタイルを開く。
   透けた感じにしたいので、描画モードを乗算。
   グラデーションオーバーレイで＃000000から＃FFFFFF のグラデーションを設定。
   このままだと   濃いので不透明度を10%に設定。
   （グラデーションのカラーや、不透明度は好きな濃さでどうぞ。）





7.　6で作った角丸長方形を右2px、下2pxずらす。

で、完成。




STEP3:マウスオーバーをつくる

1.STEP1.2で作ったモノを複製。

2.STEP2-6で作った(グラデーションの設定をした)オブジェクトのレイヤースタイルを開く。

3.透けた感じにしたいので、描画モードを乗算。
グラデーションオーバーレイで＃FF9000から＃FFAE00のグラデーションを設定。このままだと濃いので不透明度を20%に設定。（グラデーションのカラーや、不透明度は好きな濃さでどうぞ。）



4.6で作った角丸長方形を右2px、下2pxずらす。

完成。



これをHTMLでマウスOVER/OFFの設定するとゆるい感じのボタンになります。
フォトショップのスタイルを使えばカラーバリエーションも自在です。

PSDも配布しています。

こちらからどうぞ。