All that I'm trying to do is to paste an image inside a shape (square) and to be able to move the image inside the shape afterwards to get it into a good spot. Clearly I am doing something wrong. After pasting it inside, regardless if I use the pointer or subselection tool to select the image or shape and hit the delete key it deletes both the image and the square that I pasted it into. And, if I have everything looking nicely and grouped, and I try to move the whole group to another part of the document, the whole thing falls apart, as can be seen in the screenshot...
Is there a better way to do what I'm trying to acheive?
Remember: The Layers panel is your friend! The Paste Inside command creates a mask, which is a special type of group. To move your image independently from its mask—in other words, to reposition it within the square—go to the Layers panel and click on the Link symbol between the thumbnails to unlink the two components. Then click on the image thumbnail to select the image, go to the canvas and start moving the image around (using the Pointer tool). After that, you'll probably want to relink the image and the mask—again, using the Layers panel—so they can be moved around the canvas as a unit.
As I said, masks are just a special type of group. You can unmask an object at any time using the Modify > Ungroup command, which will restore the original components as separate, independent objects. You can then regroup those objects into a mask by selecting them and choosing Modify > Mask > Group as Mask. This is my preferred way to create a mask. It produces the same results as Paste Inside but doesn't require cutting an object beforehand; instead, you simply stack the objects, select them, and run the command, with the top object—e.g., the square—becoming the mask to the bottom object(s)—e.g., the image.
If you have other, non-masked elements involved—like your gradient block with text—and you want to move them all as a unit, you have several options. One option is include all the elements in a single layer and use the Layers panel to select all the elements in that layer—by clicking on the layer folder/name. Another option would be to simply drag-select all the elements on the canvas before moving them. And a third option would be to group all the elements by selecting them and choosing Modify > Group. This last option makes it easy to move all the elements together on the canvas but makes it more awkward to edit the elements individually (which might require ungrouping using Modify > Ungroup), so it's probably not the best for you.
Finally, since your gradient block with text appears to be contained within the square that you're using to mask the image, you could opt to include that gradient block as part of your mask group as well. To do this, you'd simply stack the image, the gradient block, the text, and then the square on top. Then select them all, and choose Modify > Mask > Group as Mask. The square would become the mask for all three of the selected objects beneath it.
I did what you said and was able to link and unlink 1 symboled thumbnail on a layer. However, now the symbol and link seems to have disappeared from the Layers panel after making that change? And, it was the only one in my layer panel that showed a thumbnail. See attached image. There seems to be lots of items all on individual layers. Is this part of my problem?
I see a lot of groups in your Layers panel, but no masks—which is what the Paste Inside command creates. And the "linking" and "unlinking" I was describing related to masked objects, which appear in the Layers panel as two thumbnails, side-by-side, with a Link icon in-between:
I also see a lot of groups in your Layers panel that contain just a single object. I'm not sure why you'd want to group a single object—it's generally something you do to multiple objects—so this may be a mistake on your part. (Unless there are nested groups involved?) You could ungroup these using the Modify > Ungroup command, if they're not needed.
A bit of terminology clarification: In Fireworks, the folders are called "layers" and the elements they contain are called "objects". This is different from Photoshop (and may have more in common with Illustrator). Looking at your Layers panel again, you have a single, un-named layer ("Layer 1") with a long list of objects. It might be a good idea to organize your file by adding a few more layers and applying meaningful names to them.
The interesting thing is that I do have masks resulting from pasting images inside of selected rectangles, though this is not being shown in the layers panel. Perhaps I somehow "nested" my groups? I'm not even sure what that means...
I just started over in a new FW .PNG document (I attached it) and organized everything in my Layers Panel (as you suggested)
1. Now, when I try to paste an image inside of the rectangles, nothing shows? What is wrong now?
3. After images are pasted inside of all of the shapes I am going to then need to align them by distributing space between them. I'm guessing they need to be grouped first?
By "nesting", I mean "placing a group inside of a group" or "placing a mask group inside of a group". So, in your previous file, your masked objects may have been placed, or "nested", inside another group—which looks in the Layers panel as if the group contains just a single object, when in fact there's a bit more going on under the surface. Again, you could easily ungroup these items by selecting the group and choosing Modify > Ungroup.
Remember: A masked object is a type of group. It can be moved around the canvas as a unit, just like a regular group can, so there's no need to apply another group around it.
To answer your other questions:
- When using Paste Inside, it helps to have the object to be masked (e.g., the image) roughly positioned in place above the object being pasted into (e.g., the square) before cutting and pasting inside. If the image is off to the side when you cut it, it'll be pasted off to the side and you won't be able to see it with the mask in effect.
- Once the image is masked and correctly positioned, be sure to re-link the object-and-mask thumbnails. Then the masked object will behave just like a regular group on the canvas. No need to add another group to it.
- Actually, yes. Because you're using the Align panel, you'll need to group the contents of each layer (the text, the gradient rectangle, and masked-image-inside-the-square). If you didn't do this, each element would be treated individually by the Align panel, and it would be a mess. By grouping these components, they'll become one object, so to speak, for the Align panel to manipulate. Once everything is aligned to your satisfaction, you could opt to ungroup them, so you could more easily see and edit the contents of each layer. But that's optional; you could also just leave them grouped.
Everything worked great!
However, I am now trying to use the align panel to distribute space horizontally, it worked for the bottom row, though not for the top. I am aligning to the object (I also tried canvas) and it is not distributing space evenly. It seems like it is basing how it distributes space based on the boundaries of the masked images. So an image that would be continuing say 20-30px outside of the masked region is now becoming the place where FW is using to distribute space. What am I missing with this one?
Son of a gun! I was concerned about this possibility but saw that the Align commands worked fine. I didn't realize that the Space Evenly commands would behave differently.
This seems like a flaw in the application. Because of this, you'd be better off aligning and distributing the elements of the layout first, and then adding the images afterward.
Nevertheless, here are a couple ways you might deal with this issue, at this point:
- Distribute the elements visually, according to your eye. The arrow keys can be used to move an object in a single direction, holding the Shift key to move in larger increments. Also, holding the Shift key will constrain motion if moving an object using the mouse or cursor.
- Use math. If you select mutliple objects or groups on the canvas, you can see the total width and height they occupy within the Properties Inspector. You can then use your knowledge of the width/height of each object to distribute them numerically, by hand.
- Here's an interesting workaround: Create a new layer and 'trace' each object beneath using the rectangle tool. (Actually, if they're all the same size, you could draw it just once and then option-drag to copy it.) Then select the appropriate rectangles and apply the Space Evenly commands, as needed. Now move this layer to the bottom of the stack, and use it as a guide to reposition the original objects above.
There's one more option for spacing masked objects using the Align panel that I forgot to mention, and then another that builds upon it, which I just now thought of:
- The first option is to flatten the groups using Modify > Flatten Selection. This will trim away the invisible excess and leave behind only the visible portions of each group—so you'll have no problems with the Align panel. The downside to this is that it's a destructive edit; after flattening, you won't be able to re-edit the original object and mask individually. For this reason, I'm not a fan of this method.
- The next option attempts to counteract this downside by saving each group as a symbol—in effect, making a backup of the original—prior to flattening. To convert an object or group to a symbol, select it and choose Modify > Symbol > Convert to Symbol (then select the Graphic option, in this case). This will leave a symbol instance on the canvas that can be flattened using Modify > Flatten Selection, while the original symbol will remain in your library, for later use if needed.
I like the second option because it gives you the ability to access and edit your original objects. In fact, if you knew you were going to do this in advance, you could skip grouping the objects in each layer (for use with the Align panel commands) and just convert them to symbols instead. Normally, you wouldn't need to go through this, but again, masked objects seem to create some special difficulties with some of the Align panel commands.