ホームページ > 記事 > ウェブフロントエンド > PS Web デザイン チュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする
PS Web デザイン チュートリアル XXVII – 大胆で活気のあるポートフォリオをデザインする
- 高洛峰オリジナル
- 2017-02-13 11:10:211949ブラウズ
プログラマーとしての私の芸術的基礎は弱いです。設計能力を向上させるために、いくつかの成熟した Web PS チュートリアルを参照できます。文を言い換えれば、「唐の詩三百首を知っていれば、作り方を知らなくても暗唱できる」ということだ。
このシリーズのチュートリアルはオンラインの PS チュートリアルから来ており、すべて海外のもので、すべて英語です。これらの優れたチュートリアルを翻訳してみます。翻訳能力が限られているため、翻訳の詳細はまだ検討する必要があります。大部分のネチズンが私にアドバイスをくれることを願っています。
合意：
1. この記事で使用しているソフトウェアはPhotoshop CS5版です
2. オリジナルのチュートリアルのスクリーンショットは英語ですが、中国語版を再制作したものを再上映しました。
3. 元のテキストの一部の操作にはパラメータが提供されていません。テストを繰り返して測定したいくつかのパラメータは、赤字で示されています。一部の間違ったパラメータについては、正しいパラメータが赤いテキストで直接表示されます。
例: (90, 22, 231, 77) 、長方形の左上隅の座標が (90, 22)、幅 231、高さ 77 であることを示します。
例: (90, 22) は、四角形の左上隅の座標が (90, 22) であることを示します。四角形の他の 2 つのパラメーターはチュートリアルで指定されています。
4. 私自身の経験をチュートリアルの最後に添付します。チュートリアルなどの一部のステップを最適化したものもあります。
ステップ1
ステップ1
新しいドキュメント (900X900px) を作成します。
新しいドキュメントを作成します (900*900px)
「オレンジヘッダー」という名前の新しいレイヤーを作成し、900X450ピクセルの範囲を選択し、オレンジ色のグラデーションで塗りつぶします。
新しいレイヤーのオレンジ色のヘッダーを作成します。 900*450 ピクセルの選択範囲を作成し、オレンジ色のグラデーションで塗りつぶします。 長方形ツールを使用して長方形(0、0、900、450)を作成し、以下に示すようにグラデーションオーバーレイレイヤースタイルを追加するとより便利です
グラデーションエディターの色: #e37c60、#a42e00
ステップ2
ステップ2
ヘッダーを選択したら、「ヘッダー雲」という新しいレイヤーを作成します。 [フィルター] > [レンダリング] > [雲] に移動してヘッダー領域を雲で塗りつぶし、レイヤー モードを [覆い焼きカラー] に変更し、不透明度を 10% に下げます。ヘッダー領域の選択を使用して、新しいレイヤー ヘッダー雲を作成します。
(以前に 長方形ツール を使用して長方形を作成した場合は、Ctrl キーを押しながらレイヤー パネルで長方形のサムネイルをクリックする必要があります): フィルター> 雲をクリックし、雲で塗りつぶします。頭の部分。次に、レイヤーの描画モードを 覆い焼き に変更し、不透明度を 10% に調整します。
ステップ 3
ステップ 3
今すぐこの素晴らしいテクスチャ セットを PSDFAN からダウンロードしてください:テクスチャ サーズデイ: ダメージPSDFAN で以下のテクスチャを今すぐダウンロードしてください
テクスチャの 1 つをヘッダー選択範囲に貼り付けます。このレイヤーを「ヘッダー テクスチャ」と呼びます。
テクスチャの 1 つを頭の選択範囲に貼り付けます。レイヤーヘッダーテクスチャに名前を付けます
次に、このレイヤーの不透明度を 20% に下げ、レイヤーのブレンド モードを「オーバーレイ」に変更します。
次に、このレイヤーの不透明度を 20% に調整し、レイヤーの描画オプションを オーバーレイ に変更します。
ステップ 4
ステップ 4
次に、放射状グラデーション ツールを使用して、ヘッダーの右側の領域に白から透明の放射状グラデーションを作成します。
次に、頭領域の右側にある放射状グラデーション ツールを使用して、白から透明への放射状グラデーションを作成します。 以下に示すように、楕円ツールを使用して楕円 (450、0、450、450) を作成し、塗りつぶしを 0 に変更し、放射状のグラデーション オーバーレイを追加することもできます
次に、このレイヤーの不透明度を 20% に下げ、レイヤーのブレンド モードを「覆い焼きカラー」に設定します。
次に、このレイヤーの不透明度を 20% に調整し、レイヤーのブレンド オプションを 覆い焼きカラー に変更します。
ステップ5
ステップ5
「lighting 1」という名前の新しいレイヤーを作成します。投げ縄ツールを使用して、ヘッダーに三角形の破片のような選択範囲を作成し、この選択範囲を白から透明のグラデーションで塗りつぶします。
新しい照明レイヤーを作成します1。 なげなわツール を使用して、頭の領域に三角形の選択範囲を作成します。この選択範囲を白から透明のグラデーションで塗りつぶします
多角形ツールを使用して、Shift キーを押して正三角形を描き、塗りつぶしを 0 に変更し、Ctrl+T を押して自由に変形し、以下に示すように三角形に変換し、白から透明のグラデーション オーバーレイを追加することもできます。レイヤースタイルに
このレイヤー上で右クリックして「スマートオブジェクトに変換」を選択し、再度右クリックして「レイヤーのラスタライズ」を選択します。
次に、このレイヤーの不透明度を 5% に下げ、レイヤーのブレンド モードを「覆い焼きカラー」に設定します。
次に、このレイヤーの不透明度を 5% に調整し、レイヤーブレンドオプションを
覆い焼きカラーに設定し、適切な位置に調整します
ステップ6
ステップ6
このテクニックを繰り返して、ヘッダーに光の破片のコレクションを作成します。
このテクニックを頭の領域全体で繰り返して、一連の光と影の配列を作成します。 手順5でレイヤーを直接コピーして、適切な位置とサイズに調整できます
ステップ7
ステップ7
「menu」という名前の新しいレイヤーを作成し、キャンバスの上部に高さ 60 ピクセルの選択範囲を作成し、このレイヤーの不透明度を 40% に下げます。
新しいレイヤーメニューを作成します。キャンバスの上部に高さ 60 ピクセルの選択範囲 (0, 0, 900, 60) を作成します。黒で塗りつぶし、このレイヤーの不透明度を40%に調整します
次に、メニューの下に 1 ピクセルの白い線を作成するために、ドロップ シャドウを適用します (以下の設定)。
次に、メニューの下に幅 1 ピクセルの白い線 (0, 60, 900, 1) (不透明度 40%) を作成し、以下に示すようにドロップ シャドウを追加します。
ステップ8
ステップ8
いくつかのメニュー テキストと、メニュー項目の間に 1 ピクセルのパイダーをいくつか追加します。
メニュー テキストを追加し、2 つのメニュー間に 1 ピクセルの分割線を追加します (テキストと分割線の両方が白、テキストの不透明度が 80% に変更され、分割線の不透明度が 40% に変更されます)
ステップ9
ステップ9
この Macbook Pro ベクター セットをダウンロード
Macbook Pro ベクターを貼り付け、ヘッダーの右半分に配置します。
この Macbook Pro ベクター セットをダウンロード
Macbook Pro ベクターを貼り付け、頭の領域の右側に配置します。
次に、ラップトップを背景とよりよくブレンドするために、カラー オーバーレイを含む次のレイヤー ブレンド オプションを Macbook Pro レイヤーに適用します。
次に、以下に示すように、背景とよりよく一致するように見えるカラーオーバーレイを含むレイヤースタイルを Macbook Pro レイヤーに追加します。
カラーオーバーレイの色: #cc4d00
ステップ10
ステップ10
次に、「MacBook シャドウ」という名前の新しいレイヤーを作成し、Macbook Pro の下に楕円形の選択範囲を作成し、それを黒で塗りつぶします。これにより、ラップトップが下向きの影を落としているような印象になります。
次に、新しいレイヤーの MacBook シャドウを作成します。 MacBook Pro の下に楕円形の選択範囲を作成し、黒で塗りつぶします。次に、ガウスぼかしを追加します。これにより、ラップトップに下向きの影の雰囲気が加わります。
ステップ11
ステップ11
大きなヘッダー テキストを書き出します (フリー フォント Museo を使用しました)。
大きな見出しを書きます (無料の Museo を使用します) (Museo TT 700、フォント サイズ: 52 pt、水平ズーム 85%)
次に、以下に示すブレンド オプションを適用します。
次に、以下に示すようにレイヤー スタイルを追加します。
グラデーションエディターの色: #f0f0f0 および #d4d4d4
ステップ 12
ステップ 12
ヘッダーにさらにテキストを追加します。今回はフォントとして Arial を使用し、ヘッダーの背景色の濃いバージョンの色を選択します。
ヘッダー領域にテキストを追加します。今回は Arial を使用し、ヘッダー領域の暗い背景色を使用します (#992d01)
ステップ 13
ステップ 13
次に、ヘッダー セクションでフォームを作成します。フォーム入力用の角丸四角形 (半径 10 ピクセル) を作成し、以下に示すブレンド オプションを適用します。これにより、フォームがヘッダーの背景に埋め込まれたように見えるようになります。
ヘッダー領域にフォームを作成します。フォームに角丸長方形 (37, 361, 246, 39) (半径 10px) を作成し、以下に示すようにレイヤー スタイルを追加します。これにより、フォームがヘッダー領域の背景に埋め込まれたように見えます。
グラデーションエディターの色: #9a3100 および #6b2118
ステップ14
ステップ14
次に、フォームのボタンを作成します。
ヘッダー領域にボタンを作成します。 角丸長方形（298、361、185、39）（半径10px）を作成し、以下に示すようにレイヤースタイルを追加します。
グラデーションエディターの色: #bf8453 と #e6ad7e
ステップ 15
ステップ 15
フォーム要素にテキストを追加します。
フォーム要素にテキストを追加します。左側のテキストの色: #cbcbcb、右側のテキストの色: #992d01
ステップ16
ステップ16
ヘッダーの下の白い領域にテキストを追加します。例としてフィラー テキスト/画像を使用しました。
ヘッダー領域の下の白い領域にテキストを追加します。例として使用するテキストと画像を入力しました。
ステップ17
ステップ17
「フッター」という名前の新しいレイヤーを作成し、キャンバスの下部に選択範囲を作成し、それを明るい灰色で塗りつぶします。
新しいレイヤーのフッターを作成します。キャンバスの下部に選択範囲 (0, 800, 900, 100) を作成し、ライトグレー (#d3d3d3) で塗りつぶします。
ステップ18
ステップ18
新しいレイヤーを作成し、キャンバスの下部中央に「フッター」レイヤーと同じ明るい灰色の円を作成します。次に、このレイヤーを「フッター」レイヤーとマージします (以下の設定)。 ):
新しいレイヤーを作成し、キャンバスの中央下に円 (405, 770, 90, 90) を作成します。フッターレイヤーを同じライトグレー色で塗りつぶします。次に、フッターレイヤーと結合します。以下に示すように、グラデーション オーバーレイを追加します。
ステップ19
ステップ19
最後に、フッターにテキストを追加し、微妙なドロップ シャドウを追加します。
ほぼ完成です。フッター領域にテキストを追加し、ドロップ シャドウを追加します。
そして完了です!
最後の作品
追記：
これは簡単なチュートリアルです。ただし、いくつかのテクスチャとトリックを使用すると、良い結果も得られます。全体の配色は明るいオレンジで、温かみのある色で、人々に快適で暖かい感覚を与えます。
PS Web デザイン チュートリアル XXVII - 大胆で活気のあるポートフォリオのデザイン関連記事の詳細については、php 中国語 Web サイトphotoshop 画像処理チュートリアル に注目してください。