Making transparent backgrounds

Started by Colorful Arty, September 22, 2017, 09:39:12 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Colorful Arty

I'm curious how to make a background for a NeoLemmix style that is either transparent or "looks" transparent. I know namida has done this for his LPV tilesets and mobius did it with his custom Original Lemmings backgrounds. Can someone enlighten me as to how this is done?
My Youtube channel where I let's play games with family-friendly commentary:
https://www.youtube.com/channel/UCiRPZ5j87ft_clSRLFCESQA

My Twitch channel: https://www.twitch.tv/colorfularty

My levelpack: SubLems
For New formats NeoLemmix: https://www.lemmingsforums.net/index.php?topic=4942.0
For Old formats NeoLemmix: http://www.lemmingsforums.net/index.php?topic=2787.0
For SuperLemmini: http://www.lemmingsforums.net/index.php?topic=2704.0

My levelpack: ArtLems
For New formats NeoLemmix: https://www.lemmingsforums.net/index.php?topic=4583.0

mobius

#1
The way I made my backgrounds:

first you need a program like photoshop (GIMP is a very good, FREE alternative)

https://www.gimp.org/

1-- if you're focusing on making levels of standard height it's pretty simple, otherwise gets more difficult but not really if you think about it. But I haven't done this so I can't advise. Basically, open the editor (NL editor that is) and make a level, I made a design I wanted, at a level size of twice the size my actual background will be. So say standard size of the level is 320x160; you'll make the image 640x320.

2-- Take a screen shot of your level (or whatever image you want to use), if your doing my method, resize [shrink] it to half size. Skip this if you're just using some other image. Though I recommend using an image with smaller things in it too make it look like it's far away compared to the foreground (level)

3-- Using GIMP or Photoshop or something "blur" the image around 20-30% is usually good using the blur tool (often symbolized by a tear drop

4-- find the option to adjust lighting, lower the brightness and contrast around 10-20% For each, adjusting to taste. I found it looked too dark in the editor at first but then too bright when put in the level so I had to make it darker.
everything by me: https://www.lemmingsforums.net/index.php?topic=5982.msg96035#msg96035

"Not knowing how near the truth is, we seek it far away."
-Hakuin Ekaku

"I have seen a heap of trouble in my life, and most of it has never come to pass" - Mark Twain


namida

I use Paint.NET, which is also free (though not open-source, unlike GIMP).

I usually Gaussian Blur the backgrounds slightly, then using the Hue/Sat/Lum adjust tool, I turn the luminosity way down and possibly slightly increase the saturation. In some cases (eg. LPVI Garden background), only certain parts get this treatment - in that example, the fence has been darkened, but the sky has not. Garden's pieces (mostly brown or green) contrast well with the sky's blue color, so it doesn't cause confusion.

One issue, if gradients are desired, you need to make the background as close as possible to the size of the level. In the case of the LPVI Bridge and Garden backgrounds (the Basement background doesn't have this issue), I've created two versions - a ***x160 version for normal height levels, and a ***x320 version for taller levels. (In fact, I even created these alternately-sized versions of the alternate backgrounds, despite that no level actually uses them - all alternate-background levels are no taller than 160px.) The LPIV Wasteland set's mushroom cloud background has no larger version, and thus can only be used on levels 160px tall or less; though Wasteland does have an alternate background that works for any height.
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

nin10doadict

Oh wow, sticking a Gaussian blur on my BGs makes them so much easier to distinguish from the foreground. Definitely do that if you're going to have any parts of the BG that look like foreground pieces.

You can also just make a gradient manually; I like to make a bunch of rectangles next to each other that gradually change color. If you make the gradient go up and then come back down to the same color it started, you can make the whole BG tessellate and work with levels of any size. Paint.net has a nice gradient tool that lets you make reflected gradients like this easily, as I just discovered.

Trying to make terrain-like images that tessellate is harder. Modifying the image with blurs and the like can make seams appear, so be careful with how you place pieces around the edges.

namida

#4
In general, Gaussian Blur is an effect I use a lot in my graphic sets, even on regular terrain pieces. Often, to get a very weak gaussian blur effect, I resize an image (nearest neighbour resize) to 200%, do a radius 1 gaussian blur, then shrink the image back down to original size (this time using bilinear or fant).

QuoteTrying to make terrain-like images that tessellate is harder. Modifying the image with blurs and the like can make seams appear, so be careful with how you place pieces around the edges.

Increase image size by 300%, then copy and paste so that you've got 9 copies of it. Blur. Crop out everything but the center piece. Bam, it tiles perfectly even with the blur. :)

(EDIT: To be clear, this only addresses the seams that occur from the blurring itself. You still have to make sure the terrain pieces / design / etc loops properly pre-blur.)
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

607

It's interesting reading this, and now I'd really like to see some examples of these backgrounds... :P

nin10doadict

Here's one I whipped up that provides an example using Arty's Underwater set. It covers pretty much everything the topic has mentioned: Blurring, gradients, and building in such a way that it tiles well.