Home >Web Front-end >PS Tutorial >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?
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
The final 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"
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
##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
##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!