Web Design tips: How to create a Web page background material

Article Description: Web Design tips: A way to create a background material for a Web page.

Creating a background material in web design is usually the first step in designing the design direction, and it is also an important part of defining the design tone. Although in most cases, the background material of the Web page is very subtle and low-key, but because the whole background of a larger range, so it will give a strong psychological feeling. So in this article, I will make a summary of the methods commonly used in the creation of the background material of the Web page, and hope that the first steps in the design can give a reference to help.

First, use ready-made patterns to create a Web page background material.

1, download ready-made patterns, or create their own patterns, about how to create their own patterns, before I wrote an article "create a variety of styles in Photoshop mesh background pattern" and "in Photoshop to create irregular seamless mosaic pattern" can be used as a reference. After downloading or creating a good pattern, select the pattern overlay in the layer style. Although it may seem like a simple step, if you have a high-quality pattern, the effect is significant. Here are some of the classic pattern files I've collected, including five-class pattern styles.

Download

2, if the download pattern tone does not meet the design requirements, you can use the layer blending mode to adjust. For example, we want to create a light-colored background material, but the pattern on hand is dark, if the pattern superimposed blending mode is normal, create the effect of the following figure:

But I want to use this pattern to make a light background, what should I do? This can be achieved by adjusting the pattern overlay blending mode. When the background color is not completely white, generally like the above pattern, by adjusting the blending mode to the light can get the following diagram effect.

3, not satisfied with the words, such as want to slightly brighter brightness, you can also create a new adjustment layer to achieve. In this example, the use of a level adjustment layer can achieve our design objectives. You can also color the entire background by adding black and white layers, adjusting the hue of the background material and the value of the shading through the hue saturation layer.

4, by creating a new color fill layer above the pattern layer, adjust the layer blending mode, we can add a certain color to the pattern layer. For example, add a little yellow to go in, or add a little blue. Of course, we can still add hue and saturation adjustment layer to the original grayscale material color, the method is in the Hue Saturation Adjustment Layer dialog box to check the color box, and then adjust the hue of the slider to achieve.

Creating a textured Web page in Photoshop can serve as a reference tutorial for this approach.

Second, apply filters to create a Web page material background.

The most common way to add material to a page's background using filters is to use the Add noise command in the filter to achieve the desired effect. The application step is to turn the layer into a smart object, so that you can adjust the filter values at any time. Then apply the filter > Noise > Add Noise command, which is very simple. In general, when adding noise, filter values are set very low, generally use 1% is enough, and the effect is very good, the value is too large material looks not natural. The details are set as shown in the following illustration:

The noise background effect is shown below:

Third, the use of brushes to add texture.

Using a brush to create a Web page background material is also very simple, the general step is to adjust the foreground color to white, select the Brush tool, adjust the size of the new layer randomly add some brush effect, by building a few more layers, adjust the different layers of image transparency to make the added material look more natural and real. Then adjust the blending mode of the layer to overlay or soft light so that the brush effect and background better fusion. The following picture is the effect before and after changing the layer blending mode after adding scratches and brushes that make the old effect:

In addition to the old style used in the above, the brush method is often used in the watercolor style of the web design process, the following two design tutorials fully demonstrate the brush in the creation of the background material method.

Creating a watercolor-style web design in Photoshop

"Creating an old, translucent personal web page"

Use the material picture to create the background of the Web page

For example, we want to make the page background look like a paper feeling. Of course, you can achieve a paper-like texture by adding different levels of filter effect simulations, but instead of directly dragging a piece of paper material to a document, by adjusting the layer's blending mode and the various adjustment layers mentioned above, the latter approach is often more realistic and natural. Similar to the wood background of the implementation of the material. Create a Game interface window in Photoshop This article is a good illustration of this background material design method and the combination of the above several methods.

The following screenshot shows the effect of the wood background material:

V. Summary

In fact, when you create a Web page background material, the methods mentioned above will be involved, but according to the design objectives, sometimes only one of the methods used, such as noise background, the application of Add noise filter commands are often enough, sometimes more complex, may be used above methods. Therefore, we should be based on the overall design objectives to selectively use, but these methods are needless to say that the Web design must be mastered, so that our design methods can be flexible and changeable.