Create a small document (mine is 25 x 25 pixels) and fill it with a background color. Select the Pencil Tool (b) and select a foreground color for your pattern. I'm after a subtle background pattern, so I'm using a lighter shade of my background color.

Zoom in (I went to 500%!) and draw your design on a new layer.

When you're done with your pattern, select its layer in the Layers palette and duplicate it using Ctrl-J (Command-J on a Mac). Hide the original layer and apply the offset filter to the new layer as we did in the solution for "Making a Seamless Tiling Background."

Pixel pattern

Creating a design for a pixel background pixelbg psd QtgJSii

pixelbg psd QtgJSii





v uoacitv 100% ►

Lock: □ J + Q Ft. ioo°/( [j








Background 9


O. JS €}, —i JJ %

Applying the offset filter

TIP Two Views at Once

You can open another window to see what your pixel image looks like at its original size (100%) while you're drawing. Select Window > Arrange > new Window for [your filename]. This will open a second window for your document (set at 100% zoom). Any changes that you make in one window will be duplicated in the other.

pixelbg. psd p



ioo% ra

Working with multiple views

If you want, draw more shapes in the center area to fill in the pattern.

Save your completed pixel background using Save for Web. .

The examples below show what my completed pixel image looks like, and how it appears when it's repeated on a web page (the original tile image is highlighted with the orange square).

Filling in the center of the background

Completed pixel background image

Completed pixel background image

Pixel background on a web page

Was this article helpful?

0 0

Post a comment