Graphic Design - Working with Clip Art and Making Your Own

Exclusive offer: get 50% off this eBook here
iWork for Mac OS X Cookbook

iWork for Mac OS X Cookbook — Save 50%

Over 50 recipes which go beyond the manuals and explore the incredible potential of iWork to do the job of a full creative suite.

$26.99    $13.50
by Alexander Anichkin | November 2012 | Cookbooks

iWork is Apple on a shoestring: iWork costs a fraction of the price of full creative suites and yet is packed with the potential to achieve the same results. It shows users how to exploit iWork's full potential. By taking a lateral approach to this relatively inexpensive software, you can find solutions to all your professional and creative needs, from designing logos and brochures to producing a high quality monthly magazine.

This article by Alexander Anichkin, author of iWork for Mac OS X Cookbook, we will be:

  • Making symbols from Character Palette into clip art—where to find clip art for iWork
  • Using elements of iWork templates as clip art—clipping a photo to a hand-written note
  • Making your digital photos into a piece of clip art
  • Putting images inside letters—filling letters with photos and other graphic images
  • Turning a star into a thought bubble—how to edit shapes

(For more resources related to this topic, see here.)

Making symbols from Character Palette into clip art—where to find clip art for iWork

Clip art is the collective name for predrawn images, pictures, and symbols that can be quickly added to documents. In standalone products, a separate Clip art folder is often added to the package. iWork doesn't have one — this has been the subject of numerous complaints on the Internet forums.

However, even though there is no clip art folder as such in iWork, there are hundreds of clip-art images on Mac computers that come as part of our computers. Unlike MS Office or Open Office that are separate Universes on your machine, iWork (even though we buy it separately) is an integral part of the Mac. It complements and works with applications that are already there, such as iLife (iPhoto), Mail, Preview, Address Book, Dictionaries, and Spotlight.

Getting ready

So, where is the clip art for iWork?

First, elements of the Pages templates can be used as clip art—just copy and paste them.

Look at this wrought iron fence post from the Collector Newsletter template. It is used there as a column divider. Select and copy-paste it into your project, set the image placement to Floating, and move it in between the columns or text boxes. The Collector Newsletter template also has a paper clip, a price tag, and several images of slightly rumpled and yellowed sheets of paper that can be used as backgrounds.

Images with little grey houses and house keys from the Real Estate Newsletter template are good to use with any project related to property. The index card image from the Back Page of the Green Grocery Newsletter template can be used for designing a cooking recipe, and the background image of a yellowing piece of paper from the Musical Concert poster would make a good background for an article on history.

Clip art in many templates is editable and easy to resize or modify. Some of the images are locked or grouped. Under the Arrange menu, select the Unlock and Ungroup options, to use those images as separate graphic elements. Many of the clip-art images are easy to recreate with iWork tools.

Bear in mind, however, that some of the images have low resolution and should only be used with small dimensions.

