Work with objects in Adobe Muse

Objects in Adobe Muse include design elements created within or imported from external sources. Images, text, images frames, and more can be added to the web page, and manipulated using various tools within Adobe Muse.

One of the most common workflows is to create and import a button from Adobe PhotoShop. To its end, Adobe Muse recognizes layers and layer comps created within Photoshop. Adobe Muse allows you to set these layers as States of the button within your website.

For objects placed on the web page canvas, you can add transformations to suit the design needs of the website. You can also isolate an object to add suitable padding and gutter properties to handle spacing nested elements.

Placing image frames in Adobe Muse projects

You can place image frames directly in your Adobe Muse projects by clicking the Image Frame tool. From the Tools panel, click the Image Frame tool and then to the required location in your project.

Placing a single image on the page

The Muse workspace works similarly to Illustrator and InDesign, where you load the placed image first and then click on the page where you want it to appear. To add an image file by placing it directly on the page, do the following:

1. Choose File > Place, or use the keyboard shortcut: Command-D (Mac) or Control-D (Windows) to open the Import dialog box.
2. Browse to select the file named made-with-muse.png file located in the sample files folder. Click Open to choose it and close the Import dialog box.

Click once near the bottom of the page to place the image. In this case, you want to place the image at full size, so just click once. However, if you wanted to resize the placed image, you could click and drag to scale the image to a specific size. 

Using the Selection tool, drag the image towards the vertical center of the tiled footer rectangle and notice how red guides and turquoise measuring boxes briefly appear to help you align it to the center.

After making these changes, the footer section is almost complete.

How does Muse optimize images when you publish or export a site

You can also place print-ready images into Adobe Muse, which will convert them into a web-friendly format. However, making images friendly for the web often means compressing the image and sacrificing some image quality. Placing images into Muse that are not web ready results in automatic compression. If you publish or export a site and are dissatisfied with the automated results, experiment by creating and optimizing your own web-friendly images manually in Photoshop or Adobe Fireworks® software. Delete the original images and place the new optimized images in the pages, and then publish or export your site again.

Be aware that other alterations you make to an image in Muse—such as cropping, resizing, or adding bevels, shadows, and glows—result in Muse re-creating the image for you and automatically compressing it. If you want more control over the optimization process, you can add effects to an image using Photoshop or Fireworks, optimize the file in an image-editing program, and then place the image in Muse to set the level of compression yourself. You can place PSD files from Photoshop directly in Muse, rather than exporting PNG, JPG, or GIF files—but that will also cause Muse to automatically generate a new image file using its own automatic compression algorithms.

Optimize images for display on the web

Export errors and slower export operations may occur when a linked file was placed a very high resolution, and was subsequently scaled much smaller on the page. This is not a recommended workflow. Issues become more evident when repeatedly placing full sized (over 2,000 pixel) images and then scaling them to fit a design.

If you place a very large image file, Muse automatically limits the size and rescales the image width to 2048. If you hover over an asset's name in the Asset panel, a tooltip displays the original size of the place image versus the resampled image size (scaled to fit within the maximum size limit).

It is a best practice to resize and optimize the web graphics for a site in an image-editing program prior to placing them on pages. Placing images with extremely large dimensions can cause the .muse file to become much larger in file size than necessary. The .muse file must process the extra pixel data that is not needed to display the image on the web. This can result in a longer processing period when exporting and publishing sites. In some cases, a very large .muse file may time out when attempting to resize and optimize all of the files during the export or publication process. Time out errors may occur.

To resolve this, you can right-click the asset names and choose Optimize Asset Size to remove the unnecessary data needed to display the scaled image.

If you scale an optimized image to appear larger in a design, you may see the Upsampled Plus asset error. To resolve this, you can choose Import Larger Size to retrieve the extra image data needed to display the scaled image acceptably.

Draw placeholder shapes

