Nitrome Wiki:How to make Transparent Images/Gimp2: Method 1

This tutorial shows how to make an image transparent in Gimp2.

Requirements

• Must have Xnview (version 1.96.1 and above)
• Must have Gimp2

Notes

• All images have been placed as links, as due to there large size they may heavily slow down computers, as they are .pngs.
• I have blanked out my name from some places in Gimp2 and Xenview (not that my name is an obscenity, I just don't want people to see it), as well as removed my bookmarks on the images.
• I have a widescreen Computer Monitor. Taking a screenshot captures the entire screen.
• Images with either green or red bars around them are buttons that have to be pressed
• There is an error for image 5. I zoomed into image 4 to take image 5, which I shouldn't have done. The error is that there are transparent brown pixels around the object I have in the drag box.

Steps

Step 1

Image: [1]
Instructions: Click "Tools", then "Capture Screen"

Step 2

Image: [2]
Instructions: After clicking "Capture Screen" in the menu, a window will come up. In the window are several boxes. In the Capture Screen box, click only Active Window. In the Method box, only click Hot Key, then specify what key you want to press to take a screenshot. Don't click the Delay (sec) box. In Options, click Multiple Capture. After that, in the Save box, click "Open in Xenview", but don't click Directory. Now, click the drop down box and select the format you want the images to be saved in (anything except JPG, jpg, or jpeg). After that, click Okay.

Step 3

Image:[3]
Instructions: Go to any page while browsing and press the key you have selected as the Hot key. After that, click the Xenview tab on the taskbar located at the bottom of the computer monitor screen.

Step 4

Image:[4]
Instructions: This section shows how to use the tools necessary for adjusting the image (its a good idea to have image 4 in a separate tab)(numbers bolded here correspond to the red numbers in image 4).

1 is a button that rotates the image counter-clockwise (also known as anti-clockwise). 2 rotates an image clockwise. 3 flips the image upside down. 4 flips the image horizontally. 5 zooms into the image (can also be done by pushing mouse wheel forward, if your mouse has one), 6 brings the image to 100%, and 7 zooms out of an image (can also be done by moving the mouse wheel forwards).

Step 5

Image:[5]
Instructions: Zoom into an image, and when you have found the part you want, click and drag to create a drag box. Click the squares on the box and drag backwards or forwards to move it in that direction. Each edge has a square, and between two edges is a square.

Step 6

Image:[6]
Instructions: When you have the drag box around the part of the image you want, click the fifth image from the right (that has a green box around it in the image) to cut the image out.

Step 7

Image:[7]
Instructions: After that is done, go into Edit at the top bar, click it, then click copy. Gimp2 should be opened now, if not already.

Step 8

Image:[8]
Instructions: Now that you're in Gimp2, go and click Edit at the top bar, then click in the box it reveals Paste (or Ctrl+V)

Step 9

Image:[9]
Instructions: Go into the toolbar by clicking the Gimp2 toolbar tab located on the bottom bar of your computer monitor. When your in it, click the Pencil, then click the black box. When it is clicked, pick a colour you want the background around the image to be. You can also increase and decrease the brush size, to make giving an image a coloured background.

Step 10

Image:[10]
Instructions: At the bottom far left of the screen is a box that reads 100%. Go to it and click the arrow on it to reveal a box. Now click 800%.

Step 11

Image:[11]
Instructions: There are two ways to do give this image a background of one colour (necessary for giving it a transparent background). The first is you can simply draw around the image (I use the colour green to draw around images, but you can use any colour). The second way is explained in the Step 12.

Step 12

Image:[12]
Instructions: The second way is to turn parts of the background that are completely one colour to another colour. To do this, go into the toolbar and click the Select by Colour Tool (you can also do this by using the keyboard shortcut SHIFT+O).

Step 13

Image:[13]
Instructions: Now that you have the Select by Colour Tool, click the part of the image that is one colour, and all the parts of the image that have that colour will have a box around them.

Step 14

Image:[14]
Instructions: Now that you have that part selected, go into the toolbar and click the Paint Can (or you can do the keyboard shortcut SHIFT+B). After that, see the two squares with a colour in them? Click the white box and make it exactly the same colour of the top box (or a different colour if you prefer).

Step 15

Image:[15]
Instructions: With your paint can equipped, click any of the boxed sections to colour that section entirely the colour you have picked for the top box. If there are several parts which are coloured one colour and are selected, they can all be coloured one colour. This is explained in Step 16.

Step 16

Image:[16]
Instructions: By doing the keyboard shortcut CTRL+X, all sections that are in boxes will be turned the colour in the bottom colour box in the toolbar.

Step 17

Image:[17]
Instructions: After that, go into Select, on the top bar, then click None. You can also use the keyboard shortcut SHIFT+CTRL+A.

Step 18

Image:[18]
Instructions: If you have filled in the entire background of an image, you are ready to give it a transparent background. This image is obviously finished. So pick the "Select by Colour Tool" by going into the toolbox and clicking the Select by Colour Tool at the top right of the toolbox. After that, click the coloured background you want to turn transparent.

Step 19

Image:[19]
Instructions: Click Layer on the top menu, then go to Transparency. Move the mouse to the left, and a box will open. Select Add Alpha Channel. Now, use the keyboard shortcut CTRL+X.

Step 20

Image:[20]
Instructions: You are now done with the image! Click File on the top menu, then Save or Save as. Save it in the folder of your choice. Give the file a file name, and end with .<extension> (<extension> being in place of the extension to use). You should save images in .png or .gif, as these extensions keep the quality of the image. .jpg lowers the file size of an image, as well as its quality, distorting the image in the process, so it is best not to save an image in .jpg. Also, specify an extension, as just saving without an extension will save the image as .xcf, which when uploaded to the wiki uploads a blank image.

Step 21

Image:[21]
Instructions: After selecting the file name, and extension, this box will pop up. Un-check everything in the box, leaving all boxes blank. Selecting something just adds content to the file, increasing its file size. Un-checking all the boxes and saving the image doesn't do anything to the image, the image appears just like it appeared before you saved it.

Well, thats it! If you find any errors in this walkthrough, please post them in the below "Complaints" section.

Complaints

Find something I did wrong with the walkthrough? Did I leave something out? Post it in the complaints section. All users, registered or unregistered, can post in the section, but please keep the complaints civil, and refrain from using bad language. Place complaints below the below line.

Q: When I got to step 19 (after I had filled in the background of my image with 1 color), I clicked the color picker, and then went to the layers and clicked the "Add Alpha Channel". But when I hit Ctrl + X, my whole image dissapeared! Do you know what's wrong?

Here's the images of what happens: [1] [2]

Emitewiki2 16:48, December 29, 2011 (UTC) A: Error on my part, I left out a sentence. After selecting the Colour picker, click the background you want to turn transparent. Then go into layers, and click "Add Aplha Channel". Then CTRL + X. Everything should work out fine after that.

Q: How do you select the background you want to turn transparent? I clicked on my green background, but nothing happens, and when I do Ctrl + X it still deletes the whole thing. -Emitewiki2

A: Is the colour picker equipped? Select the colour picker then click the green background. You will know when you have done it right when there are boxes around the green background.

Q: I took a video of myself trying to do it, but it was an .avi file so the I can't upload it to the wiki (It is 12 seconds long, so I can't make it a .gif either. Anyway, I click the color picker tool, then I click on the green background of my picture. I then go up to layers -> Transparent -> Add to Alpha Channel, and click on that. then I press the Ctrl button and the X button at the exact same time, and all of my image dissapears. That is the entire run-through of what I do. I stilol can't figure out the problem. -Emitewiki2

A: A severely big problem on my part, again. Wheat I meant by "colour picker" is "Select by Colour Tool". Okay, click the select by colour, click the green background, then do the Layers → Transparency → Add Alpha Channel. After that, do CTRL + X. Everything should go smoothly after that.

Yay! Now it works! Thanks! (It's weird that there was something with the exact same name <D Anyway, I will continue on in the steps now. Thanks again, Emitewiki2 19:43, December 29, 2011 (UTC)

Um... What's the <extention>? I usually just save it as a name, and then post it on the wiki. -Emitewiki2

<extension> is the short name you save something as. Save the images as .png —The preceding unsigned comment was added by NOBODY (talk • contribs)

Q: Is it necessary to have Xneview to capture the image? Why not the PrintScreen key and then pasting it on Paint to crop it?   Random-storykeeper 01:35, January 30, 2012 (UTC)
A: No. I have, several times, copied an image on the Nitrome Wiki and pasted it directly into Gimp, then edited it from there. -Takeshi64 (Am I allowed to answer these instead of Nobody?)

Q: Hi! This is not really a complaint; I think you did a great job with this article. But the way Santi taught me to create transparent images was to create the Alpha layer first, then remove the stuff you don't want using the Fuzzy tool or Color Select tool, then pressing the delete button to get rid of it. I think editors should know both ways, so that they can pick one they prefer or not. Although this article is already quite lengthy.... Anyway, that's my suggestion. Ayernam (talk) 22:38, October 25, 2012 (UTC)

A: I've never heard of that method before. Anyway, I'm not that sure what to do from what you've said. If you want, you can put down your mentioned method on another page, but only if you want. --Talk to 23:11, October 25, 2012 (UTC)

Q: Cool! I'd be glad to explain my (or rather, Santi's) method in an article! Should I just create a new page and title it "Nitrome: How to make transparent images/Gimp2 Alternate Method" or something like that? If so, I'd be happy to. Ayernam (talk) 00:19, October 26, 2012 (UTC)

A: Create a new page titles Nitrome:How to make Transparent Images/Gimp2: Method 2. --Talk to 00:32, October 26, 2012 (UTC)

Q: Okay, thanks. Ayernam (talk) 00:38, October 26, 2012 (UTC)

Q: Whoah whoah whoah, wait a min. I'm not complaining, but why does this tutorial take 21 steps while I only use 3 steps and it only takes 5 seconds. -- •Talk to the 01:52, October 26, 2012 (UTC)