検索
ホームページウェブフロントエンドPS チュートリアルPS Web デザイン チュートリアル V – Photoshop でビジネス Web サイトのレイアウトを作成する方法

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

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

お約束:

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

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

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

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

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

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

こんにちは。今日はPhotoshopで別のWebレイアウト(テンプレート)を作成します。今回はビジネステンプレートを作成してみます。

皆さん、こんにちは。今日、新しい PS チュートリアル (テンプレート) をリリースします。PS でビジネス Web サイトのレイアウトを作成する方法です

Photoshop を開いて新しいドキュメントを作成し (Ctrl + N)、背景として #edebe6 を選択します

PS を開き、新しいドキュメント (Ctrl+N)(サイズ: 1020px*1120px)、背景色: #edebe6

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ステップ 1- ロゴと検索領域を作成します

まず、長方形ツールを選択します。ドキュメントの上部に黒い図形を追加し、文字ツールを使用してロゴ (使用フォント: Tahoma) を追加します。

ステップ 1 - ロゴと検索ボックスを作成します

まず、ドキュメントの上部で長方形ツールを使用します。黒い長方形 (0, 0, 1020, 12)、色: #403c33 を作成し、テキスト ツールを使用してロゴを追加します (フォント: Tahoma, (74, 62)、サイズ: 30px )。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

O ロゴの右側に検索フォームを作成します。そのため、長方形ツールを選択して形状を作成し、このレイヤースタイルを適用してから、文字ツールを使用して検索を書き込みます:

ロゴの右側に検索フォームを作成し、長方形ツールを使用して長方形(755, 70, 160, 25)を作成し、次のレイヤースタイルを追加してから、テキストツールを使用してテキスト検索

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

長方形ツールを選択した状態で、前のステップで作成した図形の右側に小さな図形を作成します。この図形には、このレイヤー スタイルを適用します。

前のステップで長方形ツールを引き続き使用します。長方形の右側に小さな長方形 (915, 70, 32, 25) を作成し、この長方形に次のレイヤー スタイルを追加します。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

カラーグラデーションの色: #b85a36、#fa7b46

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ストロークの色: #fde0ce

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

テキストツールを使用してテキストGOを追加し、次のレイヤー スタイルです

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ステップ 2 – ナビゲーションと注目エリアの作成

まず、長方形ツールを選択し、色として #aed1c4 を使用した緑色の形状を作成します

ステップ 2 – を作成するナビゲーションと注目エリア

まず、緑色の長方形を作成します(0, 188, 1020, 60) 、色: #aed1c4

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

長方形ツールを使用して、提案に赤い色を使用しました。この形状の寸法は次のとおりです: 918 x 62px

長方形ツールを使用して別の長方形 (51,156) を作成します。デモンストレーションの目的で赤を使用しました。この長方形のサイズは 918px*62px です

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次にレイヤー スタイルをいくつか適用します:

次に次のレイヤー スタイルを追加します:

内側のシャドウの色: #bac4a9

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

カラー オーバーレイの色: #96c6b6

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、それぞれにこのレイヤー スタイルを適用してリンクを追加します。

次にリンクを追加します。各リンクに次のスタイルを追加します:

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ペンツール(P)を使用して、ホームリンク上に小さな三角形を作成し、このレイヤースタイルを適用します:

ペンツールを使用して、ホームリンクの上に小さな三角形を作成し、次のレイヤースタイルを追加します:

ドロップシャドウの色: #5a7169

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、線ツールを使用して、間にいくつかの区切り線を作成します。これを作成するには、線ツールの太さを 1px

に設定し、線ツールを使用してリンク間に分割線を作成する必要があります。線ツールの太さを 1px に設定します

