忍者ブログ
音楽制作、Webデザイン(HTML,CSS,JavaScript)、プログラミング(Java,C,PHP)、日常の話題を集める「情報ターミナル」
ブログ内検索
アンケート実施中です
Creative Commons
クリエイティブ・コモンズ・ライセンス
当ブログのすべての コンテンツは クリエイティブ・コモンズ 表示 - 非営利 - 継承 2.1 日本 ライセンスの下に利用可能です。 他サイトからの引用につきましては、引用元サイトの権利に準拠します。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

この記事は役に立ちましたか?あなたの1クリックに励まされます!              


Photoshopやそれに類似したソフトウェアでぷくっとしてつやつやなボタンを作ってみよう。
形や大きさを変えればWebサイトのアイコン、ボタン、ロゴ、バナーなどを簡単に作ることができるよ。


1. Photoshopを起動。

私は正方形のロゴを作るので、ここでは300×300の正方形のキャンバスを作成しているけど、自分が作りたい物が作りやすい大きさに合わせて変えてね。
背景(カンバスカラー)は透明に。



2. 図形描画ツールでボタンの下地を作るよ

角丸長方形を選択。ストロークは無しを選ぼう。角の丸みはお好みで。私はデフォルトのまま10px。

ボタンの基本色を選ぶよ。

私はローテックの今のサイトの色に合わせて濃いピンクを選択。
色を選択したらキャンバス内にボタンの大きさに図を描く。



3. 画像に入れる文字を図形内に配置するよ
まず、カラーパレットを黒白に戻しておこう。(カラーパレットの左上のちっちゃいカラーパレットボタンをクリックすると黒白にリセットされる)


新規レイヤーを作成し、背景は白にしよう。レイヤー名は「文字背景」などでOK。
作成したら文字背景レイヤーを選択しておこう。

次に、文字入力ツールで、文字を入力して配置していくよ。フォントの種類や大きさはお好みで。

文字レイヤーが複数になっても大丈夫。配置や文字の大きさ、文字間隔などを微調整してバランスを整えよう。
配置が決まったら次に進むよ。

レイヤーウィンドウの、角丸で作ったボタン下地を非表示にしよう。
すると、上記のような表示になるね。それをパターンとして保存しておくよ。
ツールバーの「編集」をクリックして開き、「パターンを定義」をクリック。


パターン名は自分でわかりやすい名前であれば何でも大丈夫。OKボタンをクリック。
そこまでできたら、文字レイヤーと文字背景レイヤーは非表示にするか、削除してしまってOK。
で、さっき非表示にしたボタン背景を表示状態に戻そう。



4. ボタンにレイヤースタイルを加えて行くよ
レイヤーウィンドウの下のところにfxというマークの「レイヤースタイル」ボタンがあるのでクリック。
「レイヤーの効果」をクリックしよう。描画モードは乗算、パターンはさっき保存した物があるのでそれを選択。


画像の中にさっき配置した文字が重なればOK。


次に、ベベルとエンボスを選択。ベベルはぷっくりした立体感を出す効果。

ベベル(内側)を選択して、深さやサイズはどのくらい飛び出させたいかを考えながら、調整してみよう。また「輪郭」でアンチエイリアスを30%ほどに設定する。光沢が上部全体ではなく、最も出っ張ったところだけにつくので、より立体感が出るよ。

ボタンっぽくなったね。


次に、シャドウ(内側)を選択し、設定して行こう。

描画モードはスクリーンで、色はボタンの下地の色を白に近づけた色か真っ白(#FFFFFF)を選択しよう。
30~45%ほどに不透明度を設定。角度は90°にしよう。
距離は光沢に見えるポイントを探して調節しよう。チョークは2~5くらいの間で自分の図形に合うポイントを探すといいかも。サイズは大きくするとぼやけた感じになる。チョークの設定によって最適な数値が変わるので、スライダを動かしてちょうどいい点を探してみよう。よくわからなければ、チョークと同じ値でOK。

つやのある感じに。


次に光彩。これは、ボタンが突出して斜めになっている部分をやや暗くするために設定するよ。

描画モードは減算で、色は白→透明のグラデーションに設定。
不透明度を5~10くらいに設定して、自然な立体感になるように調整しよう。この後でグラデーションを更にかけるので、ここでは気持ち薄めに影をつける感じで。
チョーク、サイズは影の境目が突出部のふちに沿うように調整しよう。

奥行きが出たね。


次にグラデーションを設定するよ。ボタンの下部分をグラデーションで暗くすることで、ぐっと質感が上がって透明な光沢のある感じに。

描画モードは乗算で、不透明度は70~80%くらいに設定しよう。
カラーは黒〜灰色の間でちょうどいい色を選ぼう。下地の色がはっきりした色ならやや暗めの色、薄い色ならやや明るめの色にしよう。比率は75%に設定。

これでボタン部分は完成。


最後にドロップシャドウを設定するよ。これはWebで使用する場合、CSSで影を一括して付けているときには邪魔になるので、設定しなくてもOKだよ。また、透明度を設定できないjpgなどの形式で保存する場合も、ここは設定しないようにしよう。


これで完成!


よりリアルな質感になる設定を研究してみてね。



PR

この記事は役に立ちましたか?あなたの1クリックに励まされます!              

この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
[49]  [48]  [46]  [45]  [43]  [42
  • :
  • :


お役に立てました?
よろしければ応援の1clickをお願いします(*^^*)




blogramのブログランキング

にほんブログ村 デザインブログ Webデザインへ


ブログランキング・にほんブログ村へ
順位はこちら。
いつもありがとうございます。
忍者AdMax

ローテックな最先端 Produced by たんたん      Designed by ninja-blog.com
忍者ブログ [PR]
Related Posts Plugin for WordPress, Blogger...