Designers seem to have this superpower that we developers can’t get a grasp on. They know how to make an app UI look good and sometimes we think we can replicate the look and feel.

30 hours later, we still on the first screen with so many lines of code written but nowhere near the look and feel we desire. That can be frustrating.

The good news is that the designer superpower is not so super after-all. There are some simple hacks in design and if you understand them, you can also make your UI look good with minimal effort.

good-ui

Today, I am going to show you one of these hacks. I am going to call it the Annotated Image Hack – that’s kind of a fancy name for putting text on an image. We put these to great use in our Mega template, click here to see it. This is just one of the tricks of the trade on how to make good looking UI.

This design concept can be used in Table View Cells, Collection Views etc.

But you can’t just slap on text on any image and pray it looks good. Below you will find 6 different techniques on how to do it beautifully.

1: Simply Add Text

Yes, I know I said you can’t just add text on any image and it will looks good. Sometimes you might be lucky, just like in this image below. This is okay because of the way the text elements are aligned with the title larger than the others etc.

dark-simple-text

Also, it so happens that the text is on a darker part of the image. What if this wasn’t the case. See this example here below. Now since this is a different article with a new cover image, the text is hard to read.

light-simple-text

So what do we do?

2. Add an overlay

You can simply add an overlay above the image. The trick is to make the overlay dark and transparent or tinted like in the Yahoo News Digest app.

overlay

In this case, it works because the color of the font is white.

The screenshot of the sample project we are working on is below.. And after that you will see the code achieve this effect.

overlay-black

func addFullOverlay(){
 
        let overlayView = UIView(frame: CGRectZero)
 
        overlayView.translatesAutoresizingMaskIntoConstraints = false
 
        overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
 
        self.view.insertSubview(overlayView, aboveSubview: coverImageView)
 
 
        let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0)
 
        let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
 
        let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
 
        let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
 
        view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
 
    }

But this effect is not optimal because the colors on the image is now dull and can looks washed out. This might actually be what you are looking for. By adding a tint to the overlay, you can have an instagram style filter to the image. Just like in the image here.

All that needs to change is the color of the transparent overlay.

overlayView.backgroundColor = UIColor(red: 0.5, green: 0.2, blue: 0, alpha: 0.5)

overlay-tint

3. Text on a Background

Not every one wants their images to look different in the app. So the full overlay might not be the one for you. If you still want to keep the original color of the image, you can use this technique. See it used in the Funny or Die News app.

funny-news

Or just like in our case, you can add a background for only the text itself. You can easily add a background for the text by using the NSAttributed text properties.

text-overlay

Here is the code to achieve this effect.

func addBackgroundColorToText() {
 
        let style = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle
 
        style.firstLineHeadIndent = 10.0
        style.headIndent = 10
        style.tailIndent = 0
 
        let attributes = [NSParagraphStyleAttributeName : style]
        let attributedTitleText = NSAttributedString(string: "Supplier woes suggest Apple Watch sales aren't great", attributes: attributes)
 
        titleLabel.attributedText = attributedTitleText
 
        let textbackgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
        titleLabel.backgroundColor = textbackgroundColor
        authorLabel.backgroundColor = textbackgroundColor
        dateLabel.backgroundColor = textbackgroundColor
    }

4. Text on a Tinted Background

Or if you don’t fancy black, you can change the color of the background and you have a tinted background. Homework for you:-) Find the dominant color in the image and use this as the tint color.

tinted-text-overlay

5. Blur the image

This is my favorite effect. And iOS 8/9 makes it easier to implement using the UIVisualEffectView class. We use this effect in our Newsstand template. Since the part of the image behind the text is blurred, it is easier to read.

blur-overlay

Here is the code to achieve this effect.

 
    func addBlurView(){
 
        let effect = UIBlurEffect(style: .Light)
 
        let overlayView = UIVisualEffectView(effect: effect)
 
        overlayView.translatesAutoresizingMaskIntoConstraints = false
 
        self.view.insertSubview(overlayView, aboveSubview: coverImageView)
 
        let topConstraint = NSLayoutConstraint(item: overlayView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -30)
 
        let leftConstraint = NSLayoutConstraint(item: overlayView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
 
        let rightConstraint = NSLayoutConstraint(item: overlayView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
 
        let bottomConstraint = NSLayoutConstraint(item: overlayView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
 
        view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
    }

6. Gradient Fade

This is my second favorite effect, or sometimes it beats the Blur effect to number one depending on my mood :-).

This is achieved by adding a gradient layer behind the text. The gradient color goes from transparent black to opaque black. Kind of a neat trick, huh.

gradient-fade

This is used in the Flipboard app or online on the hero image on any Medium blog. You can see it here used in the Hotel Tonight app too.

image1

To achieve this effect, you can use the code below.

 func addGradientOverlay(){
 
        self.view.insertSubview(gradientView, aboveSubview: coverImageView)
 
        gradientLayer.frame = gradientView.bounds
 
        let opaqueBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).CGColor
        let transparentBlackColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.0).CGColor
        gradientLayer.colors = [transparentBlackColor, opaqueBlackColor]
 
        gradientView.layer.insertSublayer(gradientLayer, atIndex: 0)
 
        gradientView.translatesAutoresizingMaskIntoConstraints = false
 
        self.view.insertSubview(gradientView, aboveSubview: coverImageView)
 
        let topConstraint = NSLayoutConstraint(item: gradientView, attribute: .Top, relatedBy: .Equal, toItem: self.titleLabel, attribute: .Top, multiplier: 1, constant: -60)
 
        let leftConstraint = NSLayoutConstraint(item: gradientView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1, constant: 0)
 
        let rightConstraint = NSLayoutConstraint(item: gradientView, attribute: .Right, relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1, constant: 0)
 
        let bottomConstraint = NSLayoutConstraint(item: gradientView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1, constant: 0)
 
        view.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
    }

Download the sample project

Like these effects? Now you know how to implement them, you can use them in your app. Click here to download the sample project where all the effects are implemented.

For more information on the research done for this post, take a look at this post on Medium.
Let me know your thoughts and if you are able to use this in your app, please let me know.

16 comments

  1. mark

    Hi,

    Excellent tutorial. I download the aforementioned app. I am relatively new to Xcode development. When I tried running it, got this error:
    “Xcode cannot run using the selected device.” I can’t seem to change the “iOS Device”

    How do I change the simulator?

    • Tope

      There should be a button at the top-left of Xcode with a drop down that lets you change to the simulator

  2. Stephen

    Thanks so much Tope for making these examples available – elegant in both app and code. And some more Swift to study … 🙂

  3. Phil

    Hi Tope, Which version of Xcode should the sample project be able to run under ? I’ve tried Xcode 6.4 but it is showing SWIFT compilation syntax and storyboard errors and the deployment target is set to iOS9. Is it possible under iOS 8 as well ?

  4. Asinox

    Hey!, nice tips, but now i wanna know how to apply the Gradient Fade to an image view into a custom cell.

    Thank you!!

  5. Saki

    Fears push people to iasernce their credentials. Will employers care about how many diplomas and degrees the applicants have or when and where and work experience they have ?

  6. Harini

    This is really a great post. Thank you for taking time to provide us some of the useful and exclusive information with us. Keep on blogging!!

  7. Pingback: 6个iOS图片文本设计小技巧 - 恰同学少年-不称