Share This Article
We were approached by Avenged Sevenfold guitarist Synyster Gates to create an immersive shop where we could sell his merch, guitar picks, and new, limited edition (D)eath of a Poet guitar. The shop was meant to feel like an art installation, using Syn’s own studio as the inspiration for a space where users can see items spread out throughout the room, click on them, and be taken to a shop page to complete their purchase.
We wanted a room that felt grungy and lived-in, something that was interesting to look at and not too perfect, the goal being that it looked like a studio that a guitarist in a metal band would use. We wanted to use Syn’s own NFTs as art displayed throughout the room, as well as highlight his other projects like his collaboration with Ernie Ball for guitar picks or the Synner community and guitar school. When determining tone and the projects and items to highlight, we found that we wanted to explore two solutions: a traditional Blender 3D modeled method and an AI-generated method.
Creating the room
To create the room traditionally, we used Blender and designed the assets by hand, generating custom assets for all components from the soundboard, to the clothing wardrobe, to the guitar. The guitar we modeled is a near replica of the limited edition (D)eath of a Poet guitar, matching the pickups and body style, paint splatter, and custom Syn and deathbat inlays.
When we considered an AI solution, our process was to create a Stable Diffusion server and generate several options for rooms. From there, we took the best output and used that as a boilerplate for photo manipulation. We integrated items using Adobe’s AI tool and added the blender assets like the guitar, wardrobe, and soundboard before adjusting the coloration and lighting. There were a few limitations to using Adobe’s AI tool throughout this process, like drums, for example, as the cymbals and drums themselves had rough edges and looked warped and unnatural in the space. We were able to solve this issue by replacing assets as needed with art created in Blender and adjusting assets in Photoshop.
Adding animation
Once we created the room and assets, we wanted to animate the (D)eath of a Poet guitar as it’s the focal point of the room. We handled this by separating the asset from the background image and creating a spin animation in Adobe After Effects.
The tech
Once the art had been created an finalized, we created a single page application and overwrote the default behavior of a webpage so that the background image would take up the entire page and always be a horizontal 16/9 layout. We also overlaid gifs on TV and laptop screens and skewed them to match the angle of the assets.
We also wanted to add pulsating dots to draw attention to the items for sale within the room and optimized all assets and code to get the best performance on all devices. Once the single page application was finished, we modified the page so that it could run inside Shopify using their liquid templating system.
Wrapping up
The result was a polished, accessible, and performant shop experience for Synyster Gates fanbase and within the first 2 hours after launch, 10 guitars of the 30 limited guitars were sold and sales of shop items increased by 83% 2 weeks after launching the new shop page. As the shop grows and the items change, we’ve created this page to be fully customizable so that we can easily switch out assets, replace art, change colors, and more. If you’d like to check out the Synner shop for yourself, take a look here!
