PS Web デザイン チュートリアル XXIV - 美しい Web サイトをゼロからデザインする

プログラマーとしての私の芸術の基礎は弱いです。設計能力を向上させるために、いくつかの成熟した Web PS チュートリアルを参照できます。文章を言い換えると、「唐の詩三百首を知っていれば、作り方を知らなくても暗唱できる」ということです。

このシリーズのチュートリアルはオンライン PS チュートリアルから来ており、すべて海外のもので、すべて英語です。これらの優れたチュートリアルを翻訳してみます。翻訳能力が限られているため、翻訳の詳細はまだ検討する必要があります。大部分のネチズンが私にアドバイスをくれることを願っています。

お約束:

1. この記事で使用しているソフトウェアはPhotoshop CS5バージョンです

2. オリジナルのチュートリアルのスクリーンショットは、再制作したものに基づいて中国語版を再上映しました

3。原文にはいくつかの操作があります。パラメータは指定されていません。テストを繰り返して測定したいくつかのパラメータは、赤字で示されています。一部の間違ったパラメータについては、正しいパラメータが赤いテキストで直接表示されます

例: (90, 22, 231, 77)は、長方形の左上隅の座標が (90, 22) であることを示します。幅 231、高さ 77

例: (90, 22) 、これは、長方形の左上隅の座標が (90, 22) であることを意味します。チュートリアル

4. チュートリアルの最後に私の経験を添付します。チュートリアルなどの一部のステップを最適化したものもあります。

美しい Web サイトをデザインしたいと思ったことはありますが、その方法がわかりませんでした。正直に言うと、私も数年前、Web を閲覧しているときに、非常に多くの見栄えの良い Web サイトを目にしました。このようなデザインを作成するスキルがあればよかったと思いました。今日はその方法も教えます。このチュートリアルでは、基本的にいくつかの Photoshop スキルと細部への観察力が必要であることを指摘します。ウェブサイトのデザインを美しく見せるこれらの小さなディテールを使用して、Photoshop を起動して始めましょう!

美しいウェブサイトをデザインしたいと思ったことはありますが、どうやって始めればよいのかわかりませんでした。正直に言うと、私も昔はそうでした。 Web を閲覧すると、とても美しい Web ページがたくさんあり、私もこのような作品を作成できるスキルがあればいいのにと思います。今日はこんなデザインの作り方を教えます！実際には、多少の PS スキルと詳細を把握する能力が必要です。このチュートリアルでは、Web デザインを美しく見せるための細かい点を説明します。 PS を開いて始めましょう!したがって、始める前に、960.gs 公式 Web サイトでグリッド システムの Photoshop テンプレートをダウンロードする必要があります。zip ファイルを解凍して、PSD テンプレートを探すだけです。 1 つは 12_col で、もう 1 つは 16_col です。これら 2 つの違いは、名前が示すように、1 つは 12 列で作成され、もう 1 つは 16 列で作成されます。デザインの場合は、12 は 3 で計算できるため、12_col グリッドを選択します。デザインに 4 つのボックスがある場合は、12 と 16 は 4 で計算できるため、12_col グリッドを選択します。このチュートリアルに従うと、実際の動作をご覧ください。

私のデザインのほぼすべては 960 グリッド システムに基づいています。したがって、始める前に、960 Grid System PS テンプレートをダウンロードする必要があります。 960.gs の公式 Web サイトで見つけることができます。 zip ファイルを解凍し、PSD テンプレートを見つけます。 2 つの異なるタイプのテンプレートが表示されます。1 つは 12_col 用、もう 1 つは 16_col 用です。名前が示すように、2 つの違いは、一方には 12 列があり、もう一方には 16 列があることです。これをよりわかりやすく説明すると、デザインに 3 つの正方形がある場合は、12 は 3 で割り切れるため、12_col のものを選択します。デザインに 4 つの正方形がある場合は、12 と 16 の両方があるため、12_col または 16_col のものを選択します。は 4 で割り切れます。このチュートリアルに従うと、これが実際に動作していることがわかります。

ステップ 2 - 構造の定義

ステップ 2: Web ページの構造の定義

PSD グリッド テンプレートを開いて描画を開始する前に、まず、Web ページの構造を定義する必要がありますレイアウト内にレイアウトがあるため、これは少し複雑な構造になっています。上の画像にその例が示されています。

PSD グリッド テンプレートを開いて描画を開始する前に、まずレイアウトを定義する必要があります。当社ウェブサイトの構造上の画像は例を示しています。各レイアウトには独自のレイアウトがあるため、これは比較的複雑な構造です。

ステップ3

