Click on any phrase to play the video from that point.
[Learn - The How To series from Adobe]
[lynda.com presents]
[the following is an excerpt from the training tutorial at lynda.com - Muse Essential Training with James Fritz]
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,
it is possible to use properly prepared Photoshop files
to streamline your button-making experience.
Let's go to the home page, and on the home page 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'll notice that it has 4 different layers:
Normal, Over, Down, and Active.
Your layers don't have to have these exact names, but it makes it easier to manage.
You'll notice as I turn each layer off, I'll be able to see the underlying layer.
For now, I'm 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 Control D, I'm going to browse to that particular file.
We'll 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.
I'm going to delete this and go back to the File menu.
This time instead of going to File, Place, I'm going to go to File, Place Photoshop Button.
I could also use the keyboard shortcut Command B on the Mac
or Control B on the PC.
You'll notice as I'm looking for this image, everything is grayed out except for PSD files.
That's because this technique will only work with PSD files.
I'll select psd_button and press Select.
This time in the Photoshop Import Options dialog,
it looks a little different.
I have 4 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 4 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.
I'll press OK, and with my loaded cursor I'll click and put it on the page.
After lining it up, you'll notice that in my States panel all of 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's a couple other changes I want you to be aware of.
If I change my mind and I'd 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 re-importing it again.
However, there are a 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'll open up the Assets panel so you can see this a little larger.
You'll notice that the PSD button is linked 4 times--1 for each state.
If I wanted to, I could relink one of these images to a different image.
So let's try this. I'm going to select psd_button for the overstate,
right click, and choose Relink.
Now I'm going to choose bird-watching.
You'll 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 place PSD files
into JPEGs as needed.
However, it is still a good idea to make your PSD buttons 72 dpi
and crop them to the smallest size possible.
