ホームページ  >  記事  >  ウェブフロントエンド  >  PS Web デザイン チュートリアル XXIX - PS でギャラリー レイアウトをデザインする方法

PS Web デザイン チュートリアル XXIX - PS でギャラリー レイアウトをデザインする方法

高洛峰
高洛峰オリジナル
2017-02-14 09:28:467796ブラウズ

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

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

お約束:

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

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

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

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

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

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

今週のチュートリアルでは、ギャラリー レイアウトを作成します。このチュートリアルでは 960 グリッドを使用しません。目的は、初心者に Photoshop でデザインするときに定規ツールがいかに重要であるかを示すことです。パターンの作成方法と使用方法、マスクとフィルターの使用方法にも取り組みます

この毎週のチュートリアルでは、ギャラリー Web レイアウトを作成します。このチュートリアルでは 960 グリッド システムは使用しません。目的は、Photoshop で Web ページのデザインを始めるときにルーラー ツールがいかに重要かを初心者に示すことです。パターンを使用したり、マスクやフィルターを使用して作成する方法も説明します

ステップ 1: ドキュメントを設定する

まず、Photoshop で 1200px x 1850px のドキュメントを作成します。

新しいドキュメントを作成して始めます。 PS では、サイズ: 1200px*1850px

前に述べたように、ルーラーとガイドがオンになっていることを確認してください。PS网页设计教程XXIX——如何在PS中设计一个画廊布局

先ほど述べたように、を使用します。

定規ツール

。ルーラーとガイドの両方がオンになっていることを確認してください

ルーラー: Ctrl + R

  • ガイド: Ctrl + ;

  • ルーラー: Ctrl + R

  • もう 1 つ重要なことがあります定規を使う上でツールは情報 (情報) パネルです。定規を使用して測定するときに、情報が右側のパネルに表示されることを確認してください。 Windows – 情報

  • にアクセスすると、これにアクセスできます。また、
  • ルーラー ツール

    を使用する際に重要なことの 1 つは、

    情報パネル
  • です。その目的は、測定中に
情報パネル

にルーラー情報を表示することです。これが右側のパネルに表示されていることを確認してください。表示されない場合は、[ウィンドウ] > [情報] をクリックすると表示できます。

サイトの合計幅は 960 ピクセルになります。そこで、[表示] – [新しいガイド] に移動して最初のガイドを作成し、値を 120 ピクセルに設定します。ただし、値を 1080 ピクセルに変更します。これにより、キャンバスの中央に合計 960 ピクセルが作成されます。 Web ページの合計幅は 960 ピクセルになります。そこで、[表示] > [新しいガイド] に移動し、値を 120px に設定して、最初のガイドを作成しましょう。ガイドを作成する手順を繰り返しますが、値を 1080 ピクセルに変更します。これにより、キャンバスの中央部分の幅が合計 960 ピクセルになります。ヘッダー セクションは、ロゴ、ナビゲーション、検索で構成されます。まず、ヘッダーという名前のフォルダーを作成し、その中にサブフォルダーを作成し、ロゴ、ナビゲーション、検索という名前を付けることが重要です。将来コーディングのために整理し、簡単に見つけられるようにするために適切に行うすべてのこと。

ヘッダー領域には、ロゴ、ナビゲーション バー、検索バーが含まれます。最初に行う必要があるのは、Header という名前のフォルダーを作成し、その中に Logo、Navigation、および Search という名前のサブフォルダーを作成することです。項目をグループ化して正しく整理し、将来コーディングするときに簡単に見つけられるようにすることが非常に重要です。

ヘッダーフォルダー内に新しいレイヤーを作成し、「bg」という名前を付けます。 長方形ツールを使用して、作成中の形状の寸法を表示できます。これは、[表示] – [新しいガイド] – [100px 水平] に移動して新しいガイドを作成します。どの方法を選択するかはあなた次第です。

ヘッダー フォルダーに新しい背景レイヤーを作成します。 長方形ツール を使用して、100%*100 ピクセルの長方形を作成します。 情報パネルを表示すると、作成した形状の寸法を確認できます。または、新しいガイドラインを作成して、[表示] > [新しいガイドライン] をクリックし、パラメーターを [水平 100px] に設定します。それはやり方次第です。

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

このブレンド オプションを追加します

