Your Source for Premium Adobe Muse Templates, Widgets and Tutorials

Blog

Using external data, spreadsheets and databases with Adobe Muse websites

In this article we will discuss the need for data sources in Adobe Muse and what are the options to embed, import or connect Muse to achieve dynamic data connections.

What is a datasource.

For this article we will use the term datasource to relate to any external list, database or spreadsheet that can be added to, updated or have items deleted from. This could be a database a spreadsheet or simple a text file. The point is the data source can not in itself be added to a Muse page.

The data source maybe a list of employees, a list of products for sale, a property list or a directory even a blog. As Muse is designed for page layout and interactivity rather then data manipulation it has no inherent way of allowing data to be added to a page at present. So what are your options?

  1. Show the data as an image or static text.
  2. Make the data downloadable.
  3. Embed the data.
  4. Use Muse with a dynamic datasource (Business Catalyst).

Option One: Making an image of the data.

Lets take a look at our first option showing the data as an image or as static text. Lets say you have a price list for a coffee shop that needs to be updated on a regular basis. You could create a spreadsheet in Apple numbers or another app, format its appearance there and just copy the block from the app into Muse. This method works especially well with Apple iWork data but comes with obvious issues such as the fact that it is an image and not selectable data. 

However it does work and might be a way of getting data from one source onto the site.

Option Two: Making the data downloadable.

Lets say that this is not really dynamic data so we will move to the next on our list downloadable data.

If you have data in a format that is easy to convert into a PDF this is another option and is very straight forward. Create your data in an office type programme such as excel and save the data in a pdf format, create a link to the document and then with the hyperlink tool choose the “Link to file” option and navigate to the file. Once this is done Muse will upload the file with the site.

Option Three: Embed the data using Google Drive and Muse

That was easy but whats next? Embed the data. This is easy but has a few more steps. One of the best and easiest ways to do this is with Google spreadsheets. You will need a free gmail/google drive account.

  1. Login and goto your drive. 
  2. Upload your spreadsheet (you may need to restyle some of the content).
  3. Click file and publish to the web, choose your settings and then click “Start Publishing”.
  4. In the “Get Link” and choose the HTML to embed option.
  5. Grab the code and copy and paste into Muse.

This is an ok way of adding data and at least it is updatedble via google drive. You can place content over the heading and elements you want to hide but you are restricted to showing data, there is no search, for example, so not much use for say a directory or blog.

Option Four: Using Adobe Business Catalyst and Muse

The last option is at the same time the most flexible but also the most difficult to implement.

Using Business Catalyst as your data source. First of why Business Catalyst? If you have never used the system take a look at it here it is not a hosting service but rather a fully featured online business system that handles everything from blogs to ecommerce, newsletters to custom databased web apps. There is truly nothing like it on the market and we think it has great potential when used with Muse.

To get you started we have templates that use the blogging module or you can use our blogging module widget in your own designs (see this article for more).

Business Catalyst can also create custom web apps that you control what data can be placed in them from text, images to locations and multiple choice options. The data can then be included onto your pages using list and details views. You can set up secure login areas, forums, calendar events and more.

If you are looking to build a completely custom data source to use with Muse this is the best option.

What next?

We would love to here what your thoughts are and especially if you would like to see museGrid widgets and tutorials that help you add dynamic data to your client websites?

Adding a Business Catalyst Blog to your Adobe Muse website

Until now adding a blog to a Muse site has been less then easy. Now with Business Catalyst, the +BC Blog Module Widget from museGrid and Muse you can easily build a custom website with blogging capabilities.

In this series of tutorials we show you how to complete the entire process from end to end.

What you will need:

  • Adobe Muse CC 7.0 or above. 
  • A Business Catalyst hosting account Web Marketing or higher. 
  • The +BC Blog Module Widget from museGrid 

Next...

Watch the video tutorials and see how its done.


