Four common methods for creating webpage background materials

Creating background materials in web design is usually the first step in design based on the design direction and an important part in determining the design tone. Although in most cases, the webpage background material is very subtle and low-key, but because of the large scope of the background, it will give people a strong psychological feeling. So in this article, I will make a summary of the methods that are often used in the process of creating the webpage background materials. I hope you can give reference to the initial steps in the design.

　1. Use an existing pattern to create a webpage background material.

1. Download an existing pattern style, or create a pattern by yourself, I wrote an article titled creating grid backgrounds with multiple styles in Photoshop and creating irregular and seamless patterns in Photoshop. After downloading or creating a pattern, select the pattern overlay in the layer style. Although it looks like a simple step, if you have a high-quality pattern style, the effect is very remarkable. Below are some classic pattern files I have collected, including five pattern styles.

Download: http://startwmlife.com/wp-content/uploads/2012/03/background-patterns.zip

2. If the color of the downloaded pattern does not meet the design requirements, you can adjust it through the Layer Mixing Mode. For example, we want to create a light background material, but the style on hand is dark. If the Mixed Mode of the overlapping pattern is normal, the created effect is as follows:

　　

 

But I want to use this pattern to make a light background. What should I do? At this time, you can adjust the Mixed Mode of overlapping patterns. When the background color is not completely white, it is generally like The above pattern. You can achieve the effect by adjusting the mixed mode to the light.

　　

 

3. If you are not satisfied, for example, you can adjust the brightness by creating a new layer. In this example, you can use the color level adjustment layer to achieve our design goal. You can also remove the entire background material by adding a black/white layer, and adjust the color and shade of the background material through the color saturation layer.

　　

 

4. By creating a color fill layer above the pattern layer and adjusting the layer blending mode of the layer, we can add a certain color to the pattern layer. For example, add a little yellow or a little blue. Of course, here we can still add the color and saturation adjustment layers to color the originally grayscale material. The specific method is to check the color box in the color saturation adjustment layer dialog box, then adjust the sliding block of the color.

　　

 

　　

 

　　

 

Creating a web page with a canvas material in Photoshop can be used as a reference tutorial for this method.

　　2. Apply a filter to create a webpage material background.

In the method of adding materials to the webpage background using a filter, the most common method is to use the filter to add the impurity command to achieve the desired effect. The application step is to first turn the layer into a smart object to adjust the filter value at any time. Then apply the filter & gt; noise & gt; to add the noise command, which is very simple. In general, when adding a mix of colors, the filter value settings are very low. Generally, 1% is enough, and the effect is very good. The material with a large value does not look natural. Specific settings are shown in:

　　

 

The effect of the background is as follows:

　　

 

　3. Use a brush to add texture.

It is also easy to use a paint brush to create the background material of a webpage. The general step is to adjust the foreground color to white, select the paint brush tool, adjust the size, and randomly add some paint effects on the new layer, by creating several more layers, you can adjust the opacity of different layers to make the added materials look more natural and realistic. Then, adjust the blending mode of the layer to overlay or soften the paint to make the paint effect and background better blend. The following picture shows the effect of the paint with scratches and old effects before and after the layer blending mode is not changed:

　　

 

　　

 

In addition to the old style used in this method, the application of the brush method often appears in the web design process of the watercolor style, the following two Design Tutorials fully demonstrate how a paint brush creates a background material.

Create a watercolor-style Webpage Design in Photoshop

Create an old, translucent personal webpage

　　4. Use a material image to create a webpage background

For example, we want to make the webpage background look like paper. Of course, you can add different levels of filter effects to simulate the effects of similar paper materials, but compared to directly dragging a paper-based image to the document, by adjusting the blending mode of the layer and the various adjustment layers mentioned above, the effect of the following method is often more realistic and natural. Similarly, there is the implementation of wood background materials. This article "Create a game interface window in Photoshop" explains the background material design method and the comprehensive use of the above methods.

The effect of wood background material is shown below:

　　

 

　V. Summary

In fact, when creating a webpage background material, all the methods mentioned above will be involved. However, based on the design goal, sometimes only one method is used, such as the background color, the filter command for adding colors to an application is often enough, but sometimes complicated. The above method may be used. Therefore, we must choose to use these methods based on the overall design goals. However, these methods must be mastered in web design so that our design methods can be flexible and changeable.

Source: http://startwmlife.com/4-ways-to-create-a-page-background-material-is-often-used/