Photoshop Question posted in
The official user guide can be found here.

How could one achieve a see-through text effect in iOS? – Photoshop

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search