Need help with editing graphics

I recently implemented the CSS sliding doors technique with horizontal navigation tabs up on my site HERE. I’m in the process of fixing the way they are presented, but I have a problem. If I take away that white background and put them on top of the header, there are white clips on both sides. Here is the link for both images: [URL=“”]Left and [URL=“”]Right. I would greatly apprecaite it if someone could help me. I have Photoshop CS3 but I don’t know how to do it. I tried using the magic wand, but I don’t know where to go from there. I also get an RGB color error. (I’m in the process of learning Photoshop–Advanced Beginner.)

You won’t see what I’m talking about until you right-click and download.

Firstly, in the layer palette, double click on the name to change “background” to “layer 0” or some other name. Then use the magic want to click on the white area, and press delete. Then save for web as a transparent png-8. That should do it. E.g. see attached image (very roughly done).

Thanks for offering the help, ralph. I can’t seem to create a new layer, it’s locked and it won’t unlock. Also, the way in which you edited it left the squared corners black instead of erasing them. It’s a shame the guy who did these at SpoonGraphics left them like this. It’s nice that he offered them for free, but I imagine it also caused headaches for a lot of people trying to fix this. [URL=“”] has them too, but in his case, they are too small.

to “unlock it” go to Image > Mode > RGB instead of indexed color!

I was able to overcome the locked layer problem. I had to click on Image-Mode-RGB first. But now that I got this fixed, if I click on the white area with the Magic Wand and then press “delete” it doesn’t delete that area. If I select a wider area it will.

Looks like we posted at same time. But now I have a new problem as I stated up above. Do you know the answer to this one?

Ah, cool, I didn’t know how to unlock the file. First thing I did them was rename the layer (anythong other than Background).

Then zoomed in so the white looks bigger. Then used the magic wand with a tolerance of 32. It selected just the white. Click delete, gone. Then save a a png or gif with transparency. Attached.

Hey ralph. I’m curius. When you hit that delete button, it just disappears? Not a thing happens when I hit delete. Also, JFYI, I don’t know what if you are doing is actually working. It may appear it is… but when I look at your images and I save it… I open it up and I still see that black color instead of white now in those areas that we won’t deleted. Take a closer look.

Wow, ok.

Firstly, in the layer palette, double click on the name to change “background” to “layer 0” or some other name.

Just double click the locked background layer and ok it. No need to rename.

there are white clips on both sides.

Don’t use wand when making web images. Use pen tool. However since you are starting out wand is fine. However start learning how pen works.

To fix the sides you have to remove the white from the layers. You will see a checkered background in PS. This means its transparent. Then you have to save as a .png. There is a lot more to it, but this should help for now.

I normally charge for edits and support and am available if needed, but make sure to learn the basics of operations. It makes creation so much easier. In fact, you should use the vector paths to make any images in PS. Keeps things flexible for not only you but also anyone who has to code the psd. Keep it clean and flexible.

Elephant if you need any help with Photoshop, I will help you. I’m pretty much a master at photoshop except I don’t work with RAW files or Lab files much that’s about my only Photoshop disadvantage :slight_smile:

Weird. Yes, it just disappears. And then I saved it for web, and pasted it into an html file that had a body background color. And yes, the corners were transparent, so that only the background body color showed at the corners.

Why don’t you just recreate these graphics?
@ncmw the problem was that he was working with indexed color mode! double clicking the background won’t work for that mode! :wink:

Hey, ralph. Boy what a dummie I am. The problem was that I had the background of the navigation li as “white”. Take a look at it now. I decided to go ahead and implement the changes before fixing the left tab. The color of the header looks a lot nicer I think. It’s a similar color, but what a difference. Now if I can just get that Magic Wand to delete the edge on the left tab. I have no clue what I could possibly be doing wrong. Thanks again ralph for doing that. I do appreciate it. It was showing up like that in the image editor as well… but it was black. And I didn’t understand that.

Take a look for yourself.

Do you know of a good Photoshop tutorial on how to do this? It requires split tabs.

Hmm, something’s gone wrong with the layout. The nav is sitting over the header. What did you change?

I’ve attached the left image, done like the right.

I switched the nav to be above the header. It seemed to make the most sense. Don’t you like it? I took your left nav graphic and uploaded it. That’s how it came out. Sort of how the right-nav originally looked. But this time, there is no white background, so I don’t get it. Thanks for your help with this, ralph. This is very frustrating.

At the moment, the nav is superimposed over the header. Fix it with this:

#navigation ul {

I would also remove that negative bottom margin, as it causes overlap in FF.

Did you just use my right image or did you change it somehow? Otherwise I don’t understand why the left is different.

The problem with the top left corner is that the LI background image shows behind the left A’s background image. I would probably reverse the images. putting the left image on the LI and give the Li a left padding of 10px. Then put the right bg image on the A.

Hi ralph. Fixed your suggested changes. My mind isn’t at ease today, so it’s rushing a bit much… which is why I neglected to look at it in Firefox. OTherwise I might’ve been able to figure out that it needed that overflow. I’m 2/3 of the way through CSS: The Missing Manual… and there’s a lot of repetition in that book. Really drives the information home.

In any case… just now I even redownloaded your altered left image and reuploaded it back up. I swear I didn’t make any changes to it. Have no idea what is going on.

See my previous post. It’s not an image problem, but a code problem. There needs to be padding on the LI to stop it’s bg image appearing behind the A’s bg image.