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.
If you plan on creating buttons with multiple states in Muse, it can be tedious to get them working just right. Rather than spend your time in Muse tweaking the appearance of each state, is possible to use properly prepared Photoshop files to streamline your button-making experience. Let's go to the homepage and on the homepage, if I select Upcoming Events, you'll notice that I have the states, Normal, Rollover, and Mouse Down. While I did create this inside Muse, I could replicate this experience inside Photoshop if necessary.
In fact, sometimes it's easier to do this in Photoshop, because you have access to more graphic effects. Let's jump over to Photoshop and take a look at a file. I have psd_button open right now, and you will notice that it has four different layers: Normal, Over, Down, and Active. Your layers don't have to have these exact names, but it makes it easier to manage. Now you notice, as I turn each layer off, I will be able to see the underlying layer. For now, I am going to leave all of them on. Let's go back into Muse and try placing this file.
Back inside Muse, if I try to place this the normal way, by going to File > Place or Command or Ctrl+D, I am going to browse to that particular file, we will grab psd_button, and in the Image Import Options, I can bring a composite of everything or just a particular layer. Although, once it's in here, each state is exactly the same. What I want to do is map each layer in Photoshop to a particular state inside Muse.
So placing a PSD file normally isn't the route that we want to go. So I am going to delete this and go back to the File menu. This time instead of going to File > Place, I am going to go to File > Place Photoshop Button. I could also use the keyboard shortcut Command+B on the Mac, or Ctrl+B on the PC. You'll notice as I am looking for this image, everything is grayed out except for PSD files. That's because this technique will only work with PSD files. I will select psd_button and press Select.
This time in the Photoshop Import Options dialog, it looks a little different. I have four different states to choose from, the Normal, Rollover, Down, and Active state, and I can choose which Photoshop layer I want to appear in that particular state. Because I had all four layers set up in the correct order in Photoshop, I really don't have to change anything here, but if I wanted to, I could override their appearance in this dialog box. But for now, I'm going to keep it the way that it is. We'll press OK and with my loaded cursor, I will click and put it on the page.
After lining it up, you will notice that in my States panel all the states are properly mapped. We have Normal, Rollover, Mouse Down, and Active. Let's go into Preview mode and make sure it works. Excellent! Back in Design mode, there are a couple of other changes I want you to be aware of. If I change my mind and I would like to use a different layer from the PSD file for this particular state, there really is no way around it, outside of deleting this image and then reimporting it again.
However, there are few other changes that I can do. One operation that you can do is go to the Assets panel. In the Assets panel, browse and find that image. I will open up the Asset panel so you can see this a little larger. You will notice that the PSD button is linked four times, one for each state. If I wanted to, I could re-link one of these images to a different image. So let's try this. I am going to select PSD button for the Over state, right-click, and choose Relink.
Now I am going to choose bird-watching. You will notice that that state's image was swapped out. If I go back into Preview mode, you'll notice that the rollover is working as expected. What's happening here is the background image of the frame is being swapped out from the PSD button to the image of the bird. Even though you will be using PSD files, you won't end up using them in your final export; in fact, Muse is smart enough to automatically convert your placed PSD files into JPEGs as needed.
However, it is still a good idea to make your PSD buttons 72dpi and crop them to the smallest size possible.
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.