Creating nice looking backgrounds for puzzle games

Hello.

If you take a look at this photo http://myfilm.com/blogimage/tetris.jpg . I think the background looks very nice. How do you think the designer went about creating that background? I mean, do you think those boxes that contain the text are seperate images created in a progam like photoshop and gimp, and then they just calculated where the position of the text should go over the images? Do you think the whole screen is just one big image?

I’m not sure what the best way of doing something like this would be.

To me, it looks like there are three layers on it:

1 - The “bomb time” and “bomb power” bars, square images;
2 - The entire background image, masked at the point where the 1st layer bars are;
3 - The tetris blocks, text and any other stuff that might appear.

My guess is that the 2nd layer is just a big image. No point on using sliced images and then draw them separately if the images aren’t going to have some kind of animation between themselves.

Hi, and thanks for replying. What do you mean by masked?

Transparent.

Let’s assume the bars in the picture are actually drawn as Squares.
Then when you draw the second layer, it will cover part of the previously drawn bars

You can do that with a single image or multiple. Multiple gives you more control and options.

Single Image: Everything except UI text and game elements were created before hand in some image editing program and the he just draws one background image. (less likely)

Multiple Images: I can tell you this, that blue box thing in the background, not the UI, is made in Photoshop with the extrude filter and was drawn first. After that I think he drew the UI next. I believe the blue grid that some of the UI elements have is built into the UI and not a separate image. Then all the text, next block preview, etc is drawn.

If you would like to make really cool backgrounds for games, look up some tutorials in photoshop to get a firm grasp on layering. You use layering all the time in games to make all sorts of cool effects. Then once you have that down, use a program like photoshop/gimp/mspaint to make some backgrounds/UIs/whatever and try them out in your program. If you don’t know how to use photoshop/gimp/mspaint then look up some tutorials online.

Thanks for the input. I do use gimp. I’m getting better at it, althought I’m still totally rubbish. I think it might be wise for me to put aside some time each day just to practice creating art with it.