PNG transparent masks?

[John_Klassek]

I've been fascinated by the button.btn file format as I have with the use of the PNG format.

What intrigues me is how to create a PNG image with a transparent drop shadow for use in some custom-made BTN files.

What program do you use to create those the PNG files with the transparency factor? Is it just a mask over the black area?

A few hints or a link to a site with a good explanation would be great!

Thanks.

John

[Corey]

Hi John. OK I whipped up a quicktime video tute for you. Get it here http://www.indigorose.com/temp_web/button.zip [11 min. 12MB]

Sorry I rushed through, busy times. There's a much more comprehensive sequence about this on the upcoming training CD although this vidcap probably covers everything a keener such as yourself needs to know. But if you have any follow up questions I'm happy to help. :)

One more thing. .btn files are archives, you can unpack them using winzip or winrar and see the images and xml manifest inside. This makes it very feasible for you to create button batching tools and the like right in AMS...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[John_Klassek]

Hi Corey, Thanks a million for some excellent coverage.

Yes, I had understood that a *.btn file was just a renamed *.zip file - that in itself is absolutely amazing in its simplicity! Just brilliant.

I've been reading a few web sites on the PNG format, it seems only a few programs (including with PhotoShop) actually support saving PNG files with alpha transparencies. I use Corel PhotoPaint 11 and this feature doesn't seem supported there. PhotoPaint can read them, but can't be created as such.

Perhaps PhotoShop may be the way to go there.

Thanks again, Corey.

Cheers,

John

[John_Klassek]

An example of the limits of PhotoPaint - as attached.

It can create the alpha transparency for the native Corel PhotoPaint CPT format, but tells me when attempting to save as a PNG that alpha channels are not supported by the PNG format!

In the far right example, I thought I might be able to convert from a CPT or TIFF using Graphics Workshop Professional, only to achieve

That's where I had hit a dead end!

Thanks again for your video tutorial.

[yosik]

John,
Photoshop does rule, but you could use PaintShop or Fireworks (which actually works NATIVE in png).
Yossi

[Ted Sullivan]

Yes, I've had some good success with Macromedia Fireworks. As PNG is its native format, it's pretty easy to get things into PNG format with Alpha etc! Of course, you can't beat PhotoShop, but Fireworks has some really neat features as far as I'm concerned.

[TJ_Tigger]

I use Paint Shop Pro. It will support PNG24 and PNG8, but in viewing Corey's video it is not as apparent. There is a PNG Optimizer or when saving as .png there is an options button where you can set your options.

I was playing with PNG and the custom masks. It is cool what you can do with them. I have attached a little project using the windows mask.

[TJ_Tigger]

Attachment was too big. Here it is again

[yosik]

Corey,
Just reviewed your video on button making. Clear explaination. Verymuch appreciated. Thanks.
Yossi

[Corey]

Anytime... I must say I'm pretty hooked on the video training thing right now. It's just a great way to learn and communicate for people like me...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[yosik]

Corey,
I agree 100%. I personally like Camtasia.
I see that your output is *.mov. why not flash? or is it just the tool you are using?
Yossi

[Corey]

With screencap based training stuff you can generally get QT down to about 1MB per minute at 800 X 600 with decent enough quality by going down to 7fps with MP3 audio... If someone can show me how to do that with .swf or .flv I'd drop the QT...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[yosik]

Corey,
I have been doing a few tutorials using Camtasia and Techsmith native codec. As an example, working in 640X480, a 13 minutes video in Techsmith codec (under avi wrapping) takes 41MB, converted in Camtasia to swf, it will be 5MB. I would say it beats your specs.
Yossi

[Corey]

Hmmm, can't be. If you go to their site, their demo .swf is 2.35 MB for 3 minutes. The thing is they record their audio at 11,250 which I don't consider to be fine, I use 22,500 and I'm not entirely happy about that, the example here for the button was 48kps, much better sounding. I prefer the better sounding audio when I'm wading through training stuff, especially after a couple hours. Fact is I find the audio in their .swf sample to be of unacceptable quality.

(Also Don't forget 800 X 600 is 1.6 times larger than 640 X 480)

So the producers of Camtasia themselves are in over 1MB per minute at 640 X 480 if they improve that audio even slightly. But even if they don't, let's take their example "as is", it's 0.8 MB per minute which would be 1.4 MB per minute at 800 X 600. That's a whopping 40% larger than the QT, and that's going by Techsmith's best sample created by their experts. :)

Not to mention that, at that size, the QT will be crisper both visually and audibly than the .swf...

If you have some .swf video which you feel would change my mind I'd love to see it. I'm anxiously awaiting improvments in Flash to make it feasible for these...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[John_Klassek]

I have been interested, over the course of this week, to learn that CorelPhotoPaint cannot [that I know of] create a PNG image with an Alpha Transparency Channel.

