Dark dot pattern over images?

[stead]

I'm trying to find tutorials to add this fine dot pattern over images. An example can be seen here: http://www.dieselontour.com

Is there a name for this because for the life of me I can't find a reference for it!


Thanks

 

[bit density]

This looks like the half-toning filter set to 0 or 90 degrees... Here is a tutorial...
http://www.youtube.com/watch?v=usDDwwraaRk

 

[stead]

This looks like the half-toning filter set to 0 or 90 degrees... Here is a tutorial...
http://www.youtube.com/watch?v=usDDwwraaRk

I see what you mean, but it's not quite the same thing. The sample image is all there, rather than having blank space between the 'dots'.

 

[CrickettGrrrl]

I'm trying to find tutorials to add this fine dot pattern over images. An example can be seen here: http://www.dieselontour.com

Is there a name for this because for the life of me I can't find a reference for it!


Thanks

It's called Halftones. In Pixelmator there is a folder of halftone filter effects which you can adjust & apply over an image. Same for Photoshop. There are also halftone brushes you can get for Photoshop by Kyle Webster which you paint on here. (Ultimate Screentone brushes)

Just do a search for halftone tutorials. Here's a few to get you going:
http://www.backgroundsy.com/tutorials/halftone-pattern-photoshop-tutorial

http://design.tutsplus.com/tutorials/photoshop-halftone-effect--psd-79

http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-comic-style-text-effect-in-illustrator

 

[CrickettGrrrl]

I used Pixelmator & the Dot halftone filter on this Creative Commons photo, set the layer to multiply, and used a 50% gray fill on the layer below it.

 

[stead]

That's it! Thanks for your help!

 

[CrickettGrrrl]

You're welcome. I'm glad I could help, I always learn something myself.

 

[lucidmedia]

Your example image uses a common web trick

The image has a layer of evenly spaced transparent black pixels placed on top of it. If you take a screen shot and zoom in you will see its just a collection of black squares creating the texture.

You can create this look in photoshop or pixelmator, but usually you would do it via CSS.

The pixel grid overlay is a separate tiled PNG that can be applied to any image on the site.

If you resize the page you will notice that it is not one image behind the grid but several. The composition changes depending on how wide your browser is (as all websites should) so the pixel grid is simply the top-most layer affecting all of the images below it in the stack.

 

[TheGenerous]

I used to do that in Adobe Fireworks by creating a pattern over an image and then the pattern's layer blending over using Interpolation. Hope the images help.

There is flexibility in the pattern so that it could be lines, squares, dots, vertically or horizontally arranged.