ステップ3

サイト構造を定義したら、次のステップに進みます。 [画像] > [キャンバス サイズ] に移動し、背景色を #ffffff に設定します。
ウェブサイトの構造を定義した後、続けてください。 16_col.psd テンプレートを開きます。 [画像] > [キャンバス サイズ] をクリックします。キャンバスを幅 1200 ピクセル、高さ 1700 ピクセルに設定します。そして、背景色を設定します: #ffffff

この翻訳チュートリアルでは 960 レイアウト システムをダウンロードしないため、このステップは、サイズ: 1200px*1700px の新しいドキュメントを作成するように変更されます。背景色: #ffffff

ステップ 4

ステップ 4

次に、長方形ツールを選択し、キャンバスの幅全体、高さ約 80 ピクセルの長方形を描画します # で塗りつぶします。 dddddd.

次に、

長方形ツールを使用して、幅がキャンバス全体の幅、高さが 80 ピクセルの長方形 (0、0、1200、80) を描画します。塗りつぶしの色: #dddddd

ステップ 5

ステップ 5

長方形レイヤーを Ctrl キーを押しながらクリックして、レイヤーモードをオーバーレイに設定します。 600 ピクセルのソフト ブラシを選択し、色を白に設定し、画像に示すようにブラシの端を少しだけ上でクリックします。これら 2 つのレイヤーをリンクできます。

長方形の上に新しいレイヤーを作成し、レイヤーの

ブレンド モード

にオーバーレイを選択します。 Ctrl キーを押しながら長方形のレイヤーをクリックします。長方形の選択範囲が表示されます。 600 ピクセルのソフト ブラシを選択し、色を白に設定し、ブラシの下部を選択範囲の上部に近づけて数回クリックします。これにより、微妙な光沢のある効果が得られます。これで 2 つのレイヤーをリンクできるようになりました。再度長方形ツールを選択し、画像に示すように濃い灰色の薄い長方形を描きます。 新しいレイヤーを作成します。

長方形ツール

を再度選択し、上に示すように細い濃い灰色の長方形 (0、0、1200、6) を描画します。色: #454545

ステップ 7

長方形ツールを選択した状態で、上部の長方形の下に約 500 ピクセルの大きなボックスを描画し、高さを 575 ピクセルにし、#d2d2d0 から #ffffff までの線形グラデーション オーバーレイを与えます。方向は -90、スケールは 100% です。続行

を選択します。長方形ツール

を使用して、上の長方形から 500 ピクセルの距離に高さ 575 ピクセル (0、

540

、1200、575) の長方形を描画します。 注：元の記事のサイズは近似のようで、あまり正確ではなく、誤差があるため、この記事では修正されています。 グラデーションオーバーレイレイヤースタイルを設定します。色は#d2d2d0から#ffffffまでのグラデーション、角度は-90、スケールは100%です。

ここで、ステップ 5 で説明したのと同じライト効果を作成します。このテクニックはよく使うので、次回はステップ 5 の効果についてのみ説明します。

今度は同じものを追加します。ステップ 5 と同様の照明効果。このテクニックは何度か使用するので、次回は手順 5 のエフェクトを使用するよう促します。

現在のすべてのレイヤーの上に新しいレイヤーを作成し、Ctrl キーを押しながら大きな四角形をクリックし、色を白に設定し、選択範囲の上でブラシの端を数回クリックします。画像に示すように、このレイヤーの上に新しいレイヤーを作成します。この大きな四角形を Ctrl キーを押しながらクリックします。 600 ピクセルのソフト ブラシを選択し、色を白に設定し、ブラシの下部を選択範囲の上部に近づけて数回クリックします。写真のように、これにより、微妙な光沢効果が描画されます。

ステップ9

ステップ9

新しいレイヤーを作成し、高さ約400ピクセルの大きな長方形を描画します。これはヘッダーに使用されます。 #2787b7 から #258fcd への青のグラデーションです。

色の変化がどれほど微妙であるかご覧ください?

​​新しいレイヤーを作成し、高さ 400 ピクセルの大きな長方形 (0、130、1200、410

) を描画します。これはページヘッダーに使用されます。 #2787b7 から #258fcd までの素敵な青のグラデーションで塗りつぶします

以下は色の微妙な変化を示しています:

ステップ 10

ステップ 10

ヘッダー ボックスの下部に濃い青色の 1 ピクセルの線を追加し、ドロップ シャドウ効果を適用します。ブレンド モード: 乗算、不透明度: 65%、角度: -90、距離: 1 ピクセル、サイズ: 6 ピクセルを使用します。上に新しいレイヤーを作成し、濃い青色の下に別の 1 ピクセルの白い線を描きます。この方法で、基本的に、デザイン内のすべてのボックスにこの境界線テクニックを適用できます。

