How To Create Pixel Pattern

Quick Tips: Create Pixel Pattern in Photoshop

Patterns are a great way to make your web background more beautiful. In this tutorial, we’ll show you how to create some pixel patterns using Photoshop with the estimation time 5 – 10 minutes.

Let’s get started!

STEP 1:

Start with prepare canvas. The canvas can be any size but not less than 10×10 pixels, because our pattern size are not less than 10×10 pixels. In this tutorial I use 100×100 pixels, it will facilitate when “Zoom in” and “Zoom Out”. After determining the size, next is click “OK” button.

Create Pixel Pattern Photoshop

STEP 2:

Enlarge the size of canvas view to the max

Create Pixel Pattern Photoshop

STEP 3:

Create image using “pencil tool”,

Create Pixel Pattern Photoshop

STEP 4:

With the format pencil tool; diameter 1px, brush color black #000000 and opacity 100%,

Create Pixel Pattern Photoshop

STEP 5:

Create a new layer, this layer will be used as a place for our shape pattern later.

Create Pixel Pattern Photoshop

STEP 6:

Create image as shown below on the layer that we have create on the STEP 5,

Create Pixel Pattern Photoshop

STEP 7:

With “Rectangular Marquee tool”, create selection like the image below

Create Pixel Pattern Photoshop

STEP 8:

Then crop the image by choosing Menu “Image” and sub mene “Crop”,

Create Pixel Pattern Photoshop

STEP 9:

Click the eye image on the “Background” layer, so that the image we have created on “Layer 1” look transparent,

Create Pixel Pattern Photoshop

STEP 10:

Then create the image to the pattern by choose Menu “edit” and sub menu “Define Pattern”,

Create Pixel Pattern Photoshop

STEP 11:

Will appear a tab like the image below, then please write the pattern name and click “OK”, that’s it your pattern finished.

Create Pixel Pattern Photoshop

You can see the pattern that you have made on the pattern gallery that available on your Photoshop.

Create Pixel Pattern Photoshop

Addition, below are the basic forms of the pattern as in the first image above.

Create Pixel Pattern Photoshop

Conclusion

I hope with this quick tutorial will be useful for you, especially for newbie that want to learn web design. Stay tune in the next tutorial, I’ll share with you how to create the graphic pattern by using recurrence objects, dont miss it! ^_^)v

8 Comments