A while back I made a tiny “web app” called NoisePNG. Its purpose is simple: It will let your create a transparent image with a “noise”, that you can save and use as a pattern for your own projects.
You’ll find the site on noisepng.com.
Frequently Asked Questions
This can be done quickly in Photoshop, why do I need this?
That statement is (mostly) only true if you’re the one designing the interface. I work as an interface developer, so my job is to as fast and efficiently as possible create valid and accessible HTML and CSS from PSD:s our AD:s make.
The whole idea actually started out as a joke: “I’m sure this project would take much less time if we used a transparent PNG for all noise-effects”. Then I actually tried this, and realized that I had to build this site.
Is hotlinking allowed?
Yes and no. I don’t have any hotlink-protection on the site, because I think it’s neat to be able to try out different noises directly on the page I’m working on. Just make sure to host the final result yourself. It makes my server happier, and it reduces the loading-time for your users, which is extremely important these days of mobile browsing.
Have you considered releasing the source?
No. I don’t see any need for releasing it. I’m afraid that other developers try to host it themselves and use it to always generate noise overlays, instead of using static images, which is a bad idea from a performance point of view.
Updates
On 24th of May 2013 I released an update with a slightly polished design and the Noise-button now shows you a base64-encoded string with your image. This means that you don’t need to link any external resources! Of course, if you still want a separate PNG-file, you can still download either by clicking the link below the base64-string, or by Alt-clicking the Noise-button.
I also released a sister-site, FlatPNG, as a parody to the flat UI-trend that is going on right now (yes, I know I’m also a victim to this trend).
Future plans
None at the moment. If you have any suggestions to how I could improve the site, send me a tweet!