This is really great! I love how the hover states outline and the completed banner comes in. Very clean, straightforward and elegant. I also love the use of layers in the module.
Sorry all, I did not realize this page existed and thank you for the comments.
Interesting how google is now requiring a log-in before viewing these, never used to be the case.
The photos were all from ThinkStock (the unfortunate reason why I did not openly share this file) and edited in Photoshop to create the blue overlay and subject isolation.
Any icons in the sample, I created within Illustrator.
Trina did a revamp using the exact same design and structure of this file as a template to use for a different subject matter here:
https://community.articulate.com/articles/from-a-medical-themed-template-to-a-workpace-safety-themed-template-in-5-steps
Which also has a download in the hub here:
https://community.articulate.com/download/storyline-2-industrial-workplace-saf... Expand
Sorry all, I did not realize this page existed and thank you for the comments.
Interesting how google is now requiring a log-in before viewing these, never used to be the case.
The photos were all from ThinkStock (the unfortunate reason why I did not openly share this file) and edited in Photoshop to create the blue overlay and subject isolation.
Any icons in the sample, I created within Illustrator.
Trina did a revamp using the exact same design and structure of this file as a template to use for a different subject matter here:
https://community.articulate.com/articles/from-a-medical-themed-template-to-a-workpace-safety-themed-template-in-5-steps
Which also has a download in the hub here:
https://community.articulate.com/download/storyline-2-industrial-workplace-safety-template
If I get some spare time, I may go through and redo it with some free CC images I can find and post a shareable version.
I created the "How to Use" overlay as a layer on the master that would appear when a variable was triggered (True/False) via a trigger on the content screens.
I would love to know what settings that you have used for the size of the project, the browser settings for resizing and how you did the player....all very nice.
The project Story Size is 1000 x 562 with "scale to fill browser window" selected for the player size in the browser settings. As for the player, all of it was hidden and removed with onscreen navigation built on the slides.
Thanks for the info! This size looks great. I have been bumping up the size as well over the last few months, but went with 1280 x 720 just because this is a standard 16 x 9 video resolution. Your example looks great on a large screen too. I might consider it in the future. Just curious how did you arrive at the particular size?
Been awhile so hard to solidly say, but I believe I was playing with some tablet focused designs initially and decided on that particular size because of the issues with visible browser components (like safari's navigation bar and url bar) that cannot be removed. Therefore, the 1000 x 562 satisfied the fact that the output wasn't reaching a true 16:9 resolution.
I really like how once you pass the title slide, the feel is like a website. It has a very open feel. Clever! I'm always a fan of hiding the standard player elements and creating your own. This takes it even further--there's no trace of same ol' course elements that are too predictable. I'm assuming there was still space around the course, which you made white to match the slide color background. I also like how the text boxes had different border colors on the first content page because the borders match the icons. Nicely done!
Hi all,
I'd love to see this piece but I'm displayed a white page when clicking on the link
http://articulate-heroes-authoring.s3.amazonaws.com/Examples/Storyline/SL2/Surgical%20Protocols-Stoner/story_html5.html
Perhaps there is a new url to see the example?
Many thanks
31 Comments
Sorry all, I did not realize this page existed and thank you for the comments. Interesting how google is now requiring a log-in before viewing these, never used to be the case. The photos were all from ThinkStock (the unfortunate reason why I did not openly share this file) and edited in Photoshop to create the blue overlay and subject isolation. Any icons in the sample, I created within Illustrator. Trina did a revamp using the exact same design and structure of this file as a template to use for a different subject matter here: https://community.articulate.com/articles/from-a-medical-themed-template-to-a-workpace-safety-themed-template-in-5-steps Which also has a download in the hub here: https://community.articulate.com/download/storyline-2-industrial-workplace-saf... Expand