Flash/Photoshop Tutorial

Castle/Old West Egypt China

back to the BLOG

  These backgrounds (the western scene and the castle from an earlier tutorial and now Egypt and China) were done for an online educational game. The backgrounds had to be designed to accomodate a bunch of different objects to be placed in the rooms. Beyond that, I won't bore you with the details. So when designing the activity it all started with the sketch:

Here's the sketch I did while we were still designing the activity. Done low-res (72 dpi) in Photoshop, this was mostly done to figure out what kinds of things would be in the room, and possible locations for more objects, so the game designer can see what they have to work with.

This is a screenshot from working inside Macromedia Flash. You can see I work with lots and lots of layers, and sometimes get a little careless when naming them. I first started in Photoshop and did a pretty rough sketch on the room (slightly adjusted from the earlier concept sketch.) Generally, no one will see this but me, that's why it's pretty sloppy.

I saved out the sketch as a .jpg and then imported it into Flash. On another layer I made a rough grid using the line tool. I started this back in a previous version of Flash, but now Flash 8 has a cool perspective grid feature. On top of those two layers I made a large box fill with white that has the alpha turned down to make it easier to see what I was drawing. There are other ways to do this - I could have turned my .jpg into a symbol, and then lowered the opacity, but sometimes the semi-transparent white box is handy to move up and down as a sort of poor man's onion skinning (you cannot adjust a layer's opacity in Flash like you can in Photoshop).

Next, I use the line tool, and start drawing lines all over the place. You can use the black arrow to drag endpoints around or bend the middles to make curves. It's a pretty different way of drawing than the standard Adobe Illustrator vector way, but it's pretty fast. You can use the Pen tool in Flash the same way as you do in Illustrator, if you like drawing that way better.

So now you can see all the main features of the room are drawn in. Things that overlap are on different layers, like the columns and the misc. objects scattered about. You can see there are a lot of layers with a red X by them. This means they are turned off. Those are trial and error layers. I think I originally had some square columns, decided I didn't like them and made some round ones. I just keep adding new layers rather than deleting old things, in case I want to go back.

From this stage, I save out each layer as a .png. To do that I have to copy that layer into a new document, and then File>Export>Export Image... If I had done that in the original document, it would have saved out everything, regardless of the layer being turned off or not. It sounds tedious, but it goes pretty fast when you get in a groove. Copy, Paste, Export, Delete and Repeat!

From there I go back to Photoshop. I open up all the .pngs I've saved out, copy them all into one .psd doc, line everything up properly, add a blank layer below each line layer, and fill in solid areas of color.

So here we are in Photoshop. I've got all the line layers that I drew in Flash, plus the layers beneath those lines that fill in the solid areas. Once I get to that stage, I turn on the Preserve Transparency for each layer. I can color the lines and do some shading of the objects. I usually play around with the colors at this stage, but as you'll see, I kinda didn't have any idea what I was doing with this background, and kept changing the colors. That's one of the benefits of working on so many layers - easy to adust the levels or the hue/saturation.

At this point, I know I want lots of decorations all over, heiroglyphics and stuff, but not exactly sure what to do, so I decide to go back to Flash and start making some patterns.

 

Now I'm back in Flash. I saved out the background as a .jpg, imported it into Flash, made another layer, and started making patterns with the line tool. The yellow scribbles are part of the .jpg - just some sketching done in Photoshop to start figuring out what I wanted to do. I temporarily deleted the .jpg layer, exported the lines as a .png, and back to Photoshop I go.

I've brought the new lines in from Flash. You can see I'm still adjusting the colors of things. I think I was planning to make lots of stone blocks in the walls, but then decided to go for wall paintings instead.

This part actually didn't take so long once I figured out what to put on the walls. I ended up not using all of those lines I made in Flash. I found lots of Egyptian tomb reference, copied it into my file, squashed and stretched it to fit my walls, and did a quick sloppy trace of it. It didn't need to be that tight since I changed the decoration layers to Soft Light (in the Layers drop down menu), and then with the eraser tool sort of started scratching away to make it look old and worn.

It probably looks like I turned off the line layers that I had made for the room but most of the time I've actually painted them to look like there are no outlines - it makes for crisp edges when you want them. Sometimes the Flash lines aren't exactly what I want in the end, so I have a touch-up layer above the Line and Fill layers to clean up edges, etc.

I still can't quite figure out what colors to make things. So again, I had adjusted the levels to make everything much richer and deeper. On the pillars you can see how all the patterns started out. I drew them at 100% opacity, then adjusted the layer to Soft Light (sometimes Multiply or Overlay work well), then lighten the opacity of the layer a little if need be, and then with the eraser tool, scratch away a bit to make it look a little worn.

 

Finally I've got the colors and patterns about where I want them. I wanted it to be richly decorated, but not too over the top busy so you can still focus on the differenct objects in the room.

My last bit of experimenting for the room - I wanted some spooky green light. I used a really huge airbrush and painted some light acidy green up around the ceiling. I set that layer to Color Dodge to sort of wash out what was beneath it. I tried other colors, other layer settings - I like to do a lot of trial and error playing around.

And finally, here's the finished background. I flattened all of the background layers onto one layer, and finished painting all the different objects about the room. If you go back and look at the original Flash lines, sometimes I follow them, sometimes they were just a place to start.

 

On to CHINA...