Loading
Loading Viddler Videos

    Motion the full screen video background template for Adobe Muse

    In this article we show you how to use the motion template in a step-by-step guide we re-style the template and create a whole new design in double quick time. From changing the colours and fonts to creating new video content and updating the mobile icon.

    Watch the tutorials...

    Loading
    Loading Viddler Videos

      What is Motion?

      Motion is the first Adobe Muse Template to have a full screen video background. Included in the motion template is a new Adobe Muse video background widget that makes it super easy to build or learn how to add video backgrounds to your website.


      Links:

      Templates with integrated Business Catalyst modules now available

      Find out how we have achieved our Adobe Muse templates that now include integration with Adobe Business Catalyst blogging.

      Watch the video

      Read the article...

      Many people have asked if there can be better integration between Adobe Muse and Adobe Business Catalyst. Here at musegrid we have worked through many different scenarios of how you can achieve this.

      This year at Adobe Max we had the privilege of showcasing one method to eager designers but until now there has not been a simple easy way to use Muse to build a website and then plug Business Catalyst modules into it.

      That is until Muse 7.0 was released with the ability to include library items into the mix but not only that, to also build our own custom widgets that generate the code needed to easily integrate the Muse with BC.

      You can imagine the excitement as we now had the tools to create a simple and easy way to add Business Catalyst modules to Muse Templates and add simple configurations abilities that can be controlled with widget options and paragraph styles.

      We created the first tools which are now part of a series of musegrid templates available today.The first iterations have the blogging module which was the most requested. The templates have a latest articles widget, blog articles list page and of course the blog articles themselves.

      Whilst we would love to have the ability to control every aspect of the layout at present we have opted for easy to use and implement.That being said we see this as a leap forward for Muse and Business Catalyst working together in an easy and smart way.

      A note of caution however as using the templates requires the following:

      • You need to host the site with Adobe Business Catalyst hosting on the Web Marketing Plan as a minimum.

        For more information about Business Catalyst hosting see here - 