A placeholder shape can be an ellipse, rectangle, or a polygon that you can fill with an image, text, or color.

Place a Photoshop file as a rollover button

The Share button is displaying the states as expected. In the next section you'll learn how to align the Share button with the drip image on the right side of the site navigation.

In the next part, you'll learn how to define the header and footer areas of the master page.

Pin objects to the browser window

When you place an image or use other methods to add artwork to a page, you use the Selection tool and arrow keys to reposition it. As you move the image around, it moves in relation to the other elements (images, text, and media) that also exist on the page. You have the ability to move the other elements too, but the entire page behaves like a brochure or a poster. The items on the page exist on a single plane. If a page is long (contains a lot of vertical content) and the visitor scrolls down—they no longer see the images at the top of the page.

It’s likely that you’ve seen pinned objects when viewing websites; they are the “persistent” items that always display in one location. They appear to float above the rest of the page content.

When you use the Pin tool, you are essentially removing an image from the flow of the page. Rather than laying it out in relation to the other page elements, you set it to a specific location in relation to the browser. Pinned images appear to be “sticky” – always staying in one spot (such as the top right corner or hovering near the bottom) regardless of other scrolling page elements. If the visitor resizes their browser, pinned images always stay at their pinned location in relation to the browser window.

You can think of pinning as a way to “break the image out” of a page’s design, and affix it to the browser instead, like pinning a note to a corkboard. The pinned element will move to maintain its pinned position in relation to the browser if the visitor resizes the browser window, but the pinned element will not move if the visitor scrolls the page content horizontally or vertically.

Follow these steps to use the Pin tool:

1. While the A-Master page is open in Design view, select the Facebook icon with the Selection tool.
2. Click the top right pin position in the Pin interface in the Control panel. This setting "pins" the element by the current location of its top right corner.

3. Repeat steps 1 and 2 to pin the Google+ and Twitter icon buttons to their top right positions, so that they don't move within the browser window when the rest of the page scrolls.
4. Click Plan to see the page thumbnails. Notice that all of the pages now include the three social media icons, because you added them to the master page.
5. In Plan view, double-click the food page to open in it Design view. Or if it is already open, click the food page tab to make it active. Choose File > Preview Page in Browser to view the page in a browser.
6. Click on the Dessert menu item to jump down the long page to the Dessert menu section. Notice that while the rest of the page elements scroll, the three social media icons remain in position along the right side of the page because they are pinned.

Continue on to Building your first website in Muse, Chapter 6, where you'll see how to group sets of objects so that they behave as one element. You'll also complete the Visit page by adding an embedded Google map that displays the locations of Katie's Cafe to visitors. And after finalizing the site, you'll see how easy it is to upload the to a hosting server (powered by Business Catalyst) to publish it online, so that you can share the work-in-progress with your clients and colleagues.

In Chapter 4 of Building your first website with Muse, you learned how to add anchor tags and link them to menu items in a manual Horizontal Menu widget. You also learned how to pin elements to the page to prevent them from scrolling. And you saw how to add links to files so that visitors can download them.

You can also take a look at grouping objects and working with groups so you can paste sets of content on pages. You'll also work with more embedded HTML—this time, you'll add an interactive Google map to the Visit page. And finally, you'll see how to put the finishing touches on your site by adding a Favicon and then publishing the trial site to the included hosting servers.

Group objects and paste groups as a single unit

Just like InDesign and other design programs, you can combine several objects into a group so that they are treated as a single unit. In this section, you'll create a design composed of several elements (placed images and text frames) and then see how to group them to make it easy to position or copy them as one item. Follow these steps:

1. In Plan view, double-click the home page thumbnail to open in Design view.
2. Choose File > Place. Browse to select the file in the sample files folder named panel-open-bottom.png. Click Open to close the Import dialog box and then click once near the bottom of the home page (below the Lightbox Composition widget and above the footer) to place the graphic at full size.