次のブレンド オプションを追加します

  • グラデーション オーバーレイ: #dcdcdc、#ffffff

  • グラデーション オーバーレイ: #dcdcdc、#ffffff

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

次に行うことは、線ツールを使用して上から 55 ピクセルの距離に 2 本の線を作成することです。ただし、線のピクセルを完璧にするために、長方形マーキー ツールを使用することをお勧めします。

次に行うことは、線ツールを使用して 2 本の線を作成することです

( (0,55,1200,1), (0,56,1200,1))、上から 55 ピクセル。ただし、長方形マーキー ツールを使用して線をピクセル完璧にすることをお勧めします

    Line 1: #cfcfcf
  • Line 2: #ffffff
  • Line 1: #cfcfcf
  • Line 2 : #ffffff

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

ヘッダーのプレビューでわかるように、線の上にパターンがあり、背景のコンテンツを透明にして鉛筆ツールを使用します。 # cfcfcf 下のスクリーンショットに示すようにパターンを作成します。完了したら、[編集] – [パターンの定義] に移動し、任意の名前を付けます。

ヘッダー領域のプレビューでわかるように、パターンがあります。直線の上にあります。新しいドキュメントを作成します。サイズ: 9px*7px、背景は透明です。

鉛筆ツール

を使用して、下のスクリーンショットに示すようなパターンを作成し、色 #cfcfcf で塗りつぶします。完了したら、[編集] > [パターンの定義] をクリックし、任意の名前を付けます。

PS网页设计教程XXIX——如何在PS中设计一个画廊布局 前景の代わりにペイントバケットツールを使用してパターンに変更し、選択範囲を作成してこのパターンを選択し、ペイントバケットツールを使用してパターンで塗りつぶしを行います。以前に作成されました。選択範囲を作成し、

ペイントバケツツール

を使用してパターンで塗りつぶすと、パターンの追加作業が完了します。

長方形ツールを使用して長方形(0、48、1200、7)を作成し、0で塗りつぶし、次のパターンオーバーレイレイヤースタイルを追加することをお勧めします

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

ステップ 3: ロゴを作成するPS网页设计教程XXIX——如何在PS中设计一个画廊布局

ステップ 3: ロゴを作成する

これは単なるサイト名のロゴです。まずテキスト ツールを使用して、希望のサイト名を入力します。

これは単なるサイト名のロゴです。 テキスト ツールを使用して、目的の Web サイトの名前を入力します

フォント: Helvetica BOLD、フォント サイズ: 30px、テンプレート カラー: #494367; SHOW カラー: #A5AB0D

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

このブレンド オプションを追加します

次のブレンド オプションを追加します

  • インナー シャドウ: #000000

  • ステップ 4: ナビゲーションを作成する

ステップ 4: ナビゲーション メニューを作成する

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

PS网页设计教程XXIX——如何在PS中设计一个画廊布局 再びテキスト ツールを使用して、ナビゲーション リンクの色を配置します。 #555555

このブレンド オプションを追加します

次のブレンド オプションを追加します

ドロップ シャドウ: #ffffff

PS网页设计教程XXIX——如何在PS中设计一个画廊布局 検索バーは角丸長方形ツールを使用して設定します半径を 10 ピクセルに設定し、以下のスクリーンショットに示すような形状を作成します。

角丸長方形ツール

を使用して検索バーを作成し、半径を 10 ピクセルに設定して、角丸長方形 (65、805、275、70) を作成します。 ) 以下のスクリーンショットに示すように

最初に 4 つの新しいガイドラインを作成することをお勧めします: 垂直 780、垂直 805、水平 65、水平 100

  • 上のプレビューでわかるように、検索バーの左側が傾いているので、レイヤーを選択して Ctrl + T を押し、作業領域で右クリックして [歪み] を選択する必要があります。
プレビューでわかるように、検索バーの左側が傾いています。したがって、形状を変形し、レイヤーを選択して Ctrl + T を押し、作業領域を右クリックして

変形PS网页设计教程XXIX——如何在PS中设计一个画廊布局 を選択します。

下図のように高さを70に設定すると、幅が325pxになれば左側が交差点を通過するだけになります。

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