You will find various clip-art images in the following locations:

  • A dozen or so attractive clip-art images are in Image Bullets, under the Bullets drop-down menu:

    Open the Text Inspector, click on the List tab, and choose Image Bullets from the Bullets & Numbering drop-down menu.

    There, you will find checkboxes and other images. Silver and gold pearls look very attractive, but any of your own original images can also be made into bullets. In Bullets, choose Custom Image | Choose and import your own image.

    Note that images with shadows may distort the surrounding text. Use them with care or avoid applying shadows.

  • Navigate to Macintosh HD | Library | Desktop Pictures:

    Double-click on the hard disk icon on your desktop and go to Library | Desktop Pictures. There are several dozen images including the dew drop and the lady bug. These are large files, good enough for using as background images. They are not, strictly speaking, clip art but are worth keeping in mind.

  • Navigate to Home| Pictures | iChat Icons (or HD | Library | Application Support | Apple | iChat Icons):

    The Home folder icon (a little house) is available in the side panel of any folder on your Mac. This is where documents associated with your account are stored on your computer. It has a Pictures folder with a dozen very small images sitting in the folder called iChat Icons.

    National flags are stored here as button-like images. The apple image can be found in the Fruit folder.

    The gems icons, such as the ruby heart, from this folder look attractive as bullets.

  • Navigate to HD | Library | User Pictures:

    You can find animals, flowers, nature, sports, and other clip-art images in this folder. These are small TIFF files that can be used as icons when a personal account is set up on a Mac. But of course, they can be used as clip art. The Sports folder has a selection of balls, but not a cricket ball, even though cricket may have the biggest following in the world (Britain, South Africa, Australia, India, Pakistan, Bangladesh, Sri Lanka, and many Caribbean countries). But, a free image of the cricket ball from Wikipedia/Wikimedia can easily be made into clip art.

    There may be several Libraries on your Mac. The main Library is on your hard drive; don't move or rename any folders here. Duplicate images from this folder and use copies. Your personal library (it is created for each account on your machine) is in the Home folder. This may sound a bit confusing, but you don't have to wade through endless folders to find what you want, just use Spotlight to find relevant images on your computer, in the same way that you would use Google to search on the Internet.

  • Character Palette has hundreds of very useful clip-art-like characters and symbols.

    You can find the Character Palette via Edit | Special Characters. Alternatively, open System Preferences | International | Input Menu. Check the Character Palette and Show input menu in menu bar boxes:

    Now, you will be able to open the Character Palette from the screen-top menu. Character Palette can also be accessed through Font Panel. Open it with the Command + T keyboard shortcut. Click on the action wheel at the bottom of the panel and choose Characters... to open the Character Palette.

    Check the Character Palette box to find what you need. Images here range from the familiar Command symbol on the Mac keyboard to zodiac symbols, to chess pieces and cards icons, to mathematical and musical signs, various daily life shapes, including icons of telephones, pens and pencils, scissors, airplanes, and so on. And there are Greek letters that can be used in scientific papers (for instance, the letter ∏).

    To import the Character Palette symbols into an iWork document, just click-and-drag them into your project.

    The beauty of the Character Palette characters is that they behave like letters. You can change the color and font size in the Format bar and add shadows and other effects in the Graphics Inspector or via the Font Panel.

    To use the Character Palette characters as clip art, we need to turn them into images in PDF, JPEG, or some other format.

How to do it...

Let's see how a character can be turned into a piece of clip art. This applies to both letters and symbols from the Character Palette.

  1. Open Character Palette | Symbols | Miscellaneous Symbols.

    In this folder, we have a selection of scissors that can be used to show, with a dotted line, where to cut out coupons or forms from brochures, flyers, posters, and other marketing material.

  2. Click on the scissors symbol with a snapped off blade and drag it into an iWork document.

    Select the symbol in the same way as you would select a letter, and enlarge it substantially. To enlarge, click on the Font Size drop-down menu in the Format bar and select a bigger size, or use the shortcut key Command + plus sign (hit the plus key several times).

  3. Next, turn the scissors into an image.

    Make a screenshot (Command + Shift + 4) or use the Print dialog to make a PDF or a JPEG. You can crop the image in iPhoto or Preview before using it in iWork, or you can import it straight into your iWork project and remove the white background with the Alpha tool. If Alpha is not in your toolbar, you can find it under Format |Instant Alpha.

  4. Move the scissors onto the dotted line of your coupon.

    Now, the blade that is snapped in half appears to be cutting through the dotted line. Remember that you can rotate the clip art image to put scissors either on the horizontal or on the vertical sides of the coupon.

    Use other scissors symbols from the Character Palette, if they are more suitable for your project.

    Store the "scissors" clip art in iPhoto or another folder for future use if you are likely to need it again.

There's more...

There are other easily accessible sources of clip art.

MS Office clip art is compatible

If you have kept your old copy of MS Office, nothing is simpler than copy-pasting or draggingand- dropping clip art from the Office folder right into your iWork project.

When using clip art, it's worth remembering that some predrawn images quickly become dated. For example, if you put a clip art image of an incandescent lamp in your marketing documents for electric works, it may give an impression that you are not familiar with more modern and economic lighting technologies. Likewise, a clip art image of an old-fashioned computer with a CRT display put on your promotional literature for computer services can send the wrong message, because modern machines use flat-screen displays.