描画します。ページ上部の長い四角形の下部に 1 ピクセルの濃い青 (0, 539, 1200, 1) の線、

カラー: #0e517e

を追加し、ドロップ シャドウ効果を追加します。描画モード:乗算、不透明度:65%、方向:-90、距離:1px、サイズ:6px。次に、新しいレイヤーを作成し、濃い青の線の下に 1 ピクセルの白い線 (0、540、1200、1) を描きます。このようにして、鋭いエッジを作成することができます。このテクニックは、デザイン内の他のカラー ブロックでも使用できます。

ステップ 11

ステップ 11

新しいレイヤーを作成し、長方形ツールを使用して、画像に示すように、キャンバスの上部に高さ 50 ピクセルの長方形を描画しますこれはナビゲーションに使用されます。

新しいレイヤーを作成し、キャンバスの上部領域に長方形ツールを使用して、高さ50ピクセル(0、80、1200、50)、カラー: #e4e4e4の長方形を描画します。写真に示されています。これはナビゲーション バーに使用されます。

画像に示されている値を使用してドロップシャドウを適用します。

ドロップシャドウ効果を追加し、示されているようにパラメータを設定します。ステップ 12 36 を実行し、次の効果を適用します:

インナー シャドウ – カラー: #ffffff、ブレンド モード: オーバーレイ、不透明度: 60%、角度: 120*、距離: 7 ピクセル、サイズ: 6 ピクセル

インナー グロー – ブレンド モード: 通常。 、色: # ffffff、サイズ: 4px。その他はデフォルトのままです。ストローク – サイズ: 1px、位置: 内側、色: #ce7e01。

ナビゲーション バーの作成を開始します。 角丸長方形ツール

を使用し、半径を 5 ピクセルに設定し、角丸長方形 (130、92、70、27)、色: #f6a836 を描画し、それに次の効果を追加します:

1。 : # ffffff、描画モード: オーバーレイ、不透明度: 60%、角度: 120、距離: 7px、サイズ: 6px。

2. インナーグロー - ブレンドモード: 通常、カラー: #ffffff、サイズ: 4px。他のパラメータはデフォルトで設定されます。

3. ストローク—サイズ: 1px、位置: 内側、色: #ce7e01。

次に、Ctrl キーを押しながらクリックして長方形を選択し、[選択] > [変更] > に移動し、「1px」と入力します。 Ctrl キーを押しながらクリックして角丸長方形を選択します。

クリック: > [変更] > [縮小] を選択し、「1px」と入力して OK

上に新しいレイヤーを作成し、ブレンド モードをオーバーレイに設定し、今回は小さいブラシ サイズを使用して手順 5 で説明したのと同じ効果を作成します。ナビゲーション テキストを追加します。ナビゲーション リンクには Arial を使用し、すべて大文字とアンチエイリアスを「なし」に設定します。

上に新しいレイヤーを作成し、ブレンド モードをオーバーレイに設定して、ステップ 5 と同様に照明効果を追加します。今回は小さめのブラシを使いました。次に、ナビゲーション バーのテキストを追加し、ナビゲーション リンク フォントとして Arial フォントを使用し、すべての効果を「なし」に設定します。

フォント: Arial、フォント サイズ: 12 ポイント、アクティブなリンクのテキストの色: #7b3600、非アクティブなリンクのテキストの色: #838383

ステップ 13

次に、検索ボックスを作成しましょう。半径 5 ピクセルの角丸長方形ツールを使用して、グリッド レイアウトの右側、ステップ 4 の上部のグレーのストライプの中央に位置する検索ボックスを作成します。これらのレイヤー スタイルを追加します:

インナー シャドウ – カラー: #000000、ブレンドモード: 乗算、不透明度: 9%、角度: 90*、距離: 0px、サイズ: 6px

ストローク – サイズ: 1px、位置: 内側、色: #dfdfdf.

次に、角丸長方形ツールを使用して、グリッド レイアウトの右側、中央に検索用の長方形 (925、26、142、30) を作成します。ステップ 4 で作成した上部の灰色の長方形)、カラー: #5c6457。次のスタイルを追加します:

インナーシャドウ — カラー: #000000、ブレンドモード: 乗算、不透明度: 9%、角度: 90、距離: 0px、サイズ: 6px。

ストローク — サイズ: 1px、位置: 内側、色: #dfdfdf。

「検索」テキストとライトグレーの「GO」ボタンを追加しました。下の図に示すように:

