David Asch - June 21 2016
Brand new new tools, scroll effects in multiple breakpoints, improvements to in-browser editing and much more!
Read on to find out what's new in the latest update to Adobe Muse.
Don’t be a square! Muse now has the Ellipse tool to add variety to our page designs. This behaves in the same way as the rectangle tool: click and drag to add to the page. Hold the Shift key to constrain it to a circle. Once created, the ellipse can be filled in the same way as the rectangle tool. Images will be masked to only be visible within the ellipse.
Note: the ellipse / circle will not be visible inside the frame if you have the option to hide frame edges set (View menu).
Although this resembles the existing rectangle (and now ellipse) tools, the Image Frame tool is something new. Primarily, its function is to act as a placeholder for image content. Place a rectangular or elliptical image frame on the page, the frame displays in wireframe style with a cross spanning the four corners.
When it comes to adding the live image content, simply use the Place command to load your image asset. Hover over the image frame and drop it in! The image will be automatically cropped to fit the size of the frame. This is a great timesaver and makes template creation far easier for the end user.
It's also possible to create placeholder frames from existing image content by double-clicking the frame and pressing delete or backspace.
Unlike their image frame counterparts, in the previous version of Muse, there was only the option have responsive width applied to a rectangle. This meant the background image would be cropped when the browser was resized. Muse 2015.2 allows rectangles and ellipses to be set to responsive width and height. Now when the browser is resized, the image ratio is maintained.
Along with rectangles, both the Vimeo and Youtube widgets are now responsive in width and height. The video content scales up proportionately with the browser width so there are no longer ugly black borders and odd behaviour on the title and playhead objects.
Sometimes, it's not the major updates to an application that have the most impact. For me, the Vertical Move Handle is possibly my favourite addition to Adobe Muse 2015.2 and has already saved me a shed load of time!
Previously, to insert additional page content, our workflow would likely be to zoom the canvas right out, drag to select everything you needed to move, then move it up or down the page canvas. With the Vertical Move Handle, all we need to do is select the top-most page item in the section we want to move and the handle appears on the left of the page. Simply click and drag the handle up or down and all the content parallel and below will move with it. If you want to nudge the items with the keyboard, simply double-click the handle's arrowhead to select everything in the section below instead.
Up to now, if we wanted to add Illustrator vector files to a design, we would first need to open them in Illustrator, then copy and paste into Muse or convert the files to SVGs and place them.
Muse now supports direct placing of Illustrator (.AI) files. Like regular images, placed vectors appear in the Assets panel and can be updated and relinked if the external file changes. The assets are converted to SVG files on-the-fly when the site is published.
Muse’s drag and drop workflow makes it easy to add images and other files to a site from anywhere on the computer. This also makes it really easy to forget where an asset came from and subsequently lose the file by renaming, moving or worse still, deleting the original, resulting in the 'red question mark of doom’ in the assets panel. Collect Assets does exactly what it says on the tin: it consolidates every file used in the site project, including files used in widgets and those selected using the Add Files for Upload command, and places them in a single folder of our choice.
To do this, click the suitcase icon at the base of the Assets panel and select your file location. Once it’s finished, it will pop up a stats window telling you how many files it’s added, and also how many are still missing; it won’t retrieve already missing assets, that’s still up to us. If used regularly, it should help to reduce the instances of disappearing files. It’s also a good way of clearing the fluff from our existing assets folder, as it will only retrieve the assets that are actually in use.
The CC libraries were added in the last release of Adobe Muse and make workflow better than ever by sharing assets to all your computers and enabling collaborative working.
New for this release is an additional set of commands for applying CC library colours. The page and browser colour, as well as text and stroke colour for page elements can be applied directly from a right-click on a CC library colour swatch. We can add custom-named library colours to Muse’s swatch panel and also add multiple swatches by multi-selecting and right-clicking library colours.
Scroll effects can now be applied to multiple breakpoints on the same page, as long as they are set to fixed width. This removes the previous restriction of having to keep to a single width site and allows the effects to be applied to set page sizes, full screen desktop, for example and creates a much smoother workflow for creating adaptive sites. We’re a little way off full fluid width support but it’s a step in the right direction.
Adjusting the minimum page width was previously only possible using the Breakpoint, Site and Page properties dialogs. Muse 2015.2 now gives us the ability to adjust the width interactively by hovering over the minimum width marker in the Breakpoint Bar until the cursor becomes a double arrowhead. Click and drag to change the setting the same as you would with a standard breakpoint.
In-browser editing improves with every release. The latest version sees some great new features and enhancements to existing ones:
The new welcome / login screen
Click and hold to display all editable regions
Switch between devices and breakpoints
Add and replace text directly on the page
Add links interactively by highlighting text
The new image replacement panel
Edit slideshow content interactively
There’s a new option in the Plan View to display the site in a vertical orientation. This is really useful if the site has a complex page structure. When activated, using the icon in the top left of the screen, the master page view becomes a fixed vertical panel on the left, with the page structure in a scrolling panel to the right. The size of the thumbnails can still be changed and we can choose to show or hide the thumbnail images, which helps to boost performance when displaying large sites.
Muse now launches with a Start Screen, in line with the other CC applications. This gives us instant access to our recent projects, which can be displayed as thumbnails or a text list. We can also open files and create new sites from here. There’s also easy access to Adobe Stock and Muse tutorial content.
The Start Screen can be disabled in preferences if we want Muse to launch with the blank application window.
There is now an option to display fallback (system) fonts on the page instead of web fonts while the page is still loading; the web fonts are substituted once they have been downloaded, instead of holding the page until they can be displayed. You can also choose to ‘minify’ (compact) CSS scripts when they are published (enabled by default). Both options help to decrease page load times and can be found under the Advanced tab of the Site Properties tab.
Sticky Footer with CSS
That’s the major features in this release covered. Check back regularly for more news!
Until the next time, take care and happy Musing!