PS Web デザイン チュートリアル IX - 中括弧を賢く使って魅力的なコンサルテーション ページをデザインする

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

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

お約束:

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

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

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

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

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

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

このレイアウトを使用すると、教育と学習専用の Web サイト、ビジネス レイアウト、および管理レイアウトやマーケティング レイアウトを簡単に構築できます。このレイアウトは WordPress テーマでも変換できます。

専用。教育と学習の場合、このレイアウトを使用すると、Web サイト、ビジネス レイアウト、管理レイアウトまたはマーケティング レイアウトを簡単に構築できます。このレイアウトは WordPress テーマに変換できます。

デフォルトのドキュメントサイズを使用します: 960 x 900 ピクセル
新しいドキュメントを作成します。デフォルトのドキュメントサイズは 960*900 ピクセルです。他のサイズも使用できます

前景色を #1f0f0e に設定します。次に、ペイント バケツ ツールを使用してキャンバスを 1 回押します。これがコンサルティング レイアウトの背景になります。バケツ ツールを使用してキャンバスにペイントをスプレーします。これが私たちの相談ページの背景です。

横文字ツールを選択し、次のフォントとサイズを使用しました:

注: フォントの方法が「シャープ」か「ソフト」かについては、自分で実験する必要があります。このチュートリアルでは、異なる方法を使用して 2 回実行し、理由はわかりません。

レイヤーパレットのレイヤーを右クリックし、[シェイプに変換]を選択します

レイヤーパレットのテキストレイヤーを右クリックし、[シェイプに変換]を選択します

次のような形状になるまでこのシェイプを回転させます図形を回転するには、図形を選択し、CTRL+T を押してから、[編集] > [変換] > [回転] に移動することもできます。形状は下図の通りです。図形を回転するには、図形を選択し、Ctrl+T を押してマウスを使用して図形を回転します。別の方法は、[編集]>[変形]>[回転...]をクリックすることです

計算後、形状の位置点は(43, 296, 260, 84)になります

形状を数回複製しますそして、移動ツールを使用して、次の画像のように配置します

形状を複数回(3回)コピーし、移動ツールを使用して、以下の図のように配置します:

4つの形状は下から上に

(43,296)、カラー: #483d3c

(43,285)、カラー: #ff2609

(43,275)、カラー: #ffffff

(43,265) )、色: #ded3d1

前景色を #3d302f に変更し、角丸長方形ツールで長方形を作成します。この形状の作成に使用する色は # です。 ded3d1

長方形ツールを使用して、その上に新しい長方形を作成します。長方形の色は次のとおりです: #ded3d1

半径 50px、位置 (43, -50, 250, 400) の角丸長方形にすることをお勧めします

レイアウト 別の図形を追加します

ページの上部で、別の長方形を作成する必要があります

注: 後続の操作の便宜上、このステップでは長方形の高さが増加します。長方形は( 0, 0, 960, 90)

ペンツールで次の画像のような形を作ります。角を丸くしたいのですが

この形を複製します(CTRL+Jを押します)。 )、レイアウトの反対側に配置します。このオプションが有効になっていない場合は、レイヤー パレットでレイヤーを選択する必要があります。次のステップは、このレイヤーを位置合わせすることです。これが私の結果です。

下の画像に示すように、ペンツールを使用して形状を作成します。丸い角を作成しました

この図形を複製し (Ctrl+J を押します)、図形をページの反対側に移動します

クリック: [編集] > [変形] > [水平方向に反転]。このオプションが有効になっていない場合は、レイヤーパネルでレイヤーを選択する必要があります

まだペンツールの使い方が苦手なので、気が変わって丸いものを選択しました。長方形ツール、半径 10px に設定し、次の色で新しい角丸長方形 (-37、72、80、40) を作成します: #1f0f0e

次に、同じ色 (303、72) で別の角丸長方形を作成します。 , 700, 40)

右側では角丸長方形ツールで2つの図形を作成します。

それらは、(328, 96, 593, 242)、色: #ded3d1 と (328, 370, 593, 500)、色: #aea2a2 です

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

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

これが私の結果です

これが私の結果です

上部に角丸長方形ツールを使用してボタンを作成しますので、正方形のボタンを作成する方が簡単です

レイヤーパレットでレイヤーを右クリックし、ラスタライズレイヤーを選択します。 長方形マーキーツールを使用して、図形の下部に選択範囲を描きます

