How to Create Buttons in Photoshop and Adobe Muse

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

In this tutorial I'll show you how to create a button in Photoshop and use it, with all its various states, in an Adobe Muse project. Once we've designed and imported our Photoshop assets into Adobe Muse, we'll look at what happens if we want to update the PSD further down the line.

Watch Screencast

Download the video or subscribe to Tuts+ Web Design on Youtube.

Read the Tutorial

Welcome to this quick tip tutorial about Adobe Muse. The video above demonstrates how you can create a button in Photoshop and place it in Adobe Muse.

A button in Adobe Muse has four states. So, if you place a rectangle here in Adobe Muse you know that by default, you have four states

Normal.
Rollover (when the mouse is over your element).
Mouse Down (when you click).
And Active.

To create a button, draw a rectangle and then fill it with a color or gradient, or add an image in the background.

This is great, but sometimes you’ll want to design everything in Adobe Photoshop, and be able to import the states from there.

Using Photoshop

Open Photoshop and create a vector shape; a normal green button. Style it as you like, with rounded corners, a border and so on. I want to create four states, so I will begin by naming this first layer Button Normal.

Then I will duplicate the layer–this next layer will be my Mouse Over State.

In this case we’ll just change the color, making it lighter.

Repeat the process for all four states you need, then save the file as ButtonGreen.psd.

Moving to Adobe Muse

Now in Adobe Muse, if I want to use this design without exporting the layers into PNG files, I can directly do File > Place Photoshop Button, select ButtonGreen.psd, and then, it will parse all the layers that are available in the Photoshop file.

Assign each layer to a button state, then place it on the stage, and re-size it if needed.

Then using the Text tool, we can add a label on top of it (for example, SUBSCRIBE).

Preview

If you now Preview it in the Browser you will see that indeed, we have four states. When we Rollover, and when we click, it will change the state of the button.

Back to Photoshop

Now, what happens if I change or modify my design in Photoshop?

For example, in Photoshop let’s change the color of the Normal State. We’ll make it a Blue Button, then save the PSD file. If we now go back to Adobe Muse, there is no visible change, but if we open the *Assets Panel*, you’ll see a warning message.

It will say that the asset has changed since data was imported, so we can right-click and just say we want to Update the Asset.