Hi, Doomfest here. I am the lead artist for Dischan. In this tutorial, I will run through the process of how a backdrop is created. It deals mostly with workflow and assumes you are fluent in Photoshop,  but I imagine bits and pieces are easily applied to most digital drawing programs. The background used is the room from Juniper’s Knot, and it has day / late afternoon / night variations, as well as plenty of bleed so the image slide around in-engine. Since it’s a visual novel backdrop, there are some steps that are only relevant to visual novels. This tutorial is quite lengthy (and I didn’t want to flood the blog’s index page), so hit the jump to get started!

Part One: Setup

First, set a canvas and use guides to indicate where the bleed starts. There are many ways to do this, but one way is to:

• make a 16:9 inch background (if the visual novel is 16:9),
• set view > snap > on and view > snap > document bounds
• set horizontal / vertical guides at the edges
• expand the canvas

The guides give a general idea of the picture plane of the game window without panning, which helps with making it look good without the bleed. Sometimes a composition looks wonky without seeing the bleed as well, and when I realize that it looks wonky with the crop, it’s too late. And not all of the image can be shown at once because the it has to slide around.

On a new layer, select the picture plane, select the inverse from that, then fill it with a color so that you can see how it looks without the bleed.

Next, draw the rectangle that will encompass the edges of the picture plane. I either brush it or draw it with the rectangle tool then give the layer a stroke and 0% fill, as shown here.

Next, scale down the rectangle proportionately.* I  did: edit > free transform and checked the chain links between the width/height fields near the top of the Photoshop window to keep it the same ratio. The smaller resolution makes it faster to work with (more efficient for the beginning stages of an image), and a bigger surface helps with drawing stuff near the edges of the picture plane or outside of it. It will be scaled up again later before finishing to add detail and make it not look blurry at full resolution.

*This might not be an option depending on the backdrop, so in that case, extending the canvas further and zooming out is preferred.

Part Two: Drawing

(Tip: Shift+Drag makes straight horizontal or vertical lines with brush tools in Photoshop.) On a new layer, Set the horizon line for the image. Since it’s for a visual novel, placing the horizon line too far from the center would make it look like the camera is looking up or down too much, which looks weird.

Set the main vanishing points with intersecting vertical lines, then using the vanishing points, draw the basic shape of a big element or two that will help align everything else later.

Diagonals have their own vanishing points. Sometimes it’s easier to use the pen tool to figure these out.

Keep using the vanishing points to draw more and more details, going from big -> small generally. I also slid the entire drawing around a bit to try to get a better composition, a luxury not available to traditional media.

Time to color the image. For this backdrop, I used something similar to a first values (under line drawing) and then color pass method. In addition, I:

• selected the small picture plane
• inverted the selection
• filled the new selection in a new layer to make the area around the picture plane a neutral color.

Doing so helps remove color bias from the strong white background color and helps ensure the visible part of the image in-engine looks good without the rest of the backdrop. Also, the lines from before are now set to multiply and with the pixel transparency locked, filled with a medium color.

Scale up the image back to its’ original size proportionately.

I decided to extend the bleed area more here. To do this:

• Make sure the background color in the color picker is the same color of the background layer
• Either:
• image > canvas size or
• drag across the entire canvas with the crop tool, then extend past the current canvas.

Paint in the rest of the values in the bleed.

I did some color tweaking with Curves and Hue/Saturation here. Basically, I just boosted the contrast a little and made the lighter pixels warmer and the darker colors cooler. The same can be achieved with a Brightness / Contrast adjustment in conjunction with a Color Balance adjustment, but Curves gives me a lot more control. Hue / Saturation was placed under Curves because adjusting color channels in Curves or Color Balance tends to over saturate some pixels when there is some color on it already.

Here, I paint in some colors on an Overlay layer above the values. Colors chosen will not look exactly like the color once it’s painted on the layer. Overlay does something similar to Screen or Dodge for lighter pixels and Burn or Multiply for darker pixels, but I like the way it looks. Somewhere in the middle of the color picker, it does something similar to the Hue or Color blending mode.

Next, finish up the image with an overpainting on a layer above the lineart to clean up things and add details. I also toggled the bleed hiding layer to focus on the picture plane first – this part is visible for much longer than the other areas, so it makes sense that it gets a little more polish than the surrounding areas. Everything could just be polished to every single dead leaf in the ground, but that would take too long.

Then, turn off the bleed hiding layer and overpaint the rest of the image.

Part 3: Post-Process for Time-of-Day Variations

Usually, adjustments alone will get 50%-90% to a satisfying result for a variation. The rest might need to be painted over with blending modes and/or overpainting. This part differs wildly depending on the image, but in this particular case, the following adjustments worked for me. Don’t forget to make new layers and/or files for these!

To make a late afternoon variation, use a Hue / Saturation adjustment to drop down the saturation a bit and raise the contrast with Levels, Brightness / Contrast, or Curves (my preferred adjustment). In addition, use a Photo Filter adjustment with a Warming Filter preset.

To make a night variation, use a Curves, Levels or Brightness / Contrast to drop the brighter parts of the image to darker levels, lower the contrast if necessary, and add a Photo Filter adjustment with a Cooling Filter preset. In addition, I had to use a Hue / Saturation adjustment because the previous two adjustments oversaturated the image.

