PhotoshopでWebデザイン

マスターエレメントを足していく

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
空の練習プロジェクトにマスターエレメントを足していきます。
講師:
04:50

字幕

では、マスターエレメントを配置していきましょう。マスターエレメントとはWeb サイドのどのページに行っても変わらない素材のことです。例えば、Home のページに行ってもAbout のページに行ってもこのロボットは変わりません。常にここにいてくれます。ページが変わるとこの中のコンテンツが変わります。同様にこの背景の青いところとこの黄色いところメニューとフッダー、これらもマスターエレメントです。戻ります。まず、一番最初にその背景とここの背景やっていきましょうか。配色を引っ張ります。「スウォッチ」のパネルから右上ボタンをクリックをします。「スウォッチの置き換え」Chapter 8 に入っているRobot_swatches.aseこちらのファイルを開きます。このカラーパレットを使用していきます。まずは背景の色を変えましょう。バックグラウンドのレイヤーを選択してこの青い色を選択します。Alt/Option+Del/Backspaceを押してあげます。そうすると簡単に一色を塗ることが出来ます。これに「フィルター」>「ノイズ」>「ノイズを加える」多少粗さを残しておきましょう。この方が少し柔らかい印象になります。 グレースケールで 2% 分たします。OK更にここの箱ですね。これですね。Page Backgroundここにきてしまっているのでこれを下に移動させます。こちらがContent Home ですね。順番を変えます。この全体の ContentのBackground の色を変えていきます。「スウォッチ」から黄色い色を選択してPage background を選択します。Alt/Option+Del/Backspace で色を変えることが出来ます。この黄色いバックグラウンドには枠の線を引きたいと思います。レイヤー部の右をダブルクリックして「境界線」をオンにします。「境界線」は「内側」にひきましょうか。そうしないとサイズが変わってしまいます。では「13」ぐらいですかね。色は白にしましょう。更に、今ベッタンコなのでこの背景と論理するために影を付けていきたいと思います。「ドロップシャドウ」を選択します。どれぐらい入れましょうか。サイズを調節して影の柔らかさを加えていきます。こんなもんですかね。「距離」をあまり取らずにおけばこんな感じに真上から光が当たった感じに見えます。「不透明度」を下げて、あまり影が強くなりすぎないようにします。 「包括光源」の使用をオフにしておきます。OKこんな感じですかね。で、後はここですね。ロボットを置いていきましょう。ファイルを配置する場合は「ファイル」>「配置」Chapter8 に入っているRobot_toys.ai を配置します。OK場所を整えていきます。Shift を押しながらプロポーションを保って拡大/縮小します。Enter で確定してあげます。このロボットのアイコンはヘッダーに入るべきなのでHeader まで移動してあげます。中に入っている Placeholder はもういらないのでこれを削除します。こんな感じにマスターエレメントを配置することが出来ました。本当はメニューとフッダーもそうなのですがそれは後のビデオで見ていきたいと思います。

PhotoshopでWebデザイン

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

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

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

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

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