Inference

I spend a lot of time in Photoshop designing the visual elements that I use in my interfaces. It’s a versatile tool and people use it for everything from retouching photographs to graphic, web and icon design. Needless to say, it is an incredibly complicated tool. Some of the most common uses for web design include drawing all the visual elements in an interface, logos, icons, etc. I’m going to focus on just those areas.

I have looked at a ton of designs in the past and many from people that don’t have a lot of design experience. In this post, I’m going to go over some basic tips in Photoshop to avoid these issues. I am assuming you know your way around Photoshop and if not, I have a couple of links at the bottom to get you started.

Vectors in Photoshop

If I could go back and tell myself just one thing, this would be it; use vector shapes in Photoshop. Do not draw raster elements. It is incredibly inefficient and hard to manipulate. Using vectors in Photoshop is really straight forward and it usually starts with using the Shape tool. Set it to “Shape layers” instead of “Fill pixels” when you draw your elements.

The advantage of drawing vectors is that you can manipulate the vector paths directly and this can save you a great deal of time and pain. You can do this by using the Direct Selection or Path Selection tool. You can also change the paths completely or draw your own with the Pen tool. The Pen tool is fairly powerful and if you find yourself needing to use it, make sure you read up on it. I’ve linked to an article below that should help with that.

Pixel Perfect

The other reason you would need to manipulate the paths directly is to keep your design sharp and pixel perfect. A pixel perfect design always stands out and gives your designs a polished look. This always starts with the base shapes. Let’s say I start off by drawing a base shape for a button and decide that it needs to be scaled down a bit. On the surface it might look fine but when I zoom-in you can see the problem fairly clearly.

It started off as a really nice pixel perfect shape but now on the straight edges we have these part pixel lines. You can see how these are created when you look at the vector paths. This is really easy to fix and all you need to do is grab the Direct Selection tool and move the points to the nearest pixel and you end up with a clean edge once again. In some cases it might be that we need to just move the entire shape using the arrow keys to the nearest pixel. Again the goal is that we end up with as clean of an edge as possible.

Using the Type tool in Photoshop has a similar problem as well. The text comes out blurry in smaller sizes and poses a problem when you try and make text for buttons or your logo.

There are a couple of different steps that can be taken to alleviate this and to make your text sharper. There is a more detailed article on this so I’ll just list the summary here.

• Use the ‘Sharp’ setting for anti-aliasing when using the Type tool
• For single characters shift them over by sub pixels
• Turn off Fractional Widths
• Play with the tracking and character widths for separate characters in small ranges

The result is quite apparent when you place the sharper text next to the blurry one. A word of caution with this technique; the last step involves changing the tracking and character widths to sharpen the edges of the text. But varying this too much can offset the text all together and that is not what we want. Make sure you compare the vanilla text with the tweaked ones, character by character to double check.

In the image above the first one is created with the standard type tool, the second one is the tweaked one. And the third is the case where we got too carried away with changing the tracking and character widths.

It is important to make the text in your designs sharp, as they are just as important as the rest of your design. I have seen way too many designs where they have a really nicely designed element, but the accompanying text was too blurry and that takes away from the experience.

To drive home this idea of having sharp and pixel perfect elements; here is an example of an image and a text in its standard form and in its tweaked form. Notice how at a glance it does not seem like much but when you look at it carefully the tweaked one gives a more polished feeling.

I think getting pixel perfect base shapes are absolutely critical to a well designed element. It is a good idea to get used to spending some of your Photoshop time in a 3200% zoom level and looking at designs in a pixel sense.

Layer Effects

Now that we have our basic shape done, we need to start adding the effects that make it seem realistic. The standard pattern for adding multiple layer effects is to create multiple layers with a fill of 0%. This is because Photoshop doesn’t allow you to add the same layer effect to a layer. And it also doesn’t let you adjust the layer positioning of each of the effects applied to a layer.

Now why would we need to add to multiple layer effects? The main reason for this is the fact that each layer effect is just a tool we use to create a realistic element. One of the mistakes I used to make early on was to think that since I’ve already used an effect once, say Drop Shadow for example; that is all I need to do in terms of a shadow. It took me some time to realize that the layer effects are just tools and we might need to use it multiple times to get the overall effect right.

In the next few posts I’m going to go over the effects in detail and the real world metaphors they can be used to represent.

Resources

Here are some resources that I referred to in this post.

• Learn Photoshop: All of the Basics for Beginners
• Mastering Photoshop With Paths
• Photoshop’s Pen Tool: The Comprehensive Guide
• Creating pixel-perfect text of small size in Adobe Photoshop

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 some 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.