In this case, the sky and its’ light cast on the ground was too bright even with the adjustments, so I painted on a Multiply layer above with some blue-purplish tone to drop the brightness of the sky down, then overpainted the sky to give it the same texture and tweak little things, like the highlight on the broken wood panels. Stars were also added on a separate layer.

And that’s it, all the variations are done. (Preferably on new layers and/or files.) Of course, this isn’t the only way to do things, but it’s one of my favorite ways to draw a backdrop. Now go draw some environments!

Finished Backdrop

Since this is my first time posting here, I think an introduction is in order. I’m Guy and am primarily a mobile app developer working with both iOS and Android.

I was the developer behind our very own iOS VN engine and will be working together with everyone to bring you cool new stuff in the future.

Speaking of cool stuff, I’m glad to announce that the iOS version of Juniper’s Knot is now available on the Apple App Store, for free. Why do we keep doing all this for free you say? Because we love you! (No, not in that way)

The app will work on any iPhone or iPad with iOS5 and above, and looks especially good on iPad: make sure you see it!

We’re always moving forward and expanding to try out new ideas, so expect more great things to come!

A bit of a technical post today. The site has received a minor update, with one major difference that probably deserves to be talked about.

Those of you who make use of the thread subscription feature on the forum have no doubt noticed that the messages tend to pile up quickly, and if you don’t keep on top of deleting them, they can leave you with a pretty full inbox.

That’s why we decided to implement a new thread replies system, which instead of sending you a new message for every new reply, will only send you one message, and then update that message as new replies come in. If this sounds a little confusing, don’t worry, it’s very straightforward and easy to understand in practice.

Unfortunately, because this new system is fairly different, it required the deletion of all old thread replies. Personal and system notification messages have been left untouched.

In addition to this upgrade, we’ve also made a few other minor modifications. Noticable for most users is a new inbox link to the top right next to your library, as well as the addition of a free category on the store. There has also been various small bugfixes and general improvements.

Well, that’s everything. Thanks for reading, and I hope the new system works well for you!

Some sample content from the pack.

Download the wallpaper and guest art pack.

Hello everyone!

First off, since we’ve been receiving requests for Juniper’s Knot desktop wallpapers, we decided to create a few in an extra downloadable pack. We also included the guest art from the game in high resolution, because why not? You can download the wallpaper and guest art pack here (there’s some spoilers in there, so be careful!). The pack includes wallpapers in the following resolutions: 1280×800, 1366×768, 1920×1080, 1920×1200.

Secondly, I wanted to take this opportunity to say thank you to everyone who downloaded and played Juniper’s Knot so far. It seems like there’s been quite a few of you, and it’s great to know that there are people enjoying something we’ve worked hard on. Special thanks as well to those who donated on the site. I won’t reveal how much has been donated exactly, but I will say that it’s enough to really help with the server bill this month, and that’s awesome!

Thanks for reading, and I hope you enjoy the wallpapers!

LADIES, GENTLEMEN, AND THE REST; dischan media is releasing its first visual novel: Juniper’s Knot!

-

Dramatis personæ.

Here it is.

Also here.

Oh, and here’s the soundtrack too.

Obviously, they are both free! You may give us your money if you so desire, however. People were asking if they could, and now that we actually have a product out, we feel that we may accept your contributions. You may use the “Like the game? Support us!” link on the Juniper’s Knot page to do so.

And sorry for the wait. We do hope you enjoy it, fellows. For those of you who haven’t been following us lately: Juniper’s Knot is a short, fantasy, kinetic novel (meaning there are no choices) that tells the story of a boy’s encounter with a demon in an abandoned village. As it is tiny, saying any more may just ruin it for you. I’ll say one other thing, though: our new programmer, Anton (Guy-kun) Prydatko, is in the process of porting the novel for iOS with his own engine. Gasp! Holy expletive! Look forward to it- I know that I am.

But that’s not all that’s happened, you know; there are other great rumblings from dischan’s den… Have you looked at the store at all? There’s something there!

From creator of Digital: A Love Story, Christine Love, Analogue: A Hate Story and its soundtrack have arrived on the Dischan Store!

-

Best girl.

You may purchase the game for 15.00 USD here. (There is a demo on this page, also!)

You may also buy the soundtrack made by composer Isaac Schankler for 5.00 USD here.

Analogue: A Hate Story is an interestingly put together visual novel, quite different from the average sort. You play as a spacefarer, uncovering the mystery of a vanished colony with the help of pestering little AI. It’s very much an impressive thing, operating around the discovery of olden logs and the relationship (or lack thereof) between the player character and the AI. I encourage you to give it a try.

I’m not done yet, guys. There is still yet MORE to say. The site in general has gotten shinier- in some ways literally! Image thumbnails in general are now displayed at 100% quality, so re-upload your avatars and enjoy the prettiness of the forum! The store also now has gifting implemented, so you can give your pals things from there… as gifts! Messages in your inbox can now be deleted by page to clear up clutter faster (finally), and the site has altogether gotten better with bug fixes and all that! Happy browsing, duders!

That is all I’ve got! Our first “game”, an iOS port in the works, a new game on the store, a new soundtrack as well, the site is (more) awesome… yeah! Can you believe that there’s more to come, and soon…? I can hardly, myself.

YEAH!!!!!!!!

TTFN