Creating web buttons

[agibsonsw]

Hello. PowerPoint 2010.

I'm using PowerPoint to create web buttons, as it seems a lot easier than than learning Paint.Net (layers?.. etc.). I save the buttons as .png.

The buttons/shapes have additional area outside of the button. This is partly due to any shadows. But if I remove the shadows there is still an area outside the buttons. How can I remove this area precisely - I'm struggling to do it accurately in Paint.Net?

I want to create sprites. This is two images that sit on of top of the other. How can I make the gap between them precisely zero (before grouping)?

Andy.

[HansV]

How are you creating the buttons in PowerPoint?

[agibsonsw]

How are you creating the buttons in PowerPoint?

Hello. I'm using Shapes, adding text, and copying/pasting the shapes. I'd like to include, perhaps, a bevel, but I want to save as .png without a large empty area outside.

[HansV]

If you create something like this:

Button.png

there will be some blank space around it. But 3D button are so 2006!
The new Metro GUI does away with all 3D effects, shadows etc.
This button has hardly any blank space around it:

Button1.png

[agibsonsw]

@Hans Only six years behind then?

But the second one isn't a button..

[HansV]

It would be in Windows 8...

[agibsonsw]

It would be in Windows 8...

Yeah, but that won't affect me for another six (eight) years

[HansV]

You could create and save the button in PowerPoint, then use any graphics editor (FastStone Image Viewer, IrfanView, even MS Paint) to crop the image...

[agibsonsw]

You could create and save the button in PowerPoint, then use any graphics editor (FastStone Image Viewer, IrfanView, even MS Paint) to crop the image...

Yes I was attempting it in Paint.Net. But I'm using different buttons that I want to have precisely the same dimensions. I might manage to crop them to the same size, but they won't (reliably) be in the same position..

Hope that makes some sense.

[HansV]

I'm leave that to the graphics experts...

[agibsonsw]

Perhaps if I ask v. nicely someone with a couple of minutes to spare might do this for me

I want to create one (sprite) image from two, with login1.png above login2.png. But login2 seems bigger than login1 by a pixel or 3??

I will need to know where the images 'split' so I know what offset to use on hover. But I appreciate I might be a little cheeky in asking this, soz!

[HansV]

I have no idea what you mean by "where the images split".
In the attached version, the white space around the buttons has been removed and they are all 108x34 px.

logging.zip

[agibsonsw]

I have no idea what you mean by "where the images split".
In the attached version, the white space around the buttons has been removed and they are all 108x34 px.

Hello @Hans and thank you for taking the time. This is an improvement of what I had but I'm looking to create a sprite. That is, one image that contains both login1 and login2 (below login1) so that I can use css :hover to move the image up. To achieve this I need to know precisely how far the 2nd (lower) image is offset from the 1st (top), so that I can use :hover to move it correctly into position. Andy.

[HansV]

I can't help you with that, sorry.

[agibsonsw]

I can't help you with that, sorry.

@Hans No problem. I've just found this great page where I dragged my two images onto it and it instantly created my sprite , and confirmed the correct offset for me.

Andy.