News, ideas and randomness

Glowing and soft shadowed text on iPhone

Posted: April 29th, 2010 | Author: Andrew Gleave | Filed under: cocoa, iphone | Tags: cocoa, ipad, iphone | 4 Comments »

iPhone OS’s UILabel provides basic shadowing properties which can be used to create inset text effects and basic text shadows. However, the shadow has no blur and gives a sharp edge which is not particularly useful if you’re looking for a soft or subtle shadow.

Recently I needed to create a “glowing” text effect – essentially a soft shadow without the offset – so I wrote a simple UILabel subclass which let me specify an offset, colour and blur amount.

The screenshot shows a how the class can be used to create a glow effect but it’s equally easy to create soft shadows for your text.

You can find the source here on GitHub.

4 Comments on “Glowing and soft shadowed text on iPhone”

1 Ryan Jennings said at 6:57 pm on June 9th, 2010:
I love when stuff gets posted to the Interwebs just as you start scratching your head. Thanks a lot Andrew!
2 Alan Taylor said at 11:18 am on July 13th, 2010:
Andrew,

Thanks so much for this. For anyone else reading this – a gotcha that tripped me up was forgetting to change the class of the UILabel in Interface Builder to RRSGlowLabel ;)

I am having one issue with this though, being that the labels I am working with need to be aligned to the left and the glow is being cut off where the UILabel ends.

Here is an image of the effect from your sample code. The effect is even worse when the Text itself starts there, such as with a T or D…

http://alantaylor.homeip.net/Ars/glow.png

Do you have any idea how to get around this? The closest thing I came across in the documentation was to subclass – (void)drawTextInRect:(CGRect)rect which I can see you are already doing.

I did come across the following sample code, but have been unable to fine a suitable place to fit this into my code or yours.

CGRect frame = self.frame;
frame.size.width += 20; //l + r padding
self.frame = frame;

Ideally, I’m looking for something to the effects of padding the UILabel so that there is enough room for the glow. This would need to carry over when the frame of the label changes (for orientation changes), or be something that could be called again at the time of the orientation change.

Having something where the glow permeates beyond the edge of the UILabel would also work fine!

Any ideas?
3 Alan Taylor said at 1:28 am on July 20th, 2010:
I think I got it – you can add the following to RRSGlowLabel.m before the [super drawinRect:rect]; line:

rect = CGRectMake(rect.origin.x + 15, rect.origin.y + 15, rect.size.width + 15, rect.size.height + 15);

Here, I’m using 15 as the average glowSize.
4 Como adicionar um efeito glow em uma UILabel « Base de Conhecimento said at 5:51 am on June 23rd, 2011:
[...] http://www.redrobotstudios.com/blog/2010/04/29/create-glow-soft-shadow-text-on-iphone/ Filed under Desenvolvimento, iOS, iPhone, Objective-C Comment (RSS) [...]