Inference

In this post I am going to talk about Photoshop effects. Previously, I had talked about creating a pixel perfect base shape using vectors and then adding layer effects to them. The idea here is to use effects that represent real world metaphors. This means that the quality of your designs will be judged by your ability to make your designs as realistic (or pseudo-realistic) as possible.  This is the one thing most first time designers have problems with.

When a designer uses these effects well, it is almost as if the effects are working in a very subtle way to enhance the base element. On the other hand, when the effects are overused it is as if the effects have taken over the base element. When effects are misused, we can end up with an element that looks out of place and can be distracting. It is because of this reason that it is better to create designs that are minimal when you are first starting out. If you are unsure if a certain effect is working the right way, it is better to leave it out rather than try and use it just for the sake of it.  So when in doubt with most effects, try and take the safer approach and default to a more minimal look. You can be more adventurous with your designs once you become comfortable using Photoshop effects to add realism to your designs.

In these next few posts I am going to go over some of the most commonly used effects in Photoshop. I’m going to look at their most common applications and some of the mistakes people make with them.

Gradients

The most common use of the gradient is to play with lighting in elements. The use of the gradient for this purpose is so common that if you were to take a second to look around your screen you should be able to find it literally everywhere.

There are two main ways gradients are used for lighting; a light source that is placed above a convex or concave element. It is really important to understand this before using the effect. I am going to use the example of a call to action button that is commonly used in lander pages to illustrate this idea.

In the standard state, the button has a light source hitting the top part of a convex shaped button. In the pressed/active state, we see the shadow from the top edge of the button and this highlights the fact that the button surface is now concave. Let’s start off by looking at how we use the gradient to create a really nice convex shape.

Convex Shape

Let’s go into detail about how we achieve a convex shape with a gradient. The idea is simple, a slightly lighter top colour for the gradient is used to show that the light source is above our convexly shaped element. There are many ways to create this effect but let’s just take a look at one of the easiest and most re-usable ways. We colour the shape with the base colour of the button and then apply a white to transparent gradient overlay for the highlight.

Let’s go over some of the settings used to create it. I am going to leave the other effects for the button so that you can see the effect of the gradient with respect to the final effect we are trying to create.

1. Start by drawing the base shape with a simple #4C7BD2 colour.
2. Select the gradient to be one that goes from white with 100% opacity to 0% opacity. The white colour needs to be at the top.
3. Select the Screen blending mode to use it as a highlight.
4. Select the Linear gradient style with a 90° angle to show that the light source is at the top.
5. Now to set the scale. The scale sets the size of the gradient with respect to your base shape. The best way to think of this setting is to try and think about the shape of your element. A large scale would mean that you have a really subtle convex shape. Whereas a lower scale right at the top of the element would almost be a sharp bevel. Try and picture what your element should look like and then set a ballpark value for the scale. To give you a sense of what changing the scale can do, let me show you two extreme values.



6. When you decrease the scale of the gradient, the start and end points of the gradient move inwards. But we want the light source to highlight the top edge of the shape.  So we need to click the gradient and drag it up to position it right at the top. Similarly, when you increase the size of your gradient you need to re-position it.
7. Now to pick the opacity for the gradient. We are using the gradient to show that it is a convex shape with a light source at the top. A high opacity value would almost make it seem like there is a really bright light source really close to it. This would mean that all the elements in your interface would need to reflect this fact. This in the UI sense would translate to a high noise level for your interface which is far from ideal. A low noise environment with a focus on your content is what we are trying to achieve.  I prefer to err on the side of subtlety rather than over-emphasizing my effects. Pick the least number for the opacity that lets the user know that there is a light source above the element. Again, to get a sense of what changing the opacity does to your gradient here are two extreme values for it.



