AnimationNewsPhotographyProduct DesignSocial Media MarketingWeb DesignWeb DevelopmentWordPress

Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Often, it’s the little details that turn a good layout into a great design; details such as subtle textures, shading and smooth shapes. Photoshop contains a vast array of tools for embellishing a design, but choosing the right one isn’t always easy. Being the obsessive-compulsives that we are, we’ve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsive’s guide to some frequently used tools and techniques for Web and UI design in Photoshop

Noise and Texture

Subtle noise or texture on UI elements can look great, but what’s the best way to add it? Our goal is to find the best method that maintains quality when scaled but that is also easy to implement and edit. To find out which is best, we’ll judge each method using the following criteria:

1. Bitmap Layer With Noise

Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a color, select Filter → Noise → Add Noise, then apply a mask or Vector Mask to match the element you’re adding noise to.

  • Layers: 2
  • Scales: No, texture will have to be recreated if the document is scaled
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: Yes

2. Pattern Overlay Layer Style

The Pattern layer style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. However, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation

  • Layers: 1
  • Scales: Yes, but you’ll need to change the Layer style scale to 100% after scaling
  • Works with Color and Gradient layer styles: No, the pattern appears underneath
  • Works with any texture: Yes

Conclusion

Absolutely. I conducted all of the tests above to learn more about some common techniques that I already use: that is, to reassess and fine tune, with the aim of improving my designs. Creating great artwork without intimately knowing your tools is certainly possible, but the more you know, the more likely you are to work faster and with greater confidence.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button