ps+div+css は青色の背景を作成します -- ログイン ページ design_html/css_WEB-ITnose

ps+div+cssで青色の背景を作成

主流のブラウザと互換性があります

ページをデザインするには?

より良いコーディネーションを達成するためにスライスする方法は?

互換性を考慮するにはどうすればよいですか?

div+css を使用して背景のパーセントレイアウトを作成する方法

ログインページのデザイン

Photoshop での最初のデザイン

1. ps を開き、レイヤーパネルを開き、ロックを解除してダブルクリックします。背景レイヤーをロック解除し、名前を付けます: 背景レイヤー

2. 新しいフォルダーを作成します。カラー システムという名前を付け、その中に新しいレイヤーを作成し、ページで使用する色を決定します。図に示すように:

左: グラデーション: 前景色をクリック: #2366fe 背景色: #ffffff、上から下までグラデーション ツールを選択します

右: 上と同じ、前景色: #009cff 背景色: #ffffff

ps: 右側のカラー システムを選択しました。

3. ウェブサイトの背景を作成します。

3-1: 最初にページのベースラインを取得します。Web サイトは通常 960*768 で、新しく作成されたときは 1200*768 なので、(1200-960)/2=120px の空白スペースが存在します。左側と右側です。

具体的な方法: Ctrl+R を押すとルーラーが表示され、左のルーラーの位置からマウスの左ボタンをクリックしたまま右にドラッグします。

それぞれ120pxと1080pxの2本の線を引き出します

3-2、「目のストローツール」を選択し、「カラーレイヤー」を開き、色を選択します: 私が選択したのは: #3694cf

Double 「背景レイヤー」をクリックして「レイヤースタイル」を開き、「グラデーションオーバーレイ」を選択してクリックします。

画像の 1: カラー カード ラベルをクリックすると、「カラー ピッカー」が開きます。前景色 #3694cf を選択します。下方向に調整します。もちろん。

画像の 2 をクリックします: カラー カード ラベル: 上と同様に、前景色: #3694cf を選択し、最初にそれを増やして確認します。

わかりました。

確認後、写真に示すような背景が得られます

3-3: 背景のハイライトを作成します: 新しいレイヤーを作成します: ハイライトという名前を付けます。 「選択ツール」→「楕円ツール」をクリックします。図に示すように、画像内の選択範囲を引き出します:

選択範囲を右クリックします?>フェザー-->40pxと入力して確認します

カラー システムを開き、「スポイト ツール」を選択します、背景色をクリックして色を選択し、OK、前景色をクリックして色を選択、OK: 私の前景色は: # d7ecf9 背景色は: # 5daee2

「」を選択しますグラデーションツール」を選択し、上のプルダウンからモード「中央グラデーション」を選択します。

最後の画像:

4、ロゴとタイトルをデザインします

4-1: 新しいフォルダーを作成し、ロゴに名前を付け、順序を調整します

4-2:間隔ツール、パラメーターは図に示すとおりです。ロゴフォルダーを選択し、画面上をクリックします

4-3: 新しく生成された「シェイプ 1」をダブルクリック --> 「レイヤー スタイル」を開きます -- > グラデーション オーバーレイ --> カラー値: # 09649e、# 449cd5

図に示すように:

4-4: チェック: 投影、パラメータは図に示すとおりです

4- 5: チェック: ストローク、パラメーターは図の通りです

OK

4-6: 「テキストツール」を選択します?>「テキスト_MT を入力」-->色の調整: "#cbe5f7"-- >サイズを調整_80px -->位置を調整 --> フォントを設定します。

4-7: 「レイヤー スタイル」 --> インナー シャドウを開きます。パラメータは図に示すとおりです:

最終的な図は次のとおりです:

5: システム タイトル

5-1 : 「テキストツール」を選択します?>「テキストを入力_XXX管理システム」-->色を調整します:「#e7f5fd」-->サイズを調整_50px-->位置を調整-->フォントを設定します。

