Game Dev Blog - Creating stylized backgrounds from photos.
A screenshot from Froey's upcoming visual novel: Those We Keep Close (TBD.)
One big hurdle when it comes to making a visual novel is the games art style.
Outside of the characters, the backgrounds can play just as much of a major role to a games visual style. It can grab a player's attention immediately an get them to download a game just from looking at screenshots of the game, but at the same time they can immediately lose interest if the backgrounds don't look appealing.
When developing A Night Out, I had no idea what to do when it came to the style of the game. I was writing a realistic story with relatable characters, but my art skills were pretty minimal. I had some experience drawing characters, but my experience of drawing backgrounds was almost none.
I decided the best decision to save time and give the game it’s own unique style was to grab photos and stylize them similar to monochrome photography. In combination with the character designs utilizing no color and having a simple art style they would all blend in together well.
I got the idea from other visual novels like Katawa Shoujo and Butterfly Soup, two indie visual novels that had a majority of their backgrounds done with stylized photos.
Katawa Shoujo — Four Leaf Studios (2012.)
Butterfly Soup — Brianna Lei (2017.)
So, where does one get these photos? I did my best to take my own photos for backgrounds, but there were some scenes that I not could get photos where I lived. Back in 2018 I used the website pixabay.
It was a great site at the time (you can read my thoughts on this at the end of the blog.) Nowadays however I use unsplash as my main source for backgrounds. It is a website used by photographers where they can upload their own photos and is open for free use (including commercial use!)
Original source photo opened in GNU Image Manipulation Program.
When creating a background, it starts with a source photo. I prefer scenes with no people in the background and nothing too distracting so players can pay attention to the characters on screen.
The main program I use to edit these photos is GNU Image Manipulation Program. Opening the photo in the program, I first desaturate the photo, getting rid of color and making the image black and white. Then crop and scale the image to my desired resolution (1920x1080) and apply an artistic filter (oilify) to give the background a sort of painted picture look.
Photo cropped, desaturated, and with filter applied.
Sometimes there are objects and brand logos I find distracting in a scene. Using a small paint brush tool, I remove these objects manually by blotting it out with an object or texture similar nearby. This process can take a little bit of time, but as seen below it can transform a scene radically.
With much patience, objects are edited out of the background.
Video demonstration of how I edit objects out of backgrounds. (Taxi Ride Home — Stevia Sphere)
With my newest title Those We Keep Close, I add an additional noise filter to backgrounds and do a final adjustment with contrast and brightness if necessary. It’s a pretty simple process, but the style I chose years back and developed overtime still holds up very well!
Final background with noise effect added, and adjusted brightness/contrast.
A huge benefit with the backgrounds I create is that they actually upscale to higher resolutions just fine. All the backgrounds in my latest project are 1920x1080, but I do test plays of the game in fullscreen with my 27" 2560x1440 monitor.
Playing some visual novels with this monitor, I sometimes have to play them in a window due to the art not scaling well to a higher resolution. With my simplistic art style, my games scale perfectly on a majority of displays!
While this is a simple process, it still takes time to do this for all the backgrounds in all my project. However, it still remains a great time and resource saver for solo devs who are looking to start their own projects. Several other devs I follow still use this technique of stylized photo backgrounds in their games to this current day. Examples being:
The Intern of Christmas Present — Air Gong (2023.)
Malcatras' Maiden — Nadia Nova (2024.)
For later projects down the road, I am considering hiring a background artist. But for my current project and smaller projects in the future. This is a process I will use for the longest time.
— Froey
Author's statement:
Unfortunately, Pixabay in recent years has been flooded with AI generated images. There is an option to exclude this content from searches, but at the risk of using AI generated images I decided to stop using the site for my future projects.
Outside of 1-2 photos in my current project being from Pixabay, a majority of photos in my current project are from Unsplash or taken by myself personally. Those We Keep Close will NOT use any AI generated content.