If you look at the site at the bottom you will notice notice vertical as well as horizontal dotted lines which are use to create space out things as well as create some organisation around how do I do them with photoshop ? http://www.simplyfinefoods.co.uk/index.html
Use the pencil tool and draw a few dots, then copy them into a big line (try using ALT + SHIFT + drag). Or if you've got nothing better to do, just 'dot' the entire line manually. And don't double post
Why bother when you can reduce page load time and use css to create it - if it's for a website which is what they are doing. You can use border: 1px dotted #CCCCCC. Or just make an image with a dot and a space and repeat-x / repeat-y with css depending on which way you want to go. Or to make things quicker, screenshot the site, cut and paste and you have your new lines
^ I totally disagree If you design 'down to the pixel', I think that using images is much better than blindly assuming that every browser will render CSS borders exactly the same way. Because they never ever do - http://css-tricks.com/forums/viewtopic.php?f=8&t=2989
^ I will disagree again because more than 90% users use browser that support simple CSS parsing and today dotted borders are support by almost all browser and other than IE5 and earlier all render it properly as well its much better than adding to strain and could be used million times with hogging cpu resources on end user. While designing with PSD's its fine to draw but I believe if a user understands CSS its much better to use that. & For the link you've shown they are 5 pixels not a single pixel as per OP.
Kerosene, either way if it is to be used for a site, the OP doesn't have to create a full dotted line. One dot and use of repeat in css.
I hate to point out something kinda obvious, but the question was: But.. point taken about CSS. Although personally, I'll never trust CSS to do "pixel critical" layouts. Give me a good old fashioned gif anyday