PS + Div + CSS create blue background-login page design

PS + Div + CSS creates a blue background

Compatible with mainstream browsers

How to design a page?

How can we better implement slice?

How to consider compatibility?

How do I use Div + CSS to make the percentage layout of the background?

Login page design

Design in Photoshop first

1. Open PS and create pixel PX * 768px. Open the layer panel, unlock the background layer, unlock it, and name it the background layer.

2. Create a folder named "color". Create a layer in it to determine the color to be used on the page.

Left: gradient: Click the foreground color: # 2366fe background color: # ffffff, select the gradient tool from top to bottom

Right side: Same as above, foreground color: # 009cff background color: # ffffff

PS: I chose the color on the right.

3. Create a website background.

3-1: Pull the page baseline first: Because the website is generally 960*768, and when it is created: 1200*768, there will be :( 1200-960) on both sides) /2 = 120px blank.

Specific Method: Ctrl + R. The ruler is displayed. From the ruler position on the left, click the left mouse button to hold the cursor.

Pull out two items at: 120px and 1080px.

3-2. Select the "Straw tool", open the "color layer", and select a color: I chose: # ipv4cf

Double-click "background layer" to open "layer style", select and click "gradient superposition ".

Click 1 in the figure. Color Card: The color picker is displayed ". Select the foreground color: # 4254cf. Down. OK.

Click 2 in the figure. Color Card: above. Select the foreground color: # 3694cf. Raise the color first and click OK.

OK.

After confirmation, the displayed background is displayed.

3-3: Create a background highlight. Create a new layer named highlight. Click "selection tool"-> "elliptical tool ". Pull a constituency in the figure,

Right-click the selection area and choose "yu"> "Enter 40px". OK

Turn on the color system, select "Straw tool", click the background color, select the color, and then click the foreground color. OK: My foreground color is: # d7ecf9 background color is: #5daee2

Select "gradient tool" and select "center gradient" to pull from top to bottom.

Last

 

4. design the logo and title

4-1: Create a folder, name the logo, and adjust the order

4-2: select the ing tool, parameters, select the logo folder, and click

4-3: double-click the new "shape 1" --> open "layer style" --> gradient superposition --> color value: # 09649e, #449cd5

4-4: Select projection, parameter

4-5: select: stroke, parameter

OK

4-6: Select "text tool"-> "input text _ MT" --> adjust the color: "# cbe5f7" --> adjust the size of _ 80px --> adjust the position --> set the font.

4-7: Open "layer style" --> Inner Shadow, parameter

Final

5: System title

5-1: Select "text tool"-> "input text _ XXX Management System" --> adjust the color: "# e7f5fd" --> resize _ 50px --> adjust position --> set the font.

5-2: Set the style:

5-3-1: add the reflection --> Add the "XXX Management System" layer --> press Ctrl + J to copy the layer; --> get "XXX Management System copy" --> right-click "XXX Management System copy" --> select "raster text" --> Get layer "XXX Management System copy" --> New place Layer 3 under "XXX Management System copy" --> select layer "XXX Management System copy" --> Ctrl + e merge layers downward, obtain "Layer 3"

Related Images:

Before raster:

After raster:

Before merging with Layer 3:

After merging with Layer 3:

PS: Pay attention to the red part. Otherwise, the merging will fail.

5-3-2: Select Layer 3: Ctrl + T, move the position to the front and bottom of the "XXX Management System", reverse, skew, result, OK

5-3-3: Select Layer 3 and add a mask.

 

5-3-4, select "Layer 3" Mask --> modify "foreground color: White" and background color: "Black" --> select "gradient tool" --> pull down from top to bottom .,

Note: The above is a little longer, and the font has just ended.

In this case, the effect is as follows:

Layer:

 

6. Create a login module, create a login folder, and place it under the logo

6-1: Set the background and select "". The logarithm is as follows:

6-2-1: Get the shape "Layer 2" --> double-click --> open "layer style" --> select "gradient superposition", parameter: # 09649e, #449cd5.

6-2-2: Select "projection", parameter

6-2-3: Select "stroke", parameter

6-2-4: Select "inner light ".

6-3: Adjust the location as needed.

6-4: follow Step 5-3 to set a background for "shape 2". The final effect is as follows:

6-5-1: two icons are available here. The solution is as follows:

CTRL + T --> resize --> Add "layer style" --> check "gradient fill", parameter "#80aed1, # c9e0f3" --> check "shadow" parameter: distance: 1px, size: 2px, opacity: 30%, the effect is as follows:

6-5-2: Create a text box. Select the parameter "" as follows:

6-5-3: Draw a text box, customize the size, adjust the position, and add the "layer style". The parameters are as follows:

The effect is as follows:

Make another text box to get the focus:

CTRL + J copy a layer and double-click to modify the "layer style". The parameters are as follows:

The focal point effect is as follows:

6-4: Password box, verification code input box, copy one, and adjust the location:

The effect is as follows:

7: Create the logon button.

7-1: follow the steps below: Draw a rounded corner between 6 and 5-2 and customize the size. The recommended radius is 4px. Adjust the position,

7-2: Open "layer style". The parameters are as follows:

Effect:

7-3: Create a button to get the focus and modify the style.

Effect:

The design is complete here,

Check the final file structure:

Last:

 

Reprinted please indicate the source: http://www.cnblogs.com/overstep/archive/2012/07/23/2604274.html