Save for Web Image Is Offset

I have AI CS4 on Windows Vista and have created an artboard that is 220 px wide and 88 px high. I then added a rectangle of the same dimensions as a background to cover the entire artboard. When I export it to Save for Web and Devices, the resulting image show a white boarder on the left. If I shift my background 1 px to the left on the artboard so that it shows white space on the right and overlaps on the left, it looks fine on the Save for Web export. Is there some set up that I'm missing to get a WYSIWYG conversion?
Thanks,
Curt

If you are trying to save as a jpeg, gif or png then you are rasterizing the vector graphic, which is likely the case of the 'white' space.
To get around this, try creating bleed of 2 pixels all the way around the artboard and then use the crop tool to crop the image to 220x88.
An alternative to this would be to open the file saved for the web in Photoshop or Fireworks and fill in the white/blank space.

Similar Messages

CS6 Save for Web image size limit (Retina)

I have been designing for a lot of mobile sites these days, in particular: iphone retina display (640w). Most of the time these designs can be long in the tooth with the height of these documents - exceeding 8000 pixels at times. I noticed that 8000 pixels is the threshold limit for the "save for web" export. Anything greater than 8000 pixels will be downgraded in quality on retina devices by scaling the image. The jpg will still be the correct height and width, but when viewed on an iphone, you can easily see the degradation. Images and text are blurry. This is no bueno when trying to show a client what their site will look like on an iphone.
So my question is, is there a work around? A preference to be changed? Am I missing something to get the full quality of my design comp in order to preserve retina display quality?

Justin, what about your screenshot that I'm posting here:
You posted that as an example of SFW downsizing to 78% to make its output be no taller than 8192 px, resulting in a width of 500 px. The iPhone will scale a 500 px wide image to make it fit the screen's 640 px width.
And my CS6 SFW set to progressive JPEG (or anything else) refuses to allow a dimension to be greater than 8192 px. Here's the message when I try to make it larger:
Likewise, the scale percentage cannot be made greater than the value which produces a dimension of 8192 px.
Anyway, I'm glad you found a solution.

Photoshop slice tool and Save for Web image quality. Will it affect prints?

I want to slice a large photo into multiple smaller (4x6) printable photos to arrange in a 12x12 inch scrapbook binder pocket (made of of 4x6 pockets). I need to order separate 4x6s online so tiling in the print options is not what I need.
The slow way I know to do this involves cropping and saving each section (maybe even recording this action to do batch processing). However, another way is to use the slice tool to quickly divide up the sections then "Save for Web...". I can adjust some parameters, but I'm afraid there are other automatic adjustments that I don't want. For example, all images are converted to 96 dpi instead of the original 300 dpi. The number of pixels remains the same so I don't think there will be problems printing the picture.
My question is: does the Save for Web function reduce image quality in any way when printing (it is obviously intended to be used to optimize images for websites)? Are there settings in "Save for Web" that would optimize for high quality prints? Is there a better way to tile an image?
I have not yet compared any prints.
W7
CS6

If you understand that something will do something you do not want like convert to 96 DPI as long as it does not resample you can always convert back to 300 DPI. If you want 6 4x6 to form a 12x12 you must start with an square 1:1 aspect ratio image. That you resample to 12"x 12" at 300 dpi if you want 6 4x6 300 dpi images.
If the original images vary in size and aspect ratio you need to crop them square or add two borders to make them square. The rest is easy to do with an action.
The square crop or border can be automated with a little scripting. If crop a center crop would be the route to go. My crafting actions package contains more the a dozen scripts to be used within action. One is a plug-in script that would make center cropping a snap two steps menu File>Automat>AspectsRatioSelection followed menu Image>Crop. Add a menu Image>Size set side to 12" and resolution 300 DPI and you have your starting 12"x12" 300 dpi image.
Flatten the image make your first 4"x6" selection copy past to add it as a layer. Select the background select the next 4x6 area copy and paste repeat that process till you have added the 6 4"X6" layers. Then delete the background, Select all, target all layers and use layer>Align layers to selection>Top edge then repeat align to left edge. the Image>Trim you have your 6 4x6 in a stack. You can the use Adobe Photoshop Script Export Layer to file. All automated in an action however the last step Export layers to files is interactive for its not a plug-in script. So if you batch it you keen to hang around to interact with the last step for each image.
You could also write you own export script that would not need human intervention to use instead of Adobe interactive script.
Crafting Actions Package UPDATED Aug 10, 2014 Added Conditional Action steps to Action Palette Tips.
Contains
Action Actions Palette Tips.txt
Action Creation Guidelines.txt
Action Dealing with Image Size.txt
Action Enhanced via Scripted Photoshop Functions.txt
CraftedActions.atn Sample Action set includes an example Watermarking action
Sample Actions.txt Photoshop CraftedActions set saved as a text file.
More then a dozen Scripts for use in actions
Example
Download