次に、ヘッダー内で形状の下部をマスクして、最初に前景を #000000 に設定し、ヘッダーでレイヤー背景を選択し、それを選択します。それが選択され、検索の形状を選択し、FX アイコンの横にあるレイヤー パネル領域のマスク アイコンを押します。下のスクリーンショットを参照してください。

次に、頭の領域と同じになるように、シェイプの底部をマスクする必要があります。まず前景色を #000000 に設定し、頭の領域の背景レイヤーで選択範囲を作成します。選択したら、検索バーの形状を選択し、レイヤーパネルの fx アイコン (レイヤースタイルの追加アイコン) の隣にあるマスクアイコンを選択します。以下のスクリーンショットを参照してください。

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

このブレンドオプションを追加します

次のブレンドオプションを追加します

  • インナーシャドウ: #000000

  • インナーグロー: #fff

  • グラデーションオーバーレイ: #e6e6e6、# dcdcdc

  • インナーシャドウ: #000000

  • インナーグロー: #ffffff

  • グラデーションオーバーレイ: #dcdcdc

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

今検索ボタンを作成しましょう。検索バーを選択し、2px 縮小して、任意の色で塗りつぶします。

次に、検索バー ボタンを作成しましょう。検索バーの選択範囲を作成し、2px 縮小して、任意の色で塗りつぶします (新しいレイヤーを作成し、ペイント バケツ ツール塗りつぶし色を使用します)。 Alt キーを押して、[選択]>[変更]をクリックすると、選択ポインターの横に - 記号が表示されます。この記号は、選択を解除するセクションを選択解除することができます。 長方形選択ツールを選択し、Altキーを押したままにすると、選択カーソルが表示されます。片側にマイナス記号があり、このマイナス記号は選択範囲の削除を意味します。これで、削除したい選択範囲を削除できます

PS网页设计教程XXIX——如何在PS中设计一个画廊布局 このブレンド オプションを追加します

次のブレンド オプションを追加します

インナー グロー: #ffffff

グラデーション オーバーレイ: #dcdcdc、#f9f9f9

PS网页设计教程XXIX——如何在PS中设计一个画廊布局

ストローク: #c2c2c2

