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).
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.
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.
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
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!
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.
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.
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.
