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.
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.
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
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
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"
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:
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:
7-3: Create a button to get the focus and modify the style.
The design is complete here,
Check the final file structure:
Reprinted please indicate the source: http://www.cnblogs.com/overstep/archive/2012/07/23/2604274.html