Good images gone BAD!

[ccsteelercity]

Hello everyone, I am a newbie to CS3, but working hard to learn the capabilities. I have images that I have made on to a transparent background made into ovals, circles, elipses, rounded edges with the select/modify/soften. I commence to the FX for drop shadow and bevel/emboss, get the look that I want...
...then it all falls apart. I save for web and devices (for my websites) as a .gif and the image looks horrible. Jagged edges, drop shadow isn't "3D-ish" anymore, bevel is a mess. What am I doing wrong?

[bitzao]

have you tried saving as a jpeg instead? what level of quality are you saving the image out?

[ccsteelercity]

Thanks for your reply. I have tried everything that I can think of. When I save as a gif, it looks as though it was a jpg, jpeg. Besides, I can't use as a jpeg becuase of transparency. I'm trying to get some help from a digital designer for the local University to help me. She doesn't seem to have much time.

[Swampy]

Save as PNG.

[ccsteelercity]

Hi Swampy - I have tried that. The resource for my website does not support .png only gif, jpg, jpeg. I know, it's stinks. I may try to save as png and just see if that will help, but it won't do me any good unless the site supported it. BTW, it's through Homestead. thanks for the reply!!

[Swampy]

It might help if you posted a sample.

[Jerryb]

hi,
I am novice but maybe i can help....
now it would have been if you posted the image to see for sure...

first of all have you tried using png? most newer browsers will accept png with a transparent background....

now as far as gif... my expereiences...
1. first remember max is 256 colors....
2. now with my cs which i assume is similar to cs3 in this respect..... the initial windows only shows 128 colors.. but there a little drop window where you can change to 256 colors... this is important because if you have more 256 colors , they are going to get dithered...! and it can look bad... the very least make sure your saving in 256 ....
3. when i first start using ps in doing my gifs... I ran into a problem where even though i am only use 20 or 30 colors... but it was bad when i saved...
what i found was if i experimented with the pallet and which type of dithering i was able to get the results i want.. right for most of gif using local pallet and difusion works well .. but once in awhile i do have change those... untill i get what i want...

4. the shadows... i am not sure what your referring to.... would i be correct in saying your referring to fading/translucency ! where it simi transparent against a transparent background? you can do this per say with gif.... ( that another good reason to use png)
here a little tutoral to make transparent gif
http://mysite.verizon.net/hannigan7/lucyinthesky.html

well i hope i was of some help....

Originally Posted by ccsteelercity

Hello everyone, I am a newbie to CS3, but working hard to learn the capabilities. I have images that I have made on to a transparent background made into ovals, circles, elipses, rounded edges with the select/modify/soften. I commence to the FX for drop shadow and bevel/emboss, get the look that I want...
...then it all falls apart. I save for web and devices (for my websites) as a .gif and the image looks horrible. Jagged edges, drop shadow isn't "3D-ish" anymore, bevel is a mess. What am I doing wrong?

[smak]

>>>>>>The resource for my website does not support .png only gif, jpg, jpeg.

What does "resource" mean? Your web browser?

[grannysdc]

How to get rid of the "halo" and "jaggies" w/ transparent gifs (Photoshop).

Sometimes you can convert the gif file that you have to RGB color Click Image>Mode>RGB then size the image down, using Image>Image Size. Photoshop will automatically anti-alias all the edges for you.

You can also draw the smudge tool, set to about 50% pressure in the Options bar, across the offensively jaggy edge.

For Text... in the type options bar you'll see several options in the dropdown box marked AA: none, sharp, crisp, strong. Select anything but None and your type will be anti-aliased.

Always work in high color (RGB), then after you have the image looking like you want it... reduce to 256 colors using Image>Mode>Indexed Color then "Save for Web" as GIF.

Have you tried adjusting the matte setting?

Choosing a matte color (image background color) similar to your page's background color, then specify that color as transparent.in Save For Web might help solve the problem.

1. Make sure you have your image on its own layer with no background.

2. File>Save for web

3. Make your setting gif and use the smallest amount of colors you can without affecting the appearance of the image.
a. Make sure Transparency is selected.

b. Set the Matte color to the closest match of the background color you will be placing the image on. If you are unsure then set the Matte to "None". Click ok and save your image.

3. Matte puts a thin outline around the image to get rid of halos. Setting matte to none should get rid of the halo but might still leave the image a bit jaggy around the edges.

4. If your image will be on a dark background use either a black matte or a matte that is near the color of the background to get rid of the jaggies.

Hope this helps some.

[ccsteelercity]

