To fix this we built the “Dapt It” button; an incredibly simple bookmarklet that lets you show things to your friends across any network and talk about it. We also keep it in a convenient and private place just for the people you are showing it to so you don’t have to worry about who else is going to see it. We’ve been using it between our friends and it’s been a lot of fun. We have a feeling you will love it too!

We are still working on the details but we’ve got a few test invites for you guys and we would love to hear your feedback on it. We’ve got some big plans with where we want to take Dapt but we are really excited to start with this. The following link should help you get set up.

Dapt Invites

And as always you can email me or find me on Twitter if you have any questions or suggestions.

So take a second, jump around while you read tweets and collect points by playing Fun Thing. And make sure to follow Logan on Twitter.

Share

Please do share this on .

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.

A huge thanks to Idée and the other sponsors for making HackTO possible.

You can reply to posts, view the comments and related posts right in the app.

So give it a try and let us know what you think!

Share

Please do share this on .

Share

Please do share this on .

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

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 .