18 {{ upvoteCount | shortNum }}
18 {{ upvoteCount | shortNum }}

How can I create a round and transparent button?

by MB Ninja
16 replies
  • WEB DESIGN
    • |
Hey guys, I've been searching YouTube and Google for a while, and I can't find a solution.

This is the problem...

Photoshop Button

I created this button in Photoshop on a transparent background; saved for web and devices; 24-bit PNG; transparency box is checked off.

How can I get those square corners off? I just want to have a rectangular button on my site, with round corners and some transparency around the entire button.

I'm assuming this is really easy to do in Photoshop, but I'm such a n00b. I hope someone can help.
#button #create #round #transparent
  • Profile picture of the author NoahsArk
    Hi
    If you have problem with save as web try using the regular save as png image. the transparency wont be visible and will show white but if you somewhere, the white image will not exist
    {{ DiscussionBoard.errors[4916337].message }}
  • Profile picture of the author MB Ninja
    The corners of the button are the only problem.

    Right here...

    http://screencast.com/t/XCV0h6Jpo

    I'm literally pointing to the problem. Do you know how to make the square corners disappear?

    Here is a better example...

    http://screencast.com/t/FYremSovk

    How do I remove the outline? I thought the transparency limits would be invisible.
    {{ DiscussionBoard.errors[4916476].message }}
  • Profile picture of the author CSS Architect
    The only thing I can think of right now is the "stroke" effect, but if it's not, just upload the PSD and i'll see what's causing the outline.
    {{ DiscussionBoard.errors[4916855].message }}
  • Profile picture of the author Jonas B
    im guessing that you have created a button or a submit button.. then set the background image of that button to your own made button?

    If so simply set the border of the button to 0px
    Signature
    Proud owner of the most flexible mobile app builder. Check it out at http://bit.ly/hybrica!
    Mobile Web Expert & Android Developer
    {{ DiscussionBoard.errors[4916885].message }}
    • Profile picture of the author MB Ninja
      Originally Posted by Jonas B View Post

      im guessing that you have created a button or a submit button.. then set the background image of that button to your own made button?

      If so simply set the border of the button to 0px
      I tried that in Dreamweaver, but it doesn't work.

      Originally Posted by CSS Architect View Post

      The only thing I can think of right now is the "stroke" effect, but if it's not, just upload the PSD and i'll see what's causing the outline.
      I never looked in the stroke effects, but here is the PSD...
      {{ DiscussionBoard.errors[4917269].message }}
  • Profile picture of the author CSS Architect
    I'm not sure why I didn't think of that, but Jonas might be right -haha
    {{ DiscussionBoard.errors[4916903].message }}
  • Profile picture of the author Steven Dybka
    Originally Posted by MB Ninja View Post

    Hey guys, I've been searching YouTube and Google for a while, and I can't find a solution.

    This is the problem...

    Photoshop Button

    I created this button in Photoshop on a transparent background; saved for web and devices; 24-bit PNG; transparency box is checked off.

    How can I get those square corners off? I just want to have a rectangular button on my site, with round corners and some transparency around the entire button.

    I'm assuming this is really easy to do in Photoshop, but I'm such a n00b. I hope someone can help.
    If your having problems with Photoshop there are other free online resources to produce buttons,with a quick Google search I found this one you can use

    Link


    Steve
    Signature

    {{ DiscussionBoard.errors[4916907].message }}
  • Profile picture of the author MB Ninja
    Steven:
    Thanks for the link. I might use it as a backup.
    {{ DiscussionBoard.errors[4917275].message }}
    • Profile picture of the author CSS Architect
      The PSD looks perfectly fine, there isn't even any effects on it.
      Jonas might be right, it has to be your CSS producing the border.

      If you paste your code (or upload the file) I can take a look at it.

      (i didn't even know you can upload files on this site until I saw that PSD)
      :p

      it shows white background as thumbnail and black when enlarged, but if you download it will be transparent.

      EDIT:

      Or add this to your CSS file:

      Code:
      a img { 
    border: none;
}
      {{ DiscussionBoard.errors[4917367].message }}
    • Profile picture of the author Steven Dybka
      Originally Posted by MB Ninja View Post

      Steven:
      Thanks for the link. I might use it as a backup.
      Is that the button your trying to make in the attachment,if so I made one for you.Attachment 10571

      (Edit) Oh I see CSS Architect beat me to it on the button,hopefully these buttons will help you out

      Steve
      Signature

      {{ DiscussionBoard.errors[4917381].message }}
  • Profile picture of the author MB Ninja
    CSS Architect:
    I should've done this earlier, but I created a new HTML page in Dreamweaver and tested my button. After changing the background color of the page, I saw that my button works just like the buttons you and Steven created. In other words, the permanent outline is gone. So, there must be a problem with my code. I will contact the person I got it from. If that doesn't help, I will let you guys know.

    Steven:
    I'm not sure about using this kind of button. I just wanted to see what I could make in Photoshop.

    Thanks guys.
    {{ DiscussionBoard.errors[4920951].message }}
  • Profile picture of the author MB Ninja
    The problem has been solved. It was the CSS border code. I changed the pixel size in the wrong place.
    {{ DiscussionBoard.errors[4921894].message }}
  • Profile picture of the author CSS Architect
    Glad you figured it out.
    {{ DiscussionBoard.errors[4922709].message }}
  • Profile picture of the author FreeZeo
    if you are trying to save the transparent image as a .JPEG..it wont work
    you need to save it as .PNG
    {{ DiscussionBoard.errors[4925038].message }}
  • Profile picture of the author MB Ninja
    Is there a quick and easy way to change the background color or make it transparent in Photoshop CS5? I attached the image I'm working on right now.

    I've been using the quick selection tool, but it's been quite a tedious process with this image. Is there a better way?
    {{ DiscussionBoard.errors[4925321].message }}
    • Profile picture of the author CSS Architect
      Depending on the background color you want to match, you may have to try a few of them to get the right color.

      Generally, "darken color" open works best for me, just because to have the background image you want to blend in as the top layers.

      Once you got it to match the background color, select the two layers and merge them together.
      {{ DiscussionBoard.errors[4926625].message }}

Trending Topics