How to make a preexisting image translucent?

  • 7 Replies
  • 3691 Views
How to make a preexisting image translucent?
« on: August 06, 2014, 00:44:52 »
Does anyone know how I can make this image translucent? http://i.imgur.com/rbfZh9X.png
(A.K.A. make it able to overlap the player while still letting the player be visible)
I use paint.net, but I can use another program if need be.

*

Offline the Jack

  • 158
  • 12
  • not *that* Jack!
    • View Profile
Re: How to make a preexisting image translucent?
« Reply #1 on: August 06, 2014, 03:36:24 »
(This probably belongs in the Knytt Stories Level Editing Support board, but I can answer it while it's waiting on a mod to move it.)

I've never used paint.net, though I know lots of other people here swear by it. I use the GIMP, which is free, can do almost everything Photoshop can, and works on PC, Mac and Linux. (I use the PC version, but I think the instructions below should be the same regardless of OS.)

The gray checkerboard in the image you put up looks like it's meant to indicate transparency; without being familiar with how paint.net works, I can't tell whether it's become part of the image. It might, unfortunately, be necessary to recreate the image entirely if you're going to use GIMP.

In GIMP, start with File > New..., set it to the size you want, and select transparency for the background.

Now you can either paste in the contents of your paint.net image, using Edit > Paste as > New layer, or begin recreating the look you want.

If you do have to start from scratch, because the checkerboard has become part of the image and you didn't want it there, then I recommend immediately creating a new (also transparent) layer, via Layer > New layer... or by pressing Ctrl/Cmd+Shift+N. (There's also a way to create a new layer using the Layers toolbar, which I explain how to open below.) That way, you have a background layer that stays blank, and the top layer (or upper layers) to work on.

To see how the image will look without the checkerboard pattern GIMP uses to show users where the image is transparent, select your bottom layer (which should still be blank), and add a new layer with a white fill instead of transparency. You can either hide this white layer, by clicking on the eye icon next to it in the Layers toolbar; or delete it; or just undo creating it, once you're done looking at how your work will look without the checkerboard backdrop. Just remember to re-select the upper layer if you're going to make any further edits! I forget this step all the time. :oops:

Once you're satisfied with how it looks, go to your Layers toolbar -- you can open it from GIMP's Windows > Dockable Dialogs menu, or by pressing Ctrl/Cmd+L, if it didn't open up automatically when you opened the program -- and adjust the opacity of the layer(s) you want to be translucent. 100% is fully opaque, 0% is invisible, anything in between is translucent.

Now all that's left should be saving your image. GIMP's save function only saves .xcf format, so to get a .png image, you'll need to use File > Export As.

Hopefully this will get you where you need to be. Feel free to ask if you have any more questions about using GIMP, or anything else related to level-making. And welcome to the Nifflas forums!  :)

Actually, it's eggplant.

*

Offline the Jack

  • 158
  • 12
  • not *that* Jack!
    • View Profile
Re: How to make a preexisting image translucent?
« Reply #2 on: August 06, 2014, 03:54:19 »
Oops, I just remembered there's a whole other aspect to your question!

(A.K.A. make it able to overlap the player while still letting the player be visible)

First, once you have your translucent image ready, you'll need to make it into a Custom Object. Then you'll need to place the custom object you've created onto either Layer 6 or Layer 7 in order for it to appear in front of Juni (the player-character). Here's a link to the manual on how to create and work with Custom Objects:
Custom Objects manual by SiamJai

Of course, you should feel free to ask more questions if you find the whole custom objects thing confusing! It can be tricky even for those of us who have done it before.

You should probably also look at the PDF Manual for KS Level Editor by SiamJai. (Yeah, SiamJai has put a lot of effort into making the rest of us look like schlubs. ;) )

If you just want a translucent image to appear somewhere behind Juni, but in front of the background gradient and/or other things that are part of the room's scenery, you can put the image into a tileset, and use it on layers 0, 1 or 2. Layer 3 is for things that are solid to Juni, like floors, walls, etc; layers 4 and 5 are for Bank objects (NPCs, power-ups, animated decorations, etc.) that appear behind Juni. Some bank objects are solid to Juni, but most aren't.

Actually, it's eggplant.

Re: How to make a preexisting image translucent?
« Reply #3 on: August 06, 2014, 05:55:12 »
Thanks!  :D I already have GIMP, I just forgot I still had it.  :S I did not make the image, the checkerboard pattern is the way I received it, and I couldn't figure out a way to remove it. Since I'm not an artist, and am terrible with art, I can't really make my own...  :oops: and I know how to make an image animated, originally this image was a .gif, so I separated it into each individual frame and lined them up next to each other, as seen in the image (each image is 160 x 160). I already have it animated, since I already knew how to make an animated custom object, it's just that the checkerboard pattern appears in-game, which renders it unusable for what I needed it for. I've worked with Knytt Stories for about five years now, but haven't bothered to make an account on this site, but made it today to see if anyone could help me with this issue. Also, sorry about posting in the wrong place, I don't know my way around here since I've never used this site before. :oops:

Re: How to make a preexisting image translucent?
« Reply #4 on: August 06, 2014, 05:57:56 »
This was not an issue pertaining to the game and custom objects necessarily (considering I already know my way around these), but to editing the image. Sorry if I didn't make it clear.  :oops:
« Last Edit: August 07, 2014, 17:49:11 by Ginji23 »

*

Offline the Jack

  • 158
  • 12
  • not *that* Jack!
    • View Profile
Re: How to make a preexisting image translucent?
« Reply #5 on: August 06, 2014, 08:14:19 »
Ah, okay. Usually people new to the forums asking about level editing type stuff are much newer to the game.

(Do you have any completed levels yet? Or even any ready to be played by beta testers? There's a dearth of new levels to play nowadays, seven years after KS was first released!)  C)p

I might be able to remove the checkerboarding for you, though I can't make any promises. Can you tell me anything more about the source of the image? If it's possible to get the original version, it might not be necessary to remove the checkerboarding from the copy you posted...

Actually, it's eggplant.

Re: How to make a preexisting image translucent?
« Reply #6 on: August 06, 2014, 16:13:38 »
I have many projects I've started, but I've only really completed one.  :oops: Although, some "beta" versions of levels are uploaded onto the level archive under the name "Jeremy." Just press F3 and search for the word "Jeremy." The one completed level is "The Colorless World v1.01," and this new level I'm working on is going to be similar to that, since it's the one project I actually finished. The main level I had been working on got wiped after a computer issue, so I'm looking toward other things, taking a break from that one. Oh, and for that original image, It's right here: http://image.blingee.com.s3.amazonaws.com/images18/content/output/000/000/000/052/713539429_687694.gif?4 (Still with the checkerboard)
« Last Edit: August 06, 2014, 16:25:41 by Ginji23 »

Re: How to make a preexisting image translucent?
« Reply #7 on: August 06, 2014, 16:28:54 »
I just uploaded the most backed up version of that level I lost, the "Factory v0.2." Granted, I've lost other levels due to computer hard drive wipes (Although the recent problem wasn't a hard drive issue), but the "Factory" level was one of my first levels, and the one that I put the most time and care into.