ps div css creates blue background--login page design_html/css_WEB-ITnose

ps div css to create a blue background

Be compatible with mainstream browsers

How to design a page?

How can slicing be better implemented?

How to consider compatibility?

How to use div css to create percentage layout in the background?

Login page design

Design in photoshop first

1. Open ps, create a new 1200px*768px; open the layer Panel, unlock, double-click the background layer, unlock it, and name it: Background Layer

2. Create a new folder: name it Color System, create a new layer in it, and determine the color to be used on the page. As shown in the picture:

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

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

ps: I chose the color system on the right.

3. Create website background.

3-1: First pull the page baseline: because the website is generally 960*768, and when it is newly created, it is: 1200*768, so there will be: (1200-960)/2=120px on the left and right sides blank.

Specific method: ctrl R, the ruler will appear, from the left ruler position, click and hold the left mouse button and drag right.

Pull out two lines, respectively at 120px and 1080px

3-2, select the "Eye Straw Tool" and open the "Color "System Layer", choose a color: I chose: #3694cf

Double-click the "Background Layer" to open the "Layer Style", select and click "Gradient Overlay".

Click 1 in the picture: Color Card Label: The "Color Picker" will open. Select the foreground color: #3694cf. Adjust downward. Sure.

Click 2 in the picture: Color card label: as above, select the foreground color: #3694cf, increase it first, and confirm.

OK.

After confirmation, you will get the background as shown in the picture

3-3: Create a background highlight: Create a new layer: Name it For highlights. Click "Selection Tool" > "Ellipse Tool". Pull a selection in the picture, as shown in the picture:

Right-click on the selection?>Feather-->Enter 40px, OK

Open the color system, select the "Eyedropper Tool", click on the background color, select the color, and confirm. Also click on the foreground color, select the color, and confirm: My foreground color is: # d7ecf9 and the background color is: # 5daee2

Select the "Gradient Tool" selection mode "Center Gradient" and pull it down from top to bottom.

Final picture:

4. Design logo and title

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

4-2: Select the distance tool, the parameters are as shown in the figure, select the logo folder, and click on the screen

4-3: Double-click the newly generated "Shape 1"-->Open "Layer Style"-->Gradient Overlay-->Color value: #09649e, # 449cd5

As shown in the picture:

4-4: Check: Projection, the parameters are as shown in the picture

4-5 : Check: Stroke, the parameters are as shown in the figure

Confirm

4-6: Select "Text Tool"?>"Enter Text_MT"--> ;Adjust color: "#cbe5f7"-->Adjust size_80px-->Adjust position-->Set font.

4-7: Open "Layer Style" --> Inner Shadow, the parameters are as shown in the figure:

The final figure is as follows:

5: System title

5-1: Select "Text Tool"?> "Input text_XXX Management System" --> Adjust color: "#e7f5fd" --> Adjust size_50px-->Adjust position-->Set font.

5-2: Set style:

5-3-1: Add reflection--> Select "XXX Management System" first Layer-->Press: ctrl J, copy one layer;-->Get "XXX Management System Copy"-->Right-click "XXX Management System Copy"-->Select "Rasterized Text"- ->Get the layer "XXX Management System Copy"-->Create a new layer 3 and place it under "XXX Management System Copy"-->Select the layer "XXX Management System Copy"-->ctrl E Merge the layers below to get "Layer 3"

Related pictures:

Before rasterization:

Raster After gridding:

Before merging with layer 3:

After merging with layer 3:

ps: Pay attention to the red part, otherwise the merge will not achieve the effect

5-3-2: Select layer 3: ctrl T, move the position to just below the "XXX Management System" position, Invert, tilt, the result is as shown in the figure, confirm

5-3-3: Select layer 3, add a mask

5-3-4, select the "Layer 3" mask --> Modify "Foreground Color to: White", Background Color to: "Black" --> Select "Gradient Tool" -- >Pull down from top. As shown in the picture,

Note here: the top is a little longer, and the bottom just reaches the end of the font

At this time, the effect:

Layer:

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

6 -1: Create the background, select the "Distance Tool", the logarithm is as follows:

6-2-1: Get the shape "Layer 2"--> Double-click--> ;Open "Layer Style"-->Check "Gradient Overlay", parameters: #09649e, #449cd5.

6-2-2: Check "Projection", the parameters are as shown:

6-2-3: Check "Stroke", the parameters are as shown:

6-2-4: Check the "Inner Glow" parameter as shown in the figure:

6-3: Adjust the position as needed.

6-4: Follow step 5-3 to make a background for "Shape 2". After it is done, the final effect is as follows:

6-5-1 :There are two icons used here. The processing method is as follows:

ctrl T-->Adjust size-->Add "Layer Style"--> Check "Gradient Fill", parameter "#80aed1, #c9e0f3"--> ; Check the "Shadow" parameters: Distance: 1px, Size: 2px, Opacity: 30%, the effect is as follows:

6-5-2: Create a text box, select "Distance" Shape Tool" parameters are as follows

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

The effect is as follows:

Make another text box with focus:

Use ctrl J to copy a layer and double-click to modify the "Layer Style". The parameters are as follows:

The focus effect is as follows:

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

The effect is as follows:

7 : Create a login button.

7-1: Follow steps: 6-5-2 to draw a rounded corner shape, the size is customized, the rounded corner radius is recommended: 4px; adjust the position,

7-2: Open "Layer style", the parameters are as follows:

Effect:

7-3: Make a button that gets focus, modify the style as shown:

Effect:

The design is now complete,

Look at the final file structure:

The final rendering:

Please indicate the source for reprinting: http://www.cnblogs.com/overstep/archive/2012/07/23/2604274.html