Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Use custom masked shapes in iWeb Apps
I've read on a few Mac forums of people who are looking to mask their photos in iWeb not just with a rectangle, but with any shape. People have suggested to simply composite something in Photoshop, but not everyone has Photoshop -- and if you don't have the latest Mac, it can make a simple task into a long tedious one. iWeb doesn't have built in capability to make custom shape masks, however Pages 2 (along with Keynote) in iLife iWork '06 does. iWeb is essentially Pages for websites, so it accepts a lot of the objects created in Pages, including custom shape masks.

Start by creating the shape you want in Pages, either with the standard shape tools or with the "Draw a Shape" tool. After you've created your shape, you'll need to mask an image using your shape. It doesn't matter what image you use. (You mask a shape and an image by selecting both and then choosing Format > Mask with Shape.) After you've got a masked image, select the object and press Control-Option-Command-I. That keystroke converts the masked image into an image placeholder, which will allow you to change the image via simple drag and drop.

After you've done all that, you can simply copy the object and paste it into iWeb. Again, since you turned it into an image placeholder, replacing the image is really simple ... much simpler than having to load a compositing application like Photoshop and redoing all the effects. You can easily duplicate the object and place them all over your site with different images inside each of them.

The great thing about this technique as opposed to using something like Photoshop and then exporting as PNG is that you can not only move the image around and resize it, but you can also modify the shape: resize, rotate, etc. The downside is that you are limited in the types of shapes that you can choose from.

One more tip to finish this up is that you could make a blank page in iWeb, and paste all your custom shape masks in there. You could uncheck the "Include page in navigation menu" box in the Inspector, and you'd be left with a page to store your custom shape masks. From this page, you can copy objects you want to use in another part of your site without having to either find where you previously used them, or having to recreate them in Pages.

Here's a sample page I made using all custom shape masks created in Pages.

This is clearly a workaround until Apple eventually migrates this feature from Pages into iWeb.
  • Currently 2.00 / 5
  You rated: 1 / 5 (5 votes cast)

Use custom masked shapes in iWeb | 8 comments | Create New Account
Click here to return to the 'Use custom masked shapes in iWeb' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Use custom masked shapes in iWeb
Authored by: pbeyersdorf on May 26, '06 08:50:09AM

Nice hint! An alternative workaround using only iWeb is to create a shape and then fill that shape with the image that you choose. This doesn't allow custom shapes, but it does allow more than just rectangles. It also won't let you fine tune what part of the image appears - it will simply fill the shape with the image.

[ Reply to This | # ]
Pages isn't in iLife!
Authored by: skinnyjimmy on May 26, '06 09:35:57AM


Nice hint, but I didn't think Pages was included in iLife - only by the additional purchase of iWork.

Still, it would be cheaper than buying Photoshop!


[ Reply to This | # ]
Authored by: edified on May 27, '06 12:30:43PM

I was really enjoying masked shapes in Pages. Now if only there was a solution for
those of you who don't have iWork.

[ Reply to This | # ]
Use custom masked shapes in iWeb
Authored by: snaab on May 28, '06 12:40:06PM

This is a great hint! I tried it and it worked, with a single outline shape. But I was
impressed with the Apple Logo shape in t he original poster's iWeb sample site, but
it is two outlines grouped together.
How did you do that? As a followup, how would one make an outline using a text
character? (I tried converting a character to an object in Illustrator, but in moving
it over to pages, it was no longer treated as a shape.....

Answers to these questions would make this great tip even greater!


[ Reply to This | # ]
Use custom masked shapes in iWeb
Authored by: mactmaster on May 28, '06 05:03:48PM

The Apple logo is not two grouped shapes. It would be great if Pages supported
that, but it doesn't. The logo is simply one shape, there is a very thin portion
connecting the leaf to the apple. As far as doing text, I don't see reasonable way to
do that considering you'd need connections between each letter and even within
certain letters. I've tried messing around with getting Illustrator objects in iWeb
too but it seems not to work, which is odd because Photoshop recognizes Pages
objects as "Vector Smart Objects".

Like the original hint said this is a quick but limited method.

[ Reply to This | # ]
Use custom masked shapes in iWeb
Authored by: Tulse on May 29, '06 09:05:47AM
Using the svg2key utility, you can convert SVG graphics (which Illustrator and many other applications can save in) into Keynote's native illustration format. You could, for example, use this to create letters or words that could be filled, stroked, and manipulated just like any other native Keynote shape, and these would of course be importable into iWeb. Unfortunately, the converted objects are saved directly to a Keynote file, and not onto the clipboard, so you still need Keynote to copy the objects and paste them into iWeb. Perhaps if folks contacted the author, he might create an option to save the objects in some other fashion that didn't require iWork.

[ Reply to This | # ]
Use custom masked shapes in iWeb
Authored by: keynoteken on May 29, '06 02:20:51PM

If you purchase iLife or get it with a new computer, it comes with a 30 day
demo to iWork (Pages and Keynote). Of course, if you've already used yours,
then time's up. If you haven't, fire it up and create as many shapes as you can
using svg2key.

Speaking of which, svg2key works because the format for creating the xml was
dead easy. After some reading, even I could create shapes using coordinates
culled from svg files by hand, though I'm glad the tool is there now ;) Since
Keynote 1, the XML isn't as simple to understand and it still hasn't been
documented, so the Keynote file creators are just going for what they know and
what still works. Seeing as how Keynote 1's XML works great for the shapes and
there have been issues trying to create files using the Keynote 2 or 3 XML,
everyone will probably be stuck with the least common denominator.

[ Reply to This | # ]
What about IE?
Authored by: leisuremonkey on May 30, '06 01:30:46PM

Great Hint! But... the biggest problem with masks, is that Internet Explorer (PC)
does not support transparency. You get ugly blue boxes instead. When publishing
to .Mac, the server seems to be dynamically swapping out images for IE. The
sample page you did doesn't appear to do that. I'm curious... is it because of the
custom shapes, or did you publish to a folder and then upload to .Mac (rather than
publishing to .Mac directly)?

[ Reply to This | # ]