TintColor

That is right! Tint! I like to have a theme for my apps as far as colors and styles and TintColor play a huge role into how your app looks on iOS. iOS has a really great Appearance Class that helps you set defaults throughout your application that you can use to take your icons from this:

to this:

with just this single line of code in the `FinishedLaunching` of your `AppDelegate`:

UITabBar.Appearance.SelectedImageTintColor = UIColor.FromRGB(118,53,235);

Selected TabItem Image

Another way to spice up your user interface is to have a a completely different image on the selected tab. Usually it fills in and inverts the icon in some way. For example we would want our tabs to look like:

So the first thing is to create those selected images and add them to your Resources folder in your iOS project:

Notice I have tab_about.png that is what my ContentPage.Icon property is set to. I have added in the _selected.png too, which is what we will want to use. For this to work the naming is very important as you will see because all we need to do is create a custom renderer in our iOS project to swap out the SelectedImage on the TabBarItems when our TabbedPage shows up:

public class SelectedTabPageRenderer : TabbedRenderer
{
       public override void ViewWillAppear(bool animated)
        {

            if (TabBar?.Items == null)
                return;

            var tabs = Element as TabbedPage;
            if (tabs != null)
            {
                for (int i = 0; i < TabBar.Items.Length; i++)
                {
                    UpdateItem(TabBar.Items[i],  tabs.Children[i].Icon);
                }
            }

            base.ViewWillAppear(animated);
        }

        void UpdateItem(UITabBarItem item, string icon)
        {
            if (item == null)
                return;
            try
            {
                icon = icon.Replace(".png", "_selected.png");
                if(item?.SelectedImage?.AccessibilityIdentifier == icon)
                    return;
                item.SelectedImage = UIImage.FromBundle(icon);
                item.SelectedImage.AccessibilityIdentifier = icon;
            }
            catch(Exception ex)
            {
                Console.WriteLine("Unable to set selected icon: " + ex);
            }

        }
}

That’s it! Super crazy simple to make your tabs look about 100% better! Have fun out there.

Looking for Android? Head over to my blog post outlining how to implement it.

Now that I create apps in my spare time, I have to create app icons and graphics for my apps myself. This tends to be a real issue for me. There are a few great resources out there for app creators that you should be taking advantage of. First, is the Android Asset Studio, which has a bunch of great icons, ways to generate in device screenshots, and customize your Action Bar. If you are on the iOS front then look no further then Glyphish, which costs up to $99 but has over 1200 icons for your consumption. If you are on the Windows Phone side of things then there is an amazing open source repo from Templarian that has matured over the years to supply simply beautiful icons for your app.

With these resources at my back creating a nice user interface with great icons in app isn’t an issue. The real issue is the very first thing my users sees on the app store, which is the main app icon itself. I fall on my face when it comes to this topic as shown in these two app icons:

These might not be the worst icons in the world, but they sure aren’t the best. Over the last week I created a new app for iOS called Post It, available open source on GitHub and on the App Store, which offers easy way to send social media updates from your iOS 7 device. It’s main goal is to replace the missing “swipe from the top of your device and tweet” functionality that was removed in iOS 7. I wanted the app to be beautiful, and I want the app icon to shine. After asking around on Twitter a recommendation that I had heard of before was mentioned, which was Fiverr.

If you have never heard of Fiverr, then you are in for a treat. Fiverr allows anyone to post their service that can range from physical goods, promotions, artwork, programming, or anything else with a cost of only $5. Now of course you can get things for $5, but there are plenty of “extras” that everyone offers that will raise that price up. So my experiment was this: Can I get a beautiful app icon for $5?

I started off by searching through the large list of graphic designers that were providing app icon creation services and I landed on 3 that sparked my interest: gmklawy from Egypt, creativepro from India, and atomicbliss from Sri Lankia. Each had overall positive ratings, and as you might have guessed all started with a $5 intro price.

Baseline

I started each order the same way, after placing my order I gave them details on what colors I was looking for, a description of an app, and the idea of taking the tweet button and remixing it in someway with a quill pen or whatever else hit their mind. After that all I had to do was wait and see what they might come up with.

gmklawy

As I studied gmklawy’s “extras” I knew immediately that I would want the PSD source files and of course I would want my app icon to be made and deliver in under 1 day… so that $5 jumped up to $25 really quick. But, within a few hours I had my first app icon design ready for review:<

Alright I wasn’t blown away, but I thought it did look good, the social bubbles were cool and the hand was an interesting design, but I wanted something simple and a bit more elegant. After a round of feedback the final icon turned into:

With not knowing how many revisions I could actually get out of gmklawy for free I accepted this as the final design and gave him a thumbs up review. I wasn’t sold that this was my final app icon, but it was a starter and hey I had more designers working on designer so who knew what they might come up with.

creativepro

This guy had a really impressive resume and from his extras list I had extremely high hopes. $5 to create an app icon… YES, $10 for 2 revisions…YES, $10 for textures and shadows…YES, $10 for 2 to 3 custom icons… YES, $20 for same day delivery… Obviously! Oh wow this just got to $55 really fast, but hey this seems like multiple hours of work so I can justify that in my mind. That was until I got back the first drafts in my mind, which were on his dropbox so I don’t have access, but were super generic icons with a T and F side by side in 2 colors. I was not too happy at this point. Luckily I had more revisions and could have him start over, which I did. I tried to give more constructive feedback and maybe he just didn’t understand what I was going for, which led to this:

Alright so we are looking a bit better and it is a twist on Twitter, but not great so I asked for 1 final revision to see what I would get. I tried to tell him about the essence of the app and reiterate its purpose. He mentioned this is the last revision at this price and I agreed, as it was the final revision that I technically paid for. Here is what we turned out with:

A bunch of Twitterish boxes with some clip art inside… I was not blown away by the $55 I had just spent, but I still gave him a nice review as perhaps we just didn’t communicate great. I mean we are very far apart and only chatted over the Fiverr’s order discussion board. I knew that I could use one of these icons from ether creativepro or gmklawy, but I wanted to see what atomicbliss could add to the equation.

atomicbliss

What sparked my interest with atomicbliss was that he had focused on simple letters with drop shadows, which are all the rave with the kids now a days. No one else on fiverr was really doing this and his extras were super cheap. $5 for the icon, $5 for the source documents, and another $5 for getting the icon within 2 days?? Yes to all of this please! At $15 this had me a bit worried to be honest. He was the cheapest fiverr I had run into yet. Without delay and under 12 hours he deliver 3 amazing mock ups:

Based on the first mock ups, I knew that this was my guy and hopefully I could get a few more revisions out of the deal. The thumbs up was pretty great, but didn’t fit the app perfect. However, the P with the quill was beautiful and we both agreed that dark blue was the best option of the bunch. We went back and forth a bit on the design and came up with 2 great designs. First was his favorite design without a drop shadow:

Next, was a final decision by both Stephanie and myself, which was to use his variant of the quill and add the drop shadow back. So here it is, the final app icon for Post It:

Conclusion

What did I learn from this experience? Overall, I will say that Fiverr is a great service, that “might” get you a great app icon or other things at the end of the day. It isn’t full proof and you will absolutely spend more then $5 to get an app icon, however when you think about how much impact your app icon can have on sales then it is actually priceless. I spent a total of $100 on this experiment and I think it was well worth it the investment. I will continue to go back to atomicbliss to create more app icons so future investments will be much less. It should also be noted that you can use fiverr for much more then graphics and icons, as I bought these adorable hand crafted beavers: