PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする-PS チュートリアル-php.cn

ホームページ

ウェブフロントエンド

PS チュートリアル

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

高洛峰

Feb 13, 2017 am 11:10 AM

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

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

合意：

1. この記事で使用しているソフトウェアはPhotoshop CS5版です

2. オリジナルのチュートリアルのスクリーンショットは英語ですが、中国語版を再制作したものを再上映しました。

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

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

例: (90, 22) は、四角形の左上隅の座標が (90, 22) であることを示します。四角形の他の 2 つのパラメーターはチュートリアルで指定されています。

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

ステップ1

新しいドキュメント (900X900px) を作成します。

新しいドキュメントを作成します (900*900px)

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

「オレンジヘッダー」という名前の新しいレイヤーを作成し、900X450ピクセルの範囲を選択し、オレンジ色のグラデーションで塗りつぶします。

新しいレイヤーのオレンジ色のヘッダーを作成します。 900*450 ピクセルの選択範囲を作成し、オレンジ色のグラデーションで塗りつぶします。長方形ツールを使用して長方形(0、0、900、450)を作成し、以下に示すようにグラデーションオーバーレイレイヤースタイルを追加するとより便利です

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

グラデーションエディターの色: #e37c60、#a42e00

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ2

ヘッダーを選択したら、「ヘッダー雲」という新しいレイヤーを作成します。 [フィルター] > [レンダリング] > [雲] に移動してヘッダー領域を雲で塗りつぶし、レイヤーモードを [覆い焼きカラー] に変更し、不透明度を 10% に下げます。

ヘッダー領域の選択を使用して、新しいレイヤーヘッダー雲を作成します。

(以前に長方形ツール を使用して長方形を作成した場合は、Ctrl キーを押しながらレイヤーパネルで長方形のサムネイルをクリックする必要があります): フィルター> 雲をクリックし、雲で塗りつぶします。頭の部分。次に、レイヤーの描画モードを 覆い焼き に変更し、不透明度を 10% に調整します。

vPS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ 3

今すぐこの素晴らしいテクスチャセットを PSDFAN からダウンロードしてください:テクスチャサーズデイ: ダメージ

PSDFAN で以下のテクスチャを今すぐダウンロードしてください

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

テクスチャの 1 つをヘッダー選択範囲に貼り付けます。このレイヤーを「ヘッダーテクスチャ」と呼びます。

テクスチャの 1 つを頭の選択範囲に貼り付けます。レイヤーヘッダーテクスチャに名前を付けます

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

次に、このレイヤーの不透明度を 20% に下げ、レイヤーのブレンドモードを「オーバーレイ」に変更します。

次に、このレイヤーの不透明度を 20% に調整し、レイヤーの描画オプションを オーバーレイ に変更します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ 4

次に、放射状グラデーションツールを使用して、ヘッダーの右側の領域に白から透明の放射状グラデーションを作成します。

次に、頭領域の右側にある放射状グラデーションツールを使用して、白から透明への放射状グラデーションを作成します。以下に示すように、楕円ツールを使用して楕円 (450、0、450、450) を作成し、塗りつぶしを 0 に変更し、放射状のグラデーションオーバーレイを追加することもできます

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

次に、このレイヤーの不透明度を 20% に下げ、レイヤーのブレンドモードを「覆い焼きカラー」に設定します。

次に、このレイヤーの不透明度を 20% に調整し、レイヤーのブレンドオプションを 覆い焼きカラー に変更します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ5

「lighting 1」という名前の新しいレイヤーを作成します。投げ縄ツールを使用して、ヘッダーに三角形の破片のような選択範囲を作成し、この選択範囲を白から透明のグラデーションで塗りつぶします。

新しい照明レイヤーを作成します1。 なげなわツール を使用して、頭の領域に三角形の選択範囲を作成します。この選択範囲を白から透明のグラデーションで塗りつぶします