To check out what the images are doing you can see from one of my websites: www.colebrookgoldens.com
You will see how "jaggy" the edges are and the bevel/emboss doesn't look very well. I didn't even keep the drop shadow on just for the reason it was aweful.
Thanks for everyones input. I will try this at home this weekend and see what the outcome is and will post back with the results.

[Photodivauk]

Hi. Another newbie here, but just wondered if this might solve the problem. As I understand it you want an oval image displayed on your web background. An easy way to do this is rather than have a transparent background to your image, make it the same colour as the web page. That way you can save as a .jpg which will give better quality and you won't be able to tell that its a square image. Hope that helps.

[ccsteelercity]

thanks for the reply. I don't want that because it's not a single shade of color on my background. That is an easy fix, believe me, I would much rather have a single color/shade. Make my life easier.

[Photodivauk]

Ho hum. You're sort of stuffed, then. I don't think you can do a drop shadow effectively in a .gif. Forget it. Perhaps try a photoshop filter edge to your image instead? What's the link to your website?

[ccsteelercity]

www.colebrookgoldens.com
www.colebrookpugs.homestead.com

[grannysdc]

Some simple layer style and stroke added then using the Beach color as a matte when converting back to a GIF

[ccsteelercity]

The only problem is... My wife is very anal when it comes to the website. She doesn't want the mattes. Been there - done that! I have actions that I can create mattes and boarders and actually get close to the backgrounds, but she doesn't want them either. I just feel like I'm fighting a loosing battle. I just want to get them as smooth edged as possible with some niced drop shadow for 3D effects and then I will be happy. Like I said, up to the point of saving, the images are absolutely beautiful. I have even gone as far as vignettes and they look horrible.
I know it is something very simple I'm missing, just can't figure out what it is. I guess that is the problem with being new to the digital world of design!

[grannysdc]

A gif matte just helps blend into the background as the next sample of a simple emboss then using the gif matte using the marble color then on the marble.. Try the Gif in my other post on your Beach background and see if it looks OK

Other than this process I guess you could use a section of your background as a frame and paste your RGB jpeg image on it leaving a half inch or more as a border...

I am spent!!
Good Luck!!

[Photodivauk]

Could I suggest using Fireworks? That might be a better option than just Photoshop? Personally, if it was my website, I'd ditch the background image and then it would be easier to do cool edges to photos. Here's a link a logo I did in PS for a website.
http://www.wilmingtoncameraclub.co.uk/
Its a rectangle and the grey is the same as the page. At least you can get a drop shadow that way.

I've never used Homestead. Looks like they have some nice, clean designs. And they say you can customize designs. Not that difficult, but if you don't have much experience in web design, it might be a bit of a learning curve.

[ccsteelercity]

See, this is what i'm talking about. How did you get that? Is that marble the same as my background marble? This is where my inexperience is coming into play. I have been through tutorials and figured lots of secrets, but I don't really know how to find for things of this nature... what to call it, wording, etc.
My wife would die for that marbled pic. (wonderful job, by the way). My wife does daycare at home and one of the kids she watched for 4 yrs, her mom is a digital designer for the local university. I am trying to get some help from her, but she just never has time. Especially now that schools back in and the sports are going crazy.
I am down to just about begging for HELP. I want my sites to look as good as my dogs do and i'm disgusted with the turnout of the images. As you can tell, this is driving me nuts.

[ccsteelercity]

I don't have fireworks... I WANT IT THOUGH - along with EyeCandy and lots of other stuff (I'm worse than a kid in a candy store when it comes to computer software/hardware)! All I have is CS3 3600 V.10 Extended. My brushes actually are locked up. Don't know what happened. Like I said, i am very newbie. Only been doing this for about 5 months. I am going to check from another reply about my RGB (256 colors) from the load to save part of the process.

[ccsteelercity]

Also, how do I get a sample of the existing background when it actually was furnished by the service that i am using? Unless I need to actually go online and right click to save image as?

[grannysdc]

I saved your background and used it as the image for the foreground color sample
when you have your transparent RGB like you want it.. leave maybe a half inch transparent border around it ..
go to Image>Mode and choose Indexed color
In the box that pops up make sure Transparency is checked AND
In options there is a place called Matte... choose Foreground color
click OK

Go to File>Save for Web... select GIF have transparency checked... click SAVE

Then upload your gif and put where you want.. it should blend right in with no jaggies.. if your foreground color sample was the same as where you put the gif

[ccsteelercity]

Wonderful. I will try this at home this weekend and will let you know how it turned out. Thanks for the support!! Also, if you know of anyone interested in Golden Ret. or Pugs, please tell them about the website.
Thanks so much for all the help and info.
God bless!