blending a shadow

[garfield]

hi! i'm back well, i'm going to ask your help i have a background color of #ccccff in my webpage, so basically its a violet thing. how do i make the image to appear seamlessly in the background color that i have without losing the shadow that is in the image? What i meanis that the border will not be seen. how do i do this. thanks for answering my question.

[jeaniesa]

The only way I know to do this is to make the background color in Photoshop (or whatever application you're using) the same as the background color of your webpage. Then flatten and save for web. That way, you won't notice the "border" of the image b/c it will blend perfectly with the background color.

Jeanie

[Stephen M]

There is a way to produce this sort of effect with GIF, but it is not pretty.

What you do is have a duped file of only the grayscale soft shadow, then convert to bitmap mode using diffusion dither or a custom dot pattern. Then you go back to RGB and layer this in under the transparent type and set white as transparent in the GIF export so that your background will show through the holes.

As I said, not very pretty but it can work (this is not a soft shadow though).

This method is featured in greater detail in the Photoshop WOW 5.x book or perhaps later ones, there are filters to help take out the steps (featherGIF)...and somewhere in the back of my mind I seem to recall other methods too (either adobe or others).

One day the full use of PNG will overcome this GIF limited colour issue.

As Jeaniesa mentioned, usually putting the same colour background in Photoshop is the way around the issue.

Stephen Marsh.

[garfield]

i'm very sorry but the background of the wbpage is #ffffcc not the one mentioned. oh sorry. Why is it every one says gif is better and yet when i use the save for web with gif the size is double that of jpeg? so whats the solution? ok, ill try what hak said..

[jeaniesa]

With the technique I mentioned, it shouldn't matter what the background color is. However, my technique will only work if you still have the layers you used to create the logo. If you've already flattened it (for the future, it would be best to save your work with layers so that you can edit later if you need to), then try this technique:

1. Use the magic wand to select the white background and shadow. Inverse the selection so that only the letters are selected.
2. Copy the selection to a new layer.
3. Change the name of the background layer to something else (typically Layer 0).
4. Create a new layer and move it UNDER Layer 0.
5. Fill the new layer with whatever background color is on your webpage (in this case #ffffcc).
6. Change the blending mode of Layer 0 to Multiply.

This has the effect of creating a shadow on the background color, but not affecting the color of the letters, since they are in their own layer. I've attached a screenshot of my layers so that you can see what I'm talking about.

Regarding whether GIF is better than JPEG. In general, GIF is better for "graphics" (as opposed to photos). What you have here is a graphic. To get a smaller size, try reducing the number of colors and see if it still looks OK. Reducing the colors will reduce the file size, but it will also cause dithering if you reduce the colors too much. As I was working on your logo I noticed that you have quite a bit of JPEG artifacts in your version. You don't notice it much at 100%, but when you enlarge it, they are quite visible. So, it appears that you applied quite a bit of compression when you saved it as a JPEG, which would account for the smaller size. As for what I would do, I would pretty much go with whatever gave me the smaller file size with acceptable quality. Since you've got a lot of shading in your logo that brings in many shades of color, it's possible that GIF isn't optimal for your particular logo.

Jeanie

[garfield]

why is it that when i use the texturizer and choose any of the options like sandstone adn then i tried to use curves why did the image became bad?
in my image is it possible that i could make the background be transparent using the way that jeaniesa taught me? its great for me. thanks btw. thanks also for the tip about saving the layers. the image you provided is the same as ours! do you know the hex code of the gold color? thanks!
this is a stupid question but what is the difference of photos and graphics? how will i notice the dithering without magnifying the image in ps? i think index color is better rather than rgb for webpages. actually i compressed the image at 90% so i think that noise wont appear which it didnt right?

[TheTexan]

Hi Garfield,

This is a common problem and easy to deal with as has been explained above quite well. The problem with gifs is the way PS creates blurs and blends (the usual method of creating shadows or antialiasing) with the background color. Since gifs use 256 colors (indexed) there are not too many colors to match the background plus gifs usually (there is a workaround to this) only use one color as the transparency color, in other words the color that will be replaced with transparency (the background). So if the shadow blurs from black to white in 30 steps only the last step (the actual white pixels) will show background thru the transparency. This of course is not what you want. What you end up with is a cloud around your design instead of a smooth blurred shadow. This is not a problem if the background is white but any other color will show the ugly cloud.

This is why you create your design on the backgound you intend to use (if you use gif) then crop the image to a size just large enough to include the shadow. This will put a small margin of background around the design so it will lay over the background on the web. When you save for web you can furthur tweak the index colors and type of compressions to get the smallest file with the best results.

With jpeg there is no transparency so you are forced to follow the above proceedure to accomplish the same thing.

In short, both gifs and jpegs (in this particular situation) act the very same with the sole exception of gifs on white backgrounds.

To answer your question about the difference between gifs and jpegs. The main difference is in how they deal with compression. Gifs are good for designs there there are large areas of single colors, jpegs are good with designs that are complex such as photos. That is the reason you usually hear the phrase use gifs with graphics (meaning designs) and jpeg with photos (meaning complicated patterns of color). You will also be more likely to have to deal with compression artifacts (distortions) with jpeg compression than with gifs. This is the reason jpegs are good with complex designs like photos. First there is less likehood of artifacts since the the color patterns change so frequently in a photo (on a pixel level) and any artifacts that are created tend to blend into the image and are camoflaged.

But of course we now have the miracle of slices available to us with the later versions of PS. Slices as you probably know allow you to take any image and divide it into a mossaic of user defined pieces and then decide which type of image it will be saved as, gif or jpeg. This gives you the best of both worlds.

And dont forget about png, but thats for another day.

Tex

[garfield]

but what if i want the background is transparent why is it that the image now is not good to look at? it sorts of like it misses colors?