In Typography in Muse Part 2 you learned how to apply Leading and Tracking, as well as how to indent text to control how text is displayed within text frames. Part 2 also describes how to update the appearance of text frames to create graphic page elements and how to work with web safe fonts and system fonts. In Part 3 of this series, you'll use the Wrap panel to control how text flows around an image. And finally, you'll get an overview of using the States panel to create interactive buttons with text frames.
Wrapping text around an image in a text frame
Previously you learned that you could use the Fill menu to add a background image to a text frame. In this section, you'll learn another trick to embed an image in the text frame so that the text flows around it, rather than above it.
You'll also see how you can use the Wrap panel to set the position and offset surrounding the image, to precisely control how the text wraps around it.
Follow these steps to create a text frame with an image, so that text flows around it.
1. Create a text frame that contains some text content. You can use the Spacing panel to apply padding as described in the previous section, if desired.
2. Place an image on the page, near the text frame. Open the Wrap panel.
Figure 22. Place an image on the page, but not in, an existing text frame.
- Select the image, right-click and choose Cut. Or choose Edit > Cut (or use the keyboard shortcut to cut it).
- Click inside the text frame with the Text tool, at the location where you want to insert the image. Right-click and choose Paste. (Or if you prefer, choose Edit > Paste or use the keyboard shortcuts to paste the image into the text frame).
Figure 23. Paste the image into the text frame after cutting it from the page.
By default, the pasted image is positioned in line with the text.
- Click the left or right position settings in the Wrap panel to make the text wrap around the image.
Figure 24. Paste the image into the text frame after cutting it from the page.
Now the text is wrapping around the image. Next, you'll adjust how much space is displayed around the image.
- Update the left, right, top, and bottom Offset values in the Wrap panel to achieve the desired spacing between the text and the image.
Figure 25. Adjust the offset values to control how the text wraps around the image.
Creating a rollover button using a text frame
In addition to using text frames to display page content and contain text blocks, you can also use them to create buttons that respond to visitor's interactions
You can use the States panel to set the appearance of different states of a text frame, the same way you update the states of widget containers and rectangles.
To create a rollover button using a text frame, follow these steps:
- Create a text frame using the Text tool.
- Type, place, or paste text in the text frame. If desired, you can also style the appearance of the text frame to add fills, strokes, rounded corners, and effects, or change the text frame's transparency.
Figure 26. Create a text frame and style it as desired.
- Open the States panel. Select the Rollover state and use the formatting options in the Control panel to change its appearance.
Figure 27. While the Rollover state is selected, change the fill or other attributes of the text frame.
- Click Preview or choose File > Preview Page in Browser. As you roll your cursor over the text frame, the rollover button graphically changes.
Figure 28. Preview the page and test the rollover button to see how it responds to your cursor hovering over it.
Tip: If desired, you can also change the appearance of the Mouse Down state to make the button display differently when the visitor clicks the button.
To learn more about Adobe Muse and how it can revolutionize your web design workflow, visit the Adobe Muse Product page.
Download the free trial software and try it out for yourself. We think you'll really enjoy how easy it is to add compelling web typography and text frame layouts to your page designs.