Wikipedia/Wikimedia

Look on Wikipedia for free generic images. Search for articles about tools, domestic appliances, furniture, houses, and various other objects. Most articles have downloadable images with no copyright restrictions for re-use. They can easily be made into clip art. This image of a hammer from Wikipedia can be used for any articles about DIY (do-it-yourself) projects.

Create your own clip art

Above all, it is fun to create your own clip art in iWork. For example, take a few snapshots with your digital camera or cell phone, put them in one of iWork's shapes, and get an original piece of clip art. It could be a nice way to involve children in your project.

iWork for Mac OS X Cookbook Over 50 recipes which go beyond the manuals and explore the incredible potential of iWork to do the job of a full creative suite.
Published: September 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Using elements of iWork templates as clip art—clipping a photo to a hand-written note

This recipe shows how to put together a project that uses elements of iWork templates as clip art. Here, we will make a hand-written note and clip an old picture to it.

How to do it...

For using elements of iWork templates as clip art, follow these steps:

  1. Open a blank document in Pages, and then open the Collector Newsletter template.
  2. Copy-paste the image of a sheet of old notepaper.
  3. Then import the photo.

    Here, we will be using a portrait of the English writer Charlotte Brontë, the author of Jane Eyre.

  4. Go to the template again and copy the image of the paper clip. Paste it into your document.

    Importing elements in this sequence puts them one on top of another in layers—the sheet of paper in the background, then the photo, and finally the clip.

  5. Next, move the photo to a corner of the sheet of notepaper and give it a picture frame.

    In the Graphics Inspector, under Stroke, click on the drop-down menu. Choose Picture Frame, and click on the icon that gives the image a white frame and an angled shadow that creates an effect of an old photo with slightly bent edges. The size of the frame and the shadow can be altered by dragging the scale slider. In this example, it is set at 57%:

  6. Click on the clip and move it over the photo so that it looks as if it has been clipped to the piece of paper.
  7. Then, click on the Text Box icon in the toolbar and type your text. Here, we have two Text Boxes—one next to the portrait and another one below it. Make sure that the boxes don't have frames, color fills, or shadows; we only want the writing to be seen.

    If you add shadows, make sure they all go in the same direction. Rotate the shadow wheel in the Graphic Inspector to align shadows.

  8. To create a genuine handwriting effect, choose a font that mimics human handwriting.

    Here, we use Handwriting Dakota, but there are numerous other fonts that offer a handwriting effect. Click on the font family drop-down menu to the left in the Format bar and find one using font previews—the name of the font appears in the same way as it looks in the document. The Font menu only appears in the Format bar when you are inside the text box with the cursor blinking within the text. When a graphic image is selected, the Format bar only shows options for working with graphic objects, not text

    If the Font menu doesn't show previews, activate this function under Preferences. Under the application menu—Pages, Keynote, or Numbers—go to Preferences | General In the General preferences check the box against Show font preview in Format Bar font menu. If you are in too much of a hurry to fiddle with preferences, just press the Option key while clicking on the Font menu—previews will be shown temporarily.

  9. Move the text box over the sheet of paper, so that it looks as though the writing is actually on the paper, not in the text box. Resize the box, align it with the photo above it, and change the size and color of the text. We can, for example, use a dark blue color to make it look like fountain pen ink.
  10. Select all elements and choose the Group option under the Arrange menu. The composition can now be moved, resized, and copy-pasted as a single object.
  11. To create the effect of it lying on a desk as though being examined by someone, rotate it slightly to the left: press Command and drag one of the handles.

There's more...

Check out other templates in iWork to find clip art that suits your project. Think creatively; even though templates suggest particular fields of activity, their elements can be used for something completely different. A catering brochure, for example, has index cards that could also be used on a research paper for data boxes and squiggly lines that can serve as dividers in a collection of poetry or on a page with quizzes and puzzles.

