Author: Brother Mouse
Today I will demonstrate to you the process of making a commercial web page. Friends who know web pages should know the importance of Photoshop in this process, because it is the basis for web page production. Therefore, the author has prepared this set of tutorials. The purpose is to hope that beginner friends can have a deeper understanding of the production process. In the days to come, I will prepare more, compared to promotional albums, public welfare posters, etc., the production process. Let's get started now!
Let’s take a look at the final renderings first:
renderings
Figure (1) First select File>New (CTRL+N) and set parameters in the dialog box. As shown in Figure 1.
Set parameters
Figure (2) Create a new layer. Now start with the background. First set the color of the gradient (here I use red and black as the background color. The color can be adjusted according to your own preferences.) Hold down shift+mouse in the picture Left click to stretch downward in a straight line. As shown in Figures 2 and 3. +
Gradient Editor
Gradient effect diagram
Figure (3) After setting the background color, use the burn and dodge tools (shortcut key o) to edit it to give it a textured feel. As shown in Figures 4 and 5.
A bit of a fabric feel
Burn and Dodge Tools
Figure (4) After using the marquee tool (shortcut key m) to select the corresponding range in the upper right corner, hold down ctrl+j to copy a separate layer. Editing the style of it. As shown in Figures 6 and 7.
Hold down ctrl+j to copy a layer individually
Editing of layer styles
Figure (5) Select layer 2, use the same method as above, select the corresponding range, and hold down ctrl+j to copy a separate layer. Editing the style of it. As shown in Figure 8.
Select the appropriate range
Figure (6) Next, we need to start to darken and dodge the layer that was just frame-selected and edited. First select layer 3, as shown in Figure 9, and then select layer 4 after editing, as shown in Figure 10.
Perform darkening and lightening processes
Figure (7) Create a new Figure 5. Now modify the image and use the marquee tool to select the appropriate range, as shown in Figure (11) Fill R:255 G:2 B:252. Double-click layer 5 to edit the style. As shown in Figure (12). Adjust the transparency of this layer to 40%. As shown in Figure (13)
Use the marquee tool to select an appropriate range
Layer style editing
Transparency of the layer
(8) Create a new layer, select the range and fill it with R:255 G:2 B:252. Edit the style as shown in (14) and adjust the transparency of this layer to 0.
Layer style editing
Figure (9) Now we enter the text, (you can also think of a name you like.) I will name the web page Heitongdiba, and enter some fonts accordingly. As shown in Figure (15).
Type text
Picture (10) Ok, now we need to process the font, modify the theme black pupil, double-click the layer to edit it in the style, as shown in (16), adjust the transparency of this layer to 0.
Process fonts
Figure (11) Find some related pictures and put them in (but they must match the theme you gave, don’t just find some pictures.), and then put the pictures in the style for editing. As shown in figure (17)
If the
layer style
picture (12) is not enough, add some small modifications (picture 18) but not too much and adjust the transparency appropriately.
Add some minor modifications
Done! Let’s see the final result.
final effect
Once a webpage is complete, it is actually very easy. Beginners can use these simple methods to try to create their own webpage. Any design does not necessarily have to have a lot of effects to be good. Sometimes simplicity is also a kind of beauty. If you have different opinions in the tutorial, I hope you can communicate with me. Contact QQ: 95512068.