50 US States - transparent PNGs in two colors and source .ai files
Dec 08, 2016
Over in the Storyline forum there was a request for images of all 50 states to build an interactive map.
Articulate 360 has a new US Map layout slide, but if you are still on Storyline 1 or 2, you can't use that template.
A few years back I built and interactive map for a project. There was a bit of an effort building it but it is now a template and I've re-used it several times.
The biggest time investment is the State images. And, if you want a hover state, selected state, etc. you need 50 images for each object state!
Attached:
- The map image shown below
- 50 state images in green
- 50 state images in dark green
- Four Adobe Illustrator files for versions: CS4, CS5, CS6, and CC
If you need different colors or another shade of green, simply change the fill color of all states. In the Layers panel, hide all states. Then reveal one at a time and export. Tedious, yes but just think of all the different looks you can make!
I started writing up a tutorial on how to build the interaction. When I get it done, I'll update this post.
Hope this helps many of you that need map images.
12 Replies
Nice Kevin, thanks!
This is one of those interactions that you don't need very often, but when you need it, you really need it.
Awesome! While I could have used these a few projects ago, I know I'll need something like this again at some point.
Well said. I think I've built maybe 3-4 interactive maps over the years. But when the request comes in, it's a LOT of work prepping all the assets.
Now, it's just a matter of changing colors and re-exporting as needed. Hope you'll find these useful.
Yep, you never know what you don't know about graphic assets until a project lands on your desk.
I'm a confessed digital hoarder, but I see this a digital asset staple for anyone's library
Thanks for sharing these so generously, Kevin. A really useful resource!
Saw this come through another feed earlier in the week from WebDesignDev. Fits the subject of this thread:
20 FREE World Map Templates
This is awesome.
Kevin, thanks for the world too!
Hi Kevin! Thanks so much for sharing this useful file with the community. I've added it to the downloads hub here.
Thanks Kelly!
Man, this would have been helpful back when I had to create this in Illustrator to make it interactive in Storyline a year ago...Glad it's available now though!
Sorry I missed you needing these on your last project, but glad to hear you've got the assets for the next time! Enjoy!
I teach a US Citizenship class Monday evenings. This will be so helpful - thank you!
This discussion is closed. You can start a new discussion or contact Articulate Support.