Wednesday, June 13, 2012

Photo to Art Game Backgrounds

Making Backgrounds 
My Technique for turning Photos into Art with Photoshop.

The most common question I get asked about my game Faery Tale, is: How did I do the graphics?

The short answer is Photoshop.
-- Every image is a multi-layered photo-manipulation that was heavily filtered multiple times to make them look like fairy tale art.

I'm a big-time art nouveau fan, as in the art of Alphonse Mucha, so that was the style I was aiming for.

While I am not about to give away every single secret to my techniques, mainly because they took months of experimentation to figure out, I am willing to reveal the basic process.

It all begins with Photoshop and quite a few Art Plug-Ins, such as:
  • Topaz Labs: Clean 3, Adjust 4, and Simplify3
  • Alien Skin Snap Art 2
  • Imagenomic

And yes, I used ALL of these plug-ins for each image; background and characters.

The most important part of the process, however, is the Line Art. That was done using the Color Sketch action from 10 Sketch Effects, a Photoshop actions set that is available free on Deviant Art.

How I do it:
-- In Photoshop...

Stage 1: Pick a good image.

Stage 2: Photo-manipulate the image to suit your needs, then duplicate the finished image so that you have two layers.

Stage 3: Hide the copy layer. On the Background layer, make the lines using the Color Sketch action from 10 Sketch Effects.

Stage 4: Level the lines to darken them, then Reduce Noise to clean it. After that, Art Filter the line art to make them look more like a sketch.

I use a rather expensive art plug-in for this process, but you can make a somewhat rougher version for Free by using Drawing and Threshold Actions 1 by eGulumse, specifically, the first action: 1- Çizim+path. (Experiment with the different styles. You might find one that works better for you.)

The trick is to make your line art with the 1 Color Sketch action, SAVE A JPG COPY in your files, (but don't close it!!!) Run the 1- Çizim+path on the color sketch line art. This will give you this result:

Flatten Image, then Retrieve your saved jpg. Set the color jpg UNDER the black and white lines then set the black and white lines to Overlay.

The results are not as refined as what I use, but then I paid serious money for my plug in where this is Free. :)

Stage 5: Hide the line art layer. Turn on the copy layer and Art Filter the untouched layer to make it look like a painting or drawing, or both. 

I use another rather expensive plug in for this process, but Photo to Watercolour Action by

cazcastalla  is a fairly reasonable and Free substitute.  


Stage 6: Turn on the Lines layer and set it on top of the Art layer. Set the Lines to Multiply at 50% Opacity, then Merge the layers.

Stage 7: Overlay and Soft Light artistic textures over top of the whole thing to make the image look even more like art.

I overlay a personally created scribble texture to break up the flatness of the colors then softlight two different splotchy watercolor-style textures, but a sketch type screentone texture can work for the scribble texture, and watercolor textures are easy to find on DeviantArt. 


Organizing Branching Story PLOTS

----- Original Message -----

Do you have any advice about organizing your dialogue and in-game menu choices as you write? I'm writing my dialogue and plot straight in Ren'Py, but my menu choices are multiplying like crazy. It's like a tree with branches that keeps on multiplying...
 When I'm writing a Visual Novel, I use a handy little freeware Mind-mapping program to outline all the major turning points and menu branches called:

Click HERE for Full-Sized Image
 All the bubbles are collapsible and it allows Jumps to any other bubble (the green arrows). This way you can have multiple branches jump to one result without needing to repeat yourself.

Even better, with this little program you can test-drive paths, menu choices, and results simply by clicking a bubble open, or clicking a green arrow to another bubble. If you've missed or forgotten something it's quickly obvious.

This program also has a spell-check, (you have to turn it on,) so you can write the entire thing out and copy-paste the text directly into Renpy. It also allows hyper-linking, file connection, and images so you can figure out exactly what your game will need before you even open Renpy.

I wouldn't have been able to make my game FaeryTale without it.