What's new
By:
Filters
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Navigation Buttons showing unwanted pixels..


Dezigns Unlimited

Dezigns Unlimited

Guru
Messages
963
Likes
11
Hello everyone! I am currently working on a web page and would consider myself a intermediate to advanced Photoshop user but... I can not figure out why i am getting these unwanted artifacts appearing on the corners of my buttons..

Below is an example of the buttons before i add them to my site...

contact.gif

Here is what they look like once inserted to my site, is this something i am going to have to live with or is there a fix?

Untitled-2.jpg
 
Those look like different images... the example has squared bottom corners but in the screenshot of your site they have rounded bottom corners.

When you save them make sure you have Matte set to none. You could also try PNG24 instead of gif... in case it's from limited color settings.
 
View attachment 396

Those image are saved with the corners colored (or a background)
Just make a capsule shape around the text and select the outer or inverse it and delete, it will have semi rough edges but not noticeable till blown up so on your page they will be fine this is a quick edit, you can make different size but it those will work or you can refine the edge
 
Gaussian said:
Those look like different images... the example has squared bottom corners but in the screenshot of your site they have rounded bottom corners.

When you save them make sure you have Matte set to none. You could also try PNG24 instead of gif... in case it's from limited color settings.
Click to expand...

G, you would be correct, they are different images, but i still get the same results, i tried rendering the images in different formats because i thought the same as you (the color limitations), that didn't help, matte was set to 0..

Btw, i love the the style of this forum man, it's nice!!!

iDad said:
Those image are saved with the corners colored (or a background)
Just make a capsule shape around the text and select the outer or inverse it and delete, it will have semi rough edges but not noticeable till blown up so on your page they will be fine this is a quick edit, you can make different size but it those will work or you can refine the edge
Click to expand...

Not sure i understand what you mean, no back ground was applied, there was a gradient on the button itself but no background, the first layer in my pallet was transparent.

Trying the refine edge technique right now, will report back with results, thanks for replying guys.
 
The problem is that if you look at the button, you will see there are stil white pixels on the edge, so this maybe the problem :)

It also looks like you have used contract as well, this will still leave pixels
 
KRF said:
The problem is that if you look at the button, you will see there are stil white pixels on the edge, so this maybe the problem :)

It also looks like you have used contract as well, this will still leave pixels
Click to expand...

Agreed, when i zoom all the way in i do get those left over pixels, it may be the style that is applied, but i tried different ones and still get them, what do you mean by contract?
 
I think he meant contrastnot sure why though
 
KrDezines said:
Agreed, when i zoom all the way in i do get those left over pixels, it may be the style that is applied, but i tried different ones and still get them, what do you mean by contract?
Click to expand...

What I meant was Select > Modify > Contract.
 
KRF said:
What I meant was Select > Modify > Contract.
Click to expand...

Yea, never used that though... I may have to go with solid colors, sucks because the rest of my layout was mocked up in Photoshop using that same gradient and style but the rest of my images that are the exact same shape and style are working perfect, GRRR!! I say, GRRR!!:banghead:
 
Upload one of the buttons in PSD as an attachment and I'll take a look at it. Sounds like you just need to clean up the edges.
 
Try these. Your image actually looked good in the PSD, I didn't change anything just exported the slices as PNG 24 with no Matte.

**Edit**
Added the rollover states you had on different layers... I did change those slightly, I reduced the size of the outer glow, it was going all the way off the button edges and might have been causing part of the issue for those.
 

Attachments

  • gallery.png
    gallery.png
    2.7 KB · Views: 10
  • map.png
    map.png
    2.8 KB · Views: 10
  • shop.png
    shop.png
    2.4 KB · Views: 10
  • home.png
    home.png
    2.3 KB · Views: 10
  • contac.png
    contac.png
    3 KB · Views: 10
  • mapusrollover.png
    mapusrollover.png
    5.9 KB · Views: 9
  • galleryrollover.png
    galleryrollover.png
    5.6 KB · Views: 9
  • homerollover.png
    homerollover.png
    4.7 KB · Views: 9
  • contactrollover.png
    contactrollover.png
    7.3 KB · Views: 13
  • shoprollover.png
    shoprollover.png
    4.6 KB · Views: 9
Gaussian said:
Your image actually looked good in the PSD, I didn't change anything just exported the slices as PNG 24 with no Matte.
Click to expand...

I know, that's what had me stumped, they looked good in Ps and like i said, my other graphics looked good to but those dam buttons!!

Testing them out now, brb...
 
free buttons!!!! lol looks good Gaussian.
 
Agreed!! Thanks again for replying guys! I'm using those button in Dreamweaver as a NAV BAR insert, so it should be an easy fix, just swap out the pics in the root directory and poof! I haven't tried them buttons yet, i need a break from code :banghead:
 
Since Gaussian gave you .png files and your originals were .gif's make sure to change that in the code after you swap the images.

By the way, there's some good mods fro Dreamweaver that allow you to easily create menu's that have a background image and then put in your anchor text over the image and it makes a great button but it's a lot easier to edit and more search engine friendly than using pure images such as these.

One of the best is Project Seven's Pop Menu Magic, but it's commercial. I think there's some free ones you can find also.
 
Checked out that link (thanks btw), reminds me of Spry's or "Tabbed Panels", there is an Insert function to easily insert a NAV bar in DW4 so i took the quickest root i knew at the time.

I decided i wanted to learn CSS & DIV's this week and i got the basics down so i then decided yesterday that i knew enough to play with Spry's, well, now that i know what im doing with CSS and DIVS all i can say is THANK GOD!! I used to only use HTML and very little Javascript, the last site i made was probably 3 years ago up until the one im working on for my store, so learning CSS and DIVS and then comparing it to HTML.

It's like having your cake and eating it to!! Plus implementing PS for my graphics? to much fun i say, TO MUCH FUN!!

It's a great feeling when intuition is in high gear!
 

Back
Top