4 Awesome Resources for Creating Adobe Muse Websites
As you start building websites in Adobe Muse, you’ll find yourself looking for the same types of graphics and widgets consistently. Elements such as repeating textures and backgrounds can be difficult to find, especially high quality versions that are appropriate for a professional site. How many times has your client requested a feature in a site that you don’t have a clue how to achieve? If it’s not built directly into Muse don’t worry, the web has plenty of embeddable apps that seamlessly integrate with Muse to achieve the functionality you desire.
Here’s a list of a few of my favourite resources for graphics and apps that play nicely with Adobe Muse.
1. Subtle Patterns
This is the best resource for perfectly tiled repeating textures on the web today. It features a huge library of patterns, quick previews, and even allows free use for commercial or personal projects. A great site and valuable resource by Interaction Designer Atle Mo.
2. Nabble – Free Forums and Embeddable Apps
Nabble is one of my best kept secrets (or at least it was). It provides free embeddable forums, blogs, photo galleries and other embeddable apps. Once you’ve signed up, simply insert the HTML embed code into your Adobe Muse site and you’ve got a really powerful, fully featured forum or blog in seconds. I can’t find or think of a better way to create a complete forum with Adobe Muse.
(The Muse-Themes.com forum is powered by Nabble)
3. Embedit.in
Embedit.in is a really innovative way to view text documents and other files through embedding. Simply select your file to upload, and Embedit will provide you with an html snippet that you can place into an Adobe Muse website. It has a fairly slick interface, which includes options for zooming, downloading, or printing the document or file itself. I’ve tested this service with Muse, and it works like a charm. Embedit.in is now part of Box.net, the leader in online file sharing and collaboration.
4. Smashing Magazine Freebies
If you’re actively working in the world of web design, you’ve probably heard of Smashing Magazine before. It’s likely the number one resource online for innovative design tips and trends in web and interaction. Smashing gives away freebies such as icon sets, user interface PSD files, and a variety of other helpful graphics that you can use when creating your website in Muse.
***
Using the resources above, I’m confident that any visual designer can create a beautiful and functional website in Adobe Muse without writing any code.
If Muse doesn’t contain the functionality you desire built directly into its widgets, then simply search the web for an embeddable version that you can use. There’s really no limit to what you can achieve, and this list just scratches the surface of what’s possible with Muse’s embed HTML feature.
Cheers!
Steve Harris
Muse-Themes.com
Placing a PSD into Adobe Muse - Tutorial
Here's an extensive video tutorial that I recorded explaining how I build an Adobe Muse website using a Photoshop PSD. The tutorial and video were featured in the October 2011 issue of Computer Arts Magazine.
Note: this video uses an older beta version of Adobe Muse. The latest release now supports selecting multiple layers of the PSD when placing the file.
Barcelo Template Video Overview - Now Available!
We recently completed a brief video overview of the template Barcelo, providing users with a hands on demonstration of how to change template elements in order to create a customized website. The overview touches on applying master templates to pages on the site, modifying background images and colors, and rearranging content elements.
Download the template here: Barcelo product page.
Enjoy!
Live Sales Map
Check out the shop page for a live view of recent Muse template purchases across the globe. This will give you a sense of how many other users are experimenting with a Muse template system. You’re not alone!
Now offering Custom Templates!
Over the last month I’ve received a great deal of requests to design custom templates or themes focused at a specific industry (such as Photographers, Interior Designers, etc.) Going forward, Muse-Themes.com is happy to provide quotes to customers looking for a completely customized site design or professional layout.
For more information about custom templates and associated costs, send a detailed email to info@visualarms.com - Please include all of your site functionality requirements (such as image galleries or embedded social media widgets) as well as any specific deadlines, and your quote for a unique template will be provided within 48 hours.
I made the site above using Photoshop and Adobe Muse - launching soon!
Feel free to include any reference materials or existing designs that you are using as inspiration – the more information provided up front the better, as it helps to ensure an accurate estimate and to better understand your specific requirements.
~SH
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!
~SH
Feedback / Questions? Leave a comment below or on Twitter @VisualArms
Muse (code name) Beta 3 Update Now Available
All templates featured on Muse-Themes.com have been tested, updated, and republished to Beta 3.0 as of Sunday, September 25.
From the Adobe Muse website on September 25, 2011
"Today we have released an update to the beta software currently code-named Muse. Muse enables graphic designers to create professional HTML websites without writing code. This new technology has generated a wildly enthusiastic response from the design community with over 260,000 designers downloading the beta technology in the first 40 days! We’ve been blown away by the response and very excited at the number of people who have been participating in our support community, logging bugs, asking questions and giving feedback.
The Beta 3 update which is now available includes improvements in two areas:
Fixes to over 40 bugs discovered by the Muse user community
Some initial improvements to the way Muse generates code which will reduce load times and data usage of websites created with Muse
How to implement the code improvements on your sites
If you already have Muse installed, then you’ll be prompted to update to Beta 3 next time you launch the Muse application. If you’ve already published a website using Muse and you want to update that site with the code improvements you simply need to republish that website from within Muse. There’s a very short video where the Muse product manager Dani Beaumont explains how to go about doing this.
If you’re not yet using Muse, then go ahead and download Beta 3 today..."
Click here to read the full release on the Adobe Muse site.
Future Updates
Here’s an overview of future updates, announcements, and tutorials to look forward to on Muse-Themes.com.
- Template updates – expect to see user submitted designs, and new creations from Visual Arms.
- Instructions for implementing custom typeface (font) integration using Typekit.com – with no coding required. Check out the Visual Arms website for an example www.visualarms.com
- Ongoing FAQ and support updates from the user community.
- Template updates and fixes as needed
Recent Articles
- 4 Awesome Resources for Creating Adobe Muse Websites
- Placing a PSD into Adobe Muse - Tutorial
- Barcelo Template Video Overview - Now Available!
- Live Sales Map
- Now offering Custom Templates!
- Top 5 Adobe Muse Design Tips and Tricks
- Muse (code name) Beta 3 Update Now Available
- Future Updates
Tags
- adobe muse (0)
- adobe muse blog (0)
- blogging (0)
- Coming Soon (0)
- custom templates (1)
- ecommerce (0)
- embed (0)
- mobile (0)
- resources (1)
- retina display (0)
- search bar (0)
- seo (0)
- Site Updates (3)
- tips / tricks (4)
- video (2)
