From the Tools panel, click the Rectangle Frame Tool or the Ecllipse Frame tool.
Learn how to organize, manage, and transform various objects within Adobe Muse. Read on to how to optimize images for 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.
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.
From the Tools panel, click the Rectangle Frame Tool or the Ecllipse Frame tool.
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.
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:
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.
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.
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.
A placeholder shape can be an ellipse, rectangle, or a polygon that you can fill with an image, text, or color.
From the Tools panel, select either the Rectangle tool or the Ellipse tool.
Drag to place the rectangle or ellipse shape in your Adobe Muse project.
You can fill the shapes with graphics, text, or color.
To set the object fitting properties, select the rectangle or ellipse, and click Object > Fitting.
You can choose one of the following Fitting options:
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.
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.
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.
Click once in the top right area of the header of the A-Master page to place the Photoshop file at its original size.
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.
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.
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:
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.
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:
The PNG file was set to a lower opacity, so the semi-transparent flower design allows the tiling background image to show through.
123 Elizabeth Street
800 Spruce Street
301 Carmel Street
Now that the design is complete, you'll select the elements and group them.
Notice that after grouping the set of objects, the Selection Indicator in the top left corner of the Control Panel displays the word: Group.
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.
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.
Choose File > Place. In the Import dialog box, navigate inside the Kevins_Koffee_Kart folder and select the file named logo.swf.
Place the SWF file in the upper left corner, matching the location of the existing logo image file.
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.
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.
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.
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.
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: