How to create a dot background pattern for a blog / website??

September 11, 2009 8:44 PM

I'm looking to create a very subtle dot background pattern, like the one on this site. I'm pretty familiar with Photoshop and Illustrator and have been able to produce a dot pattern, but the scale is much too big, and when I try to create a smaller pattern using a smaller circle, it simply disappears, or becomes a solid gray once I import it as a background. Does anyone have any idea how to make a pattern like the one on that site? It seems like it should be pretty straightforward, but I haven't been able to figure it out.
posted by arbor day to computers & internet (9 comments total)

Start with a 5 x 5 pixel image. Zoom way in so you can see each individual pixel in a grid. Photoshop will show the grid once you get close enough. Use the pencil tool at the smallest 1-pixel setting, and use black to start with.

Put a single black dot in the top left of the 5 x 5 square. Save, then tile your image across a surface using CSS or whatever.

Adjust the intensity in two ways: either use a more gray color for your single dot, or reduce the total size of your image from 5 x 5 to lower dimensions. Keep using one single dot size, though.
posted by odinsdream at 8:48 PM on September 11

If you right-click and "view background image" (if your browser can do that) you'll see that the actual image is 4 pixels high by 793 wide, repeated over the page, with the actual dots in the vertical center of that image. That's also why, if you're at a high enough resolution, there's a gap towards the right of the page. It wraps onto itself imperfectly.

If you want to have a similar effect, minus the gap, the best way is to make a single tiny image of a grey or black dot with whitespace on any two connecting sides (that is, bottom or top and right or left) and repeat it for the background. Obviously, the more the whitespace, the more spaced out the dots will be.
posted by Nomiconic at 9:03 PM on September 11

Use the pencil tool, not the paintbrush, and yeah, zoom in to like 1600%.

Or, you know, just lift the one from the website you linked and modify it however you like.

(It's http://www.doori-nyc.com/main-pic/dash.gif)
posted by rokusan at 9:18 PM on September 11

Thanks all, for the responses! This was my first question to metafilter, and I'm amazed by the speed and helpfulness of the community.

I followed odinsdream's instructions, and it worked like a charm.
posted by arbor day at 9:34 PM on September 11

Consider not using just one instance in your tile. Tiling à minimini bg-image à million times is more intensive than serving up à slightly larger image to start with (say ten-by-ten dashes).
posted by Iteki at 12:03 AM on September 12

Just another in case someone else is looking for something:

Create a Carbon Fibre Pattern in Photoshop
posted by backwards guitar at 8:02 AM on September 12

You could also try using Processing. You need to learn a few commands, and run it, but there are examples of grids so you could tweak a few parameters.

It's quite easy to learn - something like this would be a few lines.
posted by a womble is an active kind of sloth at 11:44 AM on September 12

Iteki: Do you have more information on that? I'm not aware of any extra overhead.
posted by odinsdream at 4:45 PM on September 12

Hmm, quick googling suggest I may be making things up, although I am not the only person with the same concern. Basically, in the old days, we used to try and make the background image as small as possible for a user to download. As bandwidth became less of an issue there was talk of how you might as well make the tiling image 5px high instead of 1px, so there would be less instances of rendering (or whatever it would be called) when the page was called. We were doing a fair bit of mobile based stuff though and were trying to shave teeny tiny performance benefits, you have me curious now to do a benchmark test!
posted by Iteki at 2:16 AM on September 13