多角形ツールを使用して、Shift キーを押して正三角形を描き、塗りつぶしを 0 に変更し、Ctrl+T を押して自由に変形し、以下に示すように三角形に変換し、白から透明のグラデーションオーバーレイを追加することもできます。レイヤースタイルに

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

このレイヤー上で右クリックして「スマートオブジェクトに変換」を選択し、再度右クリックして「レイヤーのラスタライズ」を選択します。

次に、このレイヤーの不透明度を 5% に下げ、レイヤーのブレンドモードを「覆い焼きカラー」に設定します。

次に、このレイヤーの不透明度を 5% に調整し、レイヤーブレンドオプションを

覆い焼きカラーに設定し、適切な位置に調整します

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ6

このテクニックを繰り返して、ヘッダーに光の破片のコレクションを作成します。

このテクニックを頭の領域全体で繰り返して、一連の光と影の配列を作成します。手順5でレイヤーを直接コピーして、適切な位置とサイズに調整できます

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ7

「menu」という名前の新しいレイヤーを作成し、キャンバスの上部に高さ 60 ピクセルの選択範囲を作成し、このレイヤーの不透明度を 40% に下げます。

新しいレイヤーメニューを作成します。キャンバスの上部に高さ 60 ピクセルの選択範囲 (0, 0, 900, 60) を作成します。黒で塗りつぶし、このレイヤーの不透明度を40%に調整します

次に、メニューの下に 1 ピクセルの白い線を作成するために、ドロップシャドウを適用します (以下の設定)。

次に、メニューの下に幅 1 ピクセルの白い線 (0, 60, 900, 1) (不透明度 40%) を作成し、以下に示すようにドロップシャドウを追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ8

いくつかのメニューテキストと、メニュー項目の間に 1 ピクセルのパイダーをいくつか追加します。

メニューテキストを追加し、2 つのメニュー間に 1 ピクセルの分割線を追加します (テキストと分割線の両方が白、テキストの不透明度が 80% に変更され、分割線の不透明度が 40% に変更されます)

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ9

この Macbook Pro ベクターセットをダウンロード

Macbook Pro ベクターを貼り付け、ヘッダーの右半分に配置します。

この Macbook Pro ベクターセットをダウンロード

Macbook Pro ベクターを貼り付け、頭の領域の右側に配置します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

次に、ラップトップを背景とよりよくブレンドするために、カラーオーバーレイを含む次のレイヤーブレンドオプションを Macbook Pro レイヤーに適用します。

次に、以下に示すように、背景とよりよく一致するように見えるカラーオーバーレイを含むレイヤースタイルを Macbook Pro レイヤーに追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

カラーオーバーレイの色: #cc4d00

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ10

次に、「MacBook シャドウ」という名前の新しいレイヤーを作成し、Macbook Pro の下に楕円形の選択範囲を作成し、それを黒で塗りつぶします。これにより、ラップトップが下向きの影を落としているような印象になります。

次に、新しいレイヤーの MacBook シャドウを作成します。 MacBook Pro の下に楕円形の選択範囲を作成し、黒で塗りつぶします。次に、ガウスぼかしを追加します。これにより、ラップトップに下向きの影の雰囲気が加わります。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ11

大きなヘッダーテキストを書き出します (フリーフォント Museo を使用しました)。

大きな見出しを書きます (無料の Museo を使用します) (Museo TT 700、フォントサイズ: 52 pt、水平ズーム 85%)

次に、以下に示すブレンドオプションを適用します。

次に、以下に示すようにレイヤースタイルを追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

グラデーションエディターの色: #f0f0f0 および #d4d4d4

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ 12

ヘッダーにさらにテキストを追加します。今回はフォントとして Arial を使用し、ヘッダーの背景色の濃いバージョンの色を選択します。

