素晴らしいデザインが出来上がりますね。このため、私たちはグリッド システムを使用してデザインを設計します。構造的なバランスと立体的な視点を備えたグリッドベースのデザインを備えた Web サイトを簡単に作成できます。
60 ピクセルと 20 ピクセルの間隔でいくつかのグリッドをデザインに配置します。 0,970,980
ステップ 4
ステップ 4
それでは...メニューをデザインする時が来ました角丸長方形ツールを使用して、メニューの幅は 940 ピクセル、高さは 34 ピクセルです それでは、将来の Web ページのメニューをデザインします。 。 角丸長方形ツール
を使用して、角丸長方形 (30、53、940、34) (半径 - 3px) を作成します。メニューの幅は 940px、高さは 34px です
ウェブサイトのメニューを作成するのは簡単な作業だと思います。以下の画像を見てください:
簡単な作業だと思います。 Web サイトのメニューを作成します。このメニューをさらに魅力的にするには、[ブレンド オプション] -> [ドロップ シャドウ] に移動し、スクリーンショットに表示されている設定を使用します。 メニューをより目を引くようにするには、次をクリックします。ドロップシャドウ。以下のスクリーンショットに示すようにパラメータを設定します。
ドロップ シャドウの色: #47493c
このメニュー バーの # 6bafff カラー。このメニューに選択した色: #6bafff
ステップ 5
好みの横型フォントを使用します。 14px.デザインには好きなフォントを使用できます。ここで使用しているフォントは Aller、太字です。フォントサイズ: 14px
次のレイヤースタイルと影の色をメニューテキストに追加します: #010101
ステップ6
すべてのメニューボタンリンクとデザイナーは、ホバー状態がどのように見えるかを示す必要があります。つまり、四角形を作成します (私が使用した色は #5a90e5 です)。すべてのメニュー ボタンはリンクであり、デザイナーはホバー状態がどのように見えるかを示す必要があります。そこで、長方形 (281, 53, 68, 34) (使用した色: #5a90e5)
を作成し、次のレイヤー スタイル、内側の影の色を追加します: #312d20
私たちの結果:
私たちの結果:
ステップ7
ステップ7
すべてのまともなウェブサイトには検索フォームがあります、それも作成しましょう:)
すべてのまともなウェブサイトすべてのウェブページ。検索フォームがあります。また、
角丸長方形ツール (半径 - 3 ピクセル) を使用して、次の寸法の検索フォームを作成します: 124 ピクセルと 26 ピクセル
角丸長方形ツール (半径 - 3 ピクセル) を使用して検索フォームを作成します
( 808 , 17, 124, 26)、サイズ: 124px*26px
影のレイヤースタイルを追加します
内側のシャドウを追加します: ブレンドオプション -> 内側のシャドウ 
内側のシャドウを追加します:
[ブレンド オプション] > [カラー オーバーレイ]、color- #5a90e5
お気に入りの Photoshop ツールをもう一度使用します :) 寸法が 41 ピクセルと 32 ピクセルの長方形を 1 つ作成します
PS のツールを再度使用して、角丸長方形(929, 14, 41, 32)
、サイズ: 41px*32pxを作成します。内側のシャドウ
ミキシング オプション> 内側のシャドウ
ブレンド オプション -> カラー オーバーレイ (カラー - #6bafff) アイコンを使用する時期が来ましたこのチュートリアルの最初にダウンロードした「Linecons Free - Vector Icons Pack」を開き、そこにある検索アイコンを見つけます。それに追加機能を適用するだけです。
今度は、ダウンロードしたアイコンを使用します。Linecons Free を開きます - Vector Icons Pack、検索アイコンを見つけて、いくつかの派手なスタイルを追加してください
検索フォームの最終結果は次のとおりです:
結果:
ステップ 8
ステップ 8
ソーシャル メディア接続はあらゆる Web サイトにとって非常に便利で重要です。そのため、今日も角丸長方形ツール (半径 - 3 ピクセル) を使用して簡単な Facebook ボタンを作成する方法を学びます。ボタンを作成します 
ソーシャル メディア リンクはどの Web サイトにとっても非常に便利で重要です。そのため、今日は簡単な Facebook ボタンを作成する方法も学習します。次に、長方形ツール (角丸) を使用してボタンを作成します。 、16、86、26) 以下のサイズの正方形 (Shift ボタンを押しながら) – 16px
次に、
長方形ツール (または
角丸長方形ツール) を使用して、(Shift キーを押しながら) 正方形を作成します。次のサイズ – 16px
ペンツールを選択し、この正方形の半分を切り取ります。
ペンツールを選択し、この正方形の半分を切り取ります。 注: この手順は、ダイレクト選択ツールを使用すると比較的簡単です。ダイレクト選択ツールを使用して正方形の右下隅にある点を選択し、Delete キーを押して削除すると、三角形が表示されます。
編集 -> 変形 -> 回転してこの三角形を移動し、長方形の左側に配置します をクリックして、この三角形を回転させて長方形の上に配置します長方形の左側
すべての「Facebook」レイヤーを選択して結合します (Ctrl+E) 
インナーシャドウ:
ブレンド オプション> 混合オプション> ; カラー オーバーレイ
次に、Facebook ボタンに「フォロー」テキストを追加して、ブレンド オプションを試してみましょう。 「Facebook ボタンにテキストを送信し、そのブレンド オプションを試してください。レイヤー スタイル。」 フォント: 太字、フォント サイズ: 14px
たとえば、「F」の文字を作成し、青色で装飾することができます。 #5a90e5).
Facebook ロゴをボタンに追加します。たとえば、文字 F を作成して青色にすることができます (#5a90e5) 
ブレンド オプションを試してみましょう (白い影を追加します)
次のレイヤー スタイルを追加します (白い影を追加します)
すごい! できました:) メニューバーの最終結果を見てください:
すごい!終わったね。最後のボタンバーを見てください
ステップ9
ステップ9
新しい形状を作成します:幅940px、高さ372px
新しい形状を作成します(角丸長方形、半径:3px) 、(30, 102, 940, 372) ): 幅 940px、高さ 372px
そして境界線: ブレンド オプション -> ストローク (20px、色 - #6bafff)
ステップ 10
ステップ 10
素敵なスライダーを作成するには、Ctrl+Alt+G ショートカットを使用して、クリッピング マスクを作成する必要があります。
素敵なスライダーを作成するには、スライドバーをクリックして、いくつかの画像を追加します。ショートカット Ctrl + Alt + G を使用して、クリッピング マスクを作成します
ステップ 11
次のアイコンを選択しました。「設定」、「」バブル」、「写真」、「ワールド」
そのたくさんの無料アイコンをもう一度使用してください。次のアイコンを選択しました: 設定、バブル、写真、世界
デザインに追加します (グリッドを使用することを忘れないでください)、距離 – 180px
デザインに追加します (グリッドを使用することを忘れないでください)グリッド) ガイドを使用するのを忘れました)、距離: 180px
ステップ 12
ステップ 12
メニュー バーに使用したのと同じフォントを使用する必要があります。フォントサイズを 30px にします。
テキストを追加します。メニューバーと同じフォントを使用できます。フォント サイズを 30px に設定します
ブレンド オプションで遊んでください: 白い影、カラー オーバーレイ ( #6aaefd )、内側の影
を追加します。このレイヤーのスタイルをコピーして、すべてのアイコンに追加します:
このレイヤーのスタイルをコピーして、すべてのアイコンに追加します: この素晴らしい結果です!
ああ!このクレイジーな結果を見てください
ステップ 13
ステップ 13
これら 4 つの列 (各幅 - 240 ピクセル) を「loremipsum」テキストで埋めます。別のテキストを追加することをお勧めします。すべての列。
これら 4 つの列 (それぞれ幅 240 ピクセル) に loremipsum テキストを追加します。各列のテキストが異なることが最善です。テキストのcolor：＃4c1b33およびドロップシャドウレイヤースタイルの追加以前使用したことがあります。
「続きを読む」ボタンを作成します
(30, 692, 125, 35)
ブレンド オプション -> インナー シャドウ、ドロップ シャドウ、カラー オーバーレイ (#919392)。ブレンド オプション> 他の 3 つのボタンは (240, 692, 125, 35)、(510, 692, 125, 35)、(750, 692, 125, 35)です
ステップ 15
ステップ 15
ボタンに「続きを読む」テキストを追加します。
「続きを読む」テキストをボタンに追加し、ドロップシャドウとカラーオーバーレイレイヤースタイルを追加します
ステップ16
次に、メインコンテンツを分離する必要があります私たちの1 ピクセルの行を作成し、「続きを読む」レイアウトのスタイルを追加します。
次に、将来の Web サイトのメインコンテンツを分離する必要があります。 1 ピクセルの直線
(30, 747, 940, 1) を作成し、「続きを読む」レイヤーのレイヤー スタイルをそれに追加します ( レイヤー スタイルを貼り付け )。
分割線をより明確にするために、内側のシャドウレイヤースタイルを追加します
ステップ17
ステップ17次のブロックは「」というタイトルのセクションにすることができます。
次のセクションは、パートナーというタイトルのコンテンツにすることも、最新のブログ投稿を紹介することもできます。
角丸長方形ツールを使用して正方形を作成します (Shift ボタンを押したままにします)。
角丸長方形ツールを使用して正方形を作成します (Shift ボタンを押したままにします) 3 ピクセル、幅と高さ - 138 ピクセル。半径: 3 ピクセル、幅と高さ: 138 ピクセル
[ブレンド オプション] -> [ストローク] に移動して、以下の設定で境界線を作成します: サイズ - 20 ピクセル、色 #919392 [ブレンド オプション] > をクリックします。 、次のパラメータに従ってストロークを設定します: サイズ: 20px、カラー: #919392。 ドロップシャドウスタイルを追加します。
この要素を5回コピーして貼り付けます:) これらの正方形を20ピクセルの間隔で配置します
ステップ18
ステップ 18
クリッピング マスクを使用して、正方形に画像を挿入します。
クリッピング マスクを作成するには、正方形に画像を挿入します
ご覧のとおり、実際にこれを使用できます。結果:
ご覧のとおり、このブロックは好きなだけ使用できます。結果:
ステップ 19
ステップ 19
Web サイトのフッターは、ヘッダーと同じくらい重要ですが、それ以上に重要です。「訪問者にいつ何をしてもらいたいか。ページの下部まで到達していますか?」 あなたが思いついた答えは、Web サイトのフッターをデザインするための素晴らしい出発点になります。
Web ページのフッター領域とヘッダー領域は同様に重要です。 「訪問者がページの一番下に到達したときに何をしてもらいたいですか?」と自問してください。あなたの答えは、フッターをデザインするための優れた出発点となります。
今度は、かわいいウェブサイトのレイアウトに合わせてクールなフッターをデザインしてみましょう:)
今度は、かわいいウェブサイトのレイアウトに合わせてクールなフッターをデザインします。明るくしましょう。
#3a8df1 - #6bafff やインナーシャドウなどを追加します
ステップ 20
ステップ 20
3つのブロックを追加しますフッター: クイック リンク、会社概要、フォローフッターに 3 つのブロックを追加します: クイック リンク、会社概要、フォロー
タイトルには Arial 標準フォント (30 ピクセル) を使用し、次のようにスタイルを追加します。以下のスクリーンショット:
タイトルに Arial Regular フォント (30 ピクセル) を使用し、以下のスクリーンショットのようにスタイルを追加します:(色: ホワイト)
About のテキストに Arial Regular フォントを使用します。私たちセクション (12 ピクセル)。
クイック リンク セクションのテキスト - 22 ピクセル
フォロー セクションにいくつかの標準アイコンを追加します: RSS、Google Plus+、Twitter
やったー! チュートリアルの最終結果:
すごい!終わったね！これがチュートリアルの最終結果です
追記:
この Web ページのスタイルは新鮮で、特別なテクニックは使用されておらず、いくつかの基本的なテクニック (レイヤー スタイル、クリッピング マスクなど) のみが使用されています。しかし、これらのシンプルな組み合わせこそが、別のさわやかな外観を生み出すのです。翻訳プロセス中に、全体のスタイルにより適したものにするために、いくつかのパラメータに変更が加えられました。
詳細については、PS Web デザイン チュートリアル XXVIII - PS でクリーンな Web ページ レイアウトを作成する方法 関連記事については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
