Photoshopでボタンを作成

字幕

このレッスンでは Photoshop を使った ボタンの作成について解説します では Photoshop に切り替えます Photoshop になりました このレッスンの素材の中に ３つの psd ファイルがあります Photoshop のファイルがあります Facebook ボタンと Tweet ボタン そして Google+ のボタンの３つです ３つとも実は レイヤーが２枚ずつあります この Facebook も青いのと レイヤーの上を見えなくすると この灰色のものです こちらの Twitter も同じく グレーと色 Google+ も赤とグレーです こういった素材が あらかじめ準備してあります これらを保存しておきます では Muse の方に Photoshop ボタンを読み込みます マスターページで 「ファイル」メニューから 「 Photoshop ボタンを配置」が あるので 実行します そうすると さっきのボタンたちの 画像を開けるので 例えば「 facebookbtn.psd 」を開くと こんなのが出てきます 「標準ステート」「ロールオーバーステート」 「マウスダウンステート」 「アクティブステート」の４種類あります これはメニュー内のどういった状態の時に どの画像を使うかというものです では 「標準」だけ「 over 」を使って あとは「 normal 」にしておきましょう そうするとボタンが置けるので どこかに配置します では この状態でプレビューしてみると マウスを重ねると色が変わるようになりました では 全く同じやり方で 「ファイル」の 「 Photoshop ボタンを配置」 今度は Google+ です また 「標準」だけ 赤くなるようにして 他はグレーにします では 近くに置いて 整列させておきましょう そうしたら また 「 Photoshop ボタンを配置」で 今度は Twitter です これも同じく「標準」には青いものです その他はグレーにしておきましょう これでできました そうしたら この状態で もうこちらのページには並んでいます これをプレビューしてみると それぞれがこの様に反応します この様に Photoshop ファイルと 連動で 簡単にボタンを作れるので 是非とも試してみてください