CS4 Save For Web GIF settings confusion

Hi,
I am working on a new website and have run into a problem I just can't seem to solve: my navigation links are made using a GIF and for some reason the background color of the GIF is not matching the background color of the page.
The test page is here:
http://www.johnblaustein.com/webtest2/
Note that nothing in the page is working yet. If you look closely, you will see that the navigation image is a slightly different color than the background. Very slight, but different. (Once I solve this color issue, I will make each link into a separate button with slices.)
In PS, I have created a file as follows: new file (72dpi), fill background with the same color I use on the webpage: c4c0b4. Create new layer and add the type. The new file is in Adobe RGB, but I convert to sRGB before saving for web (although I don't think that matters). When I Save For Web, I started with the default GIF settings, but when I got the color mismatch, I tried any number of other settings. I read a post here that suggested turning off the background layer of the image before Save For Web, but that resulted in the text looking bad. I've tried different color settings (32, 128), matte settings and other settings with no luck. Convert to sRBG is always checked.
I like solving these things on my own, but I struck out on this one. I am here in the hopes that one of you gurus can tell me what I am doing wrong.
Thanks very much.
John

SUCCESS!
Curt.... you were correct. I needed to create the new file in sRGB, not create the file in Adobe 1998 and then convert.
Here is another test, showing that the text box has completely disappeared:
http://www.johnblaustein.com/webtest2/nav-srgb-test
The text box is exactly the same size as in the original page I posted.
What I did is this:
Create new file to specified dimensions. In the New File dialog, for Background Contents, I selected my webpage color, c4c0b4. I clicked the Advanced arrow and selected sRGB as the color profile. I added white text, then flattened the image. In the Save For Web dialog, I clicked the Preset dropdown and selected GIF 128 Dithered and did not change any of those preset settings. I inserted the new image into a copy of the webpage and you can see that there is absolutely no indication of where the image ends and the page background starts.
I may not need 128 colors, so I'll play with that, but at least I know where the problem is.
So... thank you Curt!
What would we do without these forums?
John
By the way... I see your message was cut off in the forum, but the full message came to my email: "I am over my head on this subject. The only thing I noticed is that you are adding the color in AdobeRGB and then converting to sRGB. Will this give a slightly different color than using sRGB for the New Image from the start?"

Similar Messages

Editing Save for Web output settings with script

I'm just curious if it is possible to edit the Save for Web Output Settings in a script (Not the save for web options, but the "Edit Output Settings" in the drop down menu). I figured it would be somewhere under the .options, but I'm not finding anything.

You can find examples here in forum.
Here is one by Paul Riggott:
Paul Riggott wrote:
Here you are...
function main(){
if(!documents.length) return;
var Name = app.activeDocument.name.replace(/\.[^\.]+$/, '');
var saveFile = File(Folder.desktop + "/" + Name + ".jpg");
if(saveFile.exists){
   if(!confirm("Overwrite existing document?")) return;
    saveFile.remove();
SaveForWeb(saveFile,100); //change to 60 for 60%
main();
function SaveForWeb(saveFile,jpegQuality) {
var sfwOptions = new ExportOptionsSaveForWeb();
   sfwOptions.format = SaveDocumentType.JPEG;
   sfwOptions.includeProfile = false;
   sfwOptions.interlaced = 0;
   sfwOptions.optimized = true;
   sfwOptions.quality = jpegQuality; //0-100
activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);
Have fun

Save for web gif loop settings not working

Photoshop CC 2014 Mac Pro 10.8.5
When I change looping settings from "once" to "forever" when saving a gif it only loops once. I tried multiple times. In the end what got it to work was changing looping back and fourth from "once" to "forever" over and over and over until randomly the preview started looping. At that point when I saved it worked correctly.

I’m not really sure; it could be a Mac problem.
This is the Adobe statement on Lion:
Mac OS 10.7 has some exciting new features such as Autosave, Restore, Versioning, Full Screen Mode, and more multi-touch gestures. For Adobe applications to fully support these features, additional product development is required. Adobe is working to address this issue.
There is one other thing you could try. Open a photo in the Editor and then hold down the Cmd+Opt+Shift Keys and press the letter S
It’s also possible to delete the save for web preferences and then re-start the program to re-build them. This involves holding down Cmd+Opt keys and clicking Save for Web under the File menu. However this may not be possible if save for web is grayed out.
Please let us know if you get it fixed.

CS4 - Save for Web settings

I'd be grateful for confirmation that I am using the correct Save for Web settings to achieve the colour effect I want.
I am using an sRGB workflow as my output is for the web. I am using a NEC 2690 LCD display which is wide colour gamut but I am using in its factory set sRGB (and non-calibratable) mode. I have calibrated the NEC using my Eye One display and this shows as the default monitor profile in the vga card's driver but what effect it is actually having I am not sure (OS is Vista 32bit). My CS4 colour management settings are based round the sRGB Working Space. Normally I convert to sRGB all images before saving them in Save for Web.
I am trying to ensure that the colours I see in images at the Save for Web stage preview are what I will see on the web and in other non colour managed environments. Specifically, I'd be grateful to know if the following settings seem right for what I am trying to achieve:
Preset: JPEG High
Quality: High
Optimize selected (but not Progressive or Embed Colour Profile)
Convert to sRGB selected
Preview: Use Document Profile
In the past (pre-CS4) I've had problems with images outside of CS3 looking over colour saturated and I want to avoid this now.
Thanks for any help with this.

> I am trying to ensure that the colours I see in images at the Save for Web stage preview are what I will see on the web and in other non colour managed environments. Specifically, I'd be grateful to know if the following settings seem right for what I am trying to achieve:
> Preset: JPEG High
> Quality: High
That's good, though you you should still try to get the image filesize as small as possible without losing important image details. Many images can support a lower quality JPG setting so you should see how low you can go before you visually see a problem. No sense delivering a higher quality JPG if it's not needed. Higher quality = larger file sizes = longer download time for the webpage.
> Optimize selected (but not Progressive or Embed Colour Profile)
I prefer 'Progressive' as that loads an image in 3 stages (low->med->fullRez) and looks better on webpages instead of having images load top-to-bottom like a window shade.
> Convert to sRGB selected
Doesn't hurt to leave it on. Though you said you already converted them before saving for web.
> Preview: Use Document Profile
I think that "Windows (No Color Management)" will display a better preview of what to expect when the image is displayed on a Windows computer (95% of your visitors) using a web browser that's not color managed (ie: 99% of the windows web browsers - are there any?).
> In the past (pre-CS4) I've had problems with images outside of CS3 looking over colour saturated and I want to avoid this now.
The previous step should help with this in that you'll at least see what visitors using a decently calibrated monitor will see. But since there really is no standard that most of the world adheres to, you can only do your best to get things right at your end. You cannot control how the rest of the world adjusts or miss-adjusts their equipment.
Russell

VERY slow performance with CS4 + Save for web

Note: I have done a search for similar issues but can find nothing regarding CS4 and this particular issue. I'm using a MacBook Pro 2.4Ghz w/4GB of RAM and resources are aplenty when the issue occurs.
Issue
My problem is that under certain circumstances the 'save as web' function can take upto 3 minutes before the diaglog box appears. I've had this for some time but only in the last couple of days did I notice something that might be relevant:
Works
1. Open 3 large TIFF files @ 120mb approx (mine are 3 processed RAW files from Capture One / 4200x5600@300dpi)
2. Create a new adjustment layer for each image
3. Resize each image to 72dpi @ 800x600
4. Run a SmartSharpen & flatten layers
5. In each tab (for each image) do 'save as web'
6. 'Save as web' dialog appears in expected time
VERY slow
1. Open 3 large TIFF files @ 120mb approx (mine are 3 processed RAW files from Capture One / 4200x5600@300dpi)
2. Create a new adjustment layer for each image
3. Resize each image to 72dpi @ 800x600
4. Run a SmartSharpen & flatten layers for each image
5. In first tab do 'save as web'
6. 'Save as web' dialog appears in expected time
7. Close this document (tab)
8. Go to the next image (tab) and do 'save as web'
9. Dialog box can take anything from 20secs to 3mins to appear.
10. Close this document (tab)
11. Go to the last image (tab) and do 'save as web'
12. Dialog box can take anything from 20secs to 3mins to appear.
As I can easily go through this process for 50-60 images you can imagine that it can waste over an hour of my time waiting for Photoshop to get it's act together. I assume it's something todo with memory allocation, or that it's processing previews for all three tabs on the first 'save as web', but in any respect it's very annoying. There seems nothing obviously wrong resource-wise at the time of doing these.
Would be interested if anyone else has this issue!
Thanks!

I had the same problem when I setup a new computer this week. Here's what I had installed:
Photoshop CS5
Suitcase Fusion 3
The problem was that when I was in Photoshop and used the "Save for Web" export screen, the dropdown menu for the different export types (JPG, PNG, GIF, etc) would take an extremely long time to update the preview of the graphic.
After a few days of research , I found that Suitcase was conflicting with Photoshop. Here's how you fix the problem (or at least here's what I did with my situation):
Open Suitcase
Go to "Tools", click "Manage Plugins"
Deactivate the Photoshop plugin
This fixed the problem immediately and now my Photoshop" Save For Web" feature is working really fast. Hope this helps anyone else in the same boat.

Save for web gif issue

Hi everybody
hopefully someone here will be able to help. so here's the problem :
Started since photoshop cs4 11.0.2 update, before everything was doing just fine, and I use photoshop everyday.
Now, when I try to save for web I just got png or jpegs because if I try to save gif it just crashes photoshop without showing any error.
it just shut it down. I still can save as gif but without all the tweaking options. I've tried removing the photoshop prefs and also the sfw prefs
and I was happy to see it solved the problem until I restarded photoshop and bam the problem was there again!
any idea ?
nothing else has been installed on the computer, I run XP 64.
thx a lot for your help.
phil

Is your system allowing you to enable OpenGL? If so have you tried disabling OpenGL or changing any of the "Advanced" modes? Just a thought.
You might want to check for updated video drivers from nVidia, though I don't know how actively they might be updating them for XP x64.
-Noel

CS4 Save For Web not the right size

I'm having problems with Illustrator images when I use the Save For Web. The image size always comes out the same size as my artboard. In other words I set up a new document to be letter size, create my drawing within that document. My drawing is only about 300 px by 150 px. When I Save for Web my image is the same size as the document or artboard not my drawing. Is this something new in CS4? Do I have a preference set incorrectly? The only way I have found to get rid of the background is to adjust the size of the artboard manually. Is there a way to adjust the artboard to fit my drawing automatically, like cropping to an object in Photoshop?

CS,
Basically the same issue was up, and answered, recently here:
http://forums.adobe.com/message/2667045

Photoshop CS4 Save for Web JPEG Colors are Off

Ok, I've scoured the web to see about finding a solution for this and tried every possible option and still I'm coming up empty handed. I have a website that I'm developing for a painter and have an image converted to sRGB, and the colors are where I want them to be. I use Save for Web, and every iteration suggested online for the, embed and don't embed, convert to sRGB and dont' covert, use document color profile, use windows, yada yada. Here's a recent example:
when i preview the image with Firefox, here's the difference:
The photoshop version is on the left and is the color that I want/need. The image on the right is firefox and saturated. If I save for web with embedded profile, safari is accurate, whereas firefox is saturated, so it's obviously discarding the icc and using some color space that I can't see in my file. I did notice that if I have my Custom, Proof and select Monitor RGB, then I can see what firefox will ultimately display and also what Safari will display if i have Embed ICC Profile unchecked in the save for web dialogue box.
I know that CS2 and CS3 were easier and less squirrely with color managing web files, but I think CS4 has some juju under the hood. Am I the only one out there frustrated, or like other web developers just accept the inaccuracy and move on? Since this is fine art, I'm doing my best to dial the color in, but it's been all afternoon beating on this.
Any ideas, I'm ready to install CS3 and see if my life will be easier, but I'm wondering if having Photoshop CS3 and CS4 will cause any issues.

>> your logic
That's my rant and I'm sticking to it.
The OP wrote he doesn't want or need to discuss the pros and cons of embedding profiles in Web images, but for the sake of anyone else reading this:
1) Embedded ICC Profiles increase file sizes (about 4K per image).
a) I may have over 100 thumbnails and dozens of photos on one page,
b) Plus, I may have an image sliced into many pieces.
c) That additional 4k per image, per slice, will add up fast and may kill dial-up traffic.
2) Very few computers use color-managed web browsers or calibrated monitors anyway, and
3) Problems with matching/blending image's edges or background color with a filled box or page color.
d) If I tag the image — on Mac colormanaged browsers — the color will mismatch the box/page color on managed browsers because the tagged image is being Converted to MonitorRGB, and the untagged page or box color is having MonitorRGB Applied.
e) This matching or blending a pixel-based graphic to page color is a pretty big deal to do correctly in professional web publishing.
f) If I publish untagged sRGB images/graphics, the box/page color will match the images and blend correctly in all browsers.
I WILL QUALIFY my general recommendation about embedding profiles in pixel-based web images for the following reasons:
1) You are posting fine-art images, creative portfolios, and are not worried about adding 4K additional data per image, per slice.
2) You are not worried about having Mac visitors seeing graphic blends or photos mismatched to a background color.
3) You understand only properly-profiled monitors and color-managed web browsers will benefit from your embedded profile — and it is likely 99% of web surfers don't have either — however, if you are targeting the one percent who do, then there is your number one best reason for tagging web photos with embedded profiles.