テキストの色: #a0a39c。白い角丸長方形のストロークは検索ボックスのストロークと同じです。

これまでのところ、たくさんのレイヤーがあるので、少し整理する必要があるので、新しいレイヤーフォルダーを作成し、「検索」という名前を付けます。検索フィールドを作成するすべてのレイヤーを選択し、新しいフォルダー内をクリックしてドラッグします。後で、フォルダー内の他のコンテンツを整理して、整理されたレイヤー パレットを作成します。

これまでに多くのレイヤーが作成されました。整理するために、検索グループを作成します。 すべての検索関連レイヤーをこのグループにドラッグします。後ほど、残りのコンテンツをこのように整理していきます。このようにして、きれいに整理されたレイヤーパネルが完成しました。

ステップ 14

次に、新しいレイヤーを作成し、検索フィールドを作成したのと同じ方法で [サインアップ] ボタンを描画し、ナビゲーション ストライプの中央の検索フィールドの下にちょうど半分の幅で配置します。 .

新しいレイヤーを作成し、検索ボックスと同じ方法で [サインアップ] ボタン (998、91、73、30) を描画します。カラー: #258dca

- 幅の半分だけ。検索ボックスの下のナビゲーション領域の中央に配置します。

PS で、サイズ: 4px*4px、背景が透明の新しいドキュメントを作成します。ブラシを使用して、左上隅から右下隅まで 4 つの白い点をクリックします

次に、パターンを定義します。そして新しいドキュメントを閉じます。メインドキュメントに戻り、パターンオーバーレイスタイルをボタンに追加します

検索ボックスと同じストロークスタイルを追加し、以下に示すように内側のシャドウスタイルを追加します

SIGNを追加ボタンUPの文字、文字色は白です。ボタンの左側にテキスト「ログイン」(黒) または (グレー) を追加します

もう一度ステップ 5 の効果を作成します。この場合、ソフト ブラシ サイズは 45 ピクセルです。

を使用します。小さめサイズの柔らかいブラシ。ここでは 45px が使用されています

ステップ 15

ステップ 15

ロゴとキャッチフレーズを追加すると、サイトは次のようになります。

ロゴと Web サイトの説明を追加すると、Web ページは次のようになります。

logo制作：round rounded rounded長方形ツールを使用して、新しい丸い長方形（132、20、77、43）、色：＃2c2c2c

：ステップ5のメソッドを使用します角丸四角形の上部と下部にハイライト効果を追加します

テキスト ツールを使用して、ナビゲーション バーのテキストと同じフォントとサイズのテキスト BVD を追加します。テキストは垂直方向に 300%、水平方向に 180% 拡大縮小されます。テキストの色: #ffffff。次のドロップ シャドウ スタイルを追加します

ロゴの右側に、「美しいウェブサイトのデザイン」というテキストを追加します。フォント: Androgyne、フォント サイズ: 30 ポイント、色: fdfdfd。ストローク スタイルの追加: ストロークの色: #8e8e8e

ステップ 16

ここで、前のいくつかのステップで説明したレイヤー構成に戻り、新しい空のレイヤー フォルダーを作成し、名前を付けます。それは「top_bar」です。このフォルダー内のレイアウトの上部からすべてのグラフィックを移動します (ロゴ、タグライン、検索フィールド、サインアップ ボタン、ナビゲーション、背景)。

ここで、前の場所に戻ります。いくつかの手順で説明したレイヤー構造です。 。新しいグループtop_barを作成します。すべてのレイヤーをこのグループに移動します (ロゴ、説明テキスト、検索ボックス、サインアップ ボタン、ナビゲーション バー、背景を含む)。

別の空のレイヤー フォルダーを作成し、「header」という名前を付けます。ここにヘッダー グラフィックを配置します。 別の空のレイヤー フォルダーを作成し、「header」という名前を付けます。ヘッドレイヤーを配置するために使用します。写真に示すように

ステップ 17

ステップ 17

現時点ではヘッダーが少し地味なので、サイト上の他の場所に同じ照明効果を追加します。ヘッダーを選択します。ボックス (青) 上に新しい空のレイヤーを作成し、モードをオーバーレイに設定します。そのため、どこにでも同じ光の効果を追加できます。青い頭の領域を選択します。その上に新しいレイヤーを作成し、その描画スタイルをオーバーレイに設定します。

600 ピクセルの大きなソフト ブラシを選択し、#ffffff の色を付けて、ナビゲーションの下の領域を数回クリックします。さらに、色を黒に切り替えて、下の部分だけで同じことを行います。ヘッダーを試してみてください!

