Create Alpha-Blend.Buttons from FWH BMP's, using Templates.

[ukoenig]

Hello,

A normal problem : You need a special looking Button, but cannot find it, even in the Internet.
The only Solution : create it by yourself.

today I finished my 1. Set of Button-Templates, to add any BMP to the Template
and create Alpha-Blended Buttons ( another Set, I'm working on ).
It is possible, to include the BMP's from the BMP-sample-Directory of FWH.
Template-Sizes : 32, 48, 64, 128, 255 / PNG-Format
If You need a not defined Size, always use the 128 x 128 Images for Resizing, because of Quality-improving.
I hope, it covers the different Tastes of the Users.
How to include FWH-Bmp's and creating a working Alpha-Blended-Button, I will explain in this Toppic.



Download :
http://www.pflegeplus.com/fw_downloads/Btntemplate1.zip[/img]

Set 2

Download :
http://www.pflegeplus.com/fw_downloads/Btntemplate2.zip[/img]

Something to fill the Templates Sizes 32, 48, 64, 128
To include a Symbol use for the Template one Size lower ( for Template 128x128 include Symbol 64x64 )

Download :
http://www.pflegeplus.com/fw_downloads/Btntemplate3.zip[/img]

Some more Basics, You can find here :
viewtopic.php?f=3&t=16124&p=83322&hilit=pixelformer#p83322
Pixelformer-Download :
viewtopic.php?f=3&t=15008&p=77576&hilit=pixelformer#p77576

How it works :

1. Step
We have to select < Import > from the File-menue to Imort a FWH-Bmp from FWH-subdir \Bitmaps\32x32,
because we want to create a 64 x 64 Button.



2. Step
We select the Magic-Wall-Tool and Transparent-Color to change the Background.
After the background is filled with the transparent Color,
we have to choose from the Edit-Menue < Select all > and < Copy >
Don't forget to make all Background-parts transparent.
In this sample, in the middle there is still something ( 2 Pixel ) to make transparent.



3. Step
Again we choose < Import > from the File-Menue ( don't save the FWH-Bmp ! )
We select one of the Templates we want to use.
After the Template is loaded, we choose from the Edit-Menue < Paste >
The FWH-Bmp is automaticly centered inside the Template.
If You want to change the Position, You can use the < Move Tool >.
Next we save the Image with < Export to BMP >. Dont forget to activate the Checkbox < Premultipled Alpha >
Your new Alpha-Button is created.



Explorer.bmp used from the FWH-Subdirectory /Bitmap/AlphaBmp/



With the < Move Tool >, You can change the Position of the FWH-Bmp inside the Template.



Best Regards
Uwe

[ukoenig]

Creating a new Template from a existing one, is easy like the Buttoncreation.
To make it better to work with different images the same Time, just open Pixelformer twice.
With the 1. Instance open the Basic-Form, with the 2. open the Image You want to include.
Inside the 2. Instance You can do any changes / resizing....
Copy the Image and choose the 1. Instance there select < Past >. If You are not satisfied with the
Result, just < Undo > and switch back to the 2. Instance and do the changes You need.


My Screenshot-buttons have be done in some more steps.
3 Images are connected together : the basic-template, the ball and the Symbol.

Explaining Step by Step :

1. We open Pixelformer twice
2. With the 1. Instance we import the Basic-Template ( using the Buttonsize we need ).
3. With the 2. Instance we open the Ball-Template ( one size lower than the Basic ).
4. We choose < select all > and < copy > to memory
5. We switch to the Main-Form ( 1. Instance ) and there we select < Paste > and move
-- the image to the needed Position.
-- If we are not satisfied, we choose < Undo > and change the Size in Instance 2.
6. After the 1. Image is included, we move back to the 2. Instance and < Import > the 2. Image
-- with one Size lower than the Ball.
7. Again we choose < Select all > and < copy >
8. We change to the 1. Instance and there we select < Paste >

During Your Work, until You are finished, there is nothing to save.
Three Images are now on Top of each other inside the 1. Instance.

9. If we like the Result, we < Export > to BMP with the activated Checkbox < Premultipled Alpha >

Example :

You like the Hand-Symbol, but You want to connect to another Symbol ( Original = Silver Ball ) .

1. For a new Template, we use the Images with the Size 128x128.
We have to change the Symbol-Size for the Hand ( Ring ) from 128 to 115
The Size 115 covers exactly the old Silverball-Symbol.
( maybe some resizing tests are needed, to cover a old existing Symbol ).
Next we choose < Select all > and < Copy > ( Don't save the Image ! )



2. We Import the Hand-Template ( with the Silver-Ball )
After it is loaded, we choose < Paste >
The new Symbol we want to use together with the Hand is shown.
With the Tool < Move > we cover the old Silver-Ball with the new Image.



We < Export > the new Template with a new Name in Format PNG.
Don't forget to aktivate the Checkbox < Premultipled Alpha > for PNG as well.

This way, You can create You own Templates. Maybe You want to create other Combinations
with some of Your existing Images.
A nice combination : use the < Empty Folder > and place any Symbol on Top.

In the Moment, I'm busy to create seperated Elements.
With this Collection You have a Building-Set, to create any Templates You like.

Still a Set of Basic-Symbols, to include in the Templates :
Sizes : 64x64, 48x48, 32x32 Format PNG.


Download :
http://www.pflegeplus.com/fw_downloads/btnTemplate4.zip

Some unusual Button-Forms, created with Blue/Cyan-Colors and Size 128x128
also a handpointer is included to use as Stand-Alone-Image if You like.
With Pixelformer, You can change the Direction and Size.


Download :
http://www.pflegeplus.com/fw_downloads/Exotic1.zip

Opend twice :


Create unsymmetrical Button-Styles


I think now You will be able to create some buttons, looking different to the normal ones
maybe You will find in the Internet.
I will still create some Exotic-Forms, to make it possible, to create Your individual Buttons with Your own personal Style.

Best Regards
Uwe

[ukoenig]

Hello,

I finished 2 nice Sets of Alpha-Blended Transparent-Buttons.
Sizes :
128x128, 64x64, 48x48, 32x32
255x128, 128x64, 96x48, 64x32
I painted them with pale Colors, to get a contrast with included Symbols.
A small Shadow is added as well. I hope You like it.



A Symbol added to the green Button. Buttonsize 64x64, Symbolsize 48x48


http://www.pflegeplus.com/fw_downloads/Transparent.zip

Best Regards
Uwe

[dutch]

Dear Uwe,

Thanks for your kindness. Your helpful is great and I hope all of us will be like you.

Regards,
Dutch

[ukoenig]

Dear Dutch,

nice to hear from You, that the Informations can help You.

Another Tip :
I think You know the WMF-picture-format ?
( I collected some thousend on CD, for any kind of Informations ).
They are very nicely painted and mostly done with a big Size.
These Images are perfect, to create some special Buttons.
Also useful to place some Logos on a Dialog.
Lets say You need something for a Restaurant or Hotel, You won't find
special Buttons in PNG-Format for it.

How to do it :

We have to convert WMF to PNG to import it in Pixelformer.
You can Download xNView :
http://www.xnview.com

From the Viewer, we select the Image for the Button and save it as PNG


We import the Image in Pixelformer.
With the Selection < Image Properties > we define, that we want transparent areas.
Next we have to paint all Background-Areas transparent.
We use the magic wall and fill the Area.


Next we want to add a Shadow and another image to the new Button.
1

1 We use the magic-wall to define the Transparent Area to draw a Shadow.
2. We use a 50 % transparent-brush for the Shadow.
3. With the Brush ( transparent Areas ), we draw along the right Border of the Image.
4. To draw Shadows to non-transparent Areas, we use the < Sqare > Tool instead of Magic-Wall.
5. To add a image to the Main-Button, we open another Instance of Pixelformer.
6. We Import the Symbol. To check the Sizes, set both Previews to 100 %.
7. We Copy and Paste the Image to the 1. Instance and use the < Move > Tool for the needed Position.

Before Saving ( Export as BMP ) we resize the Image to the needed Button-Size.
Dont't forget to activate the Checkbox => Premultipled Alpha.

Best Regards
Uwe

[dutch]

Dear Uwe,

Thanks for a new tips and can it made as the shadow in the glass or water.

Regards,
Dutch

[nageswaragunupudi]

Mr Uwe

Your tutorials are very clear for us to follow and use. And your tips are of great use,
I admire you for collection so many pictures.

Can you recommend any good freeware for me to extract icons ( and bitmaps ) from different software on my hard disk and screen, quickly and easily ?

[ukoenig]

Dear Rao,

To make the Collection complete :

The best Freeware Icon-Editor- and Extractor IcoFX version 1.6.4 :
http://icofx.ro/



To extract a Icon, just choose from the File < open > and select the File-Type.
The File-Preview shows, if there are any Icons included.



You still asked for a Screencapture Solution :
Not only a Screencapture, as well You can work on the captured Image.
Add text and more ...



Download : http://Screendash.com

Best Regards
Uwe

[nageswaragunupudi]

Mr Uwe
Thanks. It is very nice tool.
But the limitation is that it extracts icons only, but not bitmaps embedded in the exe file. Or am I missing something?
Even our borland workshop or other resource editors can extract icons, bitmaps and cursors from an exe.

[ukoenig]

Dear Rao,

Most of all, commercial-Tools for this Job.

I think, this one will better work for You
It is a small Tool, but extracts everything :



Download :
http://www.isp.net.au/~ajohnson/resourcehacker

If You have problems to connect to the site above,
You can Download from my Website :
http://www.pflegeplus.com/fw_downloads/reshack.zip

Best Regards
Uwe

[Antonio Linares]

Uwe,

many thanks for your great tutorials

[ukoenig]

Antonio,

it is nice to hear, that the Informations are useful for the Forum.

I found still another, better Solution for Resource-Extraction from EXE- and DLL-Files.
It is possible to work with Wildcards and Scanning of a Directory.
Bitmaps can be converted to PNG to the Destination-Directory :



It is a brandnew Update :
Download ( Freeware ) You will find it at the Bottom of the List :
http://www.nirsoft.net/utils/index.html ... mmer_tools

Best Regards
Uwe