Paste Inside with Fireworks MX

Tweet

One of the many very cool features of Macromedia Fireworks MX is that it gives you the ability to place an image inside a shape, like this:

1193_finished

You’ve probably seen these images around the Web — the effect is called “paste inside.”

Paste inside is a very neat little effect that you can use to spice your images up a bit, and give them a more professional appearance. You can paste any image you want into any shape you can create in Fireworks MX: ellipses, circles, rectangles, rounded rectangles — anything!

In this tutorial, I’ll show you how to create images similar to the one below. Notice how the image appears to be inside of the shape. Let’s learn how to create this very neat effect.

First, you’ll need an image. Below you’ll find the image I originally started with. You can download this image and use it for this tutorial if you wish, or you can use your own if you have an image you like handy.

1193_starter

Step 1

Launch Macromedia Fireworks MX, and create a new file by selecting FILE >> NEW.

1193_1

Make the new Fireworks file 200×200 pixels with a white background.

1193_2

Step 2

Now we will need to import the image we’ve decided to use into the new Fireworks file. Choose FILE >> IMPORT, and locate the image you want to use. Import it into the new Fireworks file (see below).

1193_3

Once you’ve clicked the Import button, move your mouse over the blank fireworks file you created in step 2, and left click. The image you’re trying to import will appear in the blank fireworks file – it’ll look like this:

1193_4

Step 3

Now that we’ve imported our image into our fireworks file, we’ll need to create a shape to place our image into. I’m going to use an ellipse. Go to the fireworks tool bar, left click and hold the shapes button. A box will appear. Left click the ellipse button, and release, as shown here:

1193_5

Draw an ellipse over the image you imported in step 3, making the shape slightly smaller in width and height than the image. Your work thus far should look similar to this:

1193_6

Step 4

We need to move the ellipse behind the image so that we can continue. Select MODIFY >> ARRANGE >> SEND TO BACK. The ellipse should now be behind the image, as shown below.

1193_7

Step 5

Left click on the image to select it, then choose EDIT >> CUT as shown here:

1193_8

Left click on the ellipse to select it, then go to EDIT >> PASTE INSIDE.

1193_9

Step 6

You should now have your image pasted inside of your ellipse. Pretty cool isn’t it?

1193_10

Step 7

Now let’s incorporate a few effects to the image to add some finishing touches. First we’ll add a drop shadow. Left click on the image to select it, then select EFFECTS >> SHADOW AND GLOW >> DROP SHADOW.

1193_11

I set the distance of the drop shadow to 7 and used black for the color, like this:

1193_12

Step 8

Next let’s add a glow to the image. Left click on the image to select it, then go to EFFECTS >> SHADOW AND GLOW >> INNER GLOW.

1193_13

I’ve set the halo offset to 4 and the color to #66CCCC.

1193_14

Step 9
We need to do one last thing before the image is complete. We’ll need to trim the canvas and get rid of all that extra white space. Select MODIFY >> CANVAS >> TRIM CANVAS.

1193_15

Your image should now look like the one shown below.

1193_finished

You can use the method detailed in this tutorial to place any image inside any shape you can create in Macromedia Fireworks MX. Good luck with your future creations!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments