slicing "drop shadowed" buttons for the web

MW
Posted By
Michael_Watt
Jun 5, 2004
Views
1129
Replies
16
Status
Closed
Cheers

Currently in Photoshop 6, I am slicing (cropping) individual links from one long navigation bar for a web site. The navigation bar contains a drop shadow effect along the entire bar.

When I place the these sliced images back together to create the nav bar, the drop shadow has nicks or areas of shadow missing where I have cut them.

How do you go about slicing a drop shadow while still retaining a continous drop shadow?

Thanks for your time
michael

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

DM
dave_milbut
Jun 5, 2004
look for spacers in the table created to hold the slices and remove them. also look at the cellspacing, cellpadding and maybe boarder attributes of the table. they may need to be manually adjusted or eliminated.
GH
Grass_Hopper
Jun 5, 2004
Michael,
if there are white spaces, check for breaks in your table data entries. There should be no carriage returns breaking up the <td> tags.

For example this table could show white spaces:

<table>
<tr>
<td>
<img src=whatever_your_image_is_called.jpg>
</td>
<td>
<img src=another_image_name.jpg>
</td>
<td>
<img src=Yet_another_image_name.jpg>
</td>
</tr>
</table>

While this table won’t (you might even need to remove the carriage returns after the table row tags):

<table>
<tr>
<td><img src=whatever_your_image_is_called.jpg></td> <td><img src=another_image_name.jpg></td> <td><img src=Yet_another_image_name.jpg></td> </tr>
</table>

dave,
I’m sorry, but I must disagree with you. If the slices and html were created in IR, the spacers are generated by IR to fill in the spaces within the slices that didn’t make nice even rows and columns. There are rowspan and colspan tags added by IR to compensate for those spacer images. If you remove them, you will also have to correct the html file to reflect the row and col spanning. So, IMHO, removing the spacers will cause much discomfort!

hth,
grasshopper
DM
dave_milbut
Jun 5, 2004
possibly. i do everything by hand. sorry if that was bad advice.
MW
Michael_Watt
Jun 6, 2004
Thanks everyone for your advice.
Perhaps my explanation wasn’t clear enough though.

I don’t have white space or lines between the individual pics or slices (I’m not using an individual cell for each image)but rather small gaps or nicks only in the drop shadow and only in the corners of each image where they are connected to the next image.

If you try making a simple bar and placing a drop shadow on it then crop it into two blocks or pieces, then place them into html you should see my problem (at least I hope you do, hehe).

Thanks again all for your time.
I hope you can help me out.

Michael
DM
Don_McCahill
Jun 6, 2004
Michael

I understand the problem. What you need to do is to make two or more slices change on the rollover. I’m not sure that this can be done in ImageReady … perhaps GrassHopper knows … it sounds like she uses it a bit.

I know it can be done in Fireworks, and by hand coding.
DM
dave_milbut
Jun 6, 2004
again, look at the code and check cellspacing and cellpadding attributes in the table. try setting them to ="0"
MW
Michael_Watt
Jun 6, 2004
I don’t believe the code is the problem.
I think this is a Photoshop problem.
As soon as I had cropped the images I noticed the nicks in the drop shadow along the edges. Perhaps I should paint in the drop shadow by hand rather than using the PS drop shadow effect??

Check out this test that I uploaded…

<http://www.alpartners.net/dropshadow.htm>

Any ideas?

michael
L
LenHewitt
Jun 6, 2004
Michael,

It looks as though you have applied the drop shadow to the individual slices. You need to apply the drop shadow to the whole ‘row’ and THEN slice.
MW
Michael_Watt
Jun 6, 2004
It looks that way doesn’t it, yet I applied the drop shadow effect to the entire bar before slicing.

Very strange
GH
Grass_Hopper
Jun 6, 2004
Michael,
I have a thought on this. How about if you slice the dropshadow as one long slice and slice the navigation boxes separately. That way the dropshadow won’t be part of your tabs and it shouldn’t break up.

It would look like this <http://mysite.verizon.net/res7oz56/nav/>.

I made a white layer, the same size as your button height, dropshadowed it and adjusted it’s position to one that seemed to work for my example. I have 5 slices in my image, one for each button, one for the dropshadow and a 5th one because there was white space at the end of the nav bar that I hadn’t bothered to delete out.

btw, where did your white horizontal bars between your images come from? I am thinking *that’s* where your shadow problem is coming from.

does this help?

edit: btw, the advantage to this is you can add buttons, or even change/replcae them, without affecting the dropshadow! 🙂

gh
GH
Grass_Hopper
Jun 6, 2004
um .. that would be white *vertical* bars between the buttons …
MW
Michael_Watt
Jun 7, 2004
Grass Hopper

Thanks for your tip, friend.
The link that you gave didn’t work for me but your explanation was enough for me to understand. Your idea worked wonderfully!

I tested out a few more theories, for myself and for others who run into this problem and read this thread.

1/ I tried removing the vertical "spacers" from the nav bar and slicing but the resulting gaps or nicks in the drop shadow remained.

2/ My drop shadow was actually on an angle, not exactly up and down. I thought this might be the problem but again no. The change in drop shadow direction still left me with gaps.

So it seems that if you slice a continuous image with a drop shadow then try to piece it back together it will never look as it was in the beginning. I actually ran into this problem on a very old site that I did here : <http://www.gnvguild.com/2001_index.htm>

You can see the nicks in the shadow on both sides of the scroll.

Any ways, thanks again Grass Hopper and to all who tried to help in this thread.

Cheers
Michael
GH
Grass_Hopper
Jun 7, 2004
Michael,

I noticed something when trying to make the buttons and dropshadow. I created the buttons on one layer with a white space between them and then did a dropshadow on that layer. I got the same breaks in the dropshadow and I had not yet done the slicing!! It seems the vertical spacers were causing issues with the dropshadow.

In any case, I’m happy to have given you an idea you could run with! 🙂

grasshopper

ps … the link works for me .. maybe stop the loading and then a refresh??
L
LenHewitt
Jun 7, 2004
Michael,

Have you tried flattening before slicing? Or converting the layer effects to layers?
GH
Grass_Hopper
Jun 7, 2004
Len,

I got the broken drop shadow by simply adding a drop shadow to a single layer that contained the buttons and a white vertical spacer between them. I was quite surprised, as I had only two layers, the buttons and the background! When I removed the white vertical spacer, the dropshadow was continuous.

Regarding his other dropshadow that had the breaks in it, I hadn’t tried anything to figure out why it happened.

gh
L
LenHewitt
Jun 7, 2004
GH,

I got the broken drop shadow by simply adding a drop shadow to a single
layer that contained the buttons and a white vertical spacer between them<<

That’s what I would have expected given Michael’s experience

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections