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.
When you work with graphics in Muse, it is easy to resize them to fit your design. However if you're not careful, you could end up with images that look pixelated on your web site if you end up scaling them too large. In this movie we'll take a look at how to work with the resolution of your images. When you work in print, most people think about 300 dots per inch for the resolution, and for the web they think 72 dots per inch. But in reality, the dpi doesn't really matter; it's the total number of pixels that matter. In fact, you can't even find out the dpi inside Muse.
We're going to go to the About Us page. And if I select this image right here and we look inside our Assets panel, we'll see the about-hero has a strange icon next to it. That icon is telling me that this picture is too low resolution. In fact, when mouse over it, it will tell me some information. We can see that the original asset size was 585 x 390. It doesn't say anything about dots per inch; those are just the total number of pixels. The next option is the Resampled Asset Size.
It doesn't seem like there's a difference between Original Asset Size and Resampled Asset Size, but we'll be talking about that in a moment. The next option is Page Item Size, which is 646 x 430. That is telling me how large the picture is being used on the actual page. When you use the image larger than it exists on your hard drive, you'll get that little Rubik's Cube warning on the right. In fact, the status will tell you exactly what the problem is. And in this case, the Asset is being upsampled and may look pixelated.
And it tells you that you can fix it by either making it smaller or link to a larger asset. Now unfortunately, I don't have a larger asset, so my only course of action is to make it smaller. So I'm just going to click drag and resize this and as soon as I get it down to 100% or less, that warning will disappear. and now it looks normal. If you end up working with high- resolution graphics in Muse, there is another workaround that you should be aware of. I'm going to close the About Us Page and open up the Asset Size Page. On this blank page we're going to go to File > Place and we're going to go the Assets folder and find large-image.
Next, we'll click and place this image at 100%. Now this is a very large image and I'm just going to press Command+Minus or Ctrl+Minus to zoom out a little bit. And we can see just how large this is being used in our layout. When I mouse over the image, it'll tell us that the Original Asset Size was 3890 x 4942, but the Resampled Asset Size is 1612 x 2048. What that means is Muse won't import the image at its full resolution; instead it has a hard limit of 2048 x 2048 for the image.
And right now the Page Item Size is placed at that hard limit. But if we decide to make this image larger, we'll see that we'll get the warning telling us that the image may appear pixelated. But there's a workaround that we can do. When mouse over the image, it tells me that I can load additional data from the asset. So all I have to do is right-click my mouse and choose Import Larger Size. When I do that the warning disappears, and if I mouse over the image, we'll see that my Resampled Asset Size is now the same as the Page Item Size.
This gives me the flexibility to use larger assets if necessary. However if you don't use large assets, you really don't have to worry about this workaround. You can usually get away with increasing the size of your images to a small amount above 100%. But be careful not to resize your images too much, or they may appear pixelated. In the end, be sure to preview your site in a browser and see what it looks like; let your eyes be the final judge.
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.