8. Now we try and fine tune the values. We ball parked the values in step 5, 6 and 7. Now we try and fine tune it by turning them down little by little as we approach the ideal value. The reason we do it this way is because all the options play together to create the effect. You cannot select the perfect value for the scale and then try and find the perfect value for the opacity, since you don’t know what it would look like until you have tried it. The problem most non-designers have is that they are not sure what the ideal effect is. The best way to deal with this issue is to make copies of the various version as you go along. Make a copy and then repeat steps 5, 6 and 7. Place the two copies side by side and compare them to pick the one you want. Make sure while comparing gradients you vertically align the different versions so that you don’t end up looking at the lighter colour of one version vs the darker colour of the other. Then scrutinize the one you have picked to see if either the convex shape or the gradient is too strong or too weak. Make a copy and fine tune the values again. After repeating this process a couple of times you should get a good sense of what is right or wrong. For buttons I like a certain radius of curvature and so my gradients usually end up covering a third of the entire shape. But this depends entirely on the look you are going for and the overall theme of your interface. Here are a couple of the versions I went through to get to what I felt was right.

Concave Shape

A darker to lighter gradient can be used to show that the light source is above a concavely shaped element.

The steps used to create this effect are similar to the convex shape with a few differences.

• The base colour of the element is darker than before. This is because it is a concave shape that goes into the surface of the canvas. It has to be darker than the convex shape that pops out of the canvas. In this case I used #4773C5.
• The gradient is black 100% opacity to 0% opacity.
• Blend mode is set to Multiply.

Again tweak the values till you come up with something ideal. The concave shape needs to compliment the convex shape. As the button cannot have different radius of curvatures in the two states. And this is purely because I am treating this like a button that caves in when clicked on. For other cases where we are showing concave shapes, the curvature depends on the specific effect. Let me quickly show you some of the versions I went through.

Get used to comparing different versions side by side to get the desired effect. The ideal effect is the one in which the element as a whole is so realistic that we forget that we are looking at a gradient effect. If you want to take a closer look at the values for the options in the above examples, you can download the PSD here.

Common Pitfalls

Good gradients are hard to do and so here are a few things to watch out for when used for lighting. The most common mistake is the opacity of the gradient is too high. This makes it seem like there is a really bright light source close to the element. I mentioned how important it is to not overuse your effects.

The problem with the image above is that now we just have a gradient between two strong colours as opposed to the subtle lighting effect that we were going for.

The second most common mistake I see is the use of a poor base colour. In an effort to create the lighting effect we might end up picking a dull base colour and then use a brighter colour at the top.

In the image above, it makes more sense to pick the top colour as the base colour. To further illustrate this point, let’s take away the gradient and just use the base colour.  We end up with a really dull colour for our base element and it doesn’t do a very good job of being a call to action button. It is important to always remind yourself that the effects are just here to enhance the base element.

I also see some cases where people use two completely unrelated colours for the gradient. This makes absolutely no sense from a lighting standpoint.

The best way to prevent mistakes like this is to try and explain the reason for using an effect. In the case of the gradient it is for lighting and so we should try and stick to that.

Summary

To quickly summarize some of the key points from above:

• Gradients are mainly used for lighting
• Lighting shows a convex or concave shape
• First try and get ballpark values for the different options
• Then fine tune by comparing different versions
• The ideal effect is one where the effect isn’t completely visible on its own
• Stay away from dull base colours and multi coloured gradients

Resources

I have only covered two common uses of the gradient effect for the purpose of creating lighting. To read more about gradients or lighting in general have a look at the links below.

• Gradients
• A Gradient Tutorial
• Lighting in Icon Design

Feedback

If you have any questions/comments or want me to go into more detail for something specific, let me know over Twitter. I would love to hear your feedback and ways I can improve this series. I would also love to see before and after shots of your designs after the application of some of these tips.

Rest of the Series

This post is a part of my Design Tips for Developers series.

• Preface
• Photoshop Basics
• Photoshop Effects – Gradients

Share

Please do share this on .

Thanks to @mliao for reading over this post.