ヘッダー領域にテキストを追加します。今回は Arial を使用し、ヘッダー領域の暗い背景色を使用します (#992d01)

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ 13

次に、ヘッダーセクションでフォームを作成します。フォーム入力用の角丸四角形 (半径 10 ピクセル) を作成し、以下に示すブレンドオプションを適用します。これにより、フォームがヘッダーの背景に埋め込まれたように見えるようになります。

ヘッダー領域にフォームを作成します。フォームに角丸長方形 (37, 361, 246, 39) (半径 10px) を作成し、以下に示すようにレイヤースタイルを追加します。これにより、フォームがヘッダー領域の背景に埋め込まれたように見えます。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

グラデーションエディターの色: #9a3100 および #6b2118

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ14

次に、フォームのボタンを作成します。

ヘッダー領域にボタンを作成します。角丸長方形（298、361、185、39）（半径10px）を作成し、以下に示すようにレイヤースタイルを追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

グラデーションエディターの色: #bf8453 と #e6ad7e

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ 15

フォーム要素にテキストを追加します。

フォーム要素にテキストを追加します。左側のテキストの色: #cbcbcb、右側のテキストの色: #992d01

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ16

ヘッダーの下の白い領域にテキストを追加します。例としてフィラーテキスト/画像を使用しました。

ヘッダー領域の下の白い領域にテキストを追加します。例として使用するテキストと画像を入力しました。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ17

「フッター」という名前の新しいレイヤーを作成し、キャンバスの下部に選択範囲を作成し、それを明るい灰色で塗りつぶします。

新しいレイヤーのフッターを作成します。キャンバスの下部に選択範囲 (0, 800, 900, 100) を作成し、ライトグレー (#d3d3d3) で塗りつぶします。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ18

新しいレイヤーを作成し、キャンバスの下部中央に「フッター」レイヤーと同じ明るい灰色の円を作成します。次に、このレイヤーを「フッター」レイヤーとマージします (以下の設定)。 ):

新しいレイヤーを作成し、キャンバスの中央下に円 (405, 770, 90, 90) を作成します。フッターレイヤーを同じライトグレー色で塗りつぶします。次に、フッターレイヤーと結合します。以下に示すように、グラデーションオーバーレイを追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

ステップ19

最後に、フッターにテキストを追加し、微妙なドロップシャドウを追加します。

ほぼ完成です。フッター領域にテキストを追加し、ドロップシャドウを追加します。

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

そして完了です!

最後の作品

PS Web デザインチュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする

追記：

これは簡単なチュートリアルです。ただし、いくつかのテクスチャとトリックを使用すると、良い結果も得られます。全体の配色は明るいオレンジで、温かみのある色で、人々に快適で暖かい感覚を与えます。

PS Web デザインチュートリアル XXVII - 大胆で活気のあるポートフォリオのデザイン関連記事の詳細については、php 中国語 Web サイトphotoshop 画像処理チュートリアルに注目してください。

声明

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

Photoshop：価格モデルとオプションの探索May 02, 2025 am 12:12 AM

Photoshopには、単一の購入とサブスクリプションサービスの2つの価格モデルが提供されます。 1.単一の購入：1つの一括払い、永続的な使用で699ドルを支払いますが、更新やクラウドサービスはありません。 2。サブスクリプションサービス：月額20.99ドルまたは年間239.88ドルで、最新バージョンとクラウドサービスが利用可能です。 3。エンタープライズプラン：チーム管理や追加のクラウドストレージを含む、1か月あたり1か月あたり33.99ドル。 4。教育オファー：学生と教師は、複数のCreativeCloudアプリケーションを含む月額19.99ドルです。

Photoshop：マスタリングレイヤーと構成May 01, 2025 am 12:05 AM

Photoshopに新しいレイヤーを作成する方法は次のとおりです。1。レイヤーパネルの下部にある[新しいレイヤー]ボタンをクリックします。 2。ショートカットキーCTRLシフトn（Windows）またはコマンドシフトn（MAC）を使用します。レイヤーは、キャンバス上の透明なシートのようなもので、設計要素を個別に管理し、非破壊的な編集と実験、および設計レベルの改善を可能にします。

Photoshopアプリケーション：写真編集からデジタルアートまでApr 30, 2025 am 12:10 AM

Photoshopは、画像処理とデジタルアートの分野で広く使用されており、写真編集やデジタルアートの作成に適しています。 1。写真編集：明るさとコントラストの調整「輝度/コントラスト」ツールを使用します。 2。デジタルアート：ブラシツールを使用して絵画を作成します。 3。基本的な使用法：「赤い眼球工具」を使用して、赤目を取り除きます。 4。高度な使用法：画像合成にレイヤーとマスクを使用します。 5。デバッグ：レイヤーパネルをチェックして、失われたレイヤーを回復します。 6。パフォーマンスの最適化：メモリの使用量を調整して、実行速度を向上させます。

Photoshopのコア関数：画像編集と操作Apr 29, 2025 am 12:17 AM

Photoshopのコア関数は、色の調整、輝度、画像の輝き、フィルター効果の適用、画像サイズのトリミングと調整などを含む画像編集と操作です。1。明るさとコントラストを調整します。画像を開き、「画像」メニューで「調整」オプションを選択し、「輝度/コントラスト」を選択し、スライダーを調整します。 2。色の調整レイヤーとレイヤーマスクを使用します。[新しい塗りつぶしまたは調整レイヤーを作成]ボタンをクリックし、「スケール」を選択し、色レベルを調整し、レイヤーマスクを追加し、ブラシツールを使用して調整効果を制御します。

Photoshop：ラスターグラフィックス編集のパワーApr 28, 2025 am 12:13 AM

Photoshopはラスターグラフィックを処理するための強力なツールであり、そのコア機能にはレイヤーとマスク、フィルター、調整が含まれます。 1。レイヤーとマスクにより、独立した編集と非破壊的な変更が可能になります。 2。フィルターと調整は、画像の外観をすばやく変更できますが、画質に影響を与えることを避けるためには注意して使用する必要があります。これらの機能と高度なスキルを習得することにより、画像の編集と創造的な能力を大幅に改善できます。

Photoshop：画像操作のための汎用性の高いツールApr 27, 2025 am 12:13 AM

Photoshopは、その汎用性と直感的な動作インターフェイスのため、画像処理の分野で非常に強力です。 1）基本的な調整から、明るさやコントラストの調整などの複雑な合成まで、さまざまなタスクを処理できます。 2）レイヤーとマスクに基づいて機能すると、非破壊的な編集が可能になります。 3）使用の例には、カラーバランスの調整とレイヤーマスクの作成が含まれます。 4）過度の編集などの一般的なエラーは、履歴パネルを介して回避できます。 5）パフォーマンス最適化の提案には、スマートオブジェクトとショートカットキーの使用が含まれます。

Photoshopトライアルと代替案：無料アクセスの探索Apr 26, 2025 am 12:23 AM

Photoshopは、無料の7日間の試用期間を提供します。トライアル期間の使用を最大化するには、1）複数のAdobeアカウントにサインアップし、2）学生または教育バージョンを使用し、3）Adobe CreativeCloudを購読します。無料の代替品には、1）GIMP、2）Photopea、3）Krita、これらのソフトウェアは毎日の画像編集ニーズを満たすことができます。

写真家のためのPhotoshop：画像の強化とレタッチApr 25, 2025 am 12:01 AM

Photoshopの写真の強化とレタッチは、修理ブラシツールを使用して輝度とコントラストを調整することで実現できます。 1）明るさとコントラストを調整します：輝度とコントラストを増やして、画像 - >調整 - >明るさ/コントラストメニューを介して露出しない写真を改善します。 2）修理ブラシツールを使用します。ツールバーでHealingBrushToolを選択し、適用して画像のその他のポイントまたは傷跡を削除します。

See all articles