tutorial on creating irregular seamless stitching patterns in Photoshop

If you look closely at the black background of the flying Fish sonar, you will find that it is not a solid background. But a piece has the fine texture seamless mosaic pattern after the effect, this picture is I look for the ready-made picture from the net, use directly in the CSS to be possible, very simple. But some seamless stitching of the pattern is more complex, the pattern is not like this picture of the rules, such as the following tile after the effect:

Or this one looks more irregular:

Does it look cool? Especially the green grass below this, you can do a South Africa World Cup web design, as a page background, absolutely flavoursome!

So today we take the green lawn as an example, hand in hand to teach you how to create in Photoshop similar to such an irregular seamless mosaic picture. The first thing to figure out is:

Why can't I just tile the picture?

You can try, without the seamless stitching technique, to directly tile the picture or photo on the page, like using the lawn image from the 100KR album on Flickr. The effect is probably the following figure:

What do you think of the background of the above page? I think the extra holes in the grass are enough to make you twist your ankle when you play! So we have to do a little processing of it, it is also very worthwhile to spend this time. Let's get Started:

First step

Download the lawn image provided above and open it in Photoshop.

Second Step

Select the Trim tool (crop Tool), fill 200px on the width of the property bar at the top of the window, and fill the height with 200px. It means we're going to cut out a square with a width and height of 200 pixel size on this picture. Drag the trimmed area you have chosen to place in the picture where the grass is more evenly colored, and it looks better in the middle of the picture. To avoid placing the darker four corners on the picture, the aim is to make our seamless stitching patterns more evenly colored and better.

Third Step

Click on the check mark after the property bar to confirm the trim. Next, select filter (filter) other offset (offset) commands, fill in 100 in the horizontal and vertical columns in the pop-up dialog box, and tick the last item in the undefined range warp Around. You will get an effect similar to the one shown below.

Fourth Step

At this point you can see the horizontal and vertical divider lines in the picture, and in this step we're going to eliminate the two divider lines. Enlarge the picture, select the Healing Brush tool (Healing Brush Tool), and use the appropriate brush size, about 20 pixels, to fix the divider line in the picture until it looks less obvious.

Fifth Step

This seamless stitching pattern has been completed. Select files (file) is stored in the WEB and device format (save for Web&devices), select the JPEG format, 80% of the quality save. In order to test the effect of the picture, we will tile the picture on the page test, the following figure:

Summarize

The offset command in the Photoshop filter is the key to making a seamless stitching pattern. Using this technique, not only can you spell football pitches, but you can also spell out a lot of other page backgrounds. And when you're familiar with it, you'll find the technology simple and powerful. Is definitely one of the most commonly used techniques in web design.

This article source: http://startwmlife.com/create-a-irregular-seamless-pattern-in-photoshop/

Category:

• PS Getting Started Tutorial