レイヤーパネルを右クリックし、[レイヤーのラスタライズ]を選択します。長方形選択ツールを使用して、ボタンの下部に選択範囲を描きます。

ボタンが選択されたレイヤーがあることを確認してから、キーボードの削除キーを押し、CTRL+D を押して選択を解除します。このセットから素敵なグラデーションを適用します: 27.000 Photoshop グラデーション 私のボタン。次のようになります:

ボタンのレイヤーが選択されていることを確認し、キーボードの削除キーを押してから、Ctrl+D を押して選択を解除します。次に、Photoshop の 27,000 個のグラデーションから美しいグラデーションを追加したいと思います。ボタンは次のようになります。

メンバーとして登録されていないため、以下に示すように手動でグラデーションを追加します

左側の色: #5a4f4d、右側の色: #3e3331

このボタンを複製し、移動ツールを使用してこのボタンの近くに配置します。

ボタンを複製して、適切なボタンに移動します移動ツールの位置を使用して

以下に示すように、2 番目のボタンに適切なグラデーションを追加します:

左側の色: #ff4a2b、右側の色: #ff2000

5 つのボタンをペアにして、それぞれボタンにテキストを追加します: ABOUT US、SERVICES、PORTFOLIO、BLOG、CONTACT。テキスト スタイルの設定は次のとおりです:

巨大なグラデーション セットから別のグラデーションを使用しました。

赤いボタンが表示されます。巨大なグラデーション セットから別のグラデーションを追加します。 (

上記のように、グラデーションは自分で設定する必要があります

)

ビジネス コンサルティング レイアウトの途中で、3 つの図形と 3 つの中括弧を作成します。

ビジネス コンサルティング レイアウトの途中で、3 つの角丸長方形と 3 つの中括弧を作成します

丸の色を変更します図形を白に設定し、レイヤー パレットで 6 つのレイヤーをすべて選択し、CTRL+E を押してすべてのレイヤーを 1 つのレイヤーに結合します。これが私の結果です。

角丸長方形の色を白に変更します。この6つのレイヤーを選択します。次に、Ctrl+E を押して、レイヤーを 1 つのレイヤーに結合します。ブラシツールを使用して空の領域を塗りつぶします。これが私の結果です

私のアプローチは次のとおりです:

1. 色を白にして新しい角丸長方形 (338、377、184、159) を作成します

2. テキスト ツールを使用して、右中括弧、フォント サイズ 194、フォント Book Antiqua、90 度回転。次に、適切な位置に移動します

3. 次に、長方形ツールを使用して空の部分を塗りつぶします

4. 先ほどの3つのレイヤーを結合し、2回コピーして適切な位置に移動します

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

これらのレイヤーに次のレイヤー スタイルを追加します。

次にいくつかのアイコン、

、いくつかのテキストを追加します

長方形ツールを使用して、レイアウトの下部に図形を作成します

長方形ツールを使用して、レイアウトの下部に白い長方形を追加します

(324, 696, 600, 144)

を追加します横文字ツールを使用してテキストを追加します。画像をクリックして、テキストを配置する方法を確認してください。

横文字ツールを使用してテキストを追加します。画像に従ってテキストを配置し、

ロゴのすぐ下に角丸長方形ツールを使用していくつかの形状を作成します。これらすべての形状に白色を使用します。各レイヤーの塗りつぶし値を 40% にします。

ロゴの下にいくつかの角丸長方形を追加します。色: ホワイト。これらのレイヤーの塗りつぶしを 40% に設定します

ボタンの上にテキストを配置します。

ボタンの上にテキストを配置します。

これが私の最後のコンサルティングレイアウトです。気に入っていただければ幸いです。あなたのウェブサイトに使用したい場合は、お知らせください。実際にどのように見えるか確認したいです。

これが私の最後のコンサルティングです。レイアウトを参照してください。気に入っていただければ幸いです。ウェブサイトのレイアウトに何を使用できるか教えてください。あなたの仕事を本当に知りたいです。

追記:

中括弧を使用してレイアウトを賢く実装します。素晴らしく見えるエフェクトが、実は単なる小さなトリックである場合もあります。

PS Web デザイン チュートリアル IX - 見事なコンサルテーション ページをデザインするためのカッコの賢い使い方については、PHP 中国語 Web サイトをご覧ください。