Friday, January 26, 2007

Lux: "The Lantern" (part 3 of 3)

First, I wanted to create a theme for the map. Should it just be an abstract background with a lot of pretty colors, or would it actually have a setting?
Well, I'd kept the name "Lantern," and the image that brought to mind was the old-fashioned streetlamps that used to line our streets. That brought to mind wrought-iron and glass adornments, and a rough idea came to me: An old-fashioned streetlamp on an old stone bridge overlooking a small town that had resisted modern change, with a big modern city in the background, with all its lights and skyline.
My company's focus group committee (consisting of me and a ventriloquist's dummy with serious attitude) tossed around a few ideas (trust me, you don't wanna know), and I made my decision: The Lantern board would be played on a small wrought-iron and glass sculpture placed over that lantern.

Time to go to work. I considered using a photo of an actual streetlamp, but I looked up a few photos on the net and played with them for a while, and realized that using a real one would look too contrasty, too jarring. So I just made one using a mix of squares, picture frame shapes and photoshop filters. I put in a white background at 50% transparency to simulate glass around the lantern, and I airbrushed a big cloud of milky yellow emanating from the center (plus a Lens Flare render) to simulate some light coming from the candle at the center.
Now for the wrought-iron frame for the squares. Simulating a wrought-iron sculpture in photoshop is easy, you just trace the outline of whatever you want sculptured, type some Hoefler Text Ornaments (that loopy abstract font) around the edges of that and run the Photoshop "Emboss" filter on it, then just highlight the whole thing and paint 50% black to make it dark enough. I just traced the outlines of the squares and did that, placing it neatly over the lantern.
Now for the background.

For the bridge and the town below, I opened one of my desktop wallpapers (an image from Hayao Miyazaki's movie, "Kiki's Delivery Service," one of the greats), which shows a scene on a bridge overlooking the town.

I highlighted the skyline below and a bit of the bridge (a lot of people would use the "Extract" filter to cut out a large part like that, but the polygonal lasso is much more precise), and copied and pasted that onto the bottom of the background image behind the lantern and sculpture, and altered the shape a little to fill up a little more of the screen, to make the view of the town below, from a section of the bridge that was also in the rectangle I cut out.

For the big city's skyline, I opened up another desktop, one from the Perplex City website, and copied the image of that skyline. It was perfect, it had buildings ready-made and a very nice stylized tree line. All I had to do to make a nightline was highlight the "windows" (slightly lighter shade of gray) and paint them bright yellow, then select the rest of the buildings and adjust the brightness/contrast to turn them black. The brightness/contrast had the unintended side effect of creating a yellowish glow coming up from the bottom of the buildings, just like lights from cars creating an upward glow, it was very nice). Then I highlighted the trees and adjusted the brightness and saturation on them to make them brighter green.

Now, I needed something to fill up the space between the tops of the buildings from the anime wallpaper and the bottom of the cityscape from the Perplex City wallpaper. I looked through my "scrapyard" folder and found... A photo of a vacant lot that I'd used for another project a few years ago (NOTE TO ALL PHOTOSHOP ARTISTS: Always save your leftover source photos from past projects, they can come in so handy on later ones).

I played with the colors on that, turning part of it dark blue like a lake, and put that behind and between the two city images. It still looked a little choppy, so I whipped up a picket fence pattern (I made it wood-colored instead of a white picket fence for the sake of color), and laid that in between the "lake" and the trees.
That took care of the bottom 2/3 of the background. Now for the top part, the sky behind the cityscape. I considered making it black, but the cityscape wouldn't stand out then, so I made it a deep blue, as though the sun was just barely getting ready to rise. I dotted it with stars (just use the paint bucket with the transparency at "1% Dissolve" and then blow up a small section of that to make it bigger), and that was done.
Hmm, the top looked a little bare. I considered raising the height of the whole thing somewhat, but then I decided to have some foliage at the top of the screen, like a tree or ivy or something. I toyed with a few ideas, then I just drew a bunch of shapes with the "custom shapes" tool and overlapped them a few times, painted them green with various textures, and that was that.

After that it was ready, I just signed my name and the name of the piece in the corner and it was ready.

For the overground (something that you can use to overlap the shapes of the countries on a map), I decided to use the whole thing at 25% transparency, so you could see through the spaces on the board to simulate playing on glass. Plus I put some some arrows over the spaces to indicate which direction you can go on those spaces.
That's it. Enjoy.



NOTES ON THE PROJECT: Here's where I list a few things that I realize I could have done to get the job done much quicker, so I can remember to play to my strengths next time.

Part One: The Layout
a. I could have saved a lot of time on the first few rectangles by doing it in Illustrator instead of Photoshop, and then importing that file into Photoshop later. You see, Illustrator has an "align even" and "distribute even" button to do it automatically, whereas in Photoshop I had to do it by hand by zooming in. I still did it right, but I spent a lot of time on it that I could have used on other things.
b. I had to copy, paste, select, nudge, resize, rotate and so on quite a few times, a lot more times than I would have liked, in order to put all the rectangles in order. NOTE TO SELF: Before making any more maps, sit down and think about finding some way to lay out and place down more rectangles with fewer clicks.
c. With regards to the layout of the map itself, one thing I could have done was to make three concentric outer rings (instead of just two), with two of them going in one direction and the middle one in the other direction, and each space would connect to the adjacent space in the other ring, so you'd have more than six junctions between the rings, and more spaces on the board besides. But maybe that would have made it too easy to get around the board, which would leave too little room for strategy. I'll use multiple concentric rings on my next board.

Part Two: The Map
a. I realized too late that I could have saved a lot of time and wouldn't have had to use nearly as much precision in drawing and editing the country shapes if I had decided early on to use the background image as an overground PNG file. What I should have done was create country shapes bigger than I needed to, then create an overground file and laid the background art down at 25% transparency, then pasted the original template grid from part one onto another copy of the background and deleted those shapes, cutting the precise rectangles out of the background, and placing that one over the first at full transparency, which would have given the same effect with much more precise country shapes. From now on I'll do that.
b. With my text editing program where I adjusted the country's tags to make the one-way connections, I spent too much time figuring out a way to use the automatic find/replace all option without editing any parts besides the country tags. Still, I did work out a good system eventually. Still, I hope dustin includes the option to create one-way connections in the map editor itself in his next update to the game.

Part Three: The Background
a. When looking for a good photo of an actual lantern to doctor, I think I gave up a little too quickly. I was in a hurry since I was going through a slight family situation at the time, so I rushed myself.
b. I need to choose a different type of Lens Flare filter, it was too hard to see the shape on this one.

Other than that, I think I did pretty well.

Labels:

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home