Save for Web – Image Size Preview doesn't update

If I use percentage to change a JPG output size the preview either lags (regardless the size/weight of the image) or simply ignores the new value, forcing me to click on the Width/Height field to complete the action. It would be nice to kill the bug!
Running Mavericks with CC 2014

Could you please post screenshots to illustrate the issue?

Can't change image size % in save for web

Hello,
I'm using Photoshop CC. When slicing a web mockup, and saving for web, the image percent is blocked at 58.49% and I am not able to increase it to 100%. So my original image of 1024px wide comes out at 600px
I haven't changed any settings (that I know of) and do not have this problem on any other mockup files I have. What setting do I need to adjust in order to save for web my slices at 100%?
Thanks!

I worked out what the issue was, my document height was over 8000px tall which is causing the issue, even though my slices are less than 2000px tall. When I temporarily crop the document to below 7000px, I can save out the slices at 100%. Annoying work around.
It seems a bit random.

Image resize quality not saved in Save For Web Preset?

L.S.,
I have been working on an Action to create 12 separate PNG's for further use in my icon-software. What I do is basically this:
Start out with a 256x256px image, save it for web four times in steps from 256, 48, 32 and 16px, (32-bit)
apply some masks / layers, save it for web again four times from 256-16px, (8-bit)
set the mode to indexed colour / apply other masks and layers, and save it for web again from 256-16px. (4-bit)
I let the sizing be done in the Save for Web step.
The 256-sized pics give me no problem as they are not scaled down.
The 32-bit pics give me no problem as they are scaled down, and antialias comes along, but they have 8-bit transparency: no problem.
In the 8-bit and 4-bit versions from 48-16px, I definitely want no antialias in the sized down versions. So I set the resize quality to 'Nearest Neighbor'.
However, Photoshop seems not to be able to remember different resize qualities in one Action.
In every Save for Web-action that I do, when I set it to resize, it does so. But the resize quality is not taken from the setting. It seems to be taken from the last used or recorded setting.
That is pretty annoying, because:
- When I let the downscaled ones of the first 4, be downscaled 'bicubic sharper'
- And I let the downscaled ones of the second 4, and third 4, be downscaled 'nearest neighbor'
Next time I run the Action, all downscaling is done by 'nearest neigbor'. That ruins my downscaled 32-bit icons - they get jaggy.
If I alter the steps in the action manually and set the first ones to 'bicubic sharper' again, suddenly all downscaled ones are done by 'bicubic sharper'.
That ruins my downscaled 8-bit and 4-bit icons: they get antialias, to lime green, and that shows...
I can save Presets in the Save For Web dialog, but as the groupbox already tells me: these presets only apply to the Image quality parameters, not to the sizing parameters. Those seem to be taken from the last run.
I have one alternative to this: before every Save for Web step, I downsize the image myself, and undo the history step after saving. It's quite some work and I would just rather see that the sizing parameters saved in the Preset!

That's never been saved as part of the S4W presets. Bloody annoying.

Image Byte size in "Save for Web"-Dialog is wrong?

The Image Byte size in the finder is always larger than the size stated in Photoshop's "Save for Web"-Dialog box. For example, it shows me 34,36 KB in the SfW-Dialog, while the file information in Finder puts out "38,831 KB". Does anybody know how to fix this annoying behaviour?
kind regards,
tomasio

