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.

I have always felt that there has been a really unjust divide between designers and developers. It’s almost like this really weird chasm that one must cross to go over to the other side. Somehow designers lack the analytical thinking required to be a developer and that developers lack the creative sense needed to be a designer. I think this is a really broad generalization and to me, it comes down to what you are striving to be in your career. Regardless of where you stand on this debate, one thing is clear; in a day and age when people are churning out web-based products at a high rate, there is incredible value in being able to do both.

I have always been a developer and never felt the need to learn how to design, until I started working on my own products. Once you start working on your product, there is this strong urge to put out the best you possibly can. And part of making a good product is a good design. So I started spending more time into understanding the aspects of good design. One of the issues I faced was that none of the design articles, books and tutorials were geared specifically towards developers. I really wanted a “design tips for hackers” type of a book. Something I can put to use right away and not feel like I need to spend an eternity to learn how to make the lander and interface for my project.

The 80-20 Effect

It’s true that it takes years to master any craft, and design is no different. The more time I spent on it, the more I feel there is to learn. I have come to respect designers and their work. That being said, I feel a lot of the basics can be picked up very quickly if it is provided in the right format. I’d like to think of this like the 80-20 effect, where getting reasonably good takes 20% of the time and mastering it takes the rest. So I am going to put together a series of posts that try and do just that.

Design Tips for Developers

I have gotten quite a few requests in the past from people asking me for feedback on their designs and I would always have this feeling that if only they knew a couple of small things, they wouldn’t need my advice. I am going to try and list the things I have learnt in the past couple of years of working on the design for my startup. I have the following goals in mind:

• Make it practical
• Target current design trends
• Greater detail to help with the basics
• Talk about specific techniques with examples

I hope that after reading each of these posts, you should be able to go back and apply it right away on your existing designs.

Who is this for?

I am trying to target developers that have little to no design experience and would like to do things to improve their design but don’t have the resources to bring a professional designer on board. Somebody that wants to improve but is stuck with the one nagging question, “people tell me my design looks bad but I don’t know why”.

The Plan

I’m going to try and make this set of posts as practical as possible while talking about the theory behind the designs as well. I’m going to be talking about the basics of using Photoshop for visual elements of the interface, the basics of UI, typography, the importance of grids, etc. I’ll also try and touch on the importance of developing a good taste for design and how we should think about design while developing products.

Disclaimer

I am not a professional designer nor am I going to pretend to be, so take my advice with a grain of salt. In essence I am trying to lay down a path that I would have liked to take as a developer when I was starting to learn design. I hope others find it helpful.

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.

We are officially launching our API and as a part of this launch the guys at TweetAgora are launching TweetAgora v2 which comes with a really slick implementation of our API.

Cadmus API

We have rolled out a couple of changes to the API over the last couple of weeks. The most significant change being the ability for other applications to allow their users to sign-in to Cadmus and get their API key. We do this by using OAuth echo to verify the user’s authentication details with Twitter and then returning the Cadmus API key back to the calling application. This allows application developers to seamlessly integrate with Cadmus. And it is as simple as a single click for our users to add Cadmus into your application. A huge thanks to Mark from TweetAgora for working with us to ensure that the process was as simple as possible for our users. You can learn more about our auth API here.

TweetAgora v2

Lets quickly walk through TweetAgora’s implementation of our API. First you get prompted to enable Cadmus if you wish to see your stream sorted by relevance.

And with one click they use the Cadmus Auth API to pull in my details.

Once TweetAgora has my Cadmus API key it shows me my stream sorted by relevance using the statuses API. And just like that I can view my Cadmus stream on my iPhone.

I can look at a tweet in detail.

And pull up the entire conversation around it using the comments API.

I have my personal trends using our trends API.

And search results just from the people I follow as well using the personal search API.

Mark and Brett from TweetAgora have done a great job with their latest version. You can grab TweetAgora from the App Store and read more about its other neat features here. You can also learn more about our API here.

If you would like to integrate Cadmus into your application; send us an email or contact us via Twitter for your own application key!

Share

Please do share this on .

We have some really exciting news to share coming soon. Stay tuned!