Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How do I create 1 pixel grids with differing colours on my own?

For example this 960px_12_col_grid: alt text

Better visible: :

share|improve this question
Could you describe the issue in more detail? Is there an example we could see? – MikeNGarrett Jan 19 '11 at 7:49
Yes it is an example there barely visible, but it is white-grey-white etc – Chris_45 Jan 19 '11 at 7:52
The image shown is for those who don't know how to hack the page html to figure it out... – Aᵂᴱ Jan 19 '11 at 12:55
up vote 2 down vote accepted

You can always create it in Photoshop by drawing the first part and then copying it to the whole width. The other question is of course, how do you intend to use this grid?

This is relevant when:

  1. you'll and if you'll define it in CSS using background-image because in that case you don't have to copy the pattern at all; you'll just set it to repeat in both directions;
  2. saving this grid file; if you need it to be transparent but you don't want to do that using CSS, then you will save it as a PNG;

And one more suggestion. It's usually wiser to create a Npx x 10px images instead of Npx x 1px, because browsers will render it faster, and file size will be almost the same. At least with this kind of images.

Using Photoshop

Use marquee tool.

  1. select the first X pixels that you want in gray (or any other colour)
  2. choose your colour
  3. use Edit > Fill menu option to fill selected pixels
  4. select the whole repeatable pattern (if you want it to repeat) and press Ctrl+C
  5. press Ctrl+V to copy the same pixels on a new layer
  6. by holding down Ctrl key and using arrow keys you can move new layer's content. When you want to move by 10px at a time hold down both Ctrl+Shift
  7. select a different colour and use the same menu option again to colour this new layer with new colour. Don't forget to check that you want transparent pixels to stay transparent.
  8. Copy the same layer (check menu in layers tool window) and follow steps from step 6.
share|improve this answer
...and it's easier to see when it's not tiled, like here! – e100 Jan 19 '11 at 9:25
Ok I'm trying in Photoshop to do this. First made an 1200 pixels wide and 1 pixel height.psb file. Can copy this but not make changes with color, and how to target the first 10 pixels from the left to be black, the next 60 white, the next 20 black etc? – Chris_45 Jan 19 '11 at 9:39
Ok I'm getting forward: I zoom up a lot and when I apply a color with Edit> Fill I see dots, that must be the actual pixels, but how do I discover the pixels where the color is white? Is there a tool for revealing the pixels? I'll keep trying.. – Chris_45 Jan 19 '11 at 12:06
@Chris_45: to see white or very light pixels, I usually throw in a background layer of some other contrasting color (magenta, black, red, etc.) until I'm finished with the graphic, and then turn the layer off or delete it. – Lauren Ipsum Jan 19 '11 at 12:54
Ok great comments and answer gonna check this one. And I did this now but I have to refill the coloured areas all the time to be able to copy and paste them? – Chris_45 Jan 19 '11 at 13:17

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.