Try modifying editable clip-art images from templates. In the catering brochure, the images of the knife, fork, and spoon are editable. Click on the image once, then click on it again and it will show red dots—editing points. Moving them with the mouse or keyboard arrows can turn them into something different—a tool or a human figure.

But do check clip art images for resolution. Some of them pixelate when enlarged.

Making your digital photos into a piece of clip art

On Internet forums, many iWork users are asking where they can find clip art to use with their projects. While there are dozens of websites that allow free downloads of clip art and the elements of iWork's own templates can also be used as clip-art images, it can still be difficult to find high definition images of exactly what you want, especially if you don't want to spend time registering, logging in, or paying download fees.

So, where can we find objects suitable for making into clip art?

Look around your house—cell phones, pencils, toys, mugs, kitchen utensils, furniture, DIY tools, even electric plugs—anything can be turned into clip art. Look in the garden or walk in the park and you will find that a leaf of ivy, a twig from a holly bush or from a frosted fir tree are all material for clip art.

Here is a pile of supermarket chocolate coins, which we could use as clip art for an article on the financial crisis:

How to do it...

To make your digital photos into a clip art, follow these steps:

  1. Set your digital camera to macro. Cell-phone cameras sometimes have macro settings too.

    Take a photo of the object you want to make into clip art. Make sure that the object is placed against a background with a solid color, which contrasts with the main colors of the object itself. Here, a pile of chocolate coins is on a sheet of white paper. A lighter object can be put on a black t-shirt. Another great background is blue sky—hold your object against the sky and take a snapshot.

  2. Import your photo into an iWork document
  3. Remove the background with Instant Alpha.

    The Alpha tool is under the Format menu or in the toolbar. If it isn't already in the toolbar and you often work with images, put the Alpha icon in the toolbar. Under the View menu go to Customize Toolbar, and drag the icon to the toolbar.

    When you activate Alpha, the cursor turns into a little cross. Move it over the background to rub out the background. Do this several times, rubbing out the background in several goes. Be careful not to scratch out bits of the object itself. If you accidentally scratch out some of the object, press Command + Z to undo the last operation. Or, remove Alpha—this radical option is under the Format menu. When you finish, hit Return.

There's more...

If you later find that you only want part of the image, you can use a mask to crop the photo—the rest of it will be hidden. The Masking function is under the Format menu.

Clip art made with this technique can also be used as bullets within our text. Open the Text Inspector, click on the List tab, and then on Bullets. From the Bullets drop-down menu, choose Custom Image and click on Choose. Find your clip art image and open.

If you want to use the Alpha image, that you have created, in other iWork projects, copy-paste it from your document. You can also make a screenshot (Command + Shift + 4) and keep it as a separate file.

The current version of Mac OS, Mountain Lion, has Alpha in Preview. Open your photo in Preview, remove the background with Alpha, and save, for using in iWork or other applications.

If you need to reduce the size of the image, for example to use on your website, use the Save as... dialog window to make it smaller.

If you are uncomfortable with using Alpha, try making a cutout of the image in your photo with an edited mask.

iWork for Mac OS X Cookbook Over 50 recipes which go beyond the manuals and explore the incredible potential of iWork to do the job of a full creative suite.
Published: September 2012
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Putting images inside letters—filling letters with photos and other graphic images

Transparent letters with images showing through them can be used to create a striking design effect. It is very attractive for a range of design purposes, such as magazine covers, flyers, posters, logos, cards, and clip art.

While there isn't a straightforward tool to put an image inside letters, it can be done in iWork in just a few simple steps.

How to do it...

The following is a beautiful panorama of Manhattan (photo by Daniel Schwen):

