Alignment and Distribution Options in Adobe Muse CC 2014
In this post we will cover align and distribution options in Adobe Muse CC 2014 which is the current version. The options available from Align panel are very important and great helpers when designing sites in Muse. I must mention that alignment and distribution options available in Muse are very similar to what we have in InDesign and Illustrator. In fact, Align panels in Illustrator and Muse has exact same icons and options while in InDesign is available one more additional: Use Spacing option under Distribute group.
Why to use Align panel in MuseIf you are wondering why in the World to use Align panel the answer is: because you want objects aligned to each other and you want object to have equal spacing, don't you? Well, Align panel makes things extremely easy when it comes to alignment and distribution, although it is not the only option available to have objects aligned and properly distributed.
Alignment and distribution options in MuseThe first thing you want to know is what you can align and distribute. Objects and group of objects can be aligned and distributed. Combination of selected individual objects (text frame, image...) and grouped objects can be aligned and distributed too. Now what are objects? Basically anything that you have on your page in Muse like: text frame, image, image frame, widget (composition). What are groups of objects or grouped objects? I am referring to groups of objects when you select two or more objects (or groups) and use Object > Group option.
The second thing I want to mention are Smart Guides which you can turn on/off from View > Smart Guides. When turned on, this option will indicate when objects are aligned and show you on screen when you have equal spacing while moving selected objects around.
|With Smart Guides turned on you will get onscreen feedback about alignment and spacing while moving and re-arranging objects.|
The third thing to mention is that you can align two or more objects while distribution icons work, not surprisingly, with three or more objects selected. Align options can actually work with only one object selected while Distribution options can work with two objects selected, but only when Align to: Align to Content Area option is chosen. In addition, you can distribute spacing between 2 or more objects using Distribute Spacing option which requires a key object defined (I will explain later how to define key object).
The fourth thing you should know is that you can align/distribute objects to:
- Selection (Align to Selection),
- Content area (Align to Content Area)
- Key object (Align to Key Object)
Options above are available in the Align panel from Align to: drop-down list. By default, Align to Selection is active and you can change to Align to Content Area with one or more objects selected. To align to the key object (or to use Distribute Spacing) you must have at least two objects selected.
Distribute Spacing you can use with two or more objects selected. Usually you will use this option with three or more objects selected because it can work to distribute spacing with two objects selected only when Align to Content Area is chose what is not extremely useful. To be able to type exact spacing in the text field you must have Align to Key Object option chosen from Align to: drop-down list and at least two objects selected. You can specify exact number of pixels you want between objects: horizontally and vertically.
|To distribute (at least two objects must be selected) with exact number of pixels you must choose Align to: Align to Key Object, to type number of pixels in the text field and to click on one of two Distribute Spacing icons.|
Lastly, you can display fly-out Align panel from the Options bar by clicking on the Align link (something must be selected to see Align link in the Options bar) or from View > Align to display Align panel in palette on the right side of screen. Align panel displayed on palette can be undocked and moved around.
How to define a Key ObjectOption Align to Key Object is available when two or more objects are selected. When you choose Align to Key Object from Align to: drop-down list, this means that the defined key object will be locked and whatever option you choose (Align options or Distribute Spacing) will use its position to calculate and perform alignment or distribution.
With two or more objects selected, go to Align panel and choose: Align to Key Object from Align to: drop-down list. By default, the first object which was selected will be defined (thick stroke or dashed line) as a key object. You can change this by clicking on any of selected objects using the Selection Tool. Simple as that when working with individual objects. When you want to change key object and define Group as a key object, then things can be tricky. The trick is to not click anywhere in the group, but to click on the edge (dashed line). If you click inside the group it will deselect everything and select clicked object inside group (you can read from tooltip below cursor which object will be selected while hovering over with mouse).
|To redefine key object when working with Groups, navigate mouse over edge of group which you want to set as key object and click once.|
TipsHover with mouse over icons in the Align panel to see tooltip which will explain you what that particular option or icon can do for you.
Override default behavior
Those are pretty smart tools, but anyway they will need some times to help them. When you have multiple objects selected, Align top edges option will align all selected objects to top edge of the most object (Align to: Align to Selection). If that's not what you want, then use Align to Key Object option.
Set and control position of key objects
Before using alignment and distribution options ensure that top most, bottom most, object on the left or right side are at exact position that you want them to be (one of reasons is described in above paragraph). You can use Transform panel (Transform link in Options bar or Window > Transform) to check the X and Y coordinates.
Use everything that can help you
Use everything that can help you, speed up your work and make life easier. I already have mentioned Smart Guides and Transform panel, but there are and regular good, old guides, Grid Overlay (View > Show/Hide Grid Overlay) and options to lock objects which you do not plan to align and distribute. Use Library panel to save the things which you plan to use over and over again or simply download libraries and widgets created by other Muse users. Do not miss to import PSD mockup if you have it because it can save you a great amount of time. After importing PSD file lock it and lower the Opacity (I did that for this tutorial). Read more from here.
It is easy to learn Muse which is probably everything that you will ever need
The last tip is to learn available tools and options in Muse because there aren't many of them (enough indeed). Knowing the tools and options will save you time and make life much, much easier. Muse has basically everything that you will ever need to create personal site, online portfolio, single page portfolio, landing page, small company/startup site or simply online presentation. Personally, I have created online store using Muse. And its easy as pie. And it works! I have a much better Alexa ranking (was 4, 300 000 now is 551, 000) and page speed is fast (according to Google Chrome widget Alexa Traffic Rank). Google's PageSpeed Insights shows me pretty much same results for site created by Muse and this blog which is using one of default Blogger templates created by Google. What else to expect? On top of all, Adobe is improving this product and adding features with each new release. Viva Muse!
Product used in this tutorial:
Adobe Muse CC 2014
Adobe Muse Help / Using Align Panel to arrange objects