Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
One of the most important parts of design is the relationship between elements on the page. If you haphazardly throw objects on the page they may end up being in an undesirable location. Thankfully, Muse has a way to quickly align and distribute objects to help you maintain a structure or grid within your design. Let's go to the Align page and before we start to align these objects, we want to make sure that our Smart Guides are turned on. We can check this by going to the View menu and seeing the checkbox next to Smart Guides. They're also available in this View Settings widget.
Make sure the Smart Guides checkbox is there because if it isn't, they will not be active. I'm going to collapse these tools to put them out of view so we have a larger area to work with. And what I want to do is align these three objects next to each other. Now the first object I'm going to put up here and as I drag the second object and put it next to it, you'll start to see these blue lines appear. These blue lines are telling me that this object is snapping to alignment with the object next to it. Since these objects are the same size, the top, middle and bottom are all lined up the same.
Next I'm going to grab this one and do the same thing and we can see now all three objects are aligned the same. But looking at these three objects, we can see that the spacing between them is different. On the left-hand side, the space between the left and the center image is different than the space between the center image and the right image. If I want the spacing to be the same, I'm going to grab the right object and slowly move it to the left. As I move this to the left, eventually we'll see a light blue color show up. This is telling me that the space is exactly the same, and in this case they're both 53 pixels.
We can also align objects to the page itself. If I grab this object on the left, as I move it around you'll see some red lines appear. When I move this to left, it's snapping to the left side of the column in the horizontal center of the page. As I move it to the right, eventually we'll get it centered within the column. So pay attention to the color to see what you're actually snapping to. If I lock an object by going to Object > Lock, Smart Guides will still function. So as you can see when I move this left image, it will still snap in alignment to the image in the center, even though it's locked.
If I move this object to the top of the page, you'll see it's not snapping to anything that's on the Master page. Master page items are ignored when it comes to Smart Guides. Let's visit another page to see Smart Guides in action. We're going to go back to the Plan view and open up Collections. On the Collections page, I'm going to grab this top image and hold down my Command or Ctrl key to change the cropping. As I do this, when it gets to be the same size as the image below, it'll snap to alignment. Next, I'm going to click and drag to grab these two objects and just move it to the left.
As I do this with the others, eventually it will snap into position and then I can grab the bottom to bring it up to have that be the exact same height. Sometimes when you're moving objects around, Smart Guides can get in the way. So we can turn them off by going to View > Smart Guides. Now as I move it around, we can freely move it without having to worry about anything snapping. Using Smart Guides is a great way to help you quickly align objects on your page. However, since Smart Guides are going solely off the edge of the frame, there may be times that you want to align them visually instead of mathematically.
For this type of scenario it's a good idea to turn off Smart Guides temporarily.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.