1 Answer
1

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:

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;

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.

select the first X pixels that you want in gray (or any other colour)

choose your colour

use Edit > Fill menu option to fill selected pixels

select the whole repeatable pattern (if you want it to repeat) and press Ctrl+C

press Ctrl+V to copy the same pixels on a new layer

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

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.

Copy the same layer (check menu in layers tool window) and follow steps from step 6.

...and it's easier to see when it's not tiled, like here!
–
e100Jan 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_45Jan 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_45Jan 19 '11 at 12:06

3

@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 IpsumJan 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_45Jan 19 '11 at 13:17