The size reported in the Finder can be in base 1000 (lying numbers used by disk makers) instead of base 1024 (actual bytes) if you don't change the settings.
The size reported in the Finder can include the resource fork (metadata and thumbnails, some added by the OS), plus some extra space for disk block allocations (if you write 1 byte to a file, it still takes 4k or more of disk space).
The size given in SFW is a close estimate of the actual number of bytes written to the disk, and usually matches the size reported by FTP and the web server (sometimes the estimate is off by a little bit due to the final compression options chosen).
But SFW cannot account for the oddities of the Finder or Windows Explorer's accounting of file size.

Save Image size setting in Save for Web

I'm using Save for Web (CS3) and scaling the file to different sizes with "scale image". I'm wanting to use the same scale settings for many images but when I save the pre-set the image size settings don't get saved. I'm wanting to use it as part of an action but the setting wont stick. Any suggestions? Alternative work flows?

That's never been saved as part of the S4W presets. Bloody annoying.

Save for Web... and grayscale images

I noticed a strange behavior when I use "Save for Web and Devices" on scanned BW negatives...
I import the negatives via the scanner's twain driver in Photoshop as 16bit grayscale images. My grayscale working space is normally set to the default DotGain 20% profile. When I want to show these images on the web, I use "Save for Web and Devices..." and I have selected the convert to sRGB option. For some reason, the "embed color profile" option is disabled (grayed out) when the document is in grayscale mode.
When I view the the exported image (in a color managed application or browser) it looks too dark and shadow detail is lost. Examining the file info shows that the JPG file is in RGB color space and has the sRGB profile assigned.
When I convert the image to RGB mode before I do save for web... the exported image will look exactly like it looked in Photoshop. Also, the mode change doesn't cause a change in appearance. Also, after changing to RGB, the "embed color profile" option in save for web... becomes enabled.
I experimented with other working color spaces and noticed that an image exported from a grayscale image in "GrayGamma 2.2" working color space will display almost like an image that was exported from a grayscale image converted to RGB.
I would like to understand this behavior and whether it is correct. My assumption would be that a conversion to sRGB during the export should yield the same result like a manual conversion of the image in photoshop but for some reason the results are quite different.
How can I export my grayscale images to sRGB JPG without having to convert to RGB manually while preserving the tonality from the original image?
I have attached an image which I hope might illustrate the effect I'm describing. The crop on left hand side looks as expected and is the result of exporting from an image that was converted from grayscale to RGB mode (sRGB working space) before using save for web...
The image in the middle is the result from converting to GrayGamma 2.2 color space but leaving the image in grayscale mode before saving for web and devices. It is almost identical to the crop on the left. The crop on the right hand side is the result of using save for web and devices from the original image in grayscale mode with the default DotGain 20% profile.
Thanks
/lars

These are my settings. Are they the same in your SFW dialog?

Save for web color shift - only on images smaller than 150x150px

I'm getting a color shift only on small images (150x150px or smaller) when I save for web in Photoshop CC and CS6. That's very weird as it doesn't happen to images larger than 150x150px! That issue happens with images with different measurements as well (e.g. rectangle), the small looks dull and the larger display the right color.
My Color Settings are set to "Monitor Color". Under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
I'm running the OS X 10.8.4 on a macbook pro, I tested that on both, Safari 6.0.5 and FF.
The squares in the screenshot were saved exatly the same way. The largerer displays the right color #FFCB32, but the smaller displays the color wrong.
I appreciate your help.
Cheers
P

JPG & PNG = Color Profile "Don't Color Manage this document". Save under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
Resizing in photoshop (Image Size), but the color shifts even with cropped image after save for web.

Help - problem with save for web when jpg image is placed in file

I have a jpg image that I placed in my Illustrator 5 file to use as a backdrop and then created several vector buttons on top. When I attempt to create an arboard around a single button and then save for web, it ignores the artboard dimensions and shows the entire jpg dimensions. If I create the same file without the jpg backdrop image, I am able to use the artboards to save just a single button. Any time I place a jpg image in my Illustrator file and attempt to use the artboards, the artboards are ignored and the entire area of the jpg is saved. I am able to use the slice tool to do the saving, but I prefer to use the artboards. Does anyone have any suggestions on how to get the artboards to work when a jpg is placed in the file? Thanks.

THANK YOU!!!
It says, "Clip to artboard". I wasn't sure what clip meant, but that was it! Thank you.

Save for web&.... the image exceeds the size for ....issue with AI on imac i7

Hi,
I just upgraded from using macbook Pro to Imac inte core i7 with 4GB. I use illustrator CS3 for high resolution documents i.e saving a Design for say maybe saving for iphone &ipod skin; a quality jpg that is 1300px(width) by 2000px(height.
General information
The issue is I keep getting the pop up with:
The image exceeds the size Save for Web was designed for. You may experience out of memory erros and slow performance. Are you sure you want to continue?
I click yes, but get another pop up with:
Could not complete this operation. The rastarized image exceeded the maximum bounds for save for web.
And last weekend after NOT being able to save anything I went and bought 16GB memory thinking that this ussue would be solved, but nada.
I have researched around here and google only to find about scratch disk: went to preferences then to plug-ins and scratch Disks -I seem NOT to get to the bottom of this at all.
And this morning I was trying to create a pattern Design and could not even get the design on the color swatches as I have done before with macbook pro with 4GB -IT'S NOT FUN, because I am NOT doing it right. Do you care to help me out?
Thanks a whole bunch in advance
//VfromB

Are you including a color profile? What metadata are you including with it?
How many pixels (h x v)?
50 kb is not all that big. Does your image have a lot of detail in it? Content can affect final compressed size.
-Noel

Photoshop crashes when I try and save for web and devices. Making the image size smaller does not help.

I'm trying to make a lopping .gif from an animation that I made. It's 147 total frames. It's crashed about 6 times now every time I either try and Save for Web or even just save the document on my desktop so in case it crashes I can reopen PS and recover it. Making the image size smaller (original size is 1920 x 1080 with resolution 72) does not help, it still makes the *ding* error when I attempt to save. I made the image more than half of the original size and the Save for Web box actually came up that time, but when I tried clicking save it said there was an error and PS crashed without warning.

Look at the crash report for your Photoshop crashes see what they show

How do I change the image size in Save for Web?

I just upgraded to Illustrator CS6 on a PC. I try to save my graphic in Save for Web and want to alter the image size, but it won't change, it just goes back to the original size. If I change the percentage box, the values change. I have tried linking and unlinking the proportions and nothing. What am I missing?? I don't have time to guess the percentage to get to the exact width I need.

Make changes in the Image Size section of the Save for Web. Input new values in Width and press Tab key to move to Height field. Click on the Link icon to unconstrain proportions. As you press the Tab key again to go out of focus of the Width and height boxes, you will see the changes reflect inside the Save for Web window. If this doesn't work then make sure you have updated Ai to 16.0.1 or 16.1.0 depending on the type of installation (from Disc or from Creative cloud) respectively.

Poor image quality save for web

It doesn't matter whether i'm exporting from Ai or Ps or whether it's CS6 or CC. I have changed the raster settings in Ai and i've also tried all optimization options with all different export file types (jpg, png, gif) at all different quality settings. It doesn't matter if I start with an ai, eps, pdf, png... the export result is always poor quality.
I have tried exporting at 300ppi and that does fix the quality issue and bloats the file size, but this way (the export route) is so time consuming since you have to resize your artwork each time as well as the artboard so that it doesn't cut off pixels. Save for web never used to have these quality issues and it also never used to cut off pixels around the edges. These workarounds prove very time consuming and produce file sizes that are not ideal.
When i first noticed this issue I was using Mavericks with CS6 and since am using Yosemite and Creative Cloud.
Steps to reproduce:
1. Create any bitmap or vector graphic in Ai or Ps, It doesn't matter whether you convert text to outlines or not
2. Save for web
3. View image in any application or browser to see poor quality and pixel trimming. Others running the same version and system are not having this issue, but I have checked many forums and found many others that do have this same issue but can't seem to find a solution.
Results:stair stepping, degradation, pixel trimming, general poor image quality
Expected results: Previously the save for web feature allowed for a decent quality image

First try the Cleaner. here's the link for CC but there exists one for Cs6 as well Use the CC Cleaner Tool to solve installation problems | CC, CS3-CS6
Everything I have read says that you kind of have to compromise file-size for quality. Could you post a screenshot of your settings?
also, if it helps: Creative Suite * Optimizing images

Save for Web Image Is Offset

Similar Messages

Maybe you are looking for