Create glowing text effect on iOS

Question

We're currently building an iPhone app and would like the text to have a glowing effect to fit in with the realistic UI design.

Here is what we're trying to achieve.

We are struggling to create the inner glow effect at the moment so any help would be appreciated.

In photoshop this text has

• a color of #98c1c1
• Outer glow: #ffffff, Screen blend mode, 30% opacity, 5px size.
• Inner glow: #c79d85, Color Dodge blend mode, 70% opacity, 5px size.

Thanks, Mark.

Solution

To set up the button with the text colored #98c1c1, use:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 60)];
label.textColor = [UIColor colorWithRed:((float)152/255) green:((float) 193/255) blue:((float) 193/255) alpha:1.0f];

I used Photoshop to find RGB components of #98c1c1, which ended up being R:152 G:193 B:193. And colorWithRed:green:blue:alpha: takes a normalized value between 0 and 1, and that's why I made it the RGB value over 255.

For the outer glow, use:

label.layer.shadowColor = [UIColor whiteColor].CGColor;
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);    
label.layer.shadowRadius = 10.0;
label.layer.shadowOpacity = 0.3;
label.layer.masksToBounds = NO;

You want the opacity to be 30% and the shadow color #ffffff (white). That is why label.layer.shadowOpacity is set to 0.3 (30%) and label.layer.shadowColor is set to white.

I'm not quite sure about how to implement the inner glow, but you could possibly create a method that duplicates the text but makes the font smaller and centers the new text, to create the effect of an inner glow. Remember to import <Quartzcore/Quartzcore.h>!

Comments

[TheZ]

This possibly can help you: stackoverflow.com/questions/1420131/iphone-text-glow-effect or this redrobotstudios.com/blog/2010/04/29/…

[Cody Gray]

Can you also edit the answer to explain why this change is necessary?