Let's put it inside New York's famous promotional slogan shown in the following screenshot, where a clip-art image of a heart replaces the word love.

  1. Create a text box and type the text shown in the following screenshot:

    The heart shape is available in Character Palette | Symbols |Miscellaneous. If you haven't used Character Palette before, you can find it under System Preferences | International | Input Menu. Tick the checkbox here to activate the Character Palette. Also, check the checkbox at the bottom of the window to show the palette as an option in the screen-top menu.

    Make the text bold and enlarge it. Choose the richest, thickest font or font variation. We will need this so that the images are clearly visible within our letters. Here, Myriad Pro Bold is used, but Helvetica, Verdana, and many other font families also have bold and condensed variations. Impact font is very thick.

    Make the text as large as your page allows. Here, the size is 177 points. Reduce character spacing (it is also called kerning ) to squash text, so that the letters are nearly touching one another—but don't overdo it; make sure the word(s) are still easy to read. Character spacing can be adjusted by using the Character slider under the Spacing section in the Text Inspector. In this example, it is set at -5%.

  2. Turn the text into an image.

    We can make a screenshot of the text. Press Command + Shift + 4 and drag the crosshairs over the text. A PNG file will appear on our desktop. Or we can make a PDF or JPEG of the page and crop it later

  3. Import the photo into a blank iWork document.

    We can, of course, import the photo into the document that we've already created, but it can be easier to work in a new document, with the text box out of the way. Choose a horizontal (landscape) page setup, because the photo itself has a horizontal composition.

  4. Import the image of your letters and move it over the photo.

    Position the image with the black text on a white background in the center of the composition.

  5. Remove the black text with Alpha.

    You can find Instant Alpha under the Format menu or in the toolbar. When you activate it, the cursor changes its shape to a cross, which—as you move it over the image—rubs out the colors.

    Click on each of the black letters and drag the cursor across them—as the color is rubbed out, you begin to see the photo appearing inside the letters.

  6. Resize and move the photo around.

    To achieve the best results, it is important to position the image inside the letters in such a way that its elements can be recognized. In the panorama of Manhattan, for example, we obviously want the Empire State Building to be visible, as it is such an important New York City landmark. Select the photo, move it around, and resize to find the ideal position.

  7. Save the iWork document.

    We can export our design to PDF, JPEG, PNG, and other formats, depending on how we plan to use it. For printing on cards or mugs, the high-resolution PDF is preferable. JPEGs and PNGs can be used on the Internet.

There's more...

This technique may seem complicated but in fact doesn't take longer than 15 to 30 minutes. It is ideal for magazines, book titles, logos, and other promotional material. Designs like this can be transferred to billboards, t-shirts, and mugs.

Not just one, but several, photos can be put inside the lettering. Choose different landmarks, make a collage, and then place the text over it.

In this example, we've used black letters on a white background, but of course it could be white letters on a colored background. Alpha tool will rub out white as well as black.

Turning a star into a thought bubble—how to edit shapes

There are thousands of websites offering downloadable clip art. One of the popular items is the thought bubble, which is used in comics, photos, and other graphic images. Quote and thought bubbles are also widely used in advertising and logos.

iWork has an oval and a rectangular quote bubble. In an open document, click on the Shapes menu in the toolbar and select one of those.

But what about the thought bubble? In this recipe, we will see how to make a thought bubble out of a star shape, which is also available in the Shapes menu. Furthermore, we will give it our own original style.

Here is the finished picture of my cat Vaska lying half-asleep on the dining table.

How to do it...