Save For Web Default Settings

I need to compress about 1,000 jpg images and I'm using the "save for web" feature in Photoshop 7 but I'm running into problems because my file names are very long and its cutting them off. I found the workaround by editing the output settings and unchecking the "Mac OS" box under "Filename Compatibility". However, the problem is that the default settings do not stay like this once I hit OK and I end up having to uncheck the Mac OS box for each and every file. Is there a way to permanently change the default settings so I can do batch processing for all my images? Thanks!

Look in:
C:\Program Files (x86)\Adobe\Photoshop 7.0\Presets\Optimized Output Settings
for the Default Settings.iros.
If it's gone look in:
C:\Users\Your Name\AppData\Local\VirtualStore\Program Files (x86)\Adobe\Photoshop 7.0\Presets\Optimized Output Settings
(i think a reinstall is required to get back that preset if it's gone and you want the default)
As far as i can tell you would have to save a new Default Settings.iros to make ps 7 use the custom file compatibilty settings all the time.
You could save a new setting named Default Settings.iros to your desktop and then copy it to:
C:\Program Files (x86)\Adobe\Photoshop 7.0\Presets\Optimized Output Settings

Partial transparency with save for web gif?

Hey all,
I remember back in the day of photoshop 6 or maybe even 7, when I would create partial transparent .gif files through the "view menu" export transparency button, or something like that, and it would let me create beautiful partial transparent .gif files all with nicely rasterised edges.
I'm noticing in these newer versions of photoshop I have to save in the .png format to do that same thing (get that clean transparency).
Am I still able to create clean rasterised transparencies in gif file format via save for web in PS CS5 etc??? Or am I missing something?
Once of those things that bugs me and I need an older head to set me straight.
Any help would be great

One can still use them, I guess. But read this article for GIF and its replacement PNG. http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCQQFjAA&url=http%3A%2 F%2Fwww.w3.org%2FQA%2FTips%2Fpng-gif&ei=_JQTT_rOMcHjiAKF-vXtDQ&usg=AFQjCNHQ7JbGtlwXdnK5BWp 7tXEJ7IpfhQ

CS4 Save for Web Annoyance

I recently installed PS CS4 and found the Save for Web feature added something very annoying. Every time I select it a dialog box pops up saying "Are you sure you want to erase all save for web preferences". Then you have to click Don't Erase or Erase and then it opens the Save for Web panel. There is no button on that dialog box saying don't show this again. So, how the heck to I disable that thing? It's incredibly annoying. I haven't been able to find an option in Prefs or in the Save for Web panel.

This occurs (on the mac) when you hold down the Command+Shift keys, and click Save For Web from the File menu (give it a shot). This also occurs when using a keyboard shortcut to Save for web that uses Command and Shift together. This is especially annoying since I change my Save For Web keyboard shortcut to Command+Shift+S.
A fix in CS5 would be much appreciated, or at least the ability to disable that pop-up somewhere...
Thanks!

CS4 - Save for web

When ever i do a design in illustrator Cs3
I tend to make proofs for approval using save for web
to give me a jpeg thats within 1000px x 1000px
sometimes my artwork is very large 120" x 96" and complex
and save for web cannot process a small jpeg out of is.. screaming not enough memory
even tho I have more then enough ram.
anyone know if Ai CS4 has a better save for web feature..

why don't you just export a 72dpi JPG with the "export" feature instead of the "save for web" feature? I imagine the "save for web" feature that was born out of Image Ready is a hog on memory and probably just has issues processing images that would never really be used for web. You can export a JPG @ 72dpi though straight from the "export" menu.
Hope that helps.

CS4 save for web - jpg are pixelated

Hi all,
I'm attempting to save an AI file for web use with "Save for Web & Devices" for use in a web browser. Somehow my jpgs (quality is set at maximum) are pixelated.
here's a screen grab to see how the selections are set. There are a few new fly-out menus that I don't fully understand so maybe something in there needs to be tweeked.
thanks for the help
Pierre

Thanks for pointing me in the right direction.
Under the Image Size tab, Anti-Alias needed to be checked.
thanks for the help Silk!

File name truncation warning on Save for Web (For Macintosh browsers?) (CS2)

Image (Line drawing). Save for Web (*gif). Receive following warning:
"Some names of the files being saved will be truncated to 31 characters for compatibility with Macintosh browsers. To change your filename compatibility options, click the Optimize pop-up menu, choose Output Settings, and select Saving Files."
I could not find the Optimize pop-up menu. Therefore, I did not do this step.
After save, I simply went to the appropriate folder and changed the file name to what I originally wanted (i.e., essentially correcting the truncation).
Big deal or not? Will all be OK?
Thanks in advance. From a novice.
K. Glenn Cole, President
Wilmot Company, Inc.

You can probably safely turn off that Macintosh compatibility setting now.
It's a bit tricky to find those settings... Here's how.
First, in the Save For Web dialog, hit the little icon at the upper-right and choose Edit Output Settings.
Then change the selector to Saving Files and look for the settings you want to change as shown here:
I captured the above from PS CS6, but I think they're substantially the same.
-Noel

PS Save For Web -- what are optimum GIF settings?

Hi,
I am making very simple buttons for a web page navigation bar as follows:
Create new file in sRGB with proper dimensions for my navigation area.
Fill with web page background color, #c4c0b4.
Use Type Tool to create text in gray #666666. (After creating these buttons, I change the text color to white for hover buttons.)
Use Guides and Slice Tool to define shape of each button.
Save For Web to create folder with all the buttons.
In the Save For Web dialog I have tried several of the GIF presets -- 128, 64, 32, with dithering and without dithering. They all look good, but I'm not sure which will give me that absolute highest quality, sharpest looking characters.
QUESTIONS:
1) Which of the GIF presets should I use for the best text appearance? I have read the Help file and it would seem that I do not need dithering since I am using two solid colors -- #c4c0b4 and either #666666 or white. To dither or not to dither, that is the question!
2) Do I need more than 32 colors?
3) In Save For Web, when I click Save and the Save Optimized As dialog opens, should I use the Default Settings under Settings, or would a custom setting be preferable?
4) Am I correct that I should NOT apply any sharpening to text-only files such as this?
As always, thanks to the pros here for any advice on this.
John

