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.
Conclusion
This demonstrates that working with assets between Adobe Photoshop and Adobe Muse is easier than ever. I hope you enjoyed this quick tip!
More Adobe Muse
For a more detailed look at Adobe Muse take a look at my free course Designing and Publishing Websites With Adobe Muse.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post