Micro patterns are small textures created at the base pixel level in a program that supports bitmaps such as Adobe Photoshop. The benefit of this method is that you can create extremely small and seamless patterns to use in print media graphics, Web site backgrounds, software interfaces or on fabric textures used in 2D and 3D applications. This How to Make Micro Patterns in Photoshop tutorial will walk you through the process while providing several examples.
How to Create Patterns in Photoshop
In this video tutorial, you will see a demonstration of making some simple micro patterns for Web signatures and interfaces. You should note that he shows an alternate way of painting the pixels. He uses the pencil tool which is an expedient option especially for small grids. The running time is 3:51.
Introduction
Although this article was written with Photoshop in mind, any bitmap image editor can create pixel based micro patterns. You can even use the default paint program that comes with every computer. All skill levels can handle this how to which should take approximately 30 to 45 minutes to finish if you do all the samples.
Step 1: Setup Grid
For really small or simple patterns, you may not need to create a grid with guide lines. However, they are critical when working on complex ones.
- Create a new document by typing Ctrl+N.
- Set the width and height to 4 pixels and give the file a white background.
- Zoom in to 1600% by holding down Ctrl and tapping the + key until the image is maxed out.
- Place a guide line along each 1 x 1 pixel square. To get a guide, click and drag from the ruler around your image. There will be a blue line that you can now place. You should have three vertical and three horizontal guides now.
Guide Setup
Step 2: Fill in Pixels
This is the most time consuming part of making a micro pattern especially if you are working with a rather large one. Despite taking a long time, it is pretty manageable. Simply, fill in the pixels that match the graph of your pattern.
- Use Shift + Ctrl + N to add a new layer. Name it diagonal.
- Activate the rectangular marquee tool with the M shortcut.
- Drag a 1 x 1 pixel square in the lower left corner. The guides will help show you how many pixels you are selecting.
- Fill the pixel with black.
- Refer to the image below and fill in the rest of the black squares.
Diagonal Pattern
Step 3: Use Your New Pattern
Now, you've reached the satisfying step. All that is left to do is turn the image into a pattern tile and fill your new document with it.
- Select the whole image with Ctrl + A then go to Edit -> Define Pattern. Name it diagonal.
- Save the pixel file and close it.
- Create a new document.
- Set the width and height to 300 pixels and give the file a white background.
- Using the gradient tool, fill the background with a black to white transition. This tool can be accessed with the shortcut G.
- Change the mode on the tool to difference then make a few short horizontal drags. This layer will represent a cloth texture you can blend with your micro pattern.
- Add a new layer and call it diagonalMicro.
- Fill it with your pattern. Pick Edit -> Fill. Then, choose the one you just made..
- Now, just change the layer blend mode to Overlay, Darken or Multiply depending on the effect you want. Blend modes are located in the top left corner of the layer window.
Diagonal Pattern Applied to Cloth
Carbon Fiber Pattern
Size: 4 x 4 Pixels Per Block: 1 pixel
Lightest Gray: cbccc7 Light Gray: 979795 Dark Gray: 585858 Darkest Gray: 282828
Click to enlarge.
Check Pattern
Micro Grid Pattern
Dot Pattern
Size: 8 x 8 Pixels Per Block: 1 pixel Notice that the light gray pixels give the illusion of a circle. The light gray pixels are actually black pixels with an opacity of 10%. Use this trick to do shading and curves.
Click to enlarge.
Stripe Pattern
Twill Pattern
16 x 16 Textile Pattern
How to Enlarge a Micro Pattern
If you wanted to enlarge the micro grid pattern by 200%, just multiply the image size by 2. So instead of a 4 x 4, you'd make one 8 x 8. For every block in your pattern, you'll use 4 pixels instead of 1.
Click to enlarge.
Tips:
Be careful not to make your units too big otherwise you will have jagged edges instead of a smooth pattern once it's tiled.
Make sure you only use symmetrical patterns so that they tile properly when you use them later.
If you are planning out a complex pattern, try using graph paper to sketch it out first. This is especially helpful when trying to enlarge or shrink a textile weave that you have found.
Visit Handweaving.net or German Weaving Patterns to discover 1000's of textiles that can be translated into micro patterns.