There are 4 ways to create web background material

Creating a background material in a web design is usually the first step in developing a design based on the design direction and is an important part of determining the design tone. Although in most cases, the web page background material is very subtle and understated, it gives a strong psychological feeling due to the large area of ​​the whole background. So in this article, I will make a summary of the methods commonly used in the process of creating a web page background material, and I hope we can give reference to help you in the beginning of the design process.

1, download ready-made pattern style, or create your own design, how to create their own patterns, I wrote an article before "at Photoshop http://www.zoomun.com/aggregation/33965.html"> Photoshop Create a variety of styles of grid background pattern "and" create an irregular seamless mosaic pattern in Photoshop "can be used as a reference.After downloading or create a pattern, select the pattern in the layer style stack.Although it seems It's a very easy one step, but the result is very good if you have a good quality pattern style Here are some of the classic pattern documents I've collected, including five types of pattern styles.

download

2, if the downloaded pattern color does not meet the design requirements, you can adjust through the layer blending mode. For example, we want to create a light background material, but the hand pattern style is dark, if the pattern is superimposed mixed mode is normal, create the effect as shown below:

But I want to use this pattern to make a light background, what should I do? This time can be achieved by adjusting the pattern of superimposed mixed mode. In the case of the background color is not completely white, the general pattern like the above, by adjusting the mixed mode to light you can get the effect as shown below.

3, not satisfied, then, for example, want to brighten the brightness a little longer, but also through the new adjustment layer to achieve. In this example, we can achieve our design goals using tonal adjustment layers. You can also color the entire background by adding a black and white layer, and adjust the hue and brightness of the background through the Hue Saturation layer.

4, through the pattern layer above a new color fill layer, adjust the layer's layer blending mode, we can add a certain color to the pattern layer. For example, add a little yellow in, or add a little blue. Of course, here we can still add the hue and saturation adjustment layer to the original grayscale material is colored, the specific method is to select the color box in the Hue saturation adjustment layer dialog box, and then adjust the hue slider to fulfill.

"Creating a textured web page in Photoshop" can serve as a reference guide to this approach.

The most common way to use filters to add material to a page's background is to use the Add Noise command in the filter to achieve the desired effect. The application step is to first turn the layer into a smart object, the purpose of which is to adjust the filter value at any time. Then use the filter> Variegated> Add Noise command can be very simple. In general, when adding variegated, the filter value is set very low, the general use of 1% is enough, and the effect is very good, the value is too large, the material does not look natural enough. Specific settings as shown below:

Variegated background effect as shown below:

The use of brushes to create webpage background material is also very simple, the general steps is to adjust the foreground color to white, select the brush tool, adjust the size, add a few brush effects randomly in the new layer, Layers that adjust the transparency of different layers can make added materials look more natural and authentic. After the adjustment of the layer of mixed mode to superimposed or soft light brush effect and background better integration. The picture below is before and after changing the layer blending mode after adding a scratch and do-it-yourself brush effect:

In addition to the old style commonly used in this method, the application of the brush method often appears in the watercolor style web design process, the following two design tutorials fully demonstrate the brush in the background material to create the method.

"Create a watercolor style web design in Photoshop"

"Create an old, translucent personal web page"

For example, we want to make the page background looks like paper feeling. Of course, by adding different levels of filter effect simulation to achieve similar to the paper material, but compared to directly drag a picture of paper material into the document by adjusting the layer of the mixed mode and each of the above-mentioned To adjust the layer to achieve the words, the latter method to make the effect is often more real and natural. Similar to the implementation of wooden background material. "Creating a Game Interface Window in Photoshop" is a good illustration of this background material design method and its combined use.

The following screenshot shows the effect of wood background material:

Five, concluded

In fact, in the creation of the page background material, the above mentioned methods will be involved, but according to the design goals, and sometimes only one of them will be used, such as variegated background, then add the noise filter command Often enough, and sometimes complicated, may use the above method will get. So we have to use the total design goals based on the selective use, but these methods do not have to be web design must grasp, so that our design techniques can be flexible.

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