How to Create a ‘Noisy’ Gradient

How we created a risograph-style gradient for a surf-obsessed venture studio.

By Cat HowPosted in Ideas

Surfing. Probably not the first word you expected to see at the beginning of this tutorial, but it goes a long way to explaining the reasoning behind it.

So let me back-track. We were recently approached by a start-up studio of highly-skilled developers who loved to code… and who also loved to surf. Based in Porto, and with ex-Google and ex-Skype founders running the team, we worked with them to refresh their brand and develop a UI (User Interface) Kit and website wireframes.

We wanted a simple concept that conveyed the complexity of code (thousands of specks of ones and zeros!) as well as the spray of surf. We settled on the idea of a cool, clean and contemporary gradient. This was robust enough to work well with the concept but simple enough as a graphic device to be used across the brand as a texture or on buttons, banners and - eventually - business cards.

Having used risograph printing in different applications over many years, we knew the grainy ‘noise’ of a risograph-stye gradient was what we were after. But we needed one which could be generated digitally.

So here is a quick guide to how to create a speckled gradient using the ‘noise’ filter in Photoshop.

  1. In Photoshop, create a new project which is at least twice the size of your original image. Remember - if you want to add the effect to the whole image, make it at least twice the size of your artboard. But if you want to apply it to one gradient, you can just get the size of this and loosely double it.
  2. Make sure the DPI (dots-per-inch) of your new image matches up with your original image.
  3. Make sure the noise filter is on full strength and Monochromatic.
  4. Create a white or black layer, and apply the noise filter on full strength. Make sure you have the Monochromatic box ticked, and play around with the settings as you see fit to best suit your needs. For the images in this post we used a combination of between 300% to 400% Gaussian noise.
  5. Copy the layer back into your original file. Scale it down and set it to overlay. Remember to reduce it as much as possible while still being able to cover all edges of your gradient.
  6. Set the Blend Mode to Overlay.
  7. Increase the contrast of your gradient by playing around with the Gradation Curves to get the effect you are after.
  8. It is at this point that you can tweak your gradient to fit your needs - sharpening the image for a crisper look, and starting to introduce colour.

This gradient technique is great to have in your back pocket. It adds texture and warmth to digital imagery, but in a controlled way. It's stylish and sharp to boot. If you want to get into risograph printing - the non-digital way - then we recommend the folks at Scottish studio Risotto, or London-based Hato Press.

Find out more about our Brand and Website Design Studio.

Need help with your brand?

Start a Project

Let's help your business grow!

Email us

Brand Review

Book in a free brand consultation.

Book now

Join Our Mailing List