Top 5 Adobe Muse Design Tips and Tricks
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
Overlapping elements on your Muse site (such as text and a background image) can often cause strange layout shifts when the site is exported or published. Elements that were perfectly aligned in the design view are now misaligned, and you're left with no other option but to adjust the original design.
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
Have you placed a high resolution image into a Muse site, scaled it down significantly, and found that it is pixelated or fuzzy when published?
Although Muse does feature automatic image optimization, I still prefer to save and optimize my images directly in Photoshop for maximum control.
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!
Feedback / Questions? Leave a comment below or on Twitter @VisualArms
I’m out of legaue here. Too much brain power on display!
Grazi for mkaing it nice and EZ.
Just do me a favor and keep wiritng such trenchant analyses, OK?
You’ve hit the ball out the park! Incrdeilbe!
What a joy to find someone else who thniks this way.
I’ve been dinsgeing flyers and posters for parties for over a year now. Even with the practise I’m getting, it’s really hard to make such subtile touches as you do! Worth mentioning.
thanks for putting this together… have you figure out yet if there is such a thing as importing layer comps for button states. I am just puttering with muse and I can’t figure out an efficient way (ie without destroying my buttons in photoshop by having to merge) to import layer comps. Or for that matter how to update my assets. In Indesign there is a little circular arrow which in muse seems to be MIA.
THANK YOU so much for the valuable information!