Telling you how we see the world.
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.
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.
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.
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.
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.
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.
To quickly summarize some of the key points from above:
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.
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.
This post is a part of my Design Tips for Developers series.
Please do share this on .
Thanks to @mliao for reading over this post.