hosted by liquidweb


Go Back   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
Reply

Forum Jump

Have designed a button in photoshop..how do i save the button and not the whole page

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191

Have designed a button in photoshop..how do i save the button and not the whole page


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.


Last edited by Beatplexity; 05-10-2010 at 01:00 AM.


Sponsored Links
  #2  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
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.

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #3  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191
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' ?

Sponsored Links
  #4  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
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.

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #5  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191
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


Last edited by Beatplexity; 05-10-2010 at 03:38 AM.
  #6  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
Ok so you want to change it so the border has no pattern overlapping is that correct?

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #7  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191
yes, the border needs to be the same colour and not have bits of the twirl pattern overlapping it

  #8  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
Without actually having the psd, its difficult for me to say. Where does the border come from?

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #9  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191

  #10  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191
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

  #11  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #12  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
Very Nice!

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #13  
Old
Junior Guru
 
Join Date: May 2008
Location: London
Posts: 191
thanks for the help Driver, this is the first thing ive ever created in photoshop

  #14  
Old
Web Hosting Guru
 
Join Date: Jan 2010
Location: good ole UK
Posts: 341
my pleasure.

__________________
I H4t3 l33T, l33T i5 4 l053r5!
██
███
████ Personally I'm always ready to learn, although I do not always like being taught.

  #15  
Old
Community Leader
 
Join Date: Oct 2002
Location: Mayberry
Posts: 19,951
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.

__________________
Having problems, or maybe questions about WHT? Head over to the help desk!



Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Detecting/Disabling back button using PHP - reload page when back button is pressed. vpsfusion Programming Discussion 1 08-25-2007 06:55 PM
button works on mac not on pc (html button) + mysql backup blasto333 Programming Discussion 2 03-08-2003 11:32 AM
Need a advertising button designed ASAP! 0wned Other Offers & Requests 6 11-23-2002 02:06 AM
Home Page Button Ads Available abctracker Other Offers & Requests 0 07-12-2002 02:49 AM
Folder's button in PM page. Glexicon WHT Announcements, Feedback and Questions 1 09-23-2001 07:31 PM

Related posts from TheWhir.com
Title Type Date Posted
New GoGrid Partners Help Enterprises Run Big Data Applications in the Cloud Web Hosting News 2014-05-07 11:05:43
Department of Defense Revisits Cloud Strategy to Save Taxpayer Money Web Hosting News 2014-05-01 08:33:53
1&1 Internet Launches Tool to Improve Social Media for MyWebsite Customers Web Hosting News 2013-07-09 14:23:42
Page.ly Grows Managed WordPress Hosting Platform with BlogDroid Acquisition Web Hosting News 2013-06-27 15:43:37
1&1 Internet Adds New SMB Tools to MyWebsite Web Hosting News 2013-03-25 16:29:43


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?