1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make a static background

Discussion in 'Tutorials' started by SyntaxTerror, Aug 8, 2014.

  1. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    86
    How to make a static background
    Tutorial and tools

    This tutorial shows how to make a static background for Vanillla or the Loader using an image and Paint.net.
    Check also my Animated Background Tutorial (requires a Flash editor).With some knowledge of Flash, you may extrapolate and make you own animations with classic/motion/shape tweens for example.
    It is quite difficult to make a background with a realistic perspective, especially if you do not design one specifically for SDT. I will show you how to quickly make one with little effort:

    You need a basic knowledge in image editing and paint.net to do this. It is a free/open source program, available in many languages and you can download it from this page: www.getpaint.net/download.html
    Minimum System:
    • Windows 7 SP1 or newer (including Windows 8, 8.1, and 8.1 Update 1)
    • 1GHz processor (dual-core recommended)
    • 1GB of RAM
    Paint.NET depends on Microsoft's .NET Framework 4.5, which is automatically installed if it isn't already on the system.

    Paint.NET will automatically run in 64-bit mode if possible. You must have a 64-bit capable CPU and an x64 edition of Windows.

    Paint.NET uses your hard drive to store temporary files related to undo/redo history. Because of this, actual disk space requirements will depend on the actions you perform on an image, and on the size of the image.

    Paint.NET does not work on Windows RT.
    This tutorial has been made using paint.net version 4.0.3, but I am quite sure that I will still work with newer versions.

    A perspective grid exists (made by Maineim):
    [​IMG]
    But it can be really helpful only if you draw the background yourself.
    It still gives a good idea of the perspective you must have on the image or photo you are going to use. Actually, after you've tried a few times, you'll see by yourself if an image is good or not to make a background. Basically, you need a flat surface in the bottom to place his/her feet and that the horizon line is somewhere between the middle and the third quarter of the image.

    Now the only thing you need is a background image, you have to do some reseach, especially if you want a drawn image: you can found millions of photos from everything, but images are rarer. There are several posibilities:
    • Google images: lists almost all the images of the Web, the main problem is to find the right words to search... You can also sort the images by size, colour, type, etc.
    • Imageboards like Gelbooru, Danbooru or Rule #34.
    • DeviantArt: has many images, try to add "background" or "scenery" and "manga" or "anime" to your search to find images more suitable for SDT.
    • If they exist, dedicated wikis can also have some good material sometimes.
    • Own screenshots: you can use images from animated movies or cartoons you will play on your computer. You need to pause the movie and press the "Print Screen" button, then open Paint.net and paste the screenshot (using CTRL+V for example).
    Remember that most of the time, the image will need to be cropped and resized, and most of scenery images need to be zoomed in, so the resolution must be as high as possible: in fact, it is better to have something higher than 1024x600 pixels. Images with lower resolution may be fine, but most of the time they become really blurry, especially when the game window is enlarged.

    ModGuy
    made a wonderful tool (that bugs a little...) to preview backgrounds directly on your computer : Preview Window (click to download).
    [​IMG]
    This tool consists of a resisable window one can move on the screen to preview the result of a background in SDT. It is good to use another tool like DeskPins to pin this window tomost (included in the archive above).
    The tool is a little buggy, and it is sometimes difficult to grab its window. To pin it with DeskPins, it is best to do it on the Desktop.

    When you have found a good image, the real work begins:
    1. Launch Paint.net.
    2. Open the image you want to use, Select all (CTRL+A) or the part you want to use if it is a screenshot, and Copy it (CTRL+C).
    3. Download and open the Background Template.pdn.
    4. At the bottom right of this Background Template.pdn, in the Layers window, select the Background layer.
    5. Paste your image (CTRL+V) and choose Keep canvas size (the second option).
    6. Now you can see how it will appear in-game. You can move and resize your selection to find the best position (keep Shift pressed to keep proportions).
      What will be seen in-game is the bottom of the image if you zoom out and the top if you zoom in.
    7. When it seems to be good, hide or delete the Foreground layer in the Layer window.
    8. Save as the background under PNG format (not PDN, it is not a format that SDT can read).
    Et voila madame! You have a new background with a realistic perspective and the right size.
    Now you can try it, make a screenshot of it and host it somewhere along with the background (I recommend ImageBam that keeps images for a long time), and make a thread in the Backgrounds section to show us what you have made! :wink:
     
    Last edited: Jul 29, 2016
    aztlan likes this.
  2. Nigida

    Nigida Casual Client

    Joined:
    Aug 9, 2011
    Messages:
    447
    Likes Received:
    3
    That is pretty much how I create BGs and paint.net is just a wonderful "little" program with a lot of functions and plugin support. Didn't use a template for how it will look in the game before but that will save some trial and error time in the future. Thank you!

    If you watch anime on your PC you can get a lot of BG-worthy images by making screenshots and then use them with the template. Sometimes they need a little smoothing out because auf compression artifacts but paint.net can do that for you.
     
  3. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    86
    I have found a wonderful blog on tumblr called Anime Backgrounds with loads of very good quality backgrounds taken from some famous OAVs. I downloaded many of them and I'll use my new tool to make backgrounds.
    WallpaperVortex also have an anime scenery section I am currently browsing with very intersting things.
    I have some OAVs and other animated cartoons on my computer, but unfortunately the quality is not always the best, and it takes time to find the right background with the right perspective... I did it with Eroge! H Mo Game Mo Kaihatsu Zanmai but I could find only 3½ backgrounds (two made from the same screenshot). I know could have made many others but I don't want background with people in it or taken in the street for example.
     
    Last edited: Jun 15, 2016
  4. Nigida

    Nigida Casual Client

    Joined:
    Aug 9, 2011
    Messages:
    447
    Likes Received:
    3
    If I like the BG in a scene and there are characters in it that move while the background is static I take multiple screenshots and combine those in paint.net in a way that I have a BG without characters in the end.
     
  5. SyntaxTerror

    SyntaxTerror Swell Supporter Content Creator

    Joined:
    Jul 24, 2014
    Messages:
    367
    Likes Received:
    86
    Added ModGuy's tool in the first post and improved the tutorial.
     
    Last edited: Jun 16, 2016