最初に暗い線 (#8fafa4) を追加し、次に白い線 (#aad4c6) を追加します。

最初に暗い線 (カラー: #8fafa4) を追加し、次に明るい線 (カラー: #aad4c6) を追加します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、レイヤーパレットで両方の線が選択されていることを確認しますそして、Ctrl + Eをクリックします(結合します)。このレイヤーを数回複製します(各リンクに区切り文字を付けるため)

次に、レイヤーパレットで2つの直線のレイヤーを選択し、Ctrl + E(結合します)レイヤー) を作成し、結合したレイヤーを数回コピーします (2 つのリンクごとに区切り文字を入れます)

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、長方形ツールを使用して別の形状を作成します。色として #d6e1c7 を使用し、このレイヤー スタイルを適用しました。 :

次に、長方形ツールを使用して別の長方形 (72, 218, 876, 254) を作成します (色: #d6e1c7)。次のレイヤー スタイルを追加します:

ストロークの色: #e4f1d3

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ナビゲーション用の素敵な 3D 効果を作成するには、ペン ツール (P) を使用して、このグレーの形状を作成します:

I右側に別の三角形を作成します。結果は次のとおりです。

ナビゲーション バーに素敵な 3D 効果を追加し、ペン ツールを使用して灰色の (色: #eaebe3) 三角形を作成します。

同様に、右側に別の三角形を作成します。これが私のレンダリングです

ペンツールの使用に慣れていない場合は、長方形をコピーし、サイズを調整し、角度を回転し、レイヤーを調整することができます。同じ効果です。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

文字ツール(T)でテキストを追加します

テキストツールを使用してテキストを追加します

大きなタイトルテキスト、フォント:Tahoma、サイズ:30px、次のレイヤースタイルを追加します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

段落テキストの色: #7f7f7f

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、私のストック画像からビジネス画像を検索します。Photoshop で画像を追加するときは、通常、解像度がかなり高いので、自由変形を使用してサイズを変更するだけです。キーボードから Ctrl + T を押すとアクティブになります。

私の写真コレクションからビジネスに関する写真を検索してください。 PS に画像を追加する場合、多くの場合解像度が非常に高いため、必要なのは画像のサイズを変更し、キーボードの Ctrl+T を押して自由変形ツールをアクティブにすることだけであることに注意してください。

PS CS5に画像を配置して開いた場合、後続の操作のために、レイヤーを右クリックして「レイヤーのラスタライズ」を選択する必要があります

これが私の画像です

これは私が追加した画像です

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ここで、長方形選択ツール (M) を選択し、画像の上でこの選択を行います:

(長方形選択ツールを選択した状態で)私の画像を右クリックし、フェザー

を選択します羽根の半径には 50 ピクセルを使用します。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 羽根の半径は 50 ピクセルに設定されます

次に選択範囲をもう一度右クリックしますが、今回は選択を反転します

次に選択した範囲をもう一度右クリックします領域、今回は「」を選択します 「反転」を選択します

削除キーを数回押して、画像の端の領域を削除し、ぼかし効果を実現します。この記事の画像は4枚あり、枚数は固定ではありません。 PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ブレンド モードを輝度に設定し、不透明度を 60% に下げます

結果は次のとおりです:

次に、注目エリア (そのためには、長方形ツールを選択し、図形を作成してから、このレイヤー スタイルを追加します。

次のステップは、注目エリア (テキストの下部) にボタンを追加することです。文章)。長方形ツールを使用して長方形

(392, 425, 92, 28) PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 を作成し、次のようなスタイルを追加します:

グラデーション オーバーレイの色: #ba5c38、#f97c44

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ストロークの色: #ffe0ce

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ボタンにテキストを追加 ここをクリックしてください。そして、前の検索バーの GO テキストのレイヤー スタイルをコピーします

私の出力

私のサンプル

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、この注目エリアをより見やすくしたいと思います。レイヤーパレットで注目エリアの作成に使用するメインシェイプを選択し、自由変形(Ctrl + T)を適用してから、このボタンを押して「ラップモード」に移行します

次に、注目のエリア。レイヤーパネルで注目エリアのメインの四角形を選択し、自由変形 (Ctrl + T) して、「自由変形とワープモードの切り替え」ボタンをクリックします

「ラップモード」になると、グリッドが表示されます

これでカスタム変形モードになり、変形を制御するためのグリッドが表示されます

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ここでこの角を選択し、マウスで少し下にゆっくりドラッグします

コントロールを選択します左下隅にポイントを置き、次にマウスを使って少し下にドラッグします (14px下にドラッグ)

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

右側でも同じことを行います

右下隅にあるコントロールポイントを選択します同じ手順を実行します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

完了したら、ENTERを押してください

ENTERを押して確認します

私の結果

私の結果

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

注目エリアの最後のステップは、影を作成することです。そのために、楕円ツールを選択し、この形状を作成します

最後に、注目エリアにシェーディングを追加するために、楕円ツールで楕円を追加します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、フィルター>ぼかし>ガウスぼかしに進み、半径 10 ピクセルを選択し、次に長方形マーク ツールを選択してこの選択を行います

次にクリックします: フィルター > ぼかし > ガウスぼかし、半径を 10 ピクセルに設定し、長方形選択ツールを使用して次の長方形を選択します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

キーボードの DELETE ボタンを押し、Ctrl + D を押して選択範囲をアンロードします:

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、曲線形状の下部に影を追加したいと思います。残念ながら、「標準的な方法」である楕円ツールを使用してきれいな影を作成することはできません。そのため、ブラシ ツールを使用します。

あなたがしなければならないのは、レイヤーパレットに新しいレイヤーを作成し(Ctrl + Alt + Shift + N)、丸いブラシ、黒色を選択し、形状の端に沿って描画することだけです。

次に、追加したいのは、湾曲した形状の底に影が入ります。残念ながら、私は「標準的な方法」である楕円形ツールを使用して見栄えの良い影を作成するのがあまり得意ではありません。そこでブラシツールを使って影を描いていきます。

レイヤーパネル(Ctrl + Alt + Shift + N)で新しいレイヤーを作成し、丸いブラシ(黒)を選択し、曲線形状のエッジに沿って黒い線を描きます。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、半径 12 ピクセルのガウスぼかし (フィルター>ぼかし>ガウスぼかし) を適用します

私の結果 – 素敵で柔らかいガウスぼかし)、半径を 12 ピクセルに設定します

私の結果 - a素敵なソフトシャドウ

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

ステップ 3 – コンテンツエリアの作成

これは非常に簡単に作成できます。まず、長方形ツールを使用してこの形状を作成します:

ステップ 3 - コンテンツエリアを作成します

この部分。とても簡単です。まず、長方形ツールを使用して長方形

(47, 416, 926, 464)、色: #d6e1c7

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

を作成します。 次に、長方形ツールを使用して左側に新しい灰色の長方形を作成します(47, 416, 25, 70)、色: #acb69e

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 ダイレクト選択ツールを使用して長方形の左下隅を選択し、DELETE キーを押して左下隅の制御点を削除します、影の三角形にします

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局 同様に、右側に新しい四角形(948,416,25,70)を作成し、右下隅の制御点を削除し、影の三角形になります反対側

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

次に、文字ツールを使用してテキストを追加します

次に、文字ツールを使用してテキストを追加します

文字ツールを使用してテキストを追加します。

タイトルのテキストの色: #4a5340

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

タイトルとコンテンツの間に、線ツールを使用して白い水平分割線を追加し、不透明度を 50% に設定します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

注目エリアのテキストと画像の間の区切り記号と同様に、2 つの列の間に影の区切り記号を追加します

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

コンテンツ領域はこれで完了です

これもまた、フッターです。注目エリアのレプリカなので、作成は非常に簡単です。

ステップ 4 – フッター

この部分は、注目エリアとまったく同じであるため、非常に簡単に作成できます。エリア。アイキャッチエリアと同じ手法で作っていきます

似ているので、アイキャッチエリアの該当レイヤーをコピーして適当な位置に移動し、「編集」>「変形」>「上下反転」をクリックし、その後、適切な微調整を行ってください。

文字ツールを使用してテキストを追加し、長方形ツールを使用して「ニュースレター」のフォームを作成します。オレンジ色のボタンは、注目エリアのボタンと同じレイヤー スタイルを使用しています。注目エリアを作成したら、フッターも作成できます。

文字ツールを使用してテキストを追加し、四角形ツールを使用してニュースレターのテキスト ボックスを追加します。オレンジ色のボタンは注目エリアと同じ画像です。レイヤースタイルボタン。注目エリアを完了するために私をフォローしている場合は、フッター領域も完了できる必要があります PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

フッター領域:

タイトル テキスト: カラー: #98a289

テキスト ボックス: 使用長方形ツール 長方形を描画し、レイヤー スタイルはヘッド領域のテキスト ボックスのレイヤー スタイルを直接コピーします。

テキスト ボックスのテキスト: テキスト ボックスを変更した後、テキスト ボックスのテキストを直接コピーします。 、適切な位置に移動します。

ボタン: 長方形ツールを使用して長方形を描画します。レイヤー スタイルは頭領域ボタンのレイヤー スタイルを直接コピーします。

ボタンのテキスト: 頭を直接コピーします。エリアボタンのテキストを変更したら、適切な位置に移動します

シャドウセパレーター: コンテンツエリアのシャドウセパレーターを直接コピーして、適切な位置に移動します

ここにあります。私の最終結果:

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

経験:

このチュートリアルでは、変形モードの使用を特徴とし、折り紙の特殊効果を完成させます

詳細については PS Web デザイン チュートリアル V - Photoshop で商用 Web サイトのレイアウトを作成する方法 関連について記事をご覧の際は、PHP 中国語 Web サイトにご注意ください。

PS网页设计教程V——如何在Photoshop中创建一个商业网站布局

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Photoshop:無料試用版と割引オプションの調査Photoshop:無料試用版と割引オプションの調査Apr 14, 2025 am 12:06 AM

最も経済的な方法でPhotoshopへのアクセスを取得できます。1。7日間の無料トライアルでソフトウェア機能を体験します。 2。季節のプロモーションだけでなく、生徒または教師の割引を見つけます。 3.サードパーティのWebサイトでクーポンを使用します。 4. Adob​​e CreativeCloudの毎月または年次プランを購読します。

デザイナー向けのPhotoshop:視覚的な概念の作成デザイナー向けのPhotoshop:視覚的な概念の作成Apr 13, 2025 am 12:09 AM

Photoshopで視覚概念の作成は、次の手順を通じて実現できます。1。新しいドキュメントを作成します。2。背景レイヤーを追加します。3。ブラシツールを使用して基本的な形状を描画します。4。テキストとグラフィックを追加します。

Photoshopは無料ですか?サブスクリプションプランの理解Photoshopは無料ですか?サブスクリプションプランの理解Apr 12, 2025 am 12:11 AM

Photoshopは無料ではありませんが、低コストまたは無料で使用する方法がいくつかあります。1。無料の試用期間は7日で、この期間中にすべての機能を体験できます。 2。学生と教師の割引はコストを半分に削減でき、学校の証明が必要です。 3. CreativeCloudパッケージは、プロのユーザーに適しており、さまざまなAdobeツールが含まれています。 4。フォトショーペルメントとLightroomは低コストの代替品であり、機能は少なくなりますが、価格は低くなっています。

Photoshopの価値:その機能に対するコストを計量しますPhotoshopの価値:その機能に対するコストを計量しますApr 11, 2025 am 12:02 AM

Photoshopは、強力な機能と幅広いアプリケーションシナリオを提供するため、投資する価値があります。 1)コア関数には、画像編集、レイヤー管理、特殊効果の生産、色の調整が含まれます。 2)プロのデザイナーや写真家に適していますが、アマチュアはGIMPなどの代替案を考慮する場合があります。 3)AdobeCreativeCloudを購読することは、必要に応じて、1回限りの支出を避けるために使用できます。

