An above-the-fold generative dino scene inspired by Studio Vor's interactive art piece websites. ChatGPT for the dino scene art script, Midjourney for the base scene, Photoshop's generative fill for customising it and Figma for the web-text and button.
I lost track of time working on this gorgeous art piece. I love it so much:
I made it using a combination of ChatGPT, MidJourney, Photoshop's Generative Fill feature and Figma.
Years ago, I came across Studio Vor on Dribbble, which produces the most amazing interactive art piece websites I've ever seen. This is the one is my favourite of theirs:
Image generation has become soo good now that I thought I'd be able to create something to a similar standard, and it was indeedy possible!
Here is everything I did to create my own version of the above the fold art piece.
I uploaded the Kamui screenshot above to ChatGPT, and asked the GPT-4o model to break down the foreground, midground and background, along with the colour palette and elements present in the scene.
Then I wrote a follow up prompt to get it to rewrite the description with prehistoric dino scene elements instead.
This is the prompt it produced after a few more follow-up prompts to make it less realistic and more illustrative in style.
I copied the art style description produced by ChatGPT above, and pasted it into Midjourney as a prompt, along with my favourite landscape aspect ratio: Aspect 7:4 .
Sidenote: You need to type aspect in lowercase for it to work. Midjourney auto capitalises it as you're writing, but if you capitalise it yourself it won't work. It caused me a fair bit of confusion.
Midjourney randomises the seed image used to generate the 4 image variations during a single prompt run. So I ran the exact same prompt a few times until I found a scene I liked enough to use as the base. I chose the top left image below.
Next, I uploaded the top left dino scene image from Midjourney into Photoshop. Actually, I tried a few other free online generative fill options to try generate a different dinosour and they were all hilariously terrible.
So when it came to trying out Photoshops generative fill, I was happily in awe of the difference in quality.
To use generative fill, you first select the area you want to change with a marquis tool, then you type in a prompt for what you want to fill that area with.
Something really awesome that photoshop lets you do, is upload a reference image as inspiration.
I screenshotted a dinosaur from one of the other midjourney dino scene generations that I liked, selected the snakelike dino next to the cave with the marquis tool, uploaded the image as reference and pasted in a description of the screenshotted dino generated by ChatGPT.
Here's what that looked like:
I did the exact same process for the fairylight cave, the plants in the foreground, the birds in the background, and the glowing lights in the water. I lost track of time and lost 4 hours until midnight doing this. It was magical.
Finally, I exported the dino scene image from Photoshop and uploaded it to Figma, where I added the web-style text overlay. Inspired by the Kamui webpage shown at the start of this entry.
Here's what it looks like before (ChatGPT scripted midjourney generation) and after (photoshop generative fill).
This was pure joy!
Next, I want to upload this to Runway and try get the cave fire to flicker and the birds in the background to fly. I also want to see if I can seperate the foreground from the rest of the image to add some kind of parallax scrolling effect. Oh, and need to upload it to the home page of this site.