Hi Jesse,
I tried using text links and setting the size in pixels, but the sizing changed depending on the browser settings. Sizing in pixels is better than in points or generic sizes, but still subject to changes. I'm on a PC and my designer-friend who is helping me with this is on a Mac. We've done some tests and anything other than making the links with images is not consistent from browser to browser, Mac to PC. We want to guarantee that all the text on the page will not change -- size, spacing, leading, etc. My clients are graphic designers and art directors who will notice this kind of thing.
As for the client changing, adding or subtracting links... well, I'm the client and I'm doing the site myself, so that's not going to be an issue. In addition, as you see, the site is super-simple so there aren't likely to be a whole lot of major changes. That's not to say it could not happen, but saving all my Photoshop work files is not a problem.
Please understand, I am not arguing with you or Nancy. If I were doing a complicated corporate or business site, I would use text links for all the reasons you lay out... no question about that.
Thank you for the tips on saving GIFs. I'm using Photoshop CS4 and Save For Web. I think I now understand what settings to use. I am using GIFs only for the text. All of the images will be JPGs, but those are all generated automatically by Lightroom and a web gallery plug-in called SlideShowPro which not only generates the images but assembles the galleries and does all the Flash stuff. All I do is embed the Flash galleries into my pages. For a non-web person like me, that's nothing short of a miracle.
Your comments were not long-winded. In fact, I'm so eager to learn more about this stuff that I really appreciate your detailed explanations. Thanks for the comment about my work -- I'm excited about this new website which hopefully will make it look better than ever!
Best,
John

CS4 Save For Web GIF settings confusion

Similar Messages

Maybe you are looking for