Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Advertisement

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 Textures

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:

  • Number of layers used: fewer is better.
  • Ability to scale: if the document is resized, will the effect maintain its quality?
  • Can the noise be on top of the Color and Gradient layer styles?
  • Can the method be used with any texture, not just noise?

Screenshot

1. Bitmap Layer With Noise

Screenshot

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

Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most control over the noise with the least disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise. (Clipping results in higher contrast, which might not be desirable.)

  • 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. Inner Glow Layer Style

Screenshot

Adding an Inner Glow layer style with the source set to center and the size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow layer style for something else. The noise is added above the Color, Gradient and Pattern layer styles, which is great.

Unfortunately, the noise can only lighten or darken the underlying elements. The previous bitmap layer method can add highlights and shade at once while maintaining the average luminosity, and it looks far better in my opinion.

  • Layers: 1
  • Scales: Yes, texture will be remade automatically
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: No

3. Smart Object with Filter

Screenshot

Create a Solid Color layer, convert it to a Smart Object, select FilterNoiseAdd Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.

It’s a fairly involved process, but it can accommodate a combination of effects that can be remade if the document gets scaled.

  • Layers: 2
  • Scales: Yes, texture will be remade automatically
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: No

4. Pattern Overlay Layer Style

Screenshot

Start by creating a noise or repeating pattern in a new document, then choose EditDefine Pattern. Once you’ve defined the pattern, it will be available in the Pattern Overlay layer style options. As with previous methods, using Luminosity as a blending mode and reducing the opacity to suit it yield great results.

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

Which Method Is Best?

Although a little cumbersome, creating a Gradient Fill layer, adding a Pattern layer style, then creating a Vector Mask seems to be the best method possible. This can be used to create flexible, scalable and editable single-layer UI elements with texture. As a bonus, Gradient Fill layers can be dithered and so also produces the highest quality results (Gradient layer styles cannot be dithered).

We’ve created some examples below and included the source document so that you can see how they were built.

Screenshot

Download the PSD (.zip)

Rounded Rectangles

Rounded rectangles, or “roundrects” as QuickDraw so fondly calls them, are standard fare on a Web and interface designer’s utility belt. They’re so common that it’s rare for Web pages or apps to not contain a roundrect or two. Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (By pixel-locked, I mean that every edge falls on an exact pixel boundary, creating the sharpest object possible.)

Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully, after reading this article, they’ll also know a couple more, as well as which methods produce pixel-perfect results.

1. Rounded Rectangle Vector Tool

Photoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges it creates are blurry and inconsistent.

Screenshot

Fortunately, there is a fairly well-hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent.

To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the “Snap to Pixels” option in the Options bar. If you have “Snap to Pixels” turned off, drawing at 100% zoom achieves the same result.

Screenshot

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys increase and decrease the corner radius while drawing.

On the positive side, keeping your objects as vectors means that you’ll be able to resize the document and the corners will take full advantage of any extra resolution. There is one small caveat though: if you resize, you’ll have to do it as an exact multiple, or risk fuzzy non-pixel–locked edges.

If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half — you’ll have to look carefully to notice, though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t create any issues.

Screenshot

2. Blur

The blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so that you’re left with a sharp mask that’s antialiased nicely.

It’s seven steps in total and is prone to being inaccurate; plus, the radius of the corners can’t be changed on the fly. Applying levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different degrees of antialiasing, from incredibly soft to completely aliased.

  1. Create a new layer.
  2. Draw a rectangular selection.
  3. Enter quick mask (Q).
  4. Gaussian blur by half the radius that you’d like for the rounded corners. (For example, a 10-pixel radius would need a 5-pixel blur.)
  5. Apply Levels (Command + L), and use about 118 for the black point and 137 for the white point on the input levels.
  6. Exit quick mask (Q).
  7. Fill selection.

Screenshot

On the positive side, this blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

Screenshot

3. Circles

The circles method is very accurate and easily reproducible, but has a whopping 13 steps. That’s a lot of clicking for just a single roundrect.

  1. Create a new layer.
  2. Make a circular selection that is twice as large as the radius you would like (for example, a 10-pixel radius would require a 20×20-pixel circle).
  3. Fill the selection.
  4. Move the selection right. This can be done quickly by holding down Shift and pressing the right-arrow key a few times.
  5. Fill the selection.
  6. Move the selection down.
  7. Fill the selection.
  8. Move the selection left.
  9. Fill the selection.
  10. Make a rectangular selection that covers the entire vertical span of the roundrect but that starts and ends halfway through the circles at the ends.
  11. Fill the selection.
  12. Make a rectangular selection that covers the entire horizontal span of the roundrect but that starts and ends halfway through the circles at the ends.
  13. Fill the selection.

Screenshot

4. Stroke

The stroke method is very accurate, easily reproducible and has only about four steps, depending on the result you’re after. The corners are a bit sharper than those of the circle method, though. That may be a good thing or a bad thing, depending on your preference.

  1. Create a new layer.
  2. Draw a rectangular selection that is smaller than the area you require (smaller by double the radius, if you want to be exact).
  3. Fill the selection.
  4. Add a stroke as a layer style that is as thick as the corner radius you would like.

If you’d like to flatten the object to remove the stroke, keep following the steps below.

  1. Create a new layer.
  2. In the Layers palette, select the new layer and the previous layer.
  3. Merge layers (Command + E).

Screenshot

It’s possible to automate the flattening with a Photoshop Action. This can also be set up as a function key to speed things up further.

A huge advantage of the stroke method is that it’s dynamic, so the radius can be edited in real time. It can also be used to easily create other rounded shapes, as seen below.

Screenshot

Which Method Is Best?

In most cases, using the Rounded Rectangle tool with “Snap to Pixel” turned on will give great results and be the quickest method. If you’d like the ability to change the corner radius without redrawing, then the stroke method is the one to use.

However, as seen below, each method yields different results. So, depending on what you’re after, you may need to use a combination of methods.

Screenshot

All tests were completed using Photoshop CS4 and CS5 on a Mac. Behavior for both versions was consistent.

Gradients

Gradients are a great way to add life-like lighting and shading to surfaces. When built with gradient layers and layer styles, they also ensure that UI elements can be scaled and reused easily.

Linear Gradients

Linear gradients are gradients in their most basic form — a gradual blend of colors and following a straight line. I’m sure you knew that, so onto the more interesting stuff.

Screenshot

Reflected Gradients

Reflected gradients are like their linear friends, but they repeat the gradient twice, with the second repeat mirrored. This makes editing a little less tedious, provided it fits the result you’re after.

Screenshot

Radial Gradients

Radial gradients start from the center (or any chosen point) and grow outward in a circular pattern. They’re handy for creating spheres and applying effects to the edge of circular elements. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Screenshot

Angle Gradients

Angle gradients can be a great way to mimic environmental reflections found on highly polished metallic objects. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Screenshot

Gradients on Gradients

Anything worth doing is worth overdoing, right? Combining a gradient layer with a gradient layer style lets you overlay two different gradients, giving more complex and — here’s the good part — completely dynamic results. To combined the gradients, you’ll need to set a blending mode for the gradient layer style. For the examples below, I’ve used either Screen (good for lightening) or Multiply (good for darkening).

Screenshot

Dithering Is Everything

Adding dithering to a gradient produces smoother results. Non-dithered gradients often contain visible banding. Dithering is even more important if your artwork is being viewed on cheaper 6-bit per channel TN LCDs and certain display types that tend to amplify posterization problems.

Screenshot

If you’re not seeing the difference, here’s an extreme and completely unrealistic example of gradient dithering in action:

Screenshot

Ensuring that your gradients are dithered is easy: just check the appropriate box in Photoshop.

Screenshot

Note that gradient layer styles can’t be dithered, and gradients in placed objects (such as stuff you’ve pasted from Illustrator) aren’t dithered.

If you use transparency in a gradient, that won’t be dithered either, which can be a huge issue at times. There is a solution for some specific cases: if you’re using a gradient with transparency to lighten an area with white, then using a non-transparent gradient with a Screen Layer blending mode will let you dither it. The same technique can be used for darkening with the Multiply blending mode.

Screenshot

A combination of the gradient techniques described above were used to create the Mac app icon below.

Screenshot

Gradient Maps

Quite different to other types of gradients, gradient maps can be a great way to add color treatment, allowing for very precise control. Gradient maps use the brightness of each pixel to map to a corresponding color in a gradient.

If the gradient starts at red and ends at blue, then everything white in the image will turn red, and everything black will turn blue. Everything in the middle tonally will map to the gradient, depending on how bright it is.

The image below was used in a poster for Kingswim, a swimming school:

Screenshot
With a gradient map. Large view

Without the gradient map, things look quite different. It’s a composite of about seven photos; the boy and background were shot on black and white film with intentionally low contrast so that the grain would be more prominent when the contrast was pushed by the gradient map. The gradient map also hides the color mismatches in the compositing.

Screenshot
Gradient map off. Large view

A Little Obsessed?

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.

Would you like to know more about a specific technique or Photoshop feature? Please let us know in the comments.

(al)

↑ Back to top

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

  1. 1

    I didn’t know many of these techniques. Very useful and interesting indeed! Cheers!

    34
  2. 2

    A lot of these examples show why illustrator can be so much quicker and more efficient with most web designs if you know how to use filters and the appearance panel properly. Photoshop can provide better effects for some things but overall I think illustrator (CS5) is the better web design program (just can’t get used to fireworks!)

    -22
    • 3

      Web designers should start working with Fireworks today in order to make developers’ work way more easy than ever.

      -16
      • 4

        Work with Fireworks rather than photoshop is the same as work with Corel instead of Illustrator.. You can’t compare…

        Photoshop is thousands miles ahead..

        :)

        -14
        • 5

          @fabio – Please don’t diss the CorelDraw.. for it seems you hate the things that you do not understand.

          -16
        • 6

          CorelDraw had great features that I still miss in Illustrator. Snapping and smart guides are much more reliable and intuitive than in Illustrator. Shape retaining after anchor removal and many others. If it wasn’t about PS and AI smart objects integration I think I’d still be using CorelDraw. You diss CorelDraw but you’ve probably never worked with it. Am I right?

          -7
    • 7

      If you submit an Illustrator file to a web developer to slice and turn into a live site, they will beat you with a stick of salami. Web dev’s have NO idea how to use Illustrator. Every one of them I’ve met knows how to use Photoshop. Not all of them I’ve met know how to use Fireworks.

      33
      • 8

        I know how! A good developer… should know all Adobe programs… and in knowing these, even the second hand apps like Corel-draw, MSword, Powerpoint or whatever your brother’s best befriend’s uncle is using to design sites these days should be easy to disect because they are all interchangeable with adobe apps. You all just need to know one extension PDF! Sound crazy… well every Adobe program can open a pdf. :D I rarely ever have a problem with any file given to me for developement… and neither should any other descent developer.

        -18
        • 9

          Interesting opinion from someone who has enough money to spend while others tend to use more free tools. Keep in mind that some OpenSource graphic tools can compete with expensive ones. Therefore take into consideration to not only focus on proprietary file types but maybe give open ones a chance (e.g. HTML+PNG – rarely used combination, I know).

          0
        • 10

          Many programs can open PDFs. However, PDFs may not necessarily have layers in them, which are required for web design, as the developer will need to turn these on and off while slicing up the layout.
          And, no, good developers DO NOT need to know every Adobe program. In face, no developers I know even want to use Dreamweaver. They prefer Eclipse or Textwrangler and the like. And not all programs are interchangeable with Adobe apps. You need to be able to save web layouts with layers in order for a developer to slice them up and prepare them for integrating into the site.

          -1
        • 11

          now THAT is just stupid…

          -3
      • 13

        Maybe, but that’s why multiple art boards in CS5 makes slicing easier than ever alongside pixel perfect graphics in AI

        2
      • 14

        Every developer I work with says Photoshops slice tool is junk, they either use crop or the selection tool, takes them ages but developers don’t seem to mind mundane repetitive jobs!

        The few enlighted one’s now use Fireworks for slicing. Firewroks opens Photoshop PSds no problem and has a much better slicing tool (1 tool instead of PS’s 2, can copy slices, easy adjustment fo slice properties, can export individual slices etc.

        1
  3. 15

    Oh thats nice. Exactly what i need. Thanks!

    0
  4. 16

    Thank you Marc! Very useful and nice post! Will definitely try out some of the techniques.

    0
  5. 17

    Kick-ass post! Very good. Thanks!

    0
  6. 18

    Thanks man! this is very helpful for me!

    3
  7. 19

    Rupnarayan Bhattacharya

    February 7, 2011 5:52 am

    Really good one. Surely I shall be testing some of the techniques.

    1
  8. 20

    I didn’t know about the dithering differences til now. I had been avoiding using gradients in large background elements because of banding. Of course there are CSS3 solutions to that but sometimes you need an image-based solution. Thanks for the tips!

    5
  9. 21

    These are some really valuable tips.
    Thanks for the great article Marc.

    1
  10. 22

    I’m already planning on using many of these techniques today!! These are great tips and many should be a part of a designer’s best practices. I’d like to see more articles like this.

    0
  11. 23

    I’ve read it all before on Bjango blog and maybe somewhere else, though; I cannot remember where exactly. Nevertheless, excellent write-up. As for the rounded corners methods, I think that the rectangle with ‘snap to pixel’ is the way to go. The other techniques produce either the same or a worse result, so why bother with extra steps such as blur and additional shapes (circles, I mean)?

    -1
    • 24

      These tips were published as separate posts on the Bjango website previously. The article has been reworked, tweaked and partially rewritten for Smashing Magazine. So it’s been around before, but it’s bigger and better here :)

      The other techniques produce either the same or a worse result, so why bother with extra steps such as blur and additional shapes (circles, I mean)?

      Blur is handy for some strange shapes and can be great fun with type. Circles actually gives the highest quality result, but is an absolute pain. I wanted to include all the various methods for completeness.

      I actually used to use the circles technique all the time. I would use more, but it’s very important that my designs scale these days, because of iOS development and Retina displays, so I use vectors almost exclusively.

      For more info on why: http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/

      1
  12. 25

    Holy crap, what a great summup!
    Nice to see how something simple is being investigated so insanely deep :-)

    1
  13. 26

    I like Photoshop more than illustrator but they are both better tools for different tasks. I find that when i want sharp edges I get the best result if i create the shape in illustrator then i drag it to Phososhop to add detail.

    0
  14. 27

    Thanks for the tutorial. I am a novice with photoshop so tutorials likes these really help me a lot.

    I had a question about the radial gradient you created. I attempted to create a few on my own with varying degrees of sucess. My biggest issue (specifically on the gradient on gradient rainbow example) being that my edges don’t have that same cool “glow” effect or in other words: my white gradient center doesn’t nicely fades out instead it just ends. I tried adding an outer glow, but there always seems to be a line between the edge of the radial gradient and the start of the outer glow. Can you provide any tips on how you got your gradient to fade out so seamlessly?

    -1
  15. 28

    Its amazing at what lengths designers will go to avoid using Fireworks. This stuff is a cakewalk in Fireworks! It is so much more flexible. You are able to change shape radiuses anytime you want by just clicking on the shape and typing the radius % in a field. Try it out peoples!

    10
  16. 32

    Its a very useful article. I have learned few new things from this article.

    On side note, why SM does not use a light-box in post images?
    It is not good from UX point of view that, when a user is reading the article and want to see the larger view of image, then article disappears if he clicks on image link

    0
  17. 33

    Thanks a lot! Some nice finetuning lessons learned.

    0
  18. 34

    Throughout the noise/pattern section you repeated said to “apply a mask or Vector Mask to match the element you’re adding noise to”.

    If you clip the noise/pattern layer to the element layer by alt+clicking the line between the two layers (or using Layer>Create Clipping Mask or pressing shift+cmd+G), you can now adjust the shape of the element layer without having to reduplicate the vector mask on the noise/pattern layer.

    Since you seem interested in streamlining work flow and reducing clicks and steps, I thought you might find this helpful

    0
    • 35

      Agreed. Though, if you’d like to be able to blend the element layer & clipped layer with the layers below you’ll need to open the layer options and declick “Blend clipping layers as a group”.

      Additionally, instead of using a bitmap layer for the noise, create a noise pattern (as you would in Method 4) and use a Pattern adjustment layer.

      -1
    • 36

      You’re right, that can be a great way to go, and what I do a lot of the time (as can be seen in the icon’s layer palette). The reason I didn’t mention that in the article was because the layer styles from the enclosing layer (the one that the top layer is grouped to) will be applied to both layers. In some cases that’s great, in other cases it’s not desirable.

      You’re correct though—it should have been mentioned.

      0
  19. 37

    Some happy new tips to add to the tool box… appreciated!

    -1
  20. 38

    I have a question about the dithered gradients. normally when I create a gradient for a webdesign, that will be x-repeated, and is 1px wide. Will a dithered gradient result in a correct gradient compared to non-dithered, probably I’ve been saving dithered all along?

    Nice tutorials! I believe this article is value to a lot of webdesigners, most techniques I mastered over time. Around the web this is so much done wrong!

    0
    • 39

      That’s a very good point and something I have a solution for, but didn’t mention in the article. If you’re saving repeating images that are dithered gradients, you’ll need to allow enough width or height for the dithering to look natural. I’ve found that around 10 pixels is good if you’re trying to be efficient.

      If you cut a dithered gradient to be 1px wide, then repeat it, it will often look worse than a gradient that wasn’t dithered. So making your repeating gradients use 6px to ~20px wide is essential if you’re dithering them.

      0
      • 40

        This also has the benefit of being more efficient for the browser to draw. There can be a trade-off between paint time and file size with repeating backgrounds. But mostly making your repeating background a little bigger is better.

        Oh, I just noticed…as Xig said. He’s right.

        0
    • 41

      I’ve found that on slow computers a repeating 1px background is processor/memory intensive and slows down the browser a lot. I try to make my backgrounds 100px or so wide so that on slow computers it need only be repeated 8-10 times.

      2
  21. 42

    One more addition, you use noise, but a lot of times I use ‘Film grain’ as well, sometimes I think this is just somewhat nicer. Not sure why.

    0
    • 43

      I’ve mentioned “noise” here, but I mean any kind of noise or texture. I have quite a few textures I use often. Like you’ve said, some other types of grain or noise can look great. You can also take photos and turn them into repeating textures to use in your designs. Anything goes!

      0
  22. 44

    Thanks for explaining this!

    -3
  23. 45

    I thought I was anal about my techniques, but you take the cake. Thanks for the breakdown…I definitely learned a couple of things.

    0
  24. 46

    Can’t express enough just how AWESOME this article is!

    -1
  25. 47

    i just hate Photoshop when it comes to designing websites. Photoshop is best used for modifying photos and that’s it. Fireworks is a lot easier to use, and you can finish the job a lot faster. Not to mention the fact that it compresses the images a lot better.

    1
  26. 48

    I am using Photoshop less and less for websites. I am experimenting with Illustrator, but also with Bohemian Coding’s DrawIt.

    -2
  27. 49

    Greeting from Slovakia!

    Great post, thank you very much. Bookmarked forever :D

    Tom

    -2
  28. 50

    Learned something new today.

    1
  29. 51

    For the rounded rectangles you better can make these first in illustrator (yes, with gradients, noise or even a texture) and then import them into photosjop or fireworks.

    Now look at your borders and rounded corners .. pixel perfect! Thanks for sharing, Cheers & Ciao ..

    0
  30. 52

    Been looking for a way to stop banding in gradients for ages. Thanks for the dithering tip!

    0
  31. 54

    Great post! And why did no one ever tell me about Gradient Maps before?

    -1
  32. 55

    You seriously can’t recomend the best method for rounded corners? Why pad it with junk like blur, both your final examples look like trash.

    You are allowed to make statements about what you consider best and not leave it open ended.

    -3
  33. 59

    Great Post! You could explain a gradient map, i never knew this before :)

    -2
  34. 60

    “Would you like to know more about a specific technique or Photoshop feature? Please let us know in the comments.”

    - Anything, just anything! I allready love this post. And would love to see more

    -2
  35. 61

    I would definitely LOVE to see more articles like this!

    0
  36. 62

    Very useful article I picked up a few good tips!

    -2
  37. 63

    Thanks, that’s very interesting and helpful

    -1
  38. 64

    Yeah, that’s brilliant if you have something that’s been flattened. It’s a very good tip.

    -1
  39. 65

    That’s a very good tutorial, have been waiting for one like this…thank you

    -2
  40. 66

    definitely the best article ever read about all these techniques! deeply appreciated!

    0
  41. 67

    That is definitely awesome article and really helpful, working with PS for long time and still found it tricky. and yeah Gradient maps always been my fav when things come to Photo Edits

    -1
  42. 68

    Tip about Noise and Textures on your #4 – Works with Color and Gradient layer styles: No, the pattern appears underneath…
    All you have to do is make your button shape layer white and set the gradient (or color) layer effect to multiply to see the pattern underneath.

    -1
    • 69

      That’s a good suggestion. If only gradient layer styles could be dithered I’d use them more often.

      -1
  43. 70

    Awesome Article. Very well explained!
    Thanks for sharing!

    -2
  44. 71

    I know these are Photoshop tips and not generic “web design” tips, but since other commenters are talking about workflow, I thought I would too. Argue Photoshop vs Fireworks all you want… or jump straight into CSS.

    Noise: Make a PNG of noise at 5% opacity. Set an element’s background to both a color and the transparent PNG and now you’ve got an infinitely scalable element that has both.

    Rounded Rectangles: CSS border-radius (and its friends -moz-border-radius and -webkit-border-radius) are easy and scalable post-content.

    Gradients: I don’t believe CSS background gradients support dithering (which I agree is important), but you can use the same trick as for noise. Make a white-to-black PNG at 5% opacity, then throw it onto whatever element you need it.

    In fact, you can combine these into a class and reuse them. Make a “button” class that automatically adds a shiny background, rounds the corners, and throws on a faint drop shadow. Then apply it to a link, an input, etc.

    5
  45. 72

    hehe, i took the “blur” method from photoshop 5.5 to 7 – it was the only way.

    -1
  46. 73

    well these things are way easier to be done in fireworks.

    -1
  47. 74

    I found this post very useful for an update. A refresher in using Photoshop. Especially the snap to pixel which has always bugged me when using Photoshop. This little trick I previously achieved by zooming in and making sharp manually.

    So this was a useful post and an interesting read. Big thank you.

    -1
  48. 75

    Really good article. I’m in the habit of using Illustrator and Photoshop in unison. I nearly always create my shapes in Illustrator and copy over to Photoshop (and then correct pixel alignement…). I never new about that ‘Snap to pixels’ option in the shap drop down though – nice one!

    -1
  49. 76

    Absolutetly brilliant!!!
    I believe that as designers and visual artists we all start in the Industry aiming to have a creative carreer but getting to know your work tools in depth and developing a taste for the technical side of your trade will definetly be an advantage!
    Thank you for sharing!

    0
  50. 77

    Finally, A great article that gives good use, please make write more of this stuff, I already feel addicted enough to return to this site everyday in the hopes of something new… bigger.. better.. that in someway can improve my work techniques!!!

    (Even if I use most of the stuff you described in the article today, its GREAT!)

    -1
  51. 78

    Absolutely awesome article, would love to see more in this kind of detail on SM

    0
  52. 79

    Now, who will tell me how to do it with Gimp (yes, I really use it)?

    0
  53. 80

    Excellent stuff. I used to spent 400 pounds in Prague for week Photoshop course. Question is why?

    -1
  54. 81

    Great, thank’s! Nice new views, even if I’m quite happy with my workflow.

    -2
  55. 82

    Thanks for the “Rounded Rectangle Vector Tool” tip! The snap to pixels is very well hidden.

    -1
  56. 83

    This is likely one of the best articles to be at Smashing Magazine, at least it’s one of my new favorites.

    Truly fantastic. Please feature more articles like this!

    -1
  57. 84

    Tank’s a lot! I love photoshop so much!
    It’s a pity that it is always compared with illustrator – both programs are amazing.
    live and learn…

    1
  58. 85

    This is a great article. When I find something great like this, I like to print it and stash it with my other reference info. I am unable to print your site from Firefox, and other browsers prohibit me from printing the images in the post. Is this intentional on your end? Do you have img {display:none;} in your print.css?

    -1
  59. 86

    Wow, good stuff.

    I never knew about the “snap to pixels” check box… smashing!

    -1
  60. 88

    Very Informative Post :)

    -1
  61. 89

    great post! thanks

    -1
  62. 90

    Thanks for the article. Really loved it. I always wondered about how some of my designs (by luck) had the pixels snap to the grid, while others didn’t.

    -1
  63. 91

    Love the thoroughness of this article. ‘Snap to pixels’ will seriously save me a ton of clean up time. Thanks!

    -1
  64. 92

    To think that I’ve been doing these two wrong all of the time..
    The internet is full of tips, but none pointed to that checkbox that enables dithering. It’s the first time it comes to my attention. Same with the snap to pixels.

    Many thanks!

    -1
  65. 93

    Really informative…
    Liked the rounded corners trick, gradient dithering…

    -1
  66. 94

    An awesome article! Thanks Marc!

    -1
  67. 95

    Using Photoshop for web design layout is the equivalent of using a 50 cal to hunt rabbit. Fireworks by far is quicker and there is less mucking around to get the exact same results. Photoshop for beautiful images, Fireworks for the heavy lifting and Illustrator if you are just bored…

    -2
  68. 96

    I never really thought about Dithering before. I saw it but never thought about what it did. Thanks for enlighting me to this useful tip.

    -2
  69. 97

    I never knew what the gradient map did and I’ve been using Photoshop for 10 years! That was my favorite part…I love how it made that composite photo look seamless. Very nice.

    0
  70. 98

    Great article. I currently use both photoshop and fireworks, and I find that both have their place when constructing graphical elements. Many thanks for all your effort in putting this post together.

    -1
  71. 99

    Thank You! Give me more!

    0
  72. 100

    Very good summary, even for experienced GUI designers!

    I have one additional tip when it comes to gradients & rasterization. And this works regardless of transparency or not.

    Simply choose the layers you want to add a raster to, and make them into a smart object. Then choose to edit that smart object. In the new window, change the depth from 8-bit to 16-bit (Image -> Mode -> 16 Bits/Channel) and then save.

    Photoshop will then compensate for the higher bit depth inside the smart object by adding a raster.

    In my experience, this method gives a superb result.

    Oh, and another tip. In case you run out of layer effects (why can’t we add multiple ones?), you can duplicate the layer and set fill opacity to 0%. Then work on the new layer and adding more layer effects.

    Depending on the shape of the layer, you might run into some problems with the anti-aliasing of the edges. This can be remedied by putting the layers in a masked folder. The masked folder method requires quite a bit of tweaking, but it could be worth it…

    2
    • 101

      Love that last tip Max. I do that a bit… it’s very handy, especially if you’re the kind of person who uses lots of layer styles (I am that kind of person).

      -2
  73. 102

    Deliver Add,problem royal thus step use fund well star wind lack cross network may glass son cell parliament interested concerned extend concentration demonstrate rule issue above miss while cos trial please partly sexual procedure secure marry western seek steal dress drive deep lack trial quite direct no-one card brother offer position why soft sometimes effective violence field finally game laugh belief home occur agreement finding oil research pair external cost male capacity extremely powerful remember rule summer life ready clear chair anyone face idea block deputy search large

    -9
  74. 103

    I can’t believe people are still publishing articles about how to make rounded corners in Photoshop. Is this 2007?!

    -8
  75. 105

    Wow this is one of the best, most useful posts I’ve read in the past year. Great tips. Thanks. Can’t wait for more!

    -1
  76. 106

    I still use photoshop for webdesign and I have no intention to change this.

    1
  77. 107

    About dithered gradient… For general background image of http://www.clickgnosis.es I use Dithered Gradient +MASK …and the result is no so good.
    Is there any solution for that?

    0
    • 108

      Alpha masks in generated gradients aren’t dithered in Photoshop. To dither the mask, you’ll have to build it yourself with a dithered gradient using the gradient tool (make sure dithering is turned on).

      0
  78. 109

    First of all. Webdesigner have to know Illustrator, Photoshop and Fireworks.

    Nice Graphics in Illustrator, Layout in Photoshop and Finishing up in Fireworks.

    Webdeveloper dont have to know a little about Photoshop or Illustrator. Eventually a little bit about Fireworks.

    I am a trained Advertisemend Artist and work at "Jung von Matt" Germany.

    -2
  79. 110

    This is one of the best tutorials on web design. I use these tips almost every day :-)

    pikted.com

    -1
  80. 111

    All those people talking about Fireworks being better than Photoshop for web work may have valid points but you are forgetting one minor detail:
    The title of this tutorial is “Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles”
    The important part of that title is PHOTOSHOP. Not Fireworks, Corel or Illustrator.
    Not everybody has access to both. This tutorial is about getting the best result using PS only.
    So keeping that in mind, this is a great tutorial for using Photoshop to create great-looking UI elements.
    Nice job Marc

    4
    • 112

      Thanks Daniel. Also, some of us have tried Photoshop, Fireworks and other image editors and decided that Photoshop is the best for our own workflow and preferences. There’s certainly some areas where Fireworks trumps Photoshop, but Photoshop can certainly be an amazingly powerful tool for web and app design. I also believe Adobe are going to make this decision even harder in the future by improving Photoshop’s design for screen abilities. That probably means the Fireworks and Photoshop debate will heat up even more. That’s ok. Use whatever you prefer (or whatever you have access to).

      Short version: Fireworks is great. So is Photoshop. Use whichever you prefer.

      2
  81. 113

    Thank you so much for the ‘snap to pixels’ trick! Made my life so much easier. I love you.

    0
  82. 114

    OMFG
    Rounded Rectangle – Snap to pixel !!!!!!

    This just changed my life…

    -1
  83. 115

    Great!!! Thx!

    0
  84. 116

    I prefer to use Illustrator and paste in Photoshop as smart objects. Easier to edit and reuse later.

    0
  85. 117

    wow, this is a great post.
    Thanks!

    0
  86. 118

    Wow, I’ve never noticed that snap to pixels function. I’ve spent hours tightening up designs by zooming in. Thanks so much. Great post!

    0
  87. 119

    awesome post I’ve never noticed ‘snap to pixels’ trick very useful, save me a lot ! :-)

    1
  88. 120

    Thanks for sharing these skills! I will be practicing!

    0
  89. 121

    i did not understand your tutorial at all u need to more specific and clear to the point.

    -2
  90. 122

    good article, and i have even tried as the article said ~ but some specific process could not get~

    -1
  91. 123

    very good hints, lifechanging tips :)), that snap to pixel on rectangle made the difference in my designs

    0
  92. 124

    What I want to know is who the h*ll would draw 4 circles then a connect them to make a box with rounded corners… radius is the only way to go…

    As for the fireworks over Photoshop arguement. Its not the tools its the designers experience, if you used one tool for 10 years and then try the other for 2 weeks it will be hard to make a shift.

    Tools are just what you use, but work will speak for itself. What you used to get there makes no difference.

    0
    • 125

      Photoshop designer – 2 days designing, client wants corner radius ‘made a bit smaller’, photoshop user starts again, 2 more days…..

      Fireworks designer – 2 days designing, client wants corner radius ‘made a bit less, 5 mins to change, job done.

      Lets face it Photoshop is great for photo manipulation (actually Photoshop elements is better cause it’s 1 tenth of the price!), but photoshop wasn’t designed for web design and is poor in comparison to Fireworks which is a well thought out application designed specifically for th ejob. Such a shame that Adobe don’t get it.

      0
  93. 126

    Thanks for all the tips! It was extremely helpful!

    0
  94. 127

    An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. :-)

    So let me reword that: Thanks for this article! Big thumb up for this blog post!

    Best regards Alex

    1
  95. 128

    Thank you for these tutorials, these are definitely useful in expediting my designing process.

    I have a question about gradient fill layers:

    I am creating a reflection for an image thumbnail, and I want to be able to duplicate the reflection for multiple images. I used a gradient fill layer for the reflection and I need to know (after I duplicate the original layer) how to move the fill layer, and its respective styles (i.e. position, scale, color etc.), onto another position on the page, while keeping the exact gradient the same?

    Any help wil be greatly appreciated!

    0
  96. 129

    Great tutorial Marc! Thanks.

    Quick question: the example you used to talk about texture by noise is great for a button or object with a defined size, but how would you make a tile this way? All of my experiments produce either vertical or horizontal lines.

    Thanks again for the tips!

    Evan

    0
  97. 130

    I love Fireworks.. I have hate Photoshop….draw a rounded vector rectangle and then adjust the corner radius… what you can’t? That’s photoshop for you, £700 of junk. If you’re web designer buy Photoshop Elements, it has more choice of photo manipulation tools that you will use (e.g extract filters) and is only £70.

    PE’s only weak point is no slice tool but Photoshop’s slice tool is woeful anyway….can’t export individual slices, can’t copy slices and why have just one slice tool when you can also have a slice selection tool as well, jeeeezus!

    0
  98. 131

    this is awesome information. N what i want to know is how to make different types of brushes on Photoshop? and also how to do different effects like using different images and putting them into the images but with the effects of Photoshop ?. I am a Graphic Design student i go to The Art Institute of Fort Worth and i want to learn as much as i can from people so any advice and help i can get would be greatly appreciated :) please. Thank you.

    Laura.

    0
  99. 132

    Thanks a ton for texture by noise method!! Was helpful.. :)

    0

↑ Back to top