Photoshopの中核目的:クリエイティブな画像デザインPhotoshopの中核目的:クリエイティブな画像デザインApr 10, 2025 am 09:29 AM

Photoshopのクリエイティブな画像デザインでのコアの使用は、その強力な機能と柔軟性です。 1)設計者は、レイヤー、マスク、フィルターを介して創造性を視覚的現実に変換することができます。 2)基本的な使用には、トリミング、サイズ変更、色補正が含まれます。 3)レイヤースタイル、ブレンドモード、スマートオブジェクトなどの高度な使用法は、複雑な効果を生み出すことができます。 4)一般的な間違いには、不適切な層管理とフィルターの過度の使用が含まれます。これは、レイヤーを整理し、フィルターを合理的に使用することで解決できます。 5)パフォーマンスの最適化とベストプラクティスには、レイヤーの合理的な使用、ファイルの定期的な保存、ショートカットキーの使用が含まれます。

WebデザインのPhotoshop:UI/UXの高度なテクニックWebデザインのPhotoshop:UI/UXの高度なテクニックApr 08, 2025 am 12:19 AM

Photoshopは、Webデザインで使用して、高忠実度のプロトタイプを作成し、UI要素を設計し、ユーザーインタラクションをシミュレートできます。 1.基本設計のためにレイヤー、マスク、スマートオブジェクトを使用します。 2。アニメーションおよびタイムライン関数を介してユーザーの相互作用をシミュレートします。 3.スクリプトを使用して、設計プロセスを自動化し、効率を向上させます。

初心者の記事:PSブラシを使用してフォントに亀裂効果を追加します(共有)初心者の記事:PSブラシを使用してフォントに亀裂効果を追加します(共有)Apr 07, 2025 am 06:21 AM

前の記事「PS(お気に入り)を使用してプレート画像に印刷効果を追加するためのステップバイステップを教える」では、PSを使用してPSを使用してプレート画像に印刷効果を追加するための小さなトリックを紹介しました。次の記事では、PSブラシを使用してフォントに亀裂効果を追加する方法を紹介します。それを行う方法を見てみましょう。

Photoshop Advanced Typography:見事なテキスト効果の作成Photoshop Advanced Typography:見事なテキスト効果の作成Apr 07, 2025 am 12:15 AM

Photoshopでは、レイヤースタイルとフィルターを介してテキストエフェクトを作成できます。 1.新しいドキュメントを作成し、テキストを追加します。 2.影や外側の輝きなどのレイヤースタイルを適用します。 3.波効果などのフィルターを使用し、ベベルとリリーフ効果を追加します。 4.マスクを使用して、効果範囲と強度を調整して、テキスト効果の視覚的影響を最適化します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境