How do I get rid of shadow line between image slices?

purplecrayon
purplecrayon used Ask the Experts™
on
I've got a funny shadow line between two image slices on this site, near the top of the page, to the left and right of the button tabs.

The image looked great in Photoshop. The shadow is a style attached to the layer in Photoshop before slicing.

Can anyone tell me how to fix it?

Bonus question: What caused it?

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
HainKurtSr. System Analyst

Commented:
the top menu is one jpg file, so you should edit it with photo shop...
topmenu-2-.jpg

Author

Commented:
Hainkurt, I'm confused. Can you explain more?  The whole point of slicing an image is that the parts make up the original whole, isn't it?
The original image has a drop shadow on the navigation tabs. You cannot get rid of that shadow without editing the original source image and then re-slicing it and overwriting the old images with the new.

Hope this helps!

Best,

Cynthia
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Author

Commented:
Hmm. I wanted a drop shadow. I didn't want the funny line where I sliced it. And I can't think why it's there.
Your drop shadow extends to the sides, not just the top. So you can either edit the source image in PS to get rid of the shadow on the sides, or make the shadow extend all the way down along the sides.

Best,

Cynthia

Author

Commented:
Thanks, Cynthia, but what I don't seem to have made clear is that I put the shadow there in the original image, it extended down both sides, and I want it there. It looked fine before I sliced the image. When you look at the site, can you see the problem? Not the fact that there is a drop shadow, but that within the drop shadow, near the tabs, there is a horizontal line in the shadow. My question is, how do I slice the image in such a way as to keep the drop shadow - which belongs there - and not create a funny horizontal line within the shadow - which doesn't.

Help?
I see where it cuts off. Is that what you are referring to?

Author

Commented:
Yes! Thank you for seeing it! (Don't I sound like I saw a UFO?)

Do you know how to fix it?
Can you post the original source image? It would help if I could see what it looked like before you sliced and diced it :)

Best,

Cynthia

Author

Commented:
Sorry it took me so long. I'm between computers (crashed hard-drive) and this had to be retrieved.

Here's the "before."

JanBlue.jpg
It sounds like you need to remove the shadow from the PSD. Now slice your images, and add the drop shadow to each individual slice.
Hello purplecrayon!

The image with the shadow is http://www.jancoleman.com/Images/topmenu.jpg on your site. Copy the image (save the original just in case), and in PS or any image editor choose the aqua color with the color picker and soften the shadow so it doesn't show over the left and right sides. Then upload it to your site in your images folder (make sure it's called topmenu.jpg)

Author

Commented:
Jeremy and Daydreams, I will try both your solutions, and get back to you. Thanks.

Author

Commented:
Oh my, I'm so sorry I spaced this. Tonight I spent a good deal of time trying your suggestions, and nothing seems to work. The problem is that the shadows line up properly in the original images, but for some reason, when they hit the internet, the shadow fades at the top of the header image where it meets the topmenu image. So blending the shadow to the edge of the header won't work, because the shadow, in the image, is already there. It just disappears online.

If no one knows why, or how to fix it, if I'm crazy and this doesn't happen to other people, I will close this.

Thank you again, everyone, for trying. I apologize again for letting this sit here so long.
Purplecrayon, I'm sorry you've had this difficulty. I can't imagine that my suggestion did not solve or aid in solving the issue. I found in your code the exact image, and that is the source of the shadow. Editing that image to remove the side shadow MUST remove it on your site.

Author

Commented:
Daydreams, thank you for answering back. The problem is that I don't want to remove the shadow, but the gap in the shadow. Perhaps I worded it wrong in the first place by calling it a shadow line - the shadow is not the problem, the line in the shadow is the problem.

It doesn't seem to show up on all monitors, so perhaps you can't see it?

I'd love to understand this better, so if someone knows what to do, I'd be thrilled.

Thanks again for answering.

K

Author

Commented:
The image sliced - with problem areas circled.
Commented:
It might be helpful or not.

Do not Slice the image.......
Add the complete image to the background.
That should be the only layout change.

As not to have to reslice and reformat the whole layout.

Make a Clear image out of the old Just image the clear inplace of the old  menu.
Selvol

Commented:
Oh you might want to add index pages to the DIR's so no one can browse them.


http://www.****eman.com/Images/

Author

Commented:
Selvol, I'm embroiled in a project-with-deadline right now, so cannot try out your suggestions just yet. Sorry for the delay. Will try after Monday. Thanks.

Author

Commented:
I think this is what I am going to do. Thank you everyone, for pitching in.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial