1

I would really like to achieve a see-through text style effect in my iOS app. It's pretty simple to create the desired effect in Photoshop, but I have no idea how this could be accomplished in code.

The effect applied to text simply shows the background underneath the text, but it is darkened (or lightened) so that it is visible. There is no fill for the text at all, it just enhances the background where the text would be.

This is what I want to obtain:
enter image description here
enter image description here

This effect is kind of similar to the "slide to unlock" text on iOS 7.1+ (before the sliding animation occurs), but I'd like more of the image to show through.

How could one create such an effect? I only have to support iOS 8+.

This is how the effect can be created in Photoshop (there's probably an even easier way):

  1. Open an image
  2. Duplicate the image onto another layer
  3. Change the blend mode (to Overlay to be darker, or Screen to be lighter)
  4. Add a layer mask
  5. Option/alt click the layer mask and change the fill to black
  6. Add white text where desired
  7. Alt click the layer mask

It's not as simple as just creating a black or white label and decreasing the opacity. That's what it looks like when you do that:
enter image description here

Jordan H
  • 52,571
  • 37
  • 201
  • 351
  • Since you mention "iOS 8 only", I'd recommend taking a look into the `UIVisualEffectView` class. I don't have a working example right now. Once I do, I'll post back as an answer. – dezinezync Aug 04 '14 at 04:29
  • 1
    I believe it's called vibrancy in iOS 8. Check this out for examples: https://github.com/ide/UIVisualEffects – Jacob Aug 04 '14 at 04:34
  • @dezinezync Have you had any luck with `UIVisualEffectView`? – Jordan H Aug 12 '14 at 03:28

3 Answers3

2

You do it exactly the same as photoshop, but with less steps:

  • create a CALayer object and stick the image of your clouds in it.
  • create a CATextLayer object and put your text in that
  • set the blend mode of the CATextLayer, it has pretty much the same list of blend modes as photoshop
  • set the text colour to white (using NSAttributedString I think... can't remember)
  • tweak the opacity of the text layer to how you want it. The default is 1.0 which is not gonna look good.

Put both layers inside a UIView.

There's no need to limit yourself to iOS 8. All of this works going back to iOS 1.0.

Abhi Beckert
  • 32,787
  • 12
  • 83
  • 110
  • Very interesting, sounds very simple. I attempted this but couldn't figure out how to set the blend mode. `CATextLayer` doesn't have a `setBlendMode` method like I was thinking. Check out my edited question. Thanks for helping me get this working. – Jordan H Aug 06 '14 at 22:55
  • @Joey oops it seems I've sent you a bum steer. I've only ever needed to use it on OS X and turns out it's a feature that doesn't work on iOS. It's called a "compositingFilter" and I just saw the line in the documentation stating it's value is ignored completely on iOS, even though it's in the iOS class definition and has the OS X documentation copy/pasted over to it. :-( – Abhi Beckert Aug 08 '14 at 02:04
  • However, you can use them if you do it manually instead of as part of the normal CALayer.compositingFilter method. See the top voted answer for: http://stackoverflow.com/questions/1658751/composite-colors-calayer-and-blend-mode-on-iphone — this is probably a good temporary measure until Apple properly implements CALayer on iOS. Very strange, since CALayer is an iOS feature that was backported to OS X. – Abhi Beckert Aug 08 '14 at 02:06
0

Have a look into the GPUImage Library, is pretty awesome and has some really neat image filters like overlay, blend, multiply and so on.

https://github.com/BradLarson/GPUImage

Razvan
  • 4,122
  • 2
  • 26
  • 44
0

In iOS i wrote code in swift language. I created a layer. Setup layer property as layer.opacity = 0.5. You can change this property as transparent you want. Add text, drawings etc to this layer. Layer has see thru effect

StackGuru
  • 11
  • 4