Dark dot pattern over images?

Discussion in 'Design and Graphics' started by stead, Jul 14, 2014.

  1. stead macrumors newbie

    Joined:
    Aug 3, 2011
    #1
    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
     
  2. bit density macrumors 6502

    Joined:
    Mar 5, 2004
    Location:
    Seattle
    #2
  3. stead thread starter macrumors newbie

    Joined:
    Aug 3, 2011
    #3
    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'.
     
  4. CrickettGrrrl macrumors 6502a

    CrickettGrrrl

    Joined:
    Feb 10, 2012
    Location:
    B'more or Less
    #4
    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
     
  5. CrickettGrrrl macrumors 6502a

    CrickettGrrrl

    Joined:
    Feb 10, 2012
    Location:
    B'more or Less
    #5
    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.
     

    Attached Files:

  6. stead thread starter macrumors newbie

    Joined:
    Aug 3, 2011
  7. CrickettGrrrl macrumors 6502a

    CrickettGrrrl

    Joined:
    Feb 10, 2012
    Location:
    B'more or Less
    #7
    You're welcome. I'm glad I could help, I always learn something myself.
     
  8. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #8
    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.
     
  9. TheGenerous macrumors 6502a

    TheGenerous

    Joined:
    Nov 14, 2010
    Location:
    I'm an Austronaut
    #9
    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.
     

    Attached Files:

Share This Page