Transparency tutorial

[Hypersoup]

Well, this tutorial was actually just a private "lesson" for smurfyy but then I thought, "Oh, why not just post it into the creative thread. Maybe I'll learn something new from other peeps :)." So, in recognition of that, here's the transparent background tutorial I promised smurfyy. As always, feel free to stomp, kick, punch or violently hurt me if you feel like you disagree with my method. However, if you do find this tut helpful, a rep point would be nice :D :p.

Step 1:
First get a picture to cut out. Right-click and select "Copy Image"

Step 2:
Open your nifty version of Photoshop (would probably advise Photoshop 7+)

**Step 3:
Here's where the fun begins. Create a new layer above the default "Background" layer but below your picture. When this is complete, delete the "Background" layer. However, there's also a way to bypass this step and just continue to step 4. When you open a new document, set your "Background Content" to "Transparent" and that should help you avoid deleting a white BG layer. I only remembered that AFTER I had done writing up the tutorial so... being the lazy bum I am... :D

Step 4:
Zoom into the picture around 800x. Taking the pen tool, you carefully trace around the areas you want to keep. Keep doing this until everything you want has been traced around. The pen tool is difficult to learn at first but after awhile, the basic theory is pretty easy. Just google up how to use the pen tool and you'll be able to do it no problem. If you still have trouble, just ask one of the HF PS pros around and I'm sure they'll help you :).

Step 5:
If you have any areas inside the area that you want to keep cut out, then click on the "Exclude overlapping path areas" with your pen tool. This way, when you outline the areas inside, you'll also cut them out in your vector mask.

Step 6:
Once you're content with your path, right-click and click on "Create vector mask". If done right, this should cut the area around your path and anything inside as stated in step 5.

Step 7:
Finally, merge down the picture into your blank layer in step 3 and voila~ you're done! You have an option of keeping the picture a vector mask or the option I did above. Either way you'll have a transparent background. I just did it this way because vector masks usually create a lot of hassle with other things so making the picture into a normal layer is easier for me.

Original Picture (left) and Final Product (right):
http://img.photobucket.com/albums/v333/Hypersoup/Original.png http://img.photobucket.com/albums/v333/Hypersoup/Revised.png
For the transparent image, you can't save it as any other file format except for .gif and .png. I perfer .png better because it keeps the original colours and better quality than .gif IMO. However, .png tends to show up wonky on IE so it's suggested that unless you want to switch to Firefox (WAY better internet explorer), then go with .gif.

Pictures depicting steps have been removed; text versions have already been placed into post.

[Ether]

tytytytytty!!! *deleted adobe photoshop elements and redownloaded CS2* lol..thanks a lot!!

And wow! you play gunbound? whats your username?

[Hypersoup]

Well I don't really play as much as screw around XD
But if you HAVE to know, it's "de1337ed" :cool: :D :p.

[briareos_kerensky]

Nice tutorial...however, I always prefer to explain the simplest tools first...the magic wand and the lasso!
The pen tool is a good option for medium to advanced users, at first using it can be a real pain (note: I really hate how PS manages vectors...I prefer Max and Corel Draw), the magic wand and the lasso tools are much easier to use, although they do not garauntee the same precision of the method above...however, if you need an image smaller than the original, you should be okay as PS'antialias should correct most jagged lines.

Theory is simple. The magic wand select all pixels of the same colour within a certain boundary, expressed in the "tolerance" field; higher the number in this field, more colors will be selected: it's easier to test by yourself than explaing it by words, and you won't see images soon ^^. The anti-alias checkbox indicates if the resulting selection will have (relatively) smooth lines (higly recomended if you're working with uneven surfaces, not recomended if you're handling straight vertical and horizontal lines); "contigous" means that the wand will select colors near each other: for example, the if the "contigous" checkbox is on, clicking on the pillow part highlighted in step 5 of the original post will select only that small yellow part; with "contigous" off, the wand will select the whole pillow following the tolerance level. "Sample all layers" will select all colors within the tolerance level on all layers.

What you need to do is open the image, right-clikc on the "background" layer and select "duplicate". Now delete the background layer and simply select the parts you want to delete. Multiple selections can be done by holding down the shift key.

The lasso tool has three sub-tools that can be changed by holding down the men

[BlankVoid]

i usually use magic wand and lasso too. though im teaching myself how to vector with pen, i am not too good with it (i just started yesterday XP) but i managed to do pretty good without that many jagged edges.

as for the picture above, it wouldve been much easier just to have stuck with magic wand... -_- you should've used an uBer hard image to extract instead. XP

[Hypersoup]

Well, when smurfyy asked how to do it... this was the only option that came to mind because this is how I usually do it now :). I've pretty much forgotten about the lasso and magic wand :p. But that aside, using the lasso and magic wand is a good idea too. The only thing I don't like about it however is how pixelated the edges look dependant on your picture. With a vector mask, it fades the edge cut slightly so that you have relatively no pixelation whatsoever. That and like mentioned before, vector masks provide accuracy which has always been a key factor for me. All in all, I like using my method better (hope I don't sound too pompous) just out of user preference. But like I said before, whatever rings your bell; you can use the lasso and magic wand if you want or you can vector mask it, either way you'll achieve relatively same results (with vector mask having better quality but if you can't use it, it's much better using something you have familarity with).

By the way, BlankVoid, I only wanted to show how you could use a vector mask to create a transparent background so it would've defeated the whole purpose had I used lasso ^_^. And as for the uB3r hard picture... I'm lazy so all I did was pick a picture that would explain the concept enough, not make me look like the next Da Vinci :) :D.

[Ether]

LOL, i feel so stupid lol. when i went download.com, and click dl for CS2, i downloaded the MAC version unknowingly. I was like, wtf, it doest work! i dled it 2 more times, same results. i was at the point where i was going to pull my hair out and redownload photoshop elements instead when i found out that the windows version was right beneath it :P

[Radeonator]

I used to this one, but my line was usually => path => make selection => copy => 0px => open new document => delete layer "background" => paste image.

that wa much better as you can save the pics in *psd format...... and is was still in layer mode, which i can save up to 2 scan at once ^^.

[expy]

I'll usually just use the Polygonal Lasso at 1600x

[orisa]

Am I the only one who uses Extract function? I feel so sad...

Pen tool is useful for a picture with complex structure though :D

Good tut by the way.

[KaM]

Nice tut...i love the pen tool >.>

[daeyna]

I have about ten different ways I cut things out. Using Photoshop 6, there are definitely some I don't like:


Extract tool - this is a pain: it only has one level of Undo; if you preview an extraction, and try to clean it up using the various fixup tools, if you ever accidentally select and use one of the edge-highlighting tools you have to start over.
Magnetic lasso - I can't make this work


Techniques I usually use:


1600% polygonal lasso: this is pretty good, but takes a long time to get good results, so I don't do it very often. (It got a lot faster once I learned to scroll using the spacebar!)
erasing the background: this is workable if you're careful but kind of tedious and you have to make sure you don't mess up without noticing, because you have to undo to get things back
quick mask mode: I switched to this instead of erasing the background. It's basically the same, but you're painting a selection, and once you're happy with it, you delete the section. I use it for quick-and-dirty stuff, but if I'm serious, I use:
layer mask: This is better than actually erasing, because you can paint in an area you erased and get back the original image, so you don't have to constantly undo. Create a layer mask with 'reveal all', and start painting with black and white. I set the paint brush to one size, and the erase brush to a different size, and then I can switch between them using 'b' and 'e', and I can switch the colors with 'x', so I can both erase and un-erase with two different size brushes easily. Use shift-click to draw straight lines, and it's pretty effective.
You can combine all of these. First, use polygonal lasso to make a rough version of things. Switch to quick mask mode ('q'), and now you can use painting tools to refine the edges of the selection. Switch out of quick mask mode, create a layer mask using 'reveal selection', and you're done, but you can still tweak it since it's not really erased.


One reason not to use a layer mask is because you can't defringe if you've got a layer mask. Defringing can definitely help a lot to clean up the edges. So once I think it's done, I may duplicate the layer, hide the old one, apply the layer mask to the new one, and then defringe.

Finally, if you have opened an existing image, and the image is locked and not transparent, so erasing it doesn't reveal transparency, just double-click the entry in the layer palette, and hit enter. This unlocks it so that erasing and layer-masking shows transparent, at least in PS6.

I'm hoping that someday software like this (http://research.microsoft.com/vision/cambridge/i3l/segmentation/GrabCut.htm) will actually be released and solve the problem (although it probably won't work that well for CGs).

[aoshi1]

tnx for the tutorial, i've been looking for a long time in making transparent pic

now i just need to master the pen tool

[xaero]

Hmm.. I've got a problem.. how do you make the picture so that it is transparent when I use it in hongfire? I mean the part which is supposed to be transparent in the picture, turned out to be grayish.. just like in the Final Product pic

Any help would be appreciated.

Thanks in advance ^^

[rhapsody9]

let me guess... you're using Internet Explorer as your browser... right?

[xaero]

You are correct.:P why? what's wrong with IE?

[srea]

You are correct.:P why? what's wrong with IE?
Nothing wrong except the transparent images of PNG format.
Not draw correctly , like a gray color on transparent. (nothing wrong with the transparent of GIF)