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.

Use images in Adobe Muse projects

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.

  1. From the Tools panel, click the Rectangle Frame Tool or the Ecllipse Frame tool.

    Image frame tool in Adobe Muse
    Drag and drop rectangle and elliptical image frames in Adobe Muse.

  2. Click the image frame tool, and drag to place the image frame in your project.

    You can continue to click and place several image frames in your project. You can also resize and move the image frames to suit your design needs.

    You can fill the frame with color, or place an image in the frame. To place an image, drag and drop an image on to the frame. The image resizes to fit into the frame.

    Rectangle and elliptical image frames
    Rectangle and elliptical image frames

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.

In this tutorial, you'll familiarize yourself with the Adobe Muse workspace and see how to build a full featured website without writing any code. You will also understand how to build a site map, work your way through master pages, and also understand the browser fill options within Muse.
The footer is comprised of a single rectangle with a tiled background image with a center-aligned placed image on top.

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.

  1. From the Tools panel, select either the Rectangle tool or the Ellipse tool.

    Rectangle tool and ellipse tool
    Choose either the Rectangle tool or the Ellipse tool

  2. Drag to place the rectangle or ellipse shape in your Adobe Muse project. 

    • To create squares, hold the Shift key and click the Rectangle tool.
    • To create circles, hold the Shift key and click the Ellipse tool.

    You can fill the shapes with graphics, text, or color.

  3. To set the object fitting properties, select the rectangle or ellipse, and click Object > Fitting.

    You can choose one of the following Fitting options:

    • Fit Content Proportionally: Resizes content to fit a frame while preserving the content proportions. The frame’s dimensions are not changed. If the content and the frame have different proportions, it results in some empty space.
    • Fit Frame Proportionally: Resizes content to fill the entire frame while preserving the content’s proportions. The frame’s dimensions are not changed. If the content and the frame have different proportions, some of the content will be cropped by the bounding box of the frame.
    Fit content proportionally
    Fit content proportionally

    Fit frame proportionally
    Fit frame proportionally

Place a Photoshop file as a rollover button

  1. Choose File > Place Photoshop Button. In the Photoshop Import dialog box that appears, locate the PSD file. Click Select (Mac) or Open (Windows) to choose the file.

  2. The Photoshop Import Options dialog box appears. Take a moment to investigate how the settings are applied. You can use the menus to specify which layer in the Photoshop file will show as the button's Normal State (the way the button appears when the page first loads), the Rollover State (the way the button appears when visitors hover their cursor over it), and the Mouse Down State (the way the button appears when visitors click the button). The three state menus display the names of the Photoshop layers, and the thumbnail images visually display how each selected layer will appear.

  3. For this example, the Photoshop layers have already been ordered correctly to display the button states. There's no need to change the menu settings. Click OK to accept the states as they are arranged by default.

    Use the Photoshop Import Options dialog box to associate existing Photoshop layers with the desired button states.

  4. Click once in the top right area of the header of the A-Master page to place the Photoshop file at its original size.

  5. Click the Preview link to use the WebKit-based rendering emulator. Review the display of the A-Master page. As you first view the page, the Normal State of the button appears. If you hover your cursor over the button, the appearance changes slightly (the brown drip color becomes lighter), and if you click the button, the white text becomes light brown as long as you press and hold the mouse button.

  6. Click Design to return to editing the A-Master page in Design view.

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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.

  1. 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.
  2. 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.
Position the three spoon images in the top three petals of the design.

  1. 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

  1. 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%
  1. Then, select just the last two lines (that begin with days of the week) and set the font color to red (#A6342A).
  2. 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.
Reposition the three addresses to display above the three spoons in the top three petals of the design.

  1. 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

  1. 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.

  1. 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.

  1. 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

  1. In Plan view, double-click the MasterFlash thumbnail to open it for editing in Design view. Notice that since you previously duplicated the A-Master page, the static logo image is still there. It is helpful to use the static image to match placement for the animation rectangle, but don’t forget to delete the static placed logo image after embedding the rich media element.

  2. Choose File > Place. In the Import dialog box, navigate inside the Kevins_Koffee_Kart folder and select the file named logo.swf.

  3. Place the SWF file in the upper left corner, matching the location of the existing logo image file.

  4. Once you've aligned the new SWF window that you just placed with the older static logo, delete the static logo by selecting it and pressing the Delete key.

  5. To review how the entire site appears with the new changes to the Home page, choose File > Preview Site In Browser to test the display of the logo on various pages. Without publishing the site, you can work locally on your computer and then preview the site in a browser to click through the pages in the site navigation. Notice that the animation (SWF file) appears once and then stops on the Home page. If you click other pages, only the static logo is displayed.

    Note:

    If you choose File > Preview Page In Browser, the new browser window will load more quickly to display the Home page, but it will only preview the active (Home) page. Choose this option if you want to check one page of the site, rather than the entire website.

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.
  1. Specify values for Left, Right, Top, and Bottom Padding properties. If you want to enter different values, unselect the  button.
  1. 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.
  1. 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy