Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Have designed a button in photoshop..how do i save the button and not the whole page

[Beatplexity]

this picture should help explan it

http://i42.tinypic.com/smt4c6.jpg

so i have the button and i want to save JUST the button and not the whole dimesions of the page, when i flatten image to try and save it, the background just turns white and it ends up saving the whole page

also i want to add some twirly graphics to the button, how do i extract the button with the twirls that are inside the button and leave out the rest that are on the transparent background

http://i40.tinypic.com/2zsa879.jpg

any ideas anyone

much appreciated.

[Driver01]

First you need to remove the excess of swirl pattern from the button:

select the button outline layer in the layers pallette, then goto Select -> load selection, in the top menu, the buttons outline should now be selected with the dashed line. Then goto Select -> Inverse, this will select the area outside the button outline.

Go to the layers pallette again and select the swirl pattern layer and just hit delete on the keyboard. Now that should of removed all of the excess pattern outside the button outline.

Remove the selection, Select -> Deselect

Now you need to remove all background and just leave the button, Goto the top menu, Image -> Trim. Based on transparent pixels, top, left, bottom and right.

Now you can save your button. File -> save for web and devices.

[Beatplexity]

thanks for the tip - ive managed to do this but now it seems that some pixels are making this look slightly off

how can i change the pixels in the image below to the colour they should be?

http://i42.tinypic.com/30jpaf6.jpg

oh also i have saved the image as a png, what difference does saving it for web do instead of just normal 'save as' ?

[Driver01]

Sorry I'm not sure what you mean? The saving for web and devices will allow you to choose different settings/formats and will optimize the size for the web.

[Beatplexity]

if you look at the image i posted you will understand - http://i42.tinypic.com/30jpaf6.jpg

the light coloured border that runs around the button is being overlapped by some of the swirl and it makes the button look wrong

[Driver01]

Ok so you want to change it so the border has no pattern overlapping is that correct?

[Beatplexity]

yes, the border needs to be the same colour and not have bits of the twirl pattern overlapping it

[Driver01]

Without actually having the psd, its difficult for me to say. Where does the border come from?

[Beatplexity]

heres the psd - http://www.2shared.com/photo/mzQluxg...ad_button.html

[Beatplexity]

ok ive managed to fix it, i was just selecting the wrong layer for editing

still getting my head around ps haha.....thanks for the help

finished button -

http://i5.photobucket.com/albums/y15...adbutton-1.png

[Driver01]

http://rapidshare.com/files/38555900...utton.psd.html

I hope this is what you need?

[Driver01]

Very Nice!

[Beatplexity]

thanks for the help Driver, this is the first thing ive ever created in photoshop

[Driver01]

my pleasure.

[bear]

As an alternate method:
Regarding the "swirly pattern", rather than select and delete, simply stack that pattern layer directly above the button graphic (the rectangle) layer, and while holding ALT click the bar in between the two. That makes it a clipping layer, and everything outside of the lower graphic will not be visible. It is still there, and movable, making it far more versatile if you decide to change things around.

So in the layers pallette, border layer above all, then the swirl layer, then the button rectangle layer. Clip the swirl to the rectangle.