600 ピクセルの大きな柔らかいブラシ、色: #ffffff を選択します。次に、ナビゲーション バーの下を数回クリックします。さらに深みが必要な場合は、色を黒に変更し、頭の下部で同じプロセスを繰り返すこともできます。試してみてください

ステップ 18

ステップ 18

このステップでは、ヘッダー画像の反射を作成する方法を説明します。選択した 2 つの画像を使用します。Safari のスクリーンショットを使用しました。他の 2 つのテンプレートを縮小して、両方のレイヤーをコピーし、最初の画像を反転してから、もう 1 つの画像を数ピクセル下に移動します。長方形マーキーツールを使用して、最初の反転された画像の外側から中央に移動し、画像に示されているような選択範囲が表示されるはずです。数回繰り返すと、元の画像から素敵な色あせた反射が作成されます。この手順を 2 番目の画像でも繰り返します。

このステップでは、画像の頭部領域に反射効果を作成する方法を説明します。 2 つの画像を選択し、他のテンプレートの Safari スクリーンショットを使用し (ここでは以前の Web ページのスナップショットを 2 つ使用しました)、そのうちの 1 つを拡大縮小して、大きい画像の後ろに配置します。すべてのレイヤーを複製し、自由変形ツールを使用して、最初の画像と他の画像を反転します。 Shift キーを押したまま、画像を数ピクセル下に移動します。 長方形マーキーツールを使用して、最初の反転された画像の下部の外側の端から画像の中央までの選択範囲を作成します。 クリック: > [ぼかし] を選択し、30 ピクセル以上を入力します。以下に示すような選択が表示されます。 Delete キーを数回押すと、元の画像の色あせた素敵な反射が作成されます。 2 番目の画像に対してこれらの手順を繰り返します。

次に、これら 2 つの画像を少し目立たせるために、新しいレイヤーを作成し、モードを [オーバーレイ] に設定します。手順 5 で説明した効果を作成します。

2 つの画像を立たせるために。新しいレイヤーを作成し、このレイヤーの描画モードをオーバーレイに設定し、手順 5 を繰り返して効果を追加します。 (

このステップが必要かどうかは状況によって異なります。これらの 2 つの写真を使用した後、このステップは冗長だと感じます)

素敵なキャッチフレーズといくつかのボタンを追加した後のヘッダーは次のようになります。忘れないでください。ここで整理しておくために、これらすべてのグラフィックを「ヘッダー」レイヤー

フォルダー内に配置します ;)

いくつかのボタンと素敵なテキストを追加すると、ヘッダー領域は次のようになります。すべてのレイヤーをヘッダー グループに入れることを忘れないでください。

左の第1段落のフォントは以下のように設定されています

左の第2段落のフォントは以下のように設定されています

左の第3段落のフォントは以下のように設定されています左側は次のように設定されています

下の2つのボタン、右側のボタン(310、455、159、38)、色: #f6a836、スタイルはナビゲーションバーの左ボタンのスタイルをコピーします。テキストの色: #ffffff

左側のボタン (130、455、159、38)、色: #c8c8c8、右側のボタンのスタイルをコピーし、ストロークの色を #7d7d7d に変更します。テキストの色: #5c5c5c

ステップ 19

ステップ 19

最終的な画像プレビューを見ると、コンテンツ領域に適切なタブがあることがわかります。これらのタブを作成するには、いくつかの追加手順を実行する必要がありますが、その価値はあります。まず、角丸長方形ツールを使用して、高さ 70 ピクセル、半径 10 ピクセル以上の大きな長方形を作成します。下の半径を取り除き、そこから完璧な角を作成する必要があります。ダイレクト選択ツールを選択し、垂直点をクリックし、Shift キーを押しながら同じレベルに達するまで下にドラッグします。ここまでは水平軸ですが、まだ変形しています。クリックしてパスの点まで上に移動します。

最終的なレンダリングを見ると、コンテンツ領域に美しい切り替えページが表示されます。このスイッチを作成するには、いくつかの追加手順が必要ですが、これは必要なことです。まず、角丸長方形ツールを使用して、高さ 70 ピクセル、半径 10 ピクセルの角丸長方形 (128、589、944、70) を作成します: #e1e1e1。ここで、完璧な角を形成するように下の角を丸めるのはやめましょう。 ダイレクト選択ツールを使用して、このシェイプのパスをクリックし、垂直点をクリックして、Shift キーを押したまま水平軸の高さまで下にドラッグします。見た目は良くなりましたが、まだかなり粗いです。次に、小さなコントロール ポイントが表示されます。それをクリックして、パス上のポイントに移動します。

これで、右下隅に対してこの手順を繰り返します。

これで、完璧なコーナーが作成されました。写真の通りです。右下隅にもこの手順を繰り返し、

ストロークの色で 1 ピクセルのストロークを追加します。 #b0b0b0

ステップ 20

線ツールを選択して 1 ピクセルに設定します。 直線ツールを選択し、1pxに設定します

ステップ21

ステップ21

Shiftキーを押しながら、灰色の区切り文字を描画します(364,589,1,70)、(600,589)。 ,1,70)、(836,589,1,70)、色: #b0b0b0

ステップ 22

ステップ 22

それぞれWebAppers.com から入手できる Ray Cheung アイコンを使用しました。通常、1 つのタブが常にアクティブになり、他のタブは非アクティブになります。これを実現する方法を見つける必要があります。最初のアクティブなタブをカラフルで明るく保ちながら、見出しとテキストの不透明度を下げました。

いくつかのアイコン、見出し、およびいくつかのキャプションを配置します。 WebAppers.com の Ray Cheung アイコンを使用しました (、画像があるヘッダー領域にアイコンの 1 つを配置しました )。通常、1 つのタブがアクティブになり、他のアクティブなタブは非アクティブになります。これを設計で明示するには、それを実装する方法を見つける必要があります。他のアイコンの彩度を下げ (

クリック: 画像 > 調整 > 彩度を下げる

)、タイトルと説明テキストの不透明度を下げて (
60%

)、アクティブなトグルを強調表示したままにしました。アクティブなタブをよりわかりやすくするために、色あせた白い背景を与えます。これを行うには、まずオブジェクト全体を選択し、次に選択範囲から減算して最初のタブのみを選択します。

アクティブな切り替えページを作成するには。より明らかなのは、色褪せた白い背景を追加することです。この効果を実現するには、オブジェクト全体を選択してから選択範囲を切り取り、最初のボタンのみが選択されるようにします。 選択内容は次のようになります。

選択内容は以下のようになります

小さめの柔らかいブラシを使用して、白い背景にペイントします。

新しいレイヤーを作成し、小さな柔らかいブラシで背景を白でペイントします

ステップ 24

画像に示すように、タブの後ろに濃い灰色の長方形を作成します。 .

ドロップシャドウを追加します。図に示すように、切り替えページの後ろに濃い灰色の長方形 (78、609、1044、50) を作成します。色: #303030 です

レイヤーの下部にある小さなアイコンをクリックしてベクターマスクを追加しますパレット。

レイヤー パレットの下部にある小さなアイコンをクリックしてレイヤー マスクを作成します

色を黒に設定し、大きな柔らかいブラシを選択し、長方形の一部の削除を開始します。その結果、 が得られます。タブの後ろに素敵な偽のシャドウ効果があります

色を黒に設定し、大きな柔らかいブラシで領域を選択し、長方形の部分の削除を開始します。その結果、見栄えの良いシャドウ効果が作成されました

下の図に示すように、

グラデーションツール

を使用して、マスクの内側に黒から透明のグラデーションを追加することもできます

最後にタブの下部に 1 ピクセルの灰色の線を描きます。先ほどと同じようにレイヤーをマスクし、大きな柔らかいブラシで線の左端と右端を削除します。タブの後ろに影を付けます。

最後に、詳細を追加しましょう。切り替えページの下に 1 ピクセルの灰色の線 (78、659、1044、1) を描きます。

カラー: #b0b0b0
。次に、前のステップと同じ方法を使用して、左端と右端にグラデーションを作成します

これを実現するには、上記のようにグラデーションを使用することもできます

。切り替えページの後ろの影の横に、よりスタイリッシュで美しいラインが追加されました。

タブは次のようになります。タブは次のようになります。最初のタブのコンテンツをデザインするときは、注目のデザイン画像、素敵な見出し、テキストが必要です。最初に、デザインのエッジを打ち破るのが良いと思いました。注目のデザイン画像に素敵な積み上げ写真効果を加えます。これを行うには、1 ピクセルのライト グレーの境界線と非常に微妙なドロップ シャドウ効果のある白い長方形を描きます。