Follow these steps to make a thought bubble:

  1. Insert a star shape from the Shapes toolbar menu.

    The star appears with a small control panel that allows us to increase or decrease the number of points. Here, we leave the star with five points.

    There is also one editing point in the star. Drag it to change the star to either spiky with sharper and thinner points, or chunky with a fuller body and less protruding points. Let's choose a chunky shape, which is closer to our target.

  2. Under Format, choose Shape | Make Editable

    The shape will show little red dots—editing points.

  3. Next, again under Format | Shape, choose Smooth Path.

  4. Change Color.

    At this point, you may want to change the default color of the shape to the one that you want to give to the thought bubble. Here, we will use a light shade of blue.

  5. Curve the points of the star.

    When we make the shape smooth, its contours become curvy and when we select a red editing point, it shows propellers—two handles with small circles at the end. Click on one and hold, then drag it around, and pull out or push inside to change the curve. With the star shape, one advantage is that we need very little curving.

    But only curve the outer points!

    If you want, add editing points to give the future bubble more curves. To add, press the Option key and move the cursor to hover over the outline of the shape. When it turns into a little pen with a plus sign, click on it. The shape must be selected and must show editing points.

    If you accidentally deselect the star, click on it once, pause, and click again—the editing points will reappear.

  6. Double-click on the editing points that are closer to the center of the star, one by one.

    This removes the smoothness from the curve. The lines coming out of the editing points that we have clicked now form an angle, not a rounded curve. The shape begins to look like a five-petal flower.

  7. Next, move the inner, angled points slightly outward, so that the shape looks like a cloud rather than a flower.

    To move an editing point, click on it to select and drag or hit the keyboard arrows. When we drag an editing point, it may suddenly jump and align itself with other dots. This means that the Alignment Guides snap to grid function is active. To disable it while working on the design, press Command when you start dragging.

  8. Leave the bubble and add a few oval shapes.

    Give them the same color as the bubble, resize them so that they are progressively smaller than the bubble, and form a train of thought going to the thinking character in your design.

  9. Double click in the main shape and type in your text.

    If your text is too long to fit inside the shape, you may fi nd it easier to put it in a Text Box and format and resize it separately from the bubble.

  10. If you don't like the train of thought bubbles but want a spike-shaped callout going to the thinking character, add two editing points to the left and to the right of one of the angled points.

  11. Then, click on the editing point in between the two new ones and drag it outside, towards the character in your picture. It will become a spike pointing at the thinker. Use the propellers to make the spike curving.
  12. We can design the thought bubble right over the photo, or do it separately in another document and then select all the elements and copy-paste them into the project where the bubble is to be used. Then, we can also make a few final adjustments.

    Remember that for the outer contours of the bubble, you can use different line styles and add shadows. Both lines and shadows can have different colors. In the Graphic Inspector, add the line that looks like a ribbon and give it a light gray color and a shadow of the same color—the thinking effect becomes stunning as you can see in the picture at the beginning of this recipe.

There's more...

iWork has predrawn quote bubbles in the Shapes toolbar menu, and oval and rounded rectangle shapes are available under Insert | Shape. Both already have editing points to change the width and direction of the spike and also the corners of the rectangle.

Using the same technique as we've used with the star, we can turn these quote bubbles into thought bubbles. However, because the star shape already has a number of points that can easily be curved into a cloud, you may find it easier to transform a star into a thought bubble.

Summary

We have seen how to make our own original images that can be used as clip art. With a few adjustments, or even without them, elements of iWork templates can also become clip art.

Resources for Article :

 


Further resources on this subject::


About the Author :


Alexander Anichkin

Alexander Anichkin created a small publishing company in 2005, in order to produce a monthly, glossy magazine. To keep costs down, he bought iWork to launch the publication, planning to invest in a full creative suite later on. But the longer he used iWork, the more he discovered its full creative potential—the stuff that the manuals don't tell you—and in 2006 he started writing his popular and influential blog I Work in Pages to share his discoveries with thousands of followers world-wide.

In iWork for Mac OS X Cookbook, he has shown, to both new and experienced iWork users, how this inexpensive software is all you need to fulfill your professional creative projects.

Russian-born Alexander Anichkin was trained in political journalism, editing, design, and print production in Moscow and Wales. He worked at TASS and Izvestia as an editor and writer in Russia, Britain, and Japan before going independent. He now lives in France with his family.

Books From Packt


Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

Inkscape   Beginner’s Guide
Inkscape Beginner’s Guide

Inkscape 0.48 Illustrator's Cookbook
Inkscape 0.48 Illustrator's Cookbook

Learn   OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation
Learn OpenOffice.org Spreadsheet Macro Programming: OOoBasic and Calc automation

Joomla!   1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

WordPress 3 For Business Bloggers
WordPress 3 For Business Bloggers

Blogger:   Beyond the Basics
Blogger: Beyond the Basics

Processing 2: Creative Programming Cookbook
Processing 2: Creative Programming Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
v
b
A
H
p
y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software