ps+div+css creates blue background--login page design

ps+p+css creates a blue background

Be compatible with mainstream browsers

How to design a page?

How to achieve better slicing?

How to consider compatibility?

How to use p+css to make the percentage layout of the background?

Login page design

First design in photoshop

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

2, create a new folder: name it color system, create a new layer in it, and confirm the page The color to be used. As shown in the picture:

Left: Gradient: Click 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 ruler position on the left, click and hold the left mouse button and drag right without releasing it.

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

##3-2, select "Straw Tools", open the "Color Layer", select 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 on 2 in the picture: Color card label: as above, select the foreground color: #3694cf, increase it first, and confirm.

Sure.

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

3-3: Create a background highlight: Create a new layer: name it 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 The background color is: # 5daee2

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

The final picture:

##4, Design logo and title

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

4-2: Select the spacing tool, the parameters are as shown in the figure, select logo folder, 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, parameters as shown in the picture

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

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"->"Enter text_XXX Management System"-->Adjust color: "# e7f5fd"-->Adjust size_50px-->Adjust position-->Set font.

5-2: Set style:

##5-3-1: Add reflection-->First In the "XXX Management System" layer --> Press: ctrl+J, copy one layer; --> Get "XXX Management System Copy" --> Right-click "XXX Management System Copy" --> Select "Rasterize 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 layers downward to get "Layer 3"

Related pictures:

Before rasterization:

After rasterization:

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 the "XXX Management System" position Directly below, invert and tilt, the result is as shown in the figure, OK

##5-3-3: Select layer 3 and add a mask

5-3-4, select the "Layer 3" mask-->Modify "Foreground Color to: White", Background Color to: "Black"-- >Select the "Gradient Tool"-->Pull down from the 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 and create a new login folder , place it under the logo

6-1: Create a 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 in the figure:

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

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", parameters "#80aed1, #c9e0f3"-- >Check the "Shadow" parameters: distance: 1px, size: 2px, opacity: 30%, the effect is as follows:

6-5-2: To create a text box, select the "Distance Tool" parameters as follows

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

##The effect is as follows:

Make another text box with focus:

ctrl+JCopy one layer, double-click to modify" 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: Login button creation.

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.php.cn/

For more ps+div+css to create a blue background--login page design related articles, please pay attention to the PHP Chinese website!