最初の切り替えページのコンテンツをデザインします。見栄えの良いタイトルとテキストコンテンツを備えた、特徴的なデザイン画像が必要です。まず、この特徴的なイメージを作成する必要があります。デザイン画像をフィーチャーして見栄えの良いオーバーレイ写真効果を作成するときに、デザインの鋭いエッジを分割するのがいいだろうと思いました。これを行うには、白い四角形 (136、714、404、224) に 1 ピクセルのライト グレー (色: #b0b0b0) の境界線を描画し、非常に微妙なドロップ シャドウ効果を描画します。

次に、そのレイヤーをコピーし、自由変形ツールで少し回転します。これをもう一度実行します。

次に、そのレイヤーをコピーし、自由変形ツールで少し回転します。この操作を数回繰り返します (3 回が最適です)

画像がボックスの外に流れていても心配しないでください。選択範囲を作成します。上部の四角形から [選択] > [変更] > [5px] を選択し、レイヤー パレットの下部にある [クイック マスク] アイコンをクリックします。 .

選択した画像をインポートし、白い長方形の上に配置します。画像が箱から出てしまっても心配しないでください、私たちが修正します。上部の四角形に基づいて新しい選択範囲を作成し、[

選択] > [縮小] をクリックし、「5px」と入力して確定します。次に、レイヤー管理領域の下にある [レイヤーマスクの追加] をクリックして、画像に選択範囲のみが表示されるようにします。

レイヤーの順序は次のようになります

さらにレイヤーフォルダーを作成し、パレットを整理することを忘れないでください。

素敵な見出し、いくつかのテキスト、および箇条書きリストを追加すると、Web デザインの作業が完了しました。次に進みましょう。

素敵な見出し、いくつかのテキスト、および箇条書きリストを追加すると、Web デザインの作業が完了します。次のステップに進みます。

タイトルテキストのフォント: Verdana; フォントサイズ: 30px、太字; カラー: #227dac

サブタイトルテキストのフォント: Verdana; フォントサイズ: 14px、太字; #494949

：Verdana; フォント サイズ: 12px; カラー: #494949

リストの前の項目番号は、カスタム形状の円とチェック マークで構成されます。

リストの下のテキストフォント: Verdana、フォントサイズ: 12px、太字、色: #494949

画像の下のフォント: Verdana、左側のテキストの色: # 227dac、右側のテキストの色: #494949

そしてまたレイヤー構成

ステップ 27: お客様の声

ステップ 27: お礼状

これだと思いました巨大なはずなので、これをメインセクションの直後に大きなボックスに入れました。まず、高さ約 220 ピクセルの明るい灰色の長方形を描きます。これは巨大であるべきだと思いました。メインセクションの下の大きなボックスにあります。まず、高さ 220 ピクセル、カラー: #f2f2f2

の大きなライトグレーの長方形 (130、1016、940、222) を描画します。 1 ピクセルのグレー (色: #b0b0b0) の境界線を付けます。

次に、すべての辺に 10 ピクセル小さい別の明るい長方形を描画します (920、202)、

カラー: #f7f7f7

。 1 ピクセルの灰色の境界線も追加します

最後にテキストを追加して、作業は完了です!

最後にテキストを追加して、制作のこの部分を完成させます

ヘッダー テキストのフォント: Verdana; フォント サイズ: 12 ピクセル、太字を追加; 本文のフォント: アンドロギュネ; フォント サイズ: #696969

署名テキスト: フォント サイズ: #696969 ; 右のテキスト: Verdana; フォント サイズ: 14px、太字; 左ボタン、角丸長方形 (257、1190、186、27)、色: #f5f5f5、ストロークの色: # b0b0b0

ボタンのテキストのフォント: Verdana、フォント サイズ: 12px、水平方向のスケーリング 80%、色: #494949

高さ 400 ピクセルの濃い灰色の四角形を描画します。

次に、フッターの作成を開始します。 。高さ 400 ピクセルの大きなダークグレーを描画します

(色: #4b4d4a) 長方形 (0, 1300, 1200, 400)

ステップ 29

ステップ 5 で説明したのと同じ方法で、照明効果を追加します。次に、フッターの上に高さ 10 ピクセルの長方形を描画し、画像に示すように上下に 2 本の線を追加して、微妙な効果を追加します。下に、図に示すように、領域の上に高さ 10 ピクセルの長方形を描画します (0、1290、 1200、10)、

カラー: #dcdcdc 上下に 2 本の線を追加してディテールを強化します。

4 つの行は次のとおりです: (0, 1290, 1200, 1)、色: #a3a3a3; (0, 1291, 1200, 1)、色: #ffffff; #ffffff; (0, 1300, 1200, 1)、色: #3e3e3e

ステップ 31

繰り返されるナビゲーションが配置される一番下の部分を作成します。ナビゲーションが配置されている上部から下に移動して、高さを約 40 ピクセルにします。すべてのグラフィックが収まるように、この時点でキャンバスを拡張する必要があることに注意してください。それを行う必要があります。その後、[画像] > [キャンバス サイズ] に移動し、レイアウト全体に合わせて高さを設定します。

一番下に複製のナビゲーションバーを作成します。上部のナビゲーション バーが配置されている四角形 (0、1260、1200、40) をコピーし、移動して、高さを 40 ピクセルにすることができます。これをキャンバスの一番下に配置し、アクティビティ ページのテキストの色を #494949 に変更します。すべてのグラフィックが収まるようにキャンバスを拡張する必要がある場合があることに注意してください。必要に応じて、[画像] > [キャンバス サイズ] をクリックして、レイアウト全体に合わせて適切な高さを設定します。 ナビゲーションバーの左側に著作権情報を追加します。

ステップ 32

細部に再度注意を払います。境界線の効果を高めるには、フッター ナビゲーション領域の上部に 1 ピクセルの白い境界線を追加します。

ステップ 33

ステップ 33

フッター コンテンツを追加し、グリッド内で適切に分離します。

直線ツール

を使用して、4本の直線 (130, 1346, 220, 1)、(370, 1346, 220, 1)、(610, 1346, 220, 1)、(850, 1346, 220, 1) 、色: #acacac

直線の上に

テキストツールを使用して、最新のブログエントリ、最近のコメント、広告、ツイート内容を追加します。テキストのフォント: Verdana; フォント サイズ: 12px、垂直方向のスケーリング 150%; カラー: #e6e6e6

最初の列の下に 3 つのブログ エントリを作成します。左側のボタンは、半径 5px、サイズ: 40px*18px、色: #da7203 の角丸長方形です。レイヤーのスタイルは、上のナビゲーション バーの黄色のボタンのレイヤー スタイルをコピーします

ボタンのテキストのフォント: Verdana Bold、フォント サイズ: 9px、太字、斜体、色: #e6e6e6

ボタンの右側のテキスト: Verdana; フォント サイズ: 12px、太字; 以下のテキストのフォント: Verdana; 会話画像を挿入

それにカラーオーバーレイレイヤースタイルを追加します: #ff8a00

2列目の下にメッセージリストがあります

です各リストの前に作成された会話アイコン: Verdana; フォント サイズ: #e6e6e6。人の名前を太字にします

次のメッセージ テキストのフォント: Verdana、フォント サイズ: 12px、色: #e6e6e6

3 番目の列の下で、長方形ツールを使用して 4 つの長方形を描画します。サイズはそれぞれ (610, 1368)、(730, 1368)、(610, 1482)、(730, 1482) の 100px*100px です

白いストロークを追加します

次に、適切な広告画像を追加し、各画像を長方形の上に移動し、右クリックしてクリッピングマスクの作成

を選択します。4番目の列の下で、 角丸長方形ツールを使用して、半径5px

の新しい角丸長方形(850、1367、221、135)を作成し、次に多角形ツールを使用して直立三角形を作成します

パス選択ツールを使用してこの三角形を選択し、適切な位置にドラッグします

次に、ダイレクト選択ツールを使用して一番下の点を選択し、Shiftキーを押しながらドラッグして上にクリックしますそして、適切な位置に移動します

最後に、このレイヤーに次のレイヤースタイルを追加します

ストロークカラー: #fbfbfb

内側のグローカラー: #a3a3a3

次に、図形の塗りつぶしの色を次のように変更します: #eaeaea

図形内にテキストを追加します。フォント: Androgyne; 色: #cc580f 、 #b95cef 、 #494949

下にテキストとアイコンを追加します

テキストフォント: Androgyne、フォントサイズ: 12px、色: #f3f3f3。 下に色付きの白い線を追加します: #f3f3f3

右側に画像を追加します

次のレイヤースタイルを画像に追加し、色: #2e0909 を追加し、レイヤーの不透明度を 28% に変更します

ステップ 34

ステップ34

最後に、すべてのレイヤーをレイヤーフォルダー内に整理します。

次に、関連するレイヤーを統合します。

デザイン

最終的なデザイン

追記: 全体のデザインは非常に満足です。前の手順はより詳細であり、次の手順については簡単に説明します。このため、その後の設計プロセスの補完に多大な時間がかかっていました。全体として、いくつかのテクニックはまだ使用されています。たとえば、アイコンをグレーにしたり、写真の色合いを変更したりするなどです。最後のダイアログ ボックスのデザイン (手順を補足するために元の図に基づいている) もハイライトだと思います。

詳細については PS Web デザイン チュートリアル XXIV - 美しい Web サイトをゼロからデザインする 関連記事については、PHP 中国語 Web サイトに注目してください。