インナーグロー: #ffffff

  • グラデーションオーバーレイ: #dcdcdc、#f9f9f9

  • ストローク: #c2c2c2

  • PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    検索アイコンを開いて位置を調整し、1ピクセルのドロップシャドウ#ffffffを追加します。そのため、アイコンにカラーオーバーレイを追加します: #c2c2c2 スタイルを統一します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    そして検索バーにテキストを追加します: 何かを検索します...フォント: Arial italic、フォント サイズ: 14px、色: #666666

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    ステップ 6: スライダーを作成するPS网页设计教程XXIX——如何在PS中设计一个画廊布局

    ヘッダー フォルダーの上にフォルダーを作成し、「四角形ツールを使用して」という名前を付けます。 #413f6b の塗りつぶし色で 100% x 250px を作成します。

    Header フォルダーに新しい Slider フォルダーを作成します。

    長方形ツールを使用して、幅 100%、高さ 250 ピクセル、塗りつぶし色: #413f6b の長方形 (0,99,1200,250)

    を作成します

    このブレンド オプションを追加します追加次のブレンド オプション

    インナー シャドウ: #ffffffPS网页设计教程XXIX——如何在PS中设计一个画廊布局

    [フィルター] – [スマート フィルター用に変換] に移動して、シェイプ レイヤーをスマート フィルターに変換します。再度フィルターに移動し、ノイズを追加します

      :
    • フィルター > スマート フィルターに変換

      をクリックして、シェイプ レイヤーをスマート オブジェクトに変換します。次に、もう一度クリックします:

      Filters> Slider 内に Noise フォルダーを追加し、Controls という名前を付けます。NextPrev 内に、塗りつぶし色 # の [次へ] ボタンと [前へ] ボタンを作成します。 676589 を入力し、40px x 40px の図形を作成します。
    • スライダー グループに Controls フォルダーを追加します。 Controls には、NextPrev と Slider Control という 2 つのサブフォルダーがあります。 NextPrev では、

      楕円ツール

      、塗りつぶし色: #676589、形状寸法: 40px * 40px を使用して、[次へ] ボタンと [前へ] ボタンを作成します。
    • (120, 204, 40, 40)

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    リソースで提供されている矢印アイコンをダウンロードし、下のスクリーンショットに示すようにサイズを変更して配置します。

    リソースで提供されている矢印アイコンをダウンロードして、キャンバスに配置します。下のスクリーンショットに示すようにサイズを変更して配置します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    形状をマスクします。まず前景色を #000000 に設定し、次に Ctrl キーを押しながらレイヤーをクリックして矢印アイコンを選択し、反転します。 Ctrl + Shift + Iを押して選択範囲を選択します。選択された状態で楕円形状を選択し、レイヤーパネルのfxアイコンの横にあるマスクアイコンを押します。

    形状にマスクを追加します。最初に前景色を設定します。 #000000 まで、次に Ctrl キーを押しながらレイヤーをクリックして矢印の選択範囲を作成し、Ctrl + Shift + I キーを押して選択範囲を反転します。選択範囲が表示されたら、楕円形レイヤーを選択し、レイヤーパネルの fx アイコン (レイヤースタイルの追加アイコン) の横にあるマスクアイコンをクリックします。 次に、矢印レイヤーを非表示にします。

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    図形を複製し、反対側に配置します。また、テキスト ツールを使用して、サンプルのタイトルと少しのコンテンツを書式に従って追加します。下のスクリーンショットに示すテキスト

    図形をコピーして反対側に配置します(1040, 204, 40, 40)。画像スライダーに置くサンプル画像をいくつか入手してください。そして、テキスト ツールを使用してテキストを追加します。以下のスクリーンショットのテキスト形式に従って、サンプル タイトルとコンテンツ テキストを追加します。

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    タイトルフォント: Helvetica BOLD、フォントサイズ: 22px、色: #ffffff;

    段落フォント: Arial、フォントサイズ: 12px、色: #E0DEFF; 他の色: #EAEC25

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    スライダー コントロールで作業します。半径 10 ピクセルの角丸長方形ツールを使用して、検索バーで行ったのと同じように形状を作成します。

    次に、スライダーバーのナビゲーションボタン。 角丸長方形ツールを使用して、半径を 10px に設定し、以下に示すように角丸長方形を作成します。検索バーと同じように変形します。また、以前と同様にレイヤーをマスクします。「ステップ: 5 検索バーを作成する」を参照してください

    このステップは比較的省略されているので、ここに追加します

    半径10pxの角丸長方形ツールを使用して、角丸長方形(960、324、100、50)を作成します

    Ctrl + Tを押して自由に変形し、形状を右クリックして

    変形を選択します

    、Shift キーを押しながら、右下隅のコントロール ブロックを幅が 130 になるまで右にドラッグします。次に、Shift キーを押しながら左下隅のコントロール ブロックを幅が 130 になるまで左にドラッグします。 160になります。 PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    Ctrlを押しながら紫色の背景レイヤーをクリックして長方形の選択範囲を取得し、次に赤い形のレイヤーを選択してレイヤーパネルのマスクボタンを押します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    このブレンドオプションを追加します

    次を追加しますブレンド オプション

    • グラデーション オーバーレイ: #dcdcdc、#ffffff

    • se ツールは、下のスクリーンショットに示すように形状を作成します。

    楕円ツール

    を使用して、以下のスクリーンショットに示すように形状を作成します PS网页设计教程XXIX——如何在PS中设计一个画廊布局 ( 978, 333, 9, 9)、(996, 333, 9, 9)、(1014, 333, 9, 9)、(1032, 333, 9, 9)

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    グレー色: #D4D4D4、緑色: #A5AB0D

    このブレンド オプションを追加します

    次のブレンド オプションを追加します

    ドロップ シャドウ: # ffffff

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    インナー シャドウ: #000000

    インナーシャドウ: #ffffff

    • これが結果になります。
    • これが最終的な効果です

    • 塗りつぶし色#000000の長方形ツールを使用して、100% x 5ピクセルの形状を作成し、レイヤーモードをレイヤーパネルで乗算し、不透明度を 30% に設定します。

      幅 100%、高さ 5px の長方形

      (0, 344, 1200, 5) を作成し、塗りつぶしの色: #000000 を設定し、レイヤーモードを に設定します。 [レイヤー] パネルで乗算し、不透明度を 30% にします

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 [選択] – [変更] – [選択範囲を 5 ピクセル展開] に移動して、スライダー コントロールの形状を選択し、5 ピクセル拡大します。

    新しいレイヤーを作成し、Borderという名前を付け、黒で塗りつぶし、レイヤーモードを乗算に変更し、不透明度を30%に変更します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    紫色の背景レイヤーを選択し、Ctrl+クリックを押して作成します次に、ボーダーレイヤーを選択し、レイヤーパネルのマスクボタンをクリックします

    左右に暗い色のブロックが2つあり、不調和です。修正を続けます。境界線レイヤーを右クリックし、スマートオブジェクトに変換を選択します。 Ctrl キーを押しながら前の水平ストリップ長方形レイヤーをクリックして選択範囲を作成し、Ctrl + Shift + I キーを押して選択範囲を反転します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次にボーダーレイヤーを選択し、レイヤーパネルのマスクボタンをクリックします

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    スライダーを作成する最後のステップは、最初にスライダーのベースを選択し、次にブラシツールを選択して、硬さを0%に設定し、選択範囲を約400ピクセルに設定します。 # ffffff カラーを選択し、レイヤー パネルでブレンド モードをソフト ライトに設定します。

    最後に、スライド バーにハイライト効果を追加します。まずスライド バーの選択範囲を作成し、次に

    ブラシ ツール を選択し、硬度を 0% に、サイズを 400px に設定します。別のレイヤーを色 #ffffff で塗りつぶし、レイヤーパネルでブレンドモードをソフトライトに設定します。

    新しいフォルダーを作成し、塗りつぶしの色を #ededed にして「注目のギャラリー」という名前を付けて形状を作成します。また、1px の線を 2 つ作成します。最初の線の色 #ffffff は図形の上部に配置され、2 番目の線の色 #c2c2c2 は下部に配置されます。

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 新しいフォルダーを作成します。長方形ツールを使用して、長方形

    (0, 349, 1200, 200)

    、幅 100%、高さ 200px、色: #ededed を作成します。そして、1px の直線を 2 本作成します。最初の直線は長方形の上部に配置されます

    (0, 349, 1200, 1)

    、色: #ffffff、2 番目の直線は長方形の下部に配置されます (0, 548, 1200, 1)、色: #c2c2c2。

    ご覧のとおり、スライドバーのコントロールブロックの下部に白い線があります。 Ctrl キーを押しながらコントロール ブロック レイヤーをクリックして選択範囲を作成し、Ctrl + Shift + I キーを押して選択範囲を反転します。白い直線のレイヤーを選択し、レイヤーパネルのマスクボタンをクリックします

    シェイプの上に新しいレイヤーを作成し、ハイライトという名前を付けてから、ブラシツールを使用してシェイプを選択します。選択範囲の中央に#ffffffブラシの塗りつぶし色を追加し、レイヤーモードをソフトライトに設定します。シェイプレイヤーに新しいレイヤーハイライトを作成します。次に、形状の選択範囲を作成します。

    ブラシ ツール

    を使用して選択範囲の中心を白で塗りつぶし、レイヤーの描画モードをソフト ライトに設定しますPS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次に、注目のギャラリーのサンプル投稿に取り組んでみましょう。 まず、post という名前のフォルダーを作成します。次に、100 ピクセル x 100 ピクセルのサンプル サムネイルをキャンバスに配置します。また、テキスト ツールを使用してタイトルとコンテンツを追加します。PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次に、注目ギャラリーにサンプル リストを作成しましょう。まず、フォルダー投稿を作成し、100px*100px のサンプルサムネイルをキャンバスに配置し、

    テキストツール

    を使用してタイトルとコンテンツを追加します

    タイトルフォント: Arial、フォントサイズ: 16px、色: #363636; : Arial、フォントサイズ: 12px、色: #636363

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    サムネイルの下に新しいレイヤーを作成し、影という名前を付けます。ペンツールを使用して、以下のスクリーンショットに示すような形状を作成します。次に、フィルター – ぼかし – ガウスぼかし 1px に移動し、不透明度を 50% に設定します。

    サムネイルの下に新しいレイヤーシャドウを作成し、ペンツールを使用してスクリーンショットに従って形状を作成します。次に、フィルター > ぼかし > ガウスぼかし をクリックし、レイヤー パネルで不透明度を 50% に設定します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次に、「rate」という名前を付けます。星のアイコンを選択してキャンバスに配置し、下のスクリーンショットに示すように配置します。

    新しいフォルダーレートを作成します。次に、下のスクリーンショットに示すように、星のアイコンを開いてキャンバスに配置します。#e7e918、#fffd76

    ストローク: #eaec25PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    シャドウ: #000000

    グラデーション オーバーレイ: #e7e918、 #fffd76
    • stroke:#eaec25 ffffffを透明にしてから、レイヤーパネルで不透明度を70%に設定します。
    • 星レイヤーの選択範囲を作成し、星の中央から下までの選択範囲を削除し、別のレイヤーで線形グラデーションで塗りつぶします。 #ffffff から透明に、レイヤーパネルで不透明度を 70% に設定します

    • これが結果です

    • 星を 4 回コピーします。フォルダーを 2 回投稿し、下のスクリーンショットに示すように配置します

    ステップ 8: 投稿PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 ステップ 8: リスト

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    #ededed で背景レイヤーを塗りつぶします。フォルダーを作成して「Body Posts」という名前を付け、サブフォルダーを作成して post という名前を付けます。投稿用の 300 ピクセル x 200 ピクセルの画像サムネイルを作成し、それをキャンバスに配置します。長方形ツールを使用して 300 ピクセル x 45 ピクセルの形状を作成します。色は以下のスクリーンショットを参照してください。

    背景レイヤーを色: #ededed で塗りつぶします。新しいフォルダー Body Posts を作成し、サブフォルダー 投稿を作成します。次に、キャンバス上にリストの 300 ピクセル x 200 ピクセルのサムネイルを作成します。 長方形ツール を使用して 300px*45px の長方形を作成し、任意の色で塗りつぶします。以下のスクリーンショットを参照してください

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    このブレンド オプションを追加します

    次のブレンド オプションを追加します

    • ドロップ シャドウ: #000000

    • グラデーション オーバーレイ: #f7f7f7、#ffffff

    • 投影: # 000000

    • グラデーションオーバーレイ: #f7f7f7, #ffffff

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    また、テキストツールを使用してサンプルタイトルを作成し、投稿フォルダーに配置します。以下のスクリーンショットの設定に従ってください。

    注目のギャラリーから回転フォルダー (評価スター) を投稿フォルダーにコピーし、適切な場所に配置します。そして、

    テキスト ツールを使用してサンプル タイトルを作成し、下のスクリーンショットに示すように

    タイトル テキストを設定します。フォント: Helvetica、フォント サイズ: 16px、色: #363636

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    未評価のスターの場合スタイルは、グラデーション オーバーレイを削除して、インナー シャドウに置き換えるだけです。

    マークのない星のスタイルは、グラデーション オーバーレイを削除して、インナー シャドウに置き換えることです。

    また、シャドウとストロークを削除して、白い色のオーバーレイ

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    投稿フォルダーを 5 回複製し、以下のスクリーンショットに示すように配置します

    ステップ 9: ページネーション

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    ステップ 9: ページネーション ボタン

    角丸長方形ツールを選択します。そしてセット半径を 5 ピクセルに設定し、それらの投稿の下に 620 ピクセル x 45 ピクセルの図形を作成します。

    長方形長方形ツール を選択し、半径 5 ピクセル、リストの下に 620 ピクセル * 45 ピクセルの角丸長方形

    (120, 1403, 620, 45)

    を作成します。

    カラー: #fffcfd

    このブレンドオプションを追加

    次のブレンドオプションを追加

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    インナーシャドウ: #000000

    インナーシャドウ: #000000

    • テキスト ツールを使用して、下のスクリーンショットに示すようにページ番号を入力します。

    テキスト ツールPS网页设计教程XXIX——如何在PS中设计一个画廊布局 を使用して、下のスクリーンショットに示すようにページ番号を書き込みます

    テキスト フォント: Verdana、フォント サイズ: 12px。ページ番号テキストの色: #7E7E7E、ページ番号 1 の色: #363636、最後の色: #7266FE

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    ステップ 10: サイドバー

    ステップ 10: サイドバー

    投稿から 40 ピクセルの距離に #c2c2c2 の 1 ピクセルの線を作成し、その線をマスクし、先端を塗りつぶしたブラシ ツールを使用してフェードさせます。 #000000 の色が表示されます。

    リストから 40px の直線を作成し、色: #c2c2c2 を作成します。フェードアウト効果、ブラシツールを使用、塗りつぶし色: #000000。作成するものは以下のスクリーンショットのようになります

    フェードアウト効果を作成するには、

    レイヤー > ベクターマスク > すべて表示 をクリックすることをお勧めします。次にグラデーションツールを使って下から黒から透明に塗りつぶします

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    線を複製して左に移動し、色を#ffffffに変更します。以下のスクリーンショットに示すように配置します。

    この行をコピーして左に移動し、色を #ffffff に変更します。同じ色を使用してまっすぐな水平線を作成し、以下のスクリーンショットに示すように配置します。

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次に、作成した線の下に新しいレイヤーを作成し、「影」という名前を付けます。選択、グラデーション ツール、消しゴム ツールを使用して、以下のスクリーンショットにあるように影レイヤーを設定します。乗算し、不透明度を 50% にします。

    次に、これらの直線の下に新しい影のレイヤーを作成します。スクリーンショットにあるように、

    選択ツール

    グラデーション ツール消しゴム ツールを組み合わせて使用​​します。影レイヤーを乗算に設定し、不透明度を 50% に設定します

    下のスクリーンショットに示すように、レイヤーを複製して上に配置します。調整はあなた次第ですが、気に入らない部分を消去するだけです。 .

    このレイヤーを複製し、下のスクリーンショットに示すように上に配置します。調整次第ですが、気に入らない部分は消してください

    新しい選択範囲を作成し、

    グラデーションツールを使用して水平方向と垂直方向に描画し、垂直直線と同じマスクを追加することをお勧めします

    角丸長方形ツールを選択し、以下のスクリーンショットに示すように形状を作成します。形状の幅はキャンバスの残りの幅で、高さは 40 ピクセルになります。 PS网页设计教程XXIX——如何在PS中设计一个画廊布局 角丸長方形ツール

    を選択し、半径を 10px に設定します。以下に示すように、シェイプ

    (760, 597, 320, 40)

    を作成します。シェイプの幅はキャンバスの残りの幅で、高さは 40 ピクセルです

    長方形マーキー ツール を使用して選択範囲を作成します ( 780、500、350、200)、長方形のレイヤーを選択し、レイヤーパネルのマスクボタンをクリックします

    このブレンドオプションを追加します

    次のブレンドオプションを追加しますPS网页设计教程XXIX——如何在PS中设计一个画廊布局

    グラデーションオーバーレイ: # 494367 、 #6b6393、 #494367

    グラデーション オーバーレイ: #494367、 #6b6393、 #494367
    • テキスト ツールを使用してヘッダー タイトルを追加します。
    テキストツールを使用する

    タイトルを追加する。フォント: Helvetica、フォント サイズ: 24px、色: #ffffff。 PS网页设计教程XXIX——如何在PS中设计一个画廊布局 ドロップシャドウスタイルを追加します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    次に、ソーシャルアイコンを開いてキャンバスに配置し、以下のスクリーンショットに示すように配置し、テキストツールを使用して対応するソーシャルアイコン名を追加します。

    アイコンを配置します。以下のスクリーンショットに従ってキャンバスを作成し、テキスト ツールを使用して、対応する説明テキストを各アイコンに追加します。フォント: Helvetica、フォント サイズ: 16px、カラー: #363636

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    2 つの新しいフォルダーを作成し、「カテゴリ」と「当社のパートナー」という名前を付けます。テキスト ツールとライン ツールを使用して、下のスクリーンショットに表示される内容を実行します。

    カテゴリとパートナーという 2 つの新しいフォルダーを作成します。以下のスクリーンショットのように、文字ツール線ツールを使用します

    タイトルフォント: Helvetica、フォントサイズ: 18px、左の文字色: #363636、右の文字色: #655DF3

    リストフォント: Tohoma、フォント サイズ: 12px、色: #7266FE

    区切り線: 上の色: #C2C2C3、下の色: #FFFFFF

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    ステップ 11: フッター

    ステップ 11: ページフット

    新しいフォルダーを作成し、「フッター」という名前を付けます。フッター内には、「About」、「Most Love」、および「Site Links」という名前のサブフォルダーがあります。塗りつぶしの色を #413f6b にして、適切なサイズのフッターを作成します。新しいフォルダーのフッターを作成します。フッター ファイルには、About、Most Love、Site Links のサブフォルダーがあります。

    長方形ツール

    を使用して、フッターに適した長方形 (0、1498、1200、352) を作成します。色: #413f6b

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    このブレンド オプションを追加します

    次のブレンド オプションを追加します

      インナー シャドウ: #ffffff
    • インナー シャドウ: #ffffff
    • は #000000 である必要があります

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    フィルター – スマート フィルター用に変換に移動してシェイプ レイヤーをスマート フィルターに変換し、再度フィルターに移動します

    次をクリックしてシェイプをスマート オブジェクトに変換します:

    フィルター > スマート フィルターに変換

    、もう一度フィルターをクリックし、ノイズを追加

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 し、白い水平線 (0、1501 、 1200、1)、不透明度を 20% に設定します

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    テキストツールを使用してダミーテキストを追加し、テキストの書式設定については、以下のスクリーンショットを参照してください。 .

    about フォルダーに情報テキストを追加します。

    テキスト ツール

    を使用してテキストを追加し、以下のスクリーンショットに示すようにテキストの書式を設定しますタイトル: フォント: Helvetica、フォント サイズ: 18px、右側のテキストの色: #FFFFFF

    段落と著作権情報のテキスト: フォント: Helvetica、フォント サイズ: 12px、テキストの色: #E0DEFF

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    テキスト ツールを使用してサイト リンク フォルダーにリンクを追加し、テキストを追加します

    タイトル: フォント: Helvetica、フォント サイズ: 18px、サイトの色: #FFFFFF; 右のテキストの色: #ECED2Bリストのテキスト: フォント: Helvetica、フォント サイズ: 12px、テキストの色: #E0DEFF

    分割線: 上の線の色: # 2F2A47; 下の線の色: #5C5A89

    テキストツールを使用して、50ピクセル x 50ピクセルのサムネイルも作成し、下のスクリーンショットのように配置します。 PS网页设计教程XXIX——如何在PS中设计一个画廊布局 テキスト ツール

    を使用して、リストのタイトル、これが好き、コメントを追加します。 50*50 のサムネイルを作成し、以下のスクリーンショットに示すように配置します

    タイトル: フォント: Helvetica、フォント サイズ: 18px、ほとんどの色: #FFFFFF; 右側のテキストの色: #ECED2B

    リストのタイトル: フォント: Arial、フォント サイズ: 14px、色: #FFFFFF

    下の小さなテキスト: フォント: Arial、フォント サイズ: 11px、色: #ECED2B、#E0DEFF

    区切り線: 上の直線の色: #2F2A47;下の直線の部分: #5C5A89

    最後のステップは、著作権情報を追加し、「トップに戻る」ボタンを追加することです。矢印アイコンを開いて上向きに回転させます。

    最後のステップは、著作権情報を追加し、「トップに戻る」ボタンを追加することです。 。矢印アイコンを開いて、矢印が上になるように回転させます PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    このブレンド オプションを追加します

    次のハイブリッド オプションを追加します

    ドロップ シャドウ: #000000

    グラデーション オーバーレイ: #DCDCDC、#FFFFFFF

    • シャドウ: #000000

    • グラデーション オーバーレイ: #dcdcdc、#ffffff

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 ついに完成しました!

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    追記:

    これは良いチュートリアルです。多くのマスキング技術が使用されています。全体的な配色はシンプルで調和が取れており、目に心地よいです。

    このチュートリアルをオンラインで調べたところ、テキストの説明と無効なデッドリンクしかありませんでした。この Web サイト WayBack Marchine のおかげで、このチュートリアルのバックアップを見つけ、このチュートリアルの翻訳を正常に完了することができました。

    PS网页设计教程XXIX——如何在PS中设计一个画廊布局 同時に、アップロードした写真に基づいて類似した写真を見つけることができる TinEYE というウェブサイトも紹介しましょう (新機能には、指定した色の比率に基づいて関連する写真を見つけることも含まれます)

    下の写真は、チュートリアルの折り紙をアップロードしました。最後に、非常に優れた強力な PSD 素材を見つけました。

    PS Web デザイン チュートリアルの詳細については、XXIX - PS でギャラリー レイアウトをデザインする方法 関連記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。