Learning new software can be uncomfortable and frustrating for most designers - especially when web tutorial resources are limited. Pushing yourself outside of your comfort zone and attempting to build something stunning from nothing is always challenging.

Below are the top five tips and tricks I've found from building over 15 unique websites and templates in Adobe Muse.

1. Paste in Place

Unlike InDesign, elements such as frames and images placed on the Master page are locked and can not be released. This is very inconvenient when your design features repeating elements on every page (such as a banner image), and often leads to inconsistent alignment between elements on pages.

*Note - fixing it manually by nudging the frame 1 pixel at a time while switching back and forth between pages is not the best use of your valuable time!

 

By using the Paste in Place command (Edit > Paste in Place) rather than a normal "paste", you can select any element that you consider already perfectly aligned, and duplicate it on additional pages with no change in positioning or layout. InDesign users are very familiar with this trick, and I've used it everyday for years.

2. Placing Photoshop Files (.PSD)

This is one of the first Muse tips I wrote about, and I still use it on all of my websites. By placing a Photoshop PSD file in your Muse site (File > Place) you have the ability to select and import any individual layer in the PSD. Of course we don't want to import written content or solid blocks of color from Photoshop (Muse can handle this) but for dropping in textures and logos this is really helpful.

Be sure to select "Clip to Layer Contents" to avoid unnecessarily large frames. Need to update the graphic? Just edit the original PSD file and update the links within Muse.

3. Grouping Elements

By grouping elements in your layout (Object > Group), Muse actually groups the elements in the HTML code as well. For those familiar with CSS this is commonly called a wrapper, and it's used to "wrap" elements together in a nice little package. If you have two design elements that don't get along, try grouping them and republishing the site.

"...A wrapper is an element, commonly a div, that encloses one or more other elements in the HTML markup"

4. Create Graphics To Match The Frame Dimensions

When placing a graphic into a Muse site, first draw its frame and reference the pixel dimensions in the upper toolbar. Open up Photoshop and create a new graphic or image at the exact size of the Muse frame. When finished, save and optimize the image and place it into the Muse layout. Muse does not appear to re-sample or optimize images that it does not need to re-size, and the result is crisp, clean graphics when published.

The black box above is 300px wide by 150px high.

5. Don't Overwrite - Save New Versions!

This may seem obvious, but DO NOT save over your Muse file each time you make an edit. Use "Save Site As" and create a new version.

Considering the software is still in Beta and there are bugs and errors present, it's crucial that you retain previous versions of your layout in the case of a crash. There is nothing worse than dragging a new widget into your nearly complete design, only to experience frozen software, a manual shutdown, and a .Muse file that is permanently screwed (or at least locked up until Adobe releases a new build!)

Hopefully these tips will save you some headaches and frustrations when building your first site in Muse. Many of the issues mentioned here have been posted on the Adobe support forums for review, and I would anticipate many will be addressed before the final release.

Check back next month for another batch of helpful Muse tips and tricks from Muse-Themes.com.

Best of luck!
~SH

Feedback / Questions? Leave a comment below or on Twitter @VisualArms