5-2: スタイルを設定します:

5-3-1: リフレクションを追加します--> まず「XXX Management System」レイヤーを選択します--> Ctrl+J を押してレイヤーをコピーします。 -->「XXX Management System Copy」を取得-->「XXX Management System Copy」を右クリック-->「ラスタライズされたテキスト」を選択--> レイヤー「XXX Management System Copy」を取得--> ;新しいレイヤー 3 を作成し、「XXX Management System Copy」の下に配置します --> レイヤー「XXX Management System Copy」を選択します --> Ctrl+E を押してレイヤーを下にマージし、「Layer 3」を取得します

関連画像:

ラスタライズ前:

ラスタライズ後:

レイヤー3との結合前:

レイヤー3との結合後:

追記: 赤い文字部分に注意してください。そうでない場合は、マージでは効果は得られません

5-3-2: レイヤー 3 を選択します: ctrl+T、位置を「XXX Management System」の位置の真下に移動し、反転して傾けると、結果は図のようになります。 OK

5-3-3: レイヤー 3 を選択し、マスクを追加します

5-3-4、「レイヤー 3」マスクを選択 -->「前景色を白」に変更します。背景色は「黒」-->「グラデーションツール」を選択-->上からプルダウンします。写真に示すように、

ここで注意してください: 上部は少し長く、下部はちょうどフォントで終わります

このとき、エフェクト:

レイヤー:

6、ログインモジュールを作成し、新しいログインフォルダーを作成し、ロゴの下に置きます

6-1: 背景を作成し、「距離ツール」を選択します。対数は次のとおりです:

6-2- 1: 形状「レイヤー 2」を取得します --> ダブルクリック --> 「レイヤー スタイル」を開きます --> 「グラデーション オーバーレイ」にチェックを入れます。パラメーター: #09649e、#449cd5。

6-2-2: 「投影」をチェックします。パラメータは次のとおりです:

6-2-3: 「ストローク」をチェックします。パラメータは次のとおりです:

6-2-4: チェック「内側の輝き」パラメータは図に示すとおりです。

6-3: 必要に応じて位置を調整します。

6-4: ステップ 5-3 に従って、「シェイプ 2」の背景を作成します。完了後の最終的な効果は次のようになります:

6-5-1: ここでは 2 つのアイコンが使用されます。加工方法は以下の通りです

ctrl+T→サイズ変更→「レイヤースタイル」を追加→「グラデーション塗りつぶし」にチェック、パラメータ「#80aed1、#c9e0f3」→「」にチェックシャドウ」パラメータ: 距離: 1px、サイズ: 2px、不透明度: 30%、効果は次のとおりです:

6-5-2: テキストボックスを作成し、次のように「距離ツール」パラメータを選択します

6- 5-3: テキスト ボックスを描画し、サイズをカスタマイズし、位置を調整し、「レイヤー スタイル」を追加します。パラメーターは次のとおりです。

効果は次のとおりです。

フォーカスを取得する別のテキストボックスを作成します:

ctrl+J レイヤーを複製し、ダブルクリックして「レイヤースタイル」を変更します。パラメーターは次のとおりです:

フォーカス効果は次のとおりです:

6-4: パスワードボックス、確認コード入力ボックスをコピーし、位置を調整するだけです:

効果は次のとおりです:

7: ログインボタンの作成。

7-1: 手順: 6-5-2 に従って、丸い角の形状を描画します。サイズはカスタマイズされ、丸い角の半径が推奨されます: 位置を調整します。

7-2: 「レイヤースタイル」を開きます。パラメータは次のとおりです:

効果:

7-3: フォーカスを取得するボタンを作成し、次のようにスタイルを変更します:

効果:

ここに来てすべてをデザインしてください、完了です、

最終的なファイル構造を見てください:

最終的なレンダリング:

転載する場合は出典を示してください: http://www.cnblogs.com/overstep /archive/2012/07 /23/2604274.html