Organizing and updating files of your portfolio: Managing layers and assets

How to organize layers

Video tutorial

Working with the Assets panel to manage site files

Video tutorial As you build sites in Muse, the files you add are listed in the Assets panel. This panel includes many helpful features that you can use to quickly update, optimize, and swap out graphics as you are creating your designs.To access the Assets panel, choose Window > Assets. (Or click the Assets tab to make the Assets panel active in a panel set).You can drag the sides or bottom edge of the Asset panel to expand it and see more of the list.To reorder the list of assets, click the top header bar. You can re-sort the list in ascending and descending order by asset name, error icon, or page name. Each header acts like a toggle button to sort the items in the corresponding column.When you place more than one instance of the same image file, the original asset is displayed with the instances below it. Expand and collapse an asset set by clicking the arrow to the left of the original asset name. This is helpful when you want to shorten the asset list and make it easier to navigate the items in the Assets panel.

Click the arrow to the left of the image name to expand and collapse the set of instances.

Note:If you place an image and then duplicate it and make changes to it (including rotate or crop), the rotated or cropped image is exported with a different file name when you export or publish the site. If you place an image and duplicate or resize it without cropping, all smaller images will reference the largest image and the instance's dimensions will be adjusted with code.

In the most common workflow, placed assets are linked to the .muse file to keep a reference to the original file you selected. For example, if you choose File > Place, browse to select an image on your desktop, and then place it on a page, the image is added to the page design, the image's name is added to the Asset panel, and a reference link is set up to point to where the original file exists on your desktop.For this reason, it is a best practice to use an image-editing program, such as Photoshop, Illustrator, or Fireworks, to export web-optimized image files to a folder on your desktop that also contains the site's .muse file. That way, all of the elements of the site are organized in one local folder (which also makes the project portable if you work with other designers and you want to hand off the entire project to someone else).When you place files, the reference link helps Muse keep track of the file's location and its status. The Assets panel alerts you in the following scenarios:Missing image: The original asset of a linked file has been moved or renamed since you placed it. If you open a Muse project file after renaming or moving original images, click OK in the alert box that appears and then use the Assets panel to relink the assets (see Figure 19).

Figure 19. Click OK to close the missing assets alert box.

Out of date asset: The original asset of a linked file has been edited outside of Muse since you placed it. If you open a Muse project file after changing original images, you can also click OK in the dialog box that appears to automatically update the modified linked assets (see Figure 20).

Figure 20. Click OK to update a linked asset that was modified outside of Muse.

Upsampled asset: A linked file has been placed and then scaled larger than the data available to display it, resulting in a pixilated image with lower image quality. See the section below titled Optimizing images for display on the web for more information on how to resolve this.Bloated project file: A larger linked image file has been placed and then scaled much smaller in a page design; the .muse file includes more data than is required to display the image (resulting in a .muse file with an unnecessarily larger file size). Depending on the size of the project file, slow performance when exporting and errors when exporting or publishing may occur. See the section below about using the Upsampled asset alert icon for more information on how to resolve this.

To the top

Copying and pasting assetsYou can also bring content into Muse by copying the content and then pasting it directly on the page. This is a very quick workflow strategy when mocking up a wireframe site for a potential client because you can copy assets from an existing site directly from a browser window, email message, or image-editing program.Generally speaking, pasting content is a not a best practice when creating a final site design because it disables many of the Asset panel features, (such as the Go to Asset, Edit Original, Reveal in Finder, and Import Larger Size options described below). It also means that the files you paste do not keep a reference link to a master file on your computer. These pasted asset files are "embedded" rather than linked.When desired, you can choose to convert any placed asset into an embedded asset by choosing the Embed Link option. There are situations when embedding all assets for a Muse site can be beneficial. For example, you may be working on a site with another designer and you want to avoid the out of date errors that will occur when the original images are changed. These alerts will no longer appear because the reference link to

the source file is removed. But remember that you'll be unable to utilize many of the helpful features that the Assets panel provides.

To the top

Using the Asset panel menu optionsYou can right-click on any asset (or selected set of assets) in the Assets panel to apply the menu options. Depending on the type of file you click, slightly different menu items will display. The options are:

Embed link: Removes the reference link to the original file that you placed. This setting disables many of the file management features in the Assets panel when you choose this option, but it makes the .muse file self-contained and will prevent alerts from appearing if you are sharing Muse files with other designers.

Relink: If you have moved or renamed an asset since you placed it, you can relink the asset file. In the window that appears, browse to select the file again. This action also removes the alert icon from the Assets panel.

Go to Asset/Go to Asset Use: When working with Adobe Muse, it may sometimes be difficult to track where you’ve used an uploaded asset or background image. You can now take advantage of the new Go to Asset Use option to track usage of the background images and upload assets across your website.

Edit Original: Opens the original image (stored on your computer) so that you can make changes to the master file. Depending on the file type and your computer's file associations, the file will open in an external editor so you can make changes to the asset.

Add Title: Opens the Image Properties dialog box that includes fields to enter both the title and the alternative text for the selected asset. These are both short text descriptions that are included in the site's code when you publish it. Titles provide additional information about an asset. Titles should be descriptive, memorable, and concise. In some browsers, the title text is displayed as a tooltip when you hover over an image.

Add Alternative Text: Opens the Image Properties dialog box that includes fields for entering both the title and the alternative text for the selected asset. These are both short text descriptions that are included in the site's code when you publish it. Alternative text is an alternative information source for users that have disabled images in their browsers and sight impaired visitors that surf the web using screen readers and other assistive browsing devices. Many search engines use alternative text to index a site. Adding alternative text helps improve a site's ranking in the search results.

Reveal in Finder: Displays the location of the original file in your computer, within the Mac Finder or Windows Explorer file structure hierarchy.

Copy Full path: Copies the original asset file's location on your hard drive to the clipboard, in a format similar to this:file:///Users/User_Name/Folder_Name/Subfolder_Name/image.jpg