Harnessing the power of Spline

I write a blog that I publish to my personal site, and a big part of it is making the cover image. I love making these thumbnail graphics—it really is an art form all about siphoning the core concept from the content and translating it into a singular visual representation.

Largely inspired by Framer and their 3D imagery they create for each new feature release (such cool visuals!), I wanted to step up my cover image game and integrate some 3D as well. Spline just so happens to be the perfect tool for the job.

Spline has been a fun platform to learn—3D optimized for web is brilliant! However, more traditional functionality shouldn't be overlooked. Making a model and exporting it is still quite the viable option. The model I create for the cover image is also interactive and easily embedded!

1. Select the topic for the blog. I ended up writing about YouTube removing the main way to add a video to queue when casting or using the mobile app as a remote for the TV app. You can read the full post here!

2. Recreate the add-to-queue icon in Illustrator and exported it as and SVG

3. Import the SVG into Spline and extrude to turn it into a 3D object

4. Add bevels to the edges & layer matcaps to create a semi-matte metallic look

5. Add & position lighting and set angle of the model

6. Export as a PNG w/ transparent background

7. Import into Photoshop to touch up and add effects, background & text

8. Export as JPEG/PNG to add to Framer CMS item

I moved around the lighting and camera to get a few different angles and exported them to have options. Here are some of them!