6 iOS Image Text Design Tips

Designers seem to have a "magic power" that we developers don't have. They know how to make an application's interface look so comfortable that sometimes we can't wait to replicate it.

However, a few days later, we are still stuck on the first interface of the design draft, writing long sections of code, but the interface is not what we want, which is undoubtedly a very annoying thing.

The good news is that the "magic" of designers is not as magical as we think. There are some tips on design. As long as we master them, we can make the user interface look good at the lowest cost.

Today, I'm going to show you some of these tips, which I prefer to call "image markup tips," which is basically how to put text on an image to make it look better. We use these tips in our [iOS template], and this is one of the secrets of why we can build a great user interface.

These design concepts can also be applied to table view cells and collection views.

We can’t just throw text onto an image and expect it to instantly feel that way. However, following these six tips will help us achieve our goal:

1: Add text

Well, I won’t forget to say that throwing text on an image doesn’t make it look good. But sometimes we may get lucky, like in the example below. This design looks great because the title is larger than the other text elements.

And, this effect generally only occurs when the text is on the dark part of the image. If this is not the case, then it will be like the example below. Now we change to an article with a different cover, oh my, GG.

Okay, what to do?

2: Add image mask

We can add a mask directly to the image. The trick is to use this mask to make the image darker, more transparent, or directly paint it with color, just like Yahoo News did.

Okay, so in this example, since the background color is blue and the text color is white, it looks pretty good.

The following example is a screenshot of a project we are currently working on, followed by the code we use to achieve this effect:

 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]) 
   
 }

This isn't a very good result, because the image is very dark and the text stands out, but it may be what you're looking for. By adding some color to the mask, we can add a "filter" effect to the image, like Instagram does, as shown in the picture below.

#p#

We just need to add color to this semi-transparent mask:

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

3: Add text background

Some people don't like the idea of ​​masking, because they might want to keep the image "original". In that case, we need to use this technique, as "Funny or Die" did.

Now that our project is complete, we can add a background to the text. We can easily do this using the `NSAttributed` property of the text.

The code to achieve this effect is as follows:

 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: Add a colored background

Well, similar to the effect above, if you don't like black, you can change the color of the text background, so that you have a "colored text background". As for how to achieve this effect, I leave it to you to try O(∩_∩)O~. The key is to find the main color of the picture and then set it as the background color.

5: Add frosted glass

This is my favorite effect, no doubt about it. With the `UIVisualEffectView` class provided by iOS 8, we can easily achieve this effect. We used this effect in the Newsstand example. By adding a frosted glass effect to the image below the text, the text can be made more readable.

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: Add dark gradient

This is my second favorite effect, and sometimes even better than frosted glass.

This effect is achieved by adding a "gradient fade" layer below the text, with the color fading from semi-transparent black to opaque black, which looks great.

This effect is used in many applications, such as Flipboard and many blog applications. We can also find this effect in the Hotel Tonight application.

To achieve this effect, you can use the following code:

 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])
 }

Don’t you like these effects? Now that you know how to implement them, you can use them in your applications. Click here to download the sample project so you can see all the implemented effects.