- Articulate Storyline 360
- Adobe Firefly
- Adobe Photoshop 2024
Some weekends are made for relaxing, and this weekend I very much enjoyed having the time to work on this experiment which I have had in mind for a while now.
The depth of field effect was created using the CSS Blur filter function (https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) which dynamically updates its value based on the position of the user slider variable. Depending on whether the focus is more on the foreground than the background, the blur values will overlap to ensure that one of the layers always remains in focus.
With regards to the artwork, I am personally a huge fan of Studio Ghibli animated films which was my main source of inspiration for the overall scene. The capabilities of Adobe’s new Firefly AI image generation technology continues to amaze me, and now that it is out of beta and available generally across the standard app I am excited to see what other developers are able to create with it.