Ask HN: Does anyone know what this kind of tiled web background this is? | Hacker News Reader

Ask HN: Does anyone know what this kind of tiled web background this is?

2 pointsFlam10 comments

I've been noticing more and more sites using a tiled, granular background as seen here http://www.colorzilla.com/firefox/

Does anyone know what these are called? I'm looking for a tutorial to make them (or if it exists, a website that generates them)

View on HN

The background is a seamless texture. A google search with those for keywords will bring you a bunch of info. A quick tutorial for creating your own: http://pegaweb.com/tutorials/web-page-backgrounds/web-page-b...

I know about seamless textures. I'm asking about that specific granular type of texture. Does it have a name? I could have sworn someone on HN made a generator for these things just a few days ago.

Photoshop has it. Not sure what they are called though. Are you looking for this: http://noisegen.krisnoble.co.uk/ ?

Wasn't that site, but similar. Thanks though, this is good enough.

Looks like it could be Perlin noise applied to a bump map. Edit: In fact, almost certain, see the third texture in this link: http://www.texturemaker.com/help/functions/generator_perlinn...

Make this texture in a graphic program and repeat on x & y axis. http://data.colorzilla.com/images/back.gif

I have found some great tips/tutorials regarding graphics at http://www.smashingmagazine.com/

a quick imitation would be (using Adobe Fireworks):

   1. create a new doc
   
   2. add a rectangle

   3. set the fill color to your choosing

   4. set the texture to something like sandpaper @ 30%

Donesky!

Screenshot: http://img.skitch.com/20101103-mudstgaqysxkr6rr5d4jkg83f3.jp...

I don't have photoshop, but thanks for the tutorial for when I do get it :)

I use Fireworks.. but I would venture to guess just about any image editing software would use a similar process :-)

Reply on news.ycombinator.com