Welcome to Axure Community Site Sign in | Join | Help
in Search

Transparent Images

Last post 10-03-2008, 3:30 PM by scottyoung. 0 replies.
Sort Posts: Previous Next
  •  10-03-2008, 3:30 PM 3446

    Transparent Images

    I just figured something out that I thought was worth sharing.  I'm sure it's nothing new to some people, but if it helps at least one other person, I'm good.

    I was trying to create flyover pop up's in Axure (dynamic panel set to hidden by default and shown/hidden by the OnMouseEnter/OnMouseOut event).  But I wanted the pop up's to be balloon shaped and I couldn't get the stencil I'd created in Visio into Axure the way I wanted it.  Every time I copied the stencil over, it appeared in Axure as a rectangular image where the area outside the stencil borders consisted of a solid white background.  This meant that when the dynamic panel was shown, the pop up showed up but so did all the white space around the pop up.

    I poked around online and realized that I needed to make the area outside of the stencil transparent.  Luckily, it turned out to be exceedingly simple.  Using Photoshop Elements 4.0 (I think it cost me around $50), I opened a new file and set the "Background Contents" to Transparent.  Then I copied the Visio stencil, pasted it into Photoshop and saved the whole thing as a .PNG file (I've heard it will work with .GIF files too but not with .JPG's).  I went into Axure and edited the dynamic panel state that contained my pop up and using an image widget imported the .PNG file.

    Transparency and all came with it and I now have a balloon shaped pop up that literally took a few seconds to create.  Hope this helps.

View as RSS news feed in XML