Sunday, November 07, 2010

How to give text gradient (flowing) colour

Adding gradient (flowing, changing from one to another) colour is a design trick and as such should be used sparingly – for headings, background and special effects. Apple's iWork team wisely avoided this feature which is available in many graphics specific programmes. Wisely, because it keeps Pages simple, intuitive and not bloated with features you rarely, if ever, use.
But if you do want to give your text a flowing colour, there is an easy way of doing it. 

- type text as usual (black letters on white background), make them bold, increase the size;
- make a screenshot of the text: Command+Shift+4 (⌘+⇧+4), image should appear on your Desktop as PNG file;
- create (import) a shape, give it gradient colour fill (option in Graphics inspector);
- import the screenshot and slide it over the shape;

- remove black text with Alpha
 - as you do it the flowing colour appears through the letters, 'filling' them.

And a nice touch: to give your letters a glowing effect add shadow to the screenshot and give it one of the colours of the gradient combination.

When finished group the screenshot and the shape behind it, print to PDF or JPEG and use it in your project/document (resize, crop or mask as needed).
In the example above for gradient fill I used Maraschino and Lemon from the Colour Palette (Viewer). The font is Minion Pro, 64 points.

Read also Transparent Text (Putting Image Inside Letters) 


  1. Anonymous1:45 pm

    That's easy?
    It's not - and it's lossy.
    What's easier is using an application that allows for gradients in text.

  2. of course, but
    a different application.

  3. Anonymous9:42 pm

    All Hail Steve Jobs for not making this as easy as powerpoint

  4. What do yo mean "Remove Black Text with Alpha" ? sorry… no clue.

    1. It's like cutting out letters in a piece of paper.
      In the Toolbar, look for Alpha icon, or choose it from Format > Instant Alpha. When you click on Alpha in the Toolbar, cursor (pointer) turns from an arrow into a thin cross. A black panel with instructions on how to use Alpha also appears.
      Click on the black lettering of the screenshot that you have imported and drag. As you drag, Alpha 'rubs out' the colour. When black is completely removed, the letters become transparent as though you've cut them out in a piece of paper. The colour panel underneath gives the effect of the letters being 'filled' with colour.

  5. Anonymous8:00 pm

    No. It will not work. You still have the white background and not just letters in a gradient fill. If you attempt to duplicate the fill with the shape of the same gradient, you your alpha letters will also appear too big and not fit right. Terrible 'technique' for lettering.

    1. It works for me. In fact the header of this blog is done using the same technique.

  6. Thank you, that actually helped! The only thing is that I recommend only using it if your text is a bigger size, that way you can differentiate the gradient from just a simple fill. Other than that, this does in fact work, at least for me, so thanks!


Related Posts Plugin for WordPress, Blogger...


© 2006-2010, 2010-2017 Alexander Anichkin, All Rights Reserved.
All content is original and was created by me, the author and publisher of I Work in Pages.
Quotations and images are attributed where applicable.
No republication without express prior permission.
Blog template by Blogger with customisation by the publisher.