Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Over the course of a design you'll probably find yourself needing to adjust the various assets in your layout. It might be placed graphics, frames or even text. All of these objects can be modified in a variety of ways using the Transform panel or other methods. If we're going to be transforming objects, we should be using the Transform panel. If you don't have it open, you can go to Window > Transform and we'll see it located right here. I'm going to collapse the Swatches panel just make this a little more obvious. If I select an object on the page, like this photograph, we'll see some information like the X, Y coordinates, width and height, and even rotation.
Depending on the resolution of your screen, you might also see this information in your Control Bar at the top of your screen. Let's talk about each of these fields in detail. With this object selected, the X and Y coordinates are referring to where it is located on the page. X is how far it is moving to the right; Y is how far it's moving down. The 00 point is in the upper left-hand corner. So if I grab this photo and put it in the upper left-hand corner, we'll see the X and Y coordinates are 0 and 0. As I use my Arrow keys to move it, we'll see the numbers change.
If I want to place it at a specific spot on the page, I can either use my mouse or arrow keys to move it, or I can type in those coordinates myself. For example, if I know that this photograph is on the X axis at 22, I can just grab this and put it 22 as well, so I know they're lined up. And if I know that this gray box is at the Y of 245, I can select the same photo and put the Y at the same number. This way I know they're perfectly lined up. The width and height will tell me the dimensions of the frame that I currently have selected.
If I change this, it won't resize the image, it will change the frame itself. So if I make this smaller for the width to 200, we'll be cropping more of the image. If I make it larger, we'll see more of the image. The same is also true with the height. In fact, this is the only way to actually stretch the content of a frame. Normally, if you go in and double-click to select the content and you click and drag to resize, it's always going to be proportional. There's no way to stretch this, but if you really want to stretch it for a reason, you can go in here and change the dimensions, and that will stretch the photo, or if I go the other direction to 400, we'll see it will become distorted.
This really isn't recommended, but it is a workaround if that's what you're trying to accomplish. I'm going to press Command+Z or Ctrl+Z on the PC, to undo this back to its original size. If you want to rotate your object there are a few ways to do that too. If I select this image and I go to the corner, we'll see the Rotate icon. When I click and drag, I can rotate it around the center to whatever I like. We'll see in the Transform panel it will tell me the degree that it's rotated to. If I want to put in something specific, I can just type that in. And in this case I want it to go back to Normal, so I'll put in 0.
We can also use math in these fields. If I know that I want to change the width or the height by a certain amount, I can go in here and type divided by two (/2) to cut it in half. If I want to add some space to this, I can do +45. I can even subtract, -2, and even multiply by using the asterisk (*) symbol. If I'm going to move the object around the page, I can of course drag and drop. But if I want to get one more of it, I could copy and paste, but if I hold down my Option or my Alt key, I can drag a copy when you see the double arrow.
If I select an image and cut it to the clipboard and then paste, it will be put in the center of the page. So if you have something copied and you want it to go back to the exact same location it came from, go to Edit > Paste in Place. Now it will go back to the exact same X, Y coordinates. This is a great way to move content between pages on your web site. Be sure to take your time when you're transforming your objects, if you work too hastily, you might make a change that you regret and you'll have to end up doing a bunch of undos to get back to your starting point.
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.