The PNG file was set to a lower opacity, so the semi-transparent flower design allows the tiling background image to show through.

3. Choose File > Place again. This time, browse to select the image named spoon-map.png. Click Open and then click once on the top center petal to place it.
4. While the spoon image is selected, press and hold Option (Mac) or Alt (Windows) to duplicate the spoon image and drag it to the petal immediately to the right of the center. Repeat this action once again, to duplicate the center spoon image and drag the duplicated copy to the petal to the left. Use the Selection tool to position the three spoons, as shown in the following image.

5. Using the Text tool, draw a text frame in the center petal and type the following:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

6. In the Text panel, apply the following settings to format the text:
   • Font: Droid Serif (or any serif font)
   • Font Size: 14
   • Font Color: #222222  (in part 5 you renamed this color katieblack)
   • Font alignment: Center
   • Leading: 120%

7. Then, select just the last two lines (that begin with days of the week) and set the font color to red (#A6342A).
8. Select the text frame with the Selection tool. Press and hold Option (Mac) or Alt (Windows) to duplicate the text frame and drag it to the petal immediately to the right, above the spoon image. Repeat this action once again, to duplicate the center text frame and drag the duplicated copy to the petal to the left. Use the Selection tool to position the three text frames so they are aligned above the three spoons, as shown in the following image.

9. Switch to the Text tool. Select the text in the left address and change it to:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

10. Select the text in the right address with the Text tool and change it to:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Now that the design is complete, you'll select the elements and group them.

11. Use the Selection tool to click and drag over the entire flower design, making sure to select both the placed flower image, the three spoon images, and the three text frames. Right-click and choose Group from the menu that appears. If you prefer, you can also choose Object > Group.

Notice that after grouping the set of objects, the Selection Indicator in the top left corner of the Control Panel displays the word: Group.

12. Copy the selected group. Click Plan to return to the Plan view, and then double-click the Visit page thumbnail to open it in Design View. Choose Edit > Paste in Place, to place the entire group of elements in the same location.

As you can tell from this short example, groups are helpful whenever you've completed a design and you want to work with it as a single element, to reposition it on a page or copy it and paste it on a different page.

In addition to grouping, you may also find the Lock features helpful once you have finalized a design. Right-click on a group or selected set of elements and choose Lock from the context menu that appears to lock them. (Alternatively, you can choose Object > Lock). Locking ensures that you won't accidently move or delete any of the finished elements on a page, because they are no longer selectable. If you later need to update the locked elements, choose Object > Unlock All on Page.

After pasting the flower design at the bottom of the Visit page, the page content is partially complete. In the next section, you'll continue editing the Visit page to add an interactive map interface to help customers locate the nearest cafe.

​Embed rich media content to add animation

Using the space panel

The Spacing panel allows you to take advantage of the CSS padding and Gutter properties. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. You can also equalize all padding properties by choosing to edit them uniformly.

1. In Adobe Muse, select Window > Spacing to bring up the Spacing panel.

2. Specify values for Left, Right, Top, and Bottom Padding properties. If you want to enter different values, unselect the  button.

3. You can also choose to specify Horizontal and Vertical Gutter properties.

Scale and rotate objects using the Transform panel

Adobe Muse allows you to apply 2D transformation on objects. You can position, scale, and rotate objects on X and Y axes.

The 100% Width toggle on the Transform Panel allows you to set objects to 100% width. You can also set scalable objects to span across the width of the browser and fit your computer screen.

To apply transformations on a selected object, do the following:

1. In Adobe Muse, select Window > Transform.

2. With the object selected, apply any of the following transformations:
   • Position: Enter X and Y values to place the object on a desired location on the web page.
   • Scale: Enter Width and Height values for your object. You can also choose to scale the object with uniform width and height by clicking the  button.
   • Rotation (): Enter the angle of rotation for the object.
   • 100% Width (): You can set the object to 100% width and allow it to scale across and fit the width of the browser.