tutorial on creating multiple styles of grid background patterns in Photoshop

The article I wrote last summer, "creating irregular seamless stitching patterns in Photoshop" gives you a way to create a seamless mosaic of web pages with green grass content in Photoshop. Today I'll explain how to create a seamless mosaic of the grid background in Photoshop.

About page Patterns

First need to explain, as a page background page design must be simple, the effect can not be too strong, only need to provide a little texture on it, or rob the page content of the limelight. In fact, the page content should be the entire site's visual focus. The experience we can get when we change the wallpaper for our mobile phone, we often instinctively choose those very beautiful scenery or very eye-catching pictures as a mobile phone background image, can wait for the real wallpaper to change after the effect is not ideal, because the phone screen is not bare, nothing, But it is full of various icons, words. The original amount of information, plus a dazzling background wallpaper, can only disturb the content should be attracted attention, and even make people have a lot of messy feeling. At this point we are learning from the iphone wallpaper designer, the wallpaper on the iphone looks low-key, but the wallpaper effect is very prominent. Because they know that all the icons on the screen are the visual focus.

We should follow the same principle when we use Web graphics. The purpose of using a web design is to break the monotony of a single color background, to add different characteristics to the page, so that the content and background of the page more layered and differentiated, and to increase the touch of the page, you can make the Web page feel more beautiful, exquisite and professional. This will be more emphasis on the content of the page, leaving a deep impression on people. But we can't deviate from the visual focus of the design. Also refer to this article "figuring out the focus of visual expression in design".

The following picture is the page pattern effect we are going to create:

One or 10-character mesh pattern

1, to create a 7 pixel by 7 pixel size of the document, the choice of 7 pixel size is because we want to draw a vertical line in the middle of the document, using odd numbers to ensure that both sides of the same size blank. Then use the Magnifier tool to enlarge the document to 2000%.

2, create a new layer, select the Single Column Selection tool (M), center Select 1 pixel wide vertical selection, color fill to #f3f3f3. Create a new layer, center Select 1 pixel wide horizontal selection, and the color is still filled with #f3f3f3.

3, then save it as a pattern. Select the edit custom pattern (difine) command. You can then select the pattern style that you want to use in the pattern overlay (patterns Overlay) in the layer style (Layer style).

This completes the basic style of the mesh pattern. You can also adjust the size of the new document, such as 5 pixels to make the grid denser, or 11 pixels to make the grid sparse. No matter what, you have to remember that a very subtle pattern effect tiled across the page will look much stronger than before, so be sure to choose a soft color.

Diagonal Cross Line pattern

In fact, turning the previous cross grid pattern to 45° is a diagonal crossover pattern, but this time we're going to use 8 pixels multiplied by 8 pixel documents, why not the previous 7 pixels? Just think about it. A pattern with an even pixel size can make the intersection of two diagonal points at the center of the document. So this time we're going to use an even pixel size document.

1, create a new document (CTRL + N), 8 pixels multiplied by 8 pixel size, using the magnifying glass tool to enlarge it to 2000%.

2, create a new layer, select the line tool (U), place the cross cursor in the upper-left corner of the document, hold down SHIFT, and draw a 1-pixel diagonal line in the lower right corner, select #f3f3f3, create a new layer, and draw a diagonal line from the lower-right corner, the color still #f3f3f3.

3, as above, select the edit custom pattern (difine patterns) command to save it as a pattern. Select the pattern overlay (pattern Overlay) that you have saved in the layer style (Layer style) to apply to the large document.

As with the cross grid pattern above, you can also adjust the spacing between lines and line colors to get the results you want.

Three, one-way diagonal pattern

This is even simpler, just remove one of the lines from the diagonal line pattern above and save it as a custom pattern.

You can also create a one-way diagonal pattern of different styles by changing the spacing between lines, the thickness of the lines, and the direction of the lines. The following figure:

Iv. add color and material

So far, the three different styles of grid backgrounds that we're going to introduce to you are done. Next, if you want to make these patterns change, you can also add some color and texture to them. Adding color is simple, you just need to fill the pattern background color. Note that the color should be soft, contrast is not too strong, a little bit of color on it. Adding material is relatively complex, because these patterns eventually as a Web page background is tiled to the entire page, it is difficult to let people do not see the material duplication, like "in Photoshop create irregular seamless mosaic pattern" in the simple tiled green grass bad effect, This is precisely the seamless splicing technology in the relatively complex pattern on the role played. Here are three key points to create a material pattern:

Let the pattern slightly larger, so that after the tile is relatively not easy to see the repeatability of the material. But also pay attention to the pattern of the file size of the page load time impact.

The design of the material should be low-key, not too abrupt, a little bit of feeling on it.

Use seamless stitching technology to make the texture of the pattern more difficult to detect.

Next we use an example to illustrate how to create a texture pattern that can be applied to the background of a Web page.

1, create a new 99 pixel times 99 pixel size document. Create a new layer, draw a rectangle that covers the entire document, and apply the diagonal crossover pattern we created before the rectangle.

2. Enlarge the document to 200%, create a new layer, use the same brush tool as the background color, select the stroke with slight material randomly click on the pattern several times until you are satisfied with the result. Remember that the effect is not too strong. You can then save this material pattern as a custom pattern applied to the page page.

(Source: Flying Fish sonar)

Classification:

• PS Getting Started tutorial