However, after closely following Corey's excellent video tutorial, [no I don't have PhotoShop] I have discovered that such a PNG can be created in CorelDRAW 11, and successfully exported to PhotoPaint to make excellent PNG images with alpha transparent shading.

So the learning curve never ends.

Working in IT there is a market for such short video tutorials. Many learn very quickly that way, and they certainly create good karma.

Cheers,

John

[eric_darling]

Yo guys...

Be very careful when putting video into SWF format. You've got a 16,000 frame limit there.... Doesn't sound like a low ceiling, but consider this:

If you compress your NTSC video's frame rate in half (to 15 FPS), that means you'll run out of frames at a little over 17 minutes. If you don't halve your frame rate, you're looking at under 9 minutes until things go terribly wrong for your video.

Just a word to the wise... From a guy who has been through the blender on that one a couple of times in a couple of very painful ways.... Ah, the joy of learning by doing.

[Corey]

True Eric. I know for a fact though that, just like Yossi and I, you can hardly wait for the next generation of flash video technology too... :) I bet/hope it'll be feasible by this time next year.

I also reached the conclusions I have the same way as Eric no doubt, cranking out dozens of boring samples to see what's what and how they act. I tested QT, Flash, Real, Techsmith Compressed AVI, and even WMV as possibilities for this CD and QT squeaked through. I'm by no means a Quicktime advocate though, whatever works best in your scenario is the best format for you, no question...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[eric_darling]

Incidentally, you can use FLV, implemented properly using Flash version 7 and a host SWF file, you can exceed that frame limit.

[yosik]

Thanks for the reminder Eric. In any case , from a methodological point of view, I would stick to max 15minutes per lesson.
FLV is a right step towards the right direction. As you said Corey, by next year they should have this video issue solved.
As to the swf file. I have it here. It is in Hebrew, but never mind the content, you can judge the quality. As I said, it is 5MB. how can I send it to you?
Yossi

[Corey]

Hmmm, I don't have anyway for you to send it but if you can email a link that would be cool, if not no biggie, it's not that I doubt you even the slightest bit, I just haven't seen anything *usable* that small before. Besides I'm perfectly fluent in Hebrew. Errr, no wait that's right, I'm not.

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)

[mgwade]

I realize this is an old post but is the tutorial still available somewhere on the site for making transparent .png files from Corel .cpt files?
I am having the same problem as John Klassen was. I even downloaded Adobe Photoshop trial version but it won't import .cpt files, so does me no good!
I have Corel Suite 11. Any help is appreciated.
Thanks,
Mindy

[Corey]

Hi Mindy. Here's a tutorial which outlines the process, it's applicable to any image editor. Hope that helps:

http://indigorose.com/forums/showthread.php?p=67604#post67604

Anytime you have a tutorial request please feel free to post it, I always do my best to accomodate requests. :yes

[John_Klassek]

I realize this is an old post but is the tutorial still available somewhere on the site for making transparent .png files from Corel .cpt files?
I am having the same problem as John Klassen was. I even downloaded Adobe Photoshop trial version but it won't import .cpt files, so does me no good!
I have Corel Suite 11. Any help is appreciated.
Thanks,
Mindy

Mindy, I hope the following helps:

When I have created the corel.cpt file from within Corel PhotoPaint, I then open the file in CorelDRAW and create any transparencies and alpha shadows that way. From there I re-export it as a CPT or PNG to then open it again in PhotoPaint for any final sharpening/brightness/contrast/hues etc.

I've been a Corel user for many years, and even though the final PNG object is arrived at via a slightly differently route than it's Adobe counterpart, once you've created an alpha transparent CPT/PNG image using CorelDRAW/PhotoPaint, you realise just how easy it is.

A year or so ago I followed Corey's Adobe tutorial on this, but the steps didn't quite apply with PhotoPaint. But I discovered when used in conjunction with CorelDRAW, the results are excellent.

Let me know if I can be of further help.

Kind regards,

John

[yosik]

Steps in CorelDraw:
1. Import your .cpt image into CorelDraw
2. While still selected, goto File<Export
3. Choose Save as Type PNG and under Options, enabled the "selected only" option
4. IN the Convert to Bitmap window, keep resolution to 72dpi (screen), color mode 24-bit, and select transparent background.
5. Click OK
6. In the PNG Export window, choose Masked Area and (if not already choosen) under color table or with the color sliders, choose your background color.
7. Click OK

That's it. Perfect PNG, with Alpha, (you can even get smooth shadows etc... for semi transparent images).

Good luck

Yossi

[mgwade]

Thanks, Yossik, for the specific details!! It worked perfectly! You have no idea how many frustrating hours I spent working on this problem. I was so elated to finally get a good quality transparent .png with Corel. After going to the Corel site it looked like a lot of people were having the same problem. There were like 300 posts from different people, all asking how to do that.
Thanks so much!
Mindy Wade
www.mindywade.com

[yosik]

:)
My pleasure.
Yossi