Is there a solution that will turn my psd into a clickable file? Please read on for details.

Question

Hi all,I'm seriously struggling to find a solution to this. I basically need to make this image have these features:1. There are 13 catsuits and when they are clicked individually they need to be brought to the front.2. Then when you click the same catsuit a second time it needs to be hyperlinked and take you to the items product page.I think I have a reasonable understanding of how the second part plays out (using the slice tool etc.) but the first part feels like a mystery to me. I am not a Photoshop expert especially not when it comes to actions and things like that so please assume that I know nothing. I have not searched the forums as I do not know what to even search for and no one I've come across has been able to provide a solution so any help would be very much appreciated.I have attached a jpg image of how I would like the process to work - this is only an example and the same steps would need to be applied across each item. Additionally,the solution would need to work on both mobile and desktop devices. I don't mind changing software if needs be.Many thanks

Nancy OShea · Accepted Answer

There is no magic button for transforming static PSD into an interactive and animated web page.

For animations, look at Animate CC. But don't export your project to Flash as flash is not well supported on the web. Mobile devices can't see Flash. And most desktops don't have the Flash Player plugins. Instead, export to SVG or HTML5 canvas.

As for building your web page, use web authoring software -- Dreamweaver or Muse. And then embed your Animate CC project into your web page.

Nancy O.

Rob Hecker2 · Answer

I think the best approach for this would be to do it in Adobe Illustrator and export the graphic in SVG format. It looks like your image would translate well to the vector format.

As an SVG, each catsuit could more easily be a selectable object than if it were done with Photoshop slices. With SVG, each catsuit would be on a different layer and clicking on one could move it to the top of the stack, as in your illustration.

You describe clicking on a catsuit once to bring it forward, and a second time to open the product page. I think that is going to require some javascript on the click event. You logic might be something like: if object is on top, go to product page else move object to top.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded