PhotoshopでWebデザイン

ボタンを作る

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボタンを作成して配置します。
講師:
07:21

字幕

では、ボタンを配置していきましょう。まず、「長方形ツール」に持ち替えます。ドキュメント上をクリックしてボタンのサイズは「135×35」にしたいと思います。この時に、色は何でも構いません。今回はこのボタンの色塗りも全てレイヤースタイルで行っていきたいと思います。この長方形はでは、Home のコンテンツとしましょう。ここに MORE INFOもうちょっとの情報という感じでボタンを作ってクリックしたらさらにこの文章の続きが見れる感じにしましょう。少し窮屈ですね。ボタンの場所をとってもらいましょう。では、ボタンの「長方形」を選択して「レイヤースタイル」まずは「ドロップシャドウ」立体感を多少加えていきます。「不透明度」を低くして「距離」を小さくして「サイズ」をこれぐらいですかねほんの少しよいてる感じにしたいと思います。こちら側で色を付ける場合は「カラーオーバーレイ」にチェックを入れます。この色を例えばオレンジとかにしてあげるとオレンジ色で一色で塗ることができます。立体的にしていきましょう。まずは「境界線」にチェックを入れて周りに「1」ピクセル分では「内側」にしましょうかこういう黒を入れたいと思います。 そのうえで、「シャドウ内側」「光彩内側」この両方を使って立体感を作っていきたいと思います。ではまず、「包括光源」をなしにしてこの色をオレンジを基にした色にしたいと思います。明るい色を選択して「乗算」から「スクリーン」に持ち替えます。こちらも同様に「スクリーン」から「乗算」に持ち替えて色は同じオレンジを使用して今度は暗い方の色を選択します。後はこの 2 つの「距離」と「サイズ」ですね。これをちょうどいい所に持っていきます。「チョーク」を用いるとよりパキっとした影が落ちます。こちら側も「チョーク」と「サイズ」で立体の度合いを締めていきます。では立体ができました。ではここに文字を書いていきましょう。「文字」のツールに持ち替えてMORE INFO としましょう。この色を白に変えます。Bold から Regular にしてサイズがちょっと大きすぎますね。14 ぐらいでこの上に配置しましょうか。これも立体感をつけていきましょう。MORE INFO をダブルクリックでドロップシャドウ>「包括光源」なしで上から下に入る感じにして「距離」は「1」「サイズ」も「1」でこんな感じのへこんだ感じにできました。少し文字の大きさ大きくしましょうか。 もう一度「テキスト」に持ち替えて「14」から「18」ぐらいにしましょうか。ちょっと大きいなという場合はCtrl/Command+T でより自由なサイズで変形させることができます。ちょっとだけ小さくしたいなという場合にこの方法が効果的です。では、立体的なボタンができました。では、この2つをまとめておきたいと思います。長方形と文字2 つを同じところに持って行ってShift 押しながら両方のレイヤーを選択でCtrl/Command+G でグループ化します。これを Button としましょうか。ではこの Button を Store のページにもコピーしたいと思います。このグループレイヤーごとCtrl/CommandのJ、J、Jと3 回押します。このコピーした 3 つを今度は Store の方に移動します。では、Home のページを非表示にします。Store を見えるようにします。開きます。このグループごと動かしたいので「選択ツール」の「自動選択」を解除してこんな感じにボタンを一つずつ配置していきます。この 3 つのボタンを複数選択して整理整頓していきましょう。少し動かしたい場合は矢印キーで場所を変えていきます。 では「テキスト」のツールに持ち替えてここは BUY NOW にしましょうか。あとの 2 つも BUY NOW ですね。こんな感じに3 つの BUY NOW ボタンを作ることができました。では次は、フォームの挿入方法を見ていきたいと思います。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。