Wednesday, August 04, 2010

Fading Out Background Image (an example)

Read about a different technique: 
putting text on semi-opaque background in this article: 

How to make coloured text stand out on the same colour background.

Here is an example of how fading out the background image helps to make text stand out better.

For the first anniversary of my magazine I designed a full page advertisement. I removed the straplines off the cover of the first issue of the magazine and arranged logos and small text ads from our regular advertisers and partners over the main cover photo (read this previous post with some other tips). Even though the original picture has off-white background allowing to put a lot of text (straplines) onto it, fading out the photo made text and logos more clearly visible and the old front page of the magazine 'stands back' to accentuate the thank you message to supporters.

Use Opacity slider
'Send to Back' function is under Arrange menu. Current versions of Pages also have more powerful options of Sending Object to Background and making it unselectable, so you can carry on working without the risk of accidentally moving the background image. 

To fade out the image move Opacity slider at the bottom of the Graphics inspector to a lower percentage count. Here the marmite image is set at 85 percent.

Putting an image (object) in the background and fading it out can have other uses:

- colour background: make a shape in your Pages document, give it colour fill of your choice, resize so it covers the whole page - and send it to background; 

- watermark effect: take your logo (or any image), enlarge it, fade out to between 40 and 60 percent - and send to background; 

- theme page effect: take festive images (fireworks etc.), moody landscapes, old black and white photos or clip art fade and send to back to give pages devoted to a particualr theme a unifying effect; (read Remembrance Theme: Using Background Images)
- colour coding: give your magazine or brochure coloured margins by 'bleeding' images or coloured shapes (positioning them to overlap the margins of the page), so that when the publication is closed you can see coloured sections in it;
- branding (repeated theme) effect: when you are developing an image to become associated with you or your business, a logo for example, you may want to place it repeatedly on your stationery, on pages of your brochures and catalogues. Fading out the image could help this marketing technique be less obtrusive, but without losing efficiency.

The original picture of a Marmite jar and croissants, to symbolise the blending of English and French cultures, was made by the famous Fleet Street photographer Mike Forster, design concept by Miranda Ingram.


  1. Anonymous11:20 pm

    This didn't help. How do I get to the Opacity slider. What program is this person on?

    1. The programme is Apples's iWork, application Pages. This blog is about iWork, for those who already have a basic knowledge of how it works.

      It's not clear from your comment what you are trying to do but have a look at this article describing another technique to achieve a similar result:

      Opacity slider is at the bottom of Graphic Inspector, click on the image embedded in the article. In the Pages document, drag the slider left-right to reduce-increase opacity.

      'this person' is me, the publisher of 'I Work in Pages' Alexander Anichkin.


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.