http://www.businesscatalyst.com



      • The best option is to become a partner which starts from FREE ( you still need to pay for hosting however) see the partner details here - http://www.businesscatalyst.com/partners


      • You will need to do some setup within Business Catalyst to switch the blog on (this is ver simple however).

      The current template with our +BC modules are:

      The reality of this approach is that +BC widgets and modules can now, in effect, be added to any template within the museGrid library.

      We have great plans for future expansion of the project in the next few months. For now we hope this goes some way to solving Muse and Business Catalyst uses.Why not try the modules today and see how easy and powerful museGrid’s +BC modules are.

      How to package your Adobe Muse library files for distribution on Adobe Muse Exchange

      In this article we show you how to turn your Adobe Muse Library files in to distributable .muslib files. We also show you how to add your own custom images for inclusion with your library files to display in the Muse library panel.

      Watch the Video

      Read the Article

      So lets say you create a really great widget or layout that you would like to share on your own site, Facebook or of course the Adobe Muse Exchange (much like how we do it on museGrid.com), how do you go about preparing the file for distribution? How can you add a custom image that show when the user has installed the item into their library and clicks on the unit to include in their document? Thats what we are going to show you.

      STEP ONE:

      Once you have created your awesome content in Muse open the “Library” panel (only available in Muse 7 or above).

      Click on the “Create Folder” icon and name the folder. This should be the nam you want to use as a container for the library items you want to add. For example if you were going to add a number of buttons you may call the folder ‘My Buttons Library’ or such like.


      Once that folder is created select the content for the item you want to add to this library (if you are only adding more then one item do not select the entire set of content you wish to add but rather the individual items you want to add in sequence).

      Once the content is selected go to the library panel, select the folder and then click the “Add Selected Item” icon to add the item to the folder. Rename the item.


      To test the library you may wish to create a blank, new Muse site and then drag the newly added library item from the Muse library panel toy the workspace.

      STEP TWO:

      You will notice that when you added the item to the library Muse automatically creates an image of the item (this is saved as a PNG file) for visual reference. We can change this image to be whatever we wish.

      This is especially useful if you want to add your own branding to to image to use the widget as a marketing tool.

      To do this on a Mac click on the desktop area of your screen, this will show the “Finder” menu. A click on the go option to display the “Library” menu item and click into the library.

      Next find the Preferences > AdobeMuseLibrary folder and there you will see a list of the library items within Adobe Muse.

      Opening the folder you have created in Muse will show the individual .muse file along with a PNG file of the same name.

      By creating a new PNG file in Photoshop and naming it the same as the PNG file in this folder we can drop the new PNG file into the folder and replace the image.

      When we return to Muse and click on the Muse library item we will see the new image.

      STEP THREE:

      Now that we have our containing folder, library item image and library item we are now ready to package the file ready for distribution. 

      Adobe Muse has mad this process incredibly easy which shows great forward thinking from the development team.

      First select the folder that you wish to packages and that contains the items you want to distribute. Then in the library panel click on the “Export selected items as Muse library button.


      Muse will then take you through the very simple process of saving the .muslib file to the location of your choice.

      Your file is now ready for distribution.

      To test the file delete the library item from your Muse library. Go to the location of your newly saved .muslib file and double click it. The file will automatically install itself into Muse.

      What next? Go create some great content, create your libraries and upload to Adobe Muse Exchange.





      How to build multicoloured icons in Muse that can easily change colour.

      In this Tutorial we show you how to build colour changing multi-layered icons with Photoshop and Adobe Muse. You can use them in your own projects or distribute them with Muse Exchange.

      Watch the Video

      Read the Article

      You may have seen icon sets and tutorials that show you how graphics and icons can have their colours changed in Muse. But how is this achieved? In this tutorial we will take you step by step throughout the process and show you how to build your own multilayered icons for use in your designs or to distribute in the Adobe Muse Exchange.

      STEP ONE:

      First we need to start with a graphics file that we can separate into sections such as the pencil graphic in the image below. Its a good idea to use simple icons that have a limited number of layers and flat colours. 

      Flat icons work well see examples of flat icons here - http://ewebdesign.com/flat-design-icons-examples/

      Each layer needs to have a unique name. We have added the .png suffix to the names so that we can easily use the Photoshop Generator tool to export each of the layers. 


      (See our article - Using the new Photoshop Generator tools with Adobe Muse for more information on how to use this tool)

      Once you have exported the files open Adobe Muse for the next part of the process.

      STEP TWO:

      In Muse open the swatches pane and “Right Click” in an empty area of the swatches area. Select the “Delete All Unused Swatches” This should leave you with just the Black, White and Grey swatches. Now create four new colour swatches similar to these (or your own colours).


      Call them colour1, colour2, colour3 and colour4 respectively. We use named colour swatches so that when we copy and paste the completed icon into another file (or add it to the library) to change the colours of the icon we just adjust the named colour swatches rather then applying new colours.

      This means that if you have multiple items, text, blocks, widget elements and other multi-layered icons using the same named colours they are all updated at once by just changing the colour swatch. This gives you the ability to create themes in Muse that can easily be changed.

      STEP THREE:

      In Muse Place the icon parts onto the empty canvas so you can see all of the individual parts as below.


      Now we are doing to add some effects that will allow us to modify the colours as we wish in Muse. Select one of the elements on the page and open the effects panel.

      Switch on the “Glow” effect, choose opacity 100%, Blur 100 or 250 (depending on the size of the graphic element and switch on the “Inner glow” In the colour choice choose one pf the named colours we just created.


      Do the same for the other elements on the page that you want to be able to re-colour using the named colours throughout.

      Your parts should now be re-coloured to the named colours we created.

      STEP FOUR: 

      You can now assemble the parts to form the completed icon and group them together to create a single unit that is easy to move around the page and copy and paste.

      At this point you could add the items to the Muse library.


      STEP FIVE:

      Once you have added the item to the library. clear everything from the page.

      Go to the colour swatches and “Right Click” to choose “Swatch Options” from the menu.


      Now alter each of the new colour to a new colour using the colour selection tools and then click ok.

      Now go to the library and drag the pencil icon onto the page.


      And thats how we do it.

      Download the free resource files and give it a go yourself.

      Pencil Icon Demo Files - CLICK TO DOWNLOAD (you must have a FREE museGrid account to download this resource)




      Introducing Snap Templates and Widgets

      Snap is the NEW template framework from musegrid.com. Snap templates allow you to mix and match Snap enabled content from one template to another with ease.

      The template automagically takes on the look and feel of the template you are using making development even faster.

      So whats it all about?

      Would you believe its nearly a year since museGrid started bringing high quality Adobe Muse business templates to the very active Muse user community. We have launched 80 plus pieces of premium content and helped 100’s of beginners and business to benefit from this amazing tool.

      However, we are only just getting started. As Muse has evolved, so have our skills to produce useful, business orientated templates and widgets.

      With each launch we have added new features and innovations to our templates with the goal of making them more powerful and yet easier to use at the same time.

      Template Evolution.

      Back in the summer we started experimenting with what we coined the “Style Magician” a method of allowing you to modify content and style easily within Muse using named colour swatches, graphic, paragraph and character styles. With the introduction of layers Muse has allowed our templates to have more manageability which then allows for more complex designs.

      Now using the lessons we have learned and with the introduction of the new features of Muse CC we are able to introduce Snap. The idea is simple, design templates that are easy to modify and re-style and components that are interchangeable with other Snap enabled designs so that they automagically take on the style and look of the template they are being used with.


      For example lets say you are working, as a starting point, with Snap Template A but you want to use a different widget that did not come with the template lets call it Snap Widget B. By placing Snap widget B into Snap Template A, Snap Widget B automatically take on the styles of that template which means the user does not have to spend any time reworking the widget to match their design.

      Please note...

      This will only work with items that are Snap enabled. Look for the pink Snap corner tag on museGrid templates and widgets.

      As Muse continues to grow and become even more capable we will be adding more innovations and features to our templates. As always watch this space.


      What will you do with the new Muse 7?

      Muse 7 has been here for over a week so most regular users should have the latest version by now. In this article we look at some of the great new features and give you a free demo file for you to deconstruct and to learn how to use these great new features.


      In this article rather take a look at the individual capabilities of Adobe Muse we will see what the combined tools can achieve.

      When we first looked at producing a design that could showcase some of the new capabilities of our favourite Adobe App we knew it had to be something different and so here it is.

      The Launch - http://musegrid-launcher.businesscatalyst.com

      And the great news is you can down load this file for free.

      Muse 7 Demo - Site Launcher - CLICK TO DOWNLOAD (you must have a FREE museGrid account to download this resource)

      In this example when the user loads the page they are immediately taken to the base of the design. The code to achieve this could only be implemented by using the unique new .mucow library items that are now possible. More on those later.

      At the base of the page we have implemented a new capability to rotate widgets and retain their functionality, in this case we have used the accordion widget to create a vertical opening panel.

      As the user scrolls up the page smoke from the rocket emerges and using the scroll motion transparency fx we can fade the graphics in and out.

      Continuing to scroll up the page messages fade into view again using the new transparency scroll fx to create a smooth and engaging interactive design.

      The intention of this demo is to show you what can now be achieved and with the free file you can reverse engineer our work to learn how to add some of these great new feature for yourself.

      Lets finish with an explanation of the .mucow file and why we needed it for this site.

      The .mucow file format allows users to define their own addons to Muse that are imported into the new library panel of Muse.

      The files are written with XML and can define content to be placed in the <head> area, content <body> areas and footer (just before the closing </body>) of the site. The XML has a custom set of input elements that allow the developer of the .mucow file to create add ons with configurable items. The files can then be package from within Muse itself and distributed through the new Muse exchange.

      In this case we needed the page to completely load first and then run a small javascript to take the user to the foot of the page so our .mucow just enters the code we need into the footer area.

      That small inclusion is able to give us completely new functionality and capabilities.

      Musegrid has created a set of free add ons that are available on the new Muse Exchange which hopefully you will find useful.

      Search for “musegrid” on the exchange - http://muse.adobe.com/exchange#musegrid-com

      In conclusion the new Muse has some great new features that may appear small on the surface but as with this example open a whole new world of design invention for Muse users.

      Make sure you update today to get these great new features.

      • Transparency Scroll FX
      • Scroll interaction with image slideshows.
      • Scroll activated Edge Animate animations.
      • The new library panel.
      • The new .mucow Muse addons.
      • Fullscreen image sliders.
      • The new button composition.
      • And many more.

      Keep your eye on museGrid.com for new tutorials, examples and premium content with the new Muse.

      How to use images and PSD files effectively in Adobe Muse

      Watch the video...

      What you will learn in this Adobe Muse Tutorial

      Did you know you can use Photoshop files with Adobe Muse? How about PNG files with transparency? In this article we look at everything Adobe Muse can do with images from background images and PNG files to Photoshop files with multiple layers.

      If you wanted to know how to use images and graphics in Adobe Muse then this is the video tutorial for you.

      See more Adobe Muse Tutorials here >>



      Get ALL 139 Templates + 120 Widgets