Artwork shifting when exporting or saving for web?

Have been creating some simple icons in Illustrator (CS 5.5), but the artwork is shifting when I try to export. For example, I'll create a 30x30px artboard, draw the icon inside the artboard, end export as a PNG. When I do this, even though the artwork is completely within the bounds of the artboard (no drop shadows or anything like that that would extend outside the artboard), there is some slight clippling that occurs in the exported icon. It's like Illustrator is shifting the artwork to the right and/or down 1 pixel as it exports. Any ideas what might be happening here?
In the meantime, as a work-around I've just been copying the artwork from Illustrator, pasting it into a 30x30px canvas in Photoshop, pasting the artwork, adn then doing Save for Web. This works fine, but is an extra step that I'd rather not have to do.

Jacob,
I tried enabling "Use Preview Bounds" as you suggested, but it still showed everything within the artboard. This was as expected since I set the button stroke for inside alignment rather than centered alignment when I created it.
I've attached an image showing the icon in 3 states. The left most image is the icon as it appears in Illustrator shown within the artboard. Actually the artboard was created by clicking on the icon. When "Use Preview Bounds" was enabled, it lined up perfectly with the artboard lines. The middle image shows the icon in the Save for Web dialog preview. You can see that it already looks shifted. The last image on the right shows the exported icon where the right and bottom edges looked cropped.
As I mentioned, if I create a 30x30px canvas in PS, copy the artwork into it, and export using Save for Web for PS, it looks fine.
Thanks for your help, BTW.

Similar Messages

Retain 16:9 ratio when exporting to MPEG4 for web streaming?

I was surprised not to find this topic in previous discussions, since it doesn't seem to be an unusual thing to want to do. But I'm new to Compressor, so I may be missing something very simple.
I'm wanting to post on a web-page a 6-minute sequence from a longer project shot and edited in FCP in 16:9 format. Using File - Export - Using Compressor, and selecting either the QT6 or QT7 options, the resulting videos are squashed to 4:3.
I can't find any way to select a 16:9 option for MPEG4 with Compressor (as one can with MPEG2, which is what I'm used to using). I found a post that mentioned the "Geometry tab" in Compressor, but can't find such a tab anywhere. I also saw someone recommend changing the 320x240 to 320x180 in Quicktime, which sounds as if it would work, but I can't find a way to do that either.
Any advice on how to proceed will be greatly appreciated. Many thanks.
PowerMac G5 Mac OS X (10.4.3) FCP Studio 5.0.4
PowerMac G5 Mac OS X (10.4.3)

If you drop your video into Compressor, and assign a web download MPEG4 preset, you can double click on the preset and show the inspector.
There you can assign or modify your aspect ratio and save it as a custom preset.
Just did it.

Strange quality issues when saving for web and devices.

Im a UI designer and spend lots of time working with illustrator and photohop. When I design I normally create vector mockps of my work and then export slices using artboards and save for web and devices. Yesterday Illustrator started having problems exporting files. The files look good on my computer, when viewed with pixel preview mode but when i export they look really bad. here is an example:
This is a screen shot of a part of a mobile app im working on at 100 % and 200 %
here is the same area when exported using "save for web and devices" at 100% and 200%:
as you can see there is a dramatic loss in quality. the icons look almost like a low color gif...
Here is what I have tried already:
I have tried changing the settings in the exporter. I normally use png 24 but I have tried all the different settings and they all do about the same thing. the only one that seems to look ok are swf and svg.
I have copied my files over to photoshop and exported from there. that works fine but it is a pain.
any help would be great.
Eli
www.elilang.com

Here is a screen shot with transparence off and art optimized... still not working.

4 questions on export/importing graphics for Web and Photoshop.

Hi, I have 4 questions here, and if you can answer one or more, I'd be happy!! :-)
1. In general, can there be a loss of quality when I export a file from Illustrator CS3 to Photoshop CS3, and then re-import it into Illustrator?
My guess is that you can switch applications with one single file, but you have to know what you're doing (any advise? I'm working with files that contain both text with either illustrated graphics or photos).
2. When I switch applications like that, which one is the final application I should save my final work from (for use in print and web)? Does this matter at all? (Example: I have text created in Illustrator. I export it into Photoshop and add a filter, and maybe a blured-layer of the the whole graphic.)
3. After completing the steps in the example above, and I do re-import it all back into Illustrator, the image appears with horizontal path-like blue lines, that let me slice the photo/text if I wanted to. Why does it do this and how do I get rid of those blue lines?
4. When exporting a file for web, what options are you setting for .gif and .jpg in order to NOT see its white background/frame around graphic?

1. Yes. The artwork will be rasterized to a fixed resolution in Photoshop. When re-imported it may appear the same, but it will have limited resolution on output, whereas Illustrator vector art has no (or infinite) resolution.
2. Depends on the artwork and what the client or printer has requested. If you can keep the text editable in Illustrator (blur and some Photoshop filters are available) then you'll have a more versatile and resolution independent file than you would if you switched to Photoshop. In the end, if the resolution of you art is adequate, it's up to you which is better for you to work with, based on your skills and experience. Keep all working files so you can make changes to artwork imported from one program into another.
Some features you might enjoy: You can place Illustrator files into Photoshop and make them Smart Objects. They remember they are Illustrator files and can be edited in Illustrator at any time. Rotate, scale, or distort the artwork in Photoshop and it is re-rendered a the PSD file's native resolution. In CS3 you can add filters to Smart Objects while keeping the vector data intact.
3. I have read about this, but as I'm not fully up on CS3 and don't have it installed on my main system I can't help.
4. To not see a white background for JPEG use a different matte colour. JPEGs cannot be transparent, so some colour must show where you want transparency. for GIF, the same applies, but you can turn on transparency. The artwork will be transparent, but the matte colour will determine how the anti-aliased edges are rendered. Use a matte colour that's as close to your expected background as possible or choose None. PNG 24 supports 8-bit transparency, which looks best of all, but is not supported by MS Internet Explorer versions 6 or lower.

Photoshop crashes when saving for web and devices

When hitting saving for web and devices, Photoshop starts to render images but before it's done, it crashes. I get an error-popup with no text and the screen where normally the animation is shown is red. Then Windows comes with a crash report and I can only quit Photoshop.
I have an animation of over 150 frames, but just some black and white lines, no color.
I'm using Photoshop CS 5.5 on Win7.
I tried deleting the preferences in AppData/Roaming etc, but no result, still crashes.
My Photoshop is also updated to the latest version.
Help?

Ok, here's a crash report from Windows (not sure which I should post so just gonna post them both..)
Naam van toepassing met fout: Photoshop.exe, versie: 12.1.0.0, tijdstempel: 0x4d90cf71
Naam van module met fout: Save for Web.8BE, versie: 12.0.0.1, tijdstempel: 0x4d90d758
Uitzonderingscode: 0xc0000005
Foutoffset: 0x002d2e96
Id van proces met fout: 0x1f4c
Starttijd van toepassing met fout: 0x01cdb1fca2dd8dcb
Pad naar toepassing met fout: C:\Program Files\Adobe\Adobe Photoshop CS5.1\Photoshop.exe
Pad naar module met fout: C:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\Import-Export\Save for Web.8BE
Rapport-id: fa9784f8-1def-11e2-a242-00238bb26d31
Photoshop.exe
12.1.0.0
4d90cf71
Save for Web.8BE
12.0.0.1
4d90d758
c0000005
002d2e96
1f4c
01cdb1fca2dd8dcb
C:\Program Files\Adobe\Adobe Photoshop CS5.1\Photoshop.exe
C:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\Import-Export\Save for Web.8BE
fa9784f8-1def-11e2-a242-00238bb26d31
Where can I find a Photoshop Crash Report?

Grainy text when saved for web

Why do graphics with text and/or images in Fireworks CS5 become more grainy or blury when saved/exported for web use? Compared to results in Photoshop, text, image and graphic rendering when saved for web in Fireworks is lower quality or poor (grainy and blurry). Why?! Should I not use Fireworks and only use Photoshop CS5? Isn't Fireworks designed for creating web graphics? If so, what am I missing? Any help would be appreciated.
Brian

Yeah, I'd encourage you to use whatever works for your situation.
I should have asked you to include a screenshot of your original for comparison. I do see obvious JPEG artifacting around the letters as well as the images; this graphic has a lot of flat color, which would prompt me to try saving it as a GIF or PNG-8 (or even a PNG) instead of a JPEG.
The cover images do look quite blurry, but I suspect they must look blurry in your original as well. Incidentally, if you saved these graphics as symbols, you could resize them multiple times in your layout without losing any quality—kind of like Smart Objects in Photoshop. (I'm assuming they might have been larger initially?) Also, you could check your Preferences to see what Interpolation method is being used when resizing. This could impact the appearance of the cover images, if they are being resized.
Text rendering is tricky at small sizes. Making a seemingly minor adjustment to the pixel size can have an impact on how the text is rendered at this small of a size, depending on the font. As far as anti-aliasing goes, System Anti-Alias can be a good choice, sometimes; you might also explore the Custom Anti-Alias option. You might also have smoother results if you create the layout at twice the size (or more) initially—a display font will look better when rendered with more pixels—and then output it at half size.
An interesting thing about Photoshop: If you zoom in to the highest setting, you can use the arrow keys to create subtle adjustments to the text rendering, depending on what kind of aliasing you've applied.

Errors in Export to PDF for web use - some images are lost when PDF is enlarged & in browser

I have a multi-page PDF in InDesign CS6 that I want to export to view on the web. I need the file to stay under 2MB, and I need it to be crisp and nice enough to read the type on the page (as small as 9pt type).
The errors that are occurring are the following:
On some browsers, some images will entirely not show up. Some of the missing images have been pasted into the document, some placed. I cannot think of a correlation.
When the PDF is enlarged (Adobe Acrobat X 10.1.10) to more than ~200%, there is one placed image that will mostly disappear. What I mean by "mostly" is that little bits of it are still visible, like I masked it carelessly or something. Since this is only occurring with one image it seems that it would be a problem with the image itself, yes? I'm all ears if I'm making a mistake. It is a placed .ai file with no link errors. Should I not be placing directly from illustrator? It renders wonderfully from 100% all the way up to 188%, and then if you enlarge by margins of 1% little bits of it disappear, almost a chunk at a time.
The way I've been exporting is:
File > Export > Adobe PDF (Print)
Adobe PDF Preset: Smallest File Size
Standard: None
Compatinility: Acrobat 6 (PDF 1.5)
Options: Optimize for Fast Web View
Export Layers: Visible & Printable Layers
Compression
I always change the downsampling from [100/150] to [150/225]. I usually leave the JPG image quality low. I leave both bottom boxes checked (compress text and line art, crop image data to frames)
Output
Color Conversion: convert to destination
Destination: sRGB 1EC61966-2.1
Profile Inclusion Policy: Include Destination Profile
However, after reading a few other forum questions I started trying to export as Acrobat 4 so that it would flatten. When I do that, problem #2 still persists although I didn't test problem #1. I haven't tried using Distiller, and using the "prepare for web publishing" action within Acrobat itself makes the PDF too artifacted.
At the heart of my question is this: I am a young designer at an old company that is not necessarily keeping up with the times. I REALLY want to know what the best, most efficient way to export a pdf for web viewing is. Does this exist in InDesign, outside of InDesign? Does it exist at all? Tell me what I'm doing wrong so that I can get better!
Thank you in advance.

Show Large Images is a preference inside of Acrobat which might be disabled.
Acrobat - File > Preferences

What is the best way to keep high res when saving "for web"

the files i'm saving for web so i can get them in jpg (or gif) format are coming out very pixelated. this is when i print the image.
what is the best way to save for web an image and keep the resolution good.
using for a business card template. avery template will let me attach images i want to the project. to do this.. i "get file from computer" and it drops the image in but real small... then you are supposed to enlarge it onto your work however you want. well when i enlarge this image file, it gets pixelated badly. i'm thinking it's the way i'm saving it. i do not adjust anything when i save. maybe i should. this is where i need guidance.
this is what avery template notes about the images i am allowed to use - When uploading the image, the maximum size allowed is 4 MB. You can only upload JPG and PNG images either as RGB or CMYK. so when you recommend things, can you please keep this in mind
thank you for oyur time.

Aida,
When you save with the default template using save for web it is generally a very low settings.
While in the save window you can define the pixel size of the image you want with quality as well as resolution too.
Refer to tv.adobe.com video save for web or Adobe help file for detailed instructions.
Mandhir

Losing quality when saving for web after using Multiply

I have a normal photograph, with a red layer on top set to Multiply/Darken. When I save it for web, regardless of what pixel size, or what uploader I use the quality is terrible.
Have tried uploading to different services, from difference devices with the same issue, so assume it's a colour profile thing.
Any help appreciated.
Image shows the difference in quality compared to normal.

04dalyj wrote:
I have a normal photograph, with a red layer on top set to Multiply/Darken. When I save it for web, regardless of what pixel size,
DPI is pixel size and images are not displayed on screens with the pixels sized as specified in images resolution setting. The images pixels are displayed on displays with pixels the size the display is run with. So web images display on display, display with different sizes and resolution depending on the users display device.
Images saved for web display should be saved with sRGB colors for many image viewers are not color managed and assume web images have sRGB colors.
So you images will display differently on different displays and no matter how you save them colors will vary displays may not be calibrated all displays do not have the same color capabilities.
The best you can do is calibrate your display and save them with sRGB colors jpeg or png files that display well and look good on your calibrated display.
Most desktop displays are 100DPI resolution displays where newer tablets and laptop have high resolution displays 200 to 300DPI. Even new Desktop 4k display have lower resolution. I believe the highest resolution 4K display in production is the Dell 24: display . Its resolution is 185DPI. Out of production is IBM's old 4K display which had a 204DPI resolution.

Gradient mesh transparency problem when saving for web

Hi,
I created a shadow using a gradient mesh but I can't seem to figure out how to set the mesh points to multiply. As a result, when I do save for web, the white parts get saved as opaqe areas and the shadow png can't be placed on a colored background. Help.

...and aside from what Monika said, consider the limitations of transparency handling in web image formats as well as what impact the differences in handling of transparancies between browsers may have on the web site design.
Mylenium

Strange white lines sometimes occur when saving 'for web and devices' in Illustrator?

Hi
Strange white lines sometimes occur across my documents, when saving 'for web and devices' in Illustrator CS5 (on the right side of the black logo below). Does anyone know how to avoid this please??
Thank you so much.

LSM,
The link seems broken.

When try saved for web the adobe elements 11 close, mac os

when try saved for web the adobe elements 11 close, mac os, one o less week work fine, i use mac os 10.9.4 (2.4 i5, 16gb ram, hd solid) i buy Adobe in Apple Store

Go to your username>library>preferences and delete anything you find called Adobe Camera Raw <version number> prefs. To see the user library, click the Go menu in the Finder and hold down the Option key and it will appear below the little house for your user account.

PSD files saved for web and devices show up as broken when opened Dreamweaver. How can this be fixed?

PSD layouts saved for web and devices show up as broken links in dreamweaver. Previews in browsers are fine, but I keep getting and error message that says the files have been blocked. What is the fix for this?

You can also try out Project Parfait. It's a new experiment from Adobe that’s currently online and free to try out and use.
It allows easy PSD comps-to code workflows.
Project Parfait (Beta) - PSD CSS Extraction, Measurements and Image Optimization Service for the Web
-Subhadeep

Error when trying to "Save for Web"

I, like others have the same problem in Photoshop Elements 6 editor when trying to "Save for Web". I get an error:
could not complete the export command because of a program error
I've searched the forum, but it seems like no one has found a solution.
I have a new PC with Windows 7 on it. It's Win 7 Ultimate 64-bit. i5 processor, 16GB RAM and plenty of HD space.
I am running Photoshop Elements 6.
When I used the same version of Photoshop Elements 6 on my old XP computer, I didn't have this problem.
Adobe Photoshop Elements Language Version: 6.0 (6.0 (20070910.r.377499))
Operating System: Windows Vista
Version: 6.1 Service Pack 1
System architecture: Intel CPU Family:6, Model:10, Stepping:9 with MMX, SSE Integer, SSE FP
Physical processor count: 4
Built-in memory: 15822 MB
Free memory: 11064 MB
Memory available to Photoshop: 1621 MB
Memory used by Photoshop: 55 %
Image cache levels: 6
Serial number: 10571087952197841429
Application folder: D:\Program Files\Adobe Photoshop Elements\
Temporary file path: C:\Users\Roger\AppData\Local\Temp\
Photoshop scratch has async I/O enabled
Scratch volume(s):
C:\, 111.7G, 76.2G free
Primary Plug-ins folder: D:\Program Files\Adobe Photoshop Elements\Plug-Ins\
Additional Plug-ins folder: not set
Installed plug-ins:
   3D Transform 10.0 (10.0x001)
   ADM NO VERSION
   ASDStrm NO VERSION
   Accented Edges 9.0
   Angled Strokes 9.0
   Auto Divide 6.0.0.0 (6.0 (20070910.r.377499))
   Average 10.0 (10.0x001)
   BMP 10.0 (10.0x001)
   Bas Relief 9.0
   Camera Raw 4.2
   Chalk & Charcoal 9.0
   Charcoal 9.0
   Chrome 9.0
   Clouds 10.0 (10.0x001)
   Color Halftone 10.0 (10.0x001)
   Color Variations 10.0 (10.0x001)
   Colored Pencil 9.0
   CompuServe GIF 10.0 (10.0x001)
   Conditional Mode Change 10.0 (10.0x001)
   Conté Crayon 9.0
   Correct Camera Distortion 9.0
   Craquelure 9.0
   Crop and Straighten Photos Filter 10.0 (10.0x001)
   Crosshatch 9.0
   Crystallize 10.0 (10.0x001)
   Cutout 9.0
   Dark Strokes 9.0
   De-Interlace 10.0 (10.0x001)
   Difference Clouds 10.0 (10.0x001)
   Diffuse Glow 9.0
   Displace 10.0 (10.0x001)
   Dry Brush 9.0
   Extrude 10.0 (10.0x001)
   FastCore Routines 10.0 (10.0x001)
   Fibers 10.0 (10.0x001)
   Film Grain 9.0
   Filmstrip 10.0 (10.0x001)
   Filter Gallery 9.0
   Frame From Video 6.0
   Fresco 9.0
   Generic EPS 10.0
   Glass 9.0
   Glowing Edges 9.0
   Grain 9.0
   Graphic Pen 9.0
   Halftone Pattern 9.0
   Ink Outlines 9.0
   JPEG 2000 2.0
   Lens Flare 10.0 (10.0x001)
   Lighting Effects 10.0 (10.0x001)
   Liquify 7.0
   MMXCore Routines 10.0 (10.0x001)
   Magic Extractor 10.0 (10.0x001)
   Matlab Operation 10.0 (10.0x001)
   Mezzotint 10.0 (10.0x001)
   Mosaic Tiles 9.0
   Multiprocessor Support 10.0 (10.0x001)
   NTSC Colors 10.0 (10.0x001)
   Neon Glow 9.0
   Note Paper 9.0
   Ocean Ripple 9.0
   OnEdge 1, 0, 0, 1
   PCX 10.0 (10.0x001)
   PNG 10.0 (10.0x001)
   PNG Icons 1.22x1
   Paint Daubs 9.0
   Palette Knife 9.0
   Patchwork 9.0
   Photocopy 9.0
   PhotomergeUI 10.0 (10.0x001)
   Picture Package Filter 10.0 (10.0x001)
   Pinch 10.0 (10.0x001)
   Pixar 10.0 (10.0x001)
   Plaster 9.0
   Plastic Wrap 9.0
   Pointillize 10.0 (10.0x001)
   Polar Coordinates 10.0 (10.0x001)
   Poster Edges 9.0
   Radial Blur 10.0 (10.0x001)
   Read Watermark 1.70.19
   Reticulation 9.0
   Ripple 10.0 (10.0x001)
   Rough Pastels 9.0
   Save for Web 3.0
   ScriptingSupport 10.0
   Shear 10.0 (10.0x001)
   Smart Blur 10.0 (10.0x001)
   Smudge Stick 9.0
   Solarize 10.0 (10.0x001)
   Spatter 9.0
   Spherize 10.0 (10.0x001)
   Sponge 9.0
   Sprayed Strokes 9.0
   Stained Glass 9.0
   Stamp 9.0
   Straighten Image 10.0 (10.0x001)
   Straighten and Crop Image 10.0 (10.0x001)
   Sumi-e 9.0
   Targa 10.0 (10.0x001)
   Texture Fill 10.0 (10.0x001)
   TextureSelect 10.0 (10.0x001)
   Texturizer 9.0
   Tiles 10.0 (10.0x001)
   Torn Edges 9.0
   Twain Acquire 10.0 (10.0x001)
   Twain Select 10.0 (10.0x001)
   Twirl 10.0 (10.0x001)
   Underpainting 9.0
   WIA Support 10.0 (10.0x001)
   Water Paper 9.0
   Watercolor 9.0
   Wave 10.0 (10.0x001)
   Wind 10.0 (10.0x001)
   Wireless Bitmap 10.0 (10.0x001)
   ZigZag 10.0 (10.0x001)
Plug-ins that failed to load: NONE
Installed TWAIN devices:
   WIA-HP Scanjet 4800 series

I also tried the alt/ctrl/shift buttons when clicking Editor in the Photoshop welcome screen. It did ask if I wanted to reset the preferences. I chose yes. I still get the same error message when trying to save for web.
Below....showing I don't have a "save for web" folder on my C drive.
And below, showing the same error after pressing alt/shift/ctrl when clicking on editor and clearing the preferences.
I don't have a 'Save for Web' folder anywhere on my C: drive. I searched and came up with no folder with the text "save for web" in it.
I did find a "save for web" folder on my D: drive and deleted that.. but now when I start up Photoshop, the option for Save for Web is grayed out...not able to select it.

Photoshop CC is crashing regularly when I perform Save For Web function

I'm finding that my Photoshop CC, running on Windows, is continually crashing - most notably following a Shift+Ctrl+Alt+S command. Any ideas?

Sounds to me like you may have the RAM allocation for Photoshop set too high. Press Ctrl-K to go to preferences and click on Performance. If your RAM is set higher than 70%, you'll need to lower it...close Photoshop and then reopen it so the new setting will take effect.
The other thing that might be causing it is the size of the image, Save For Web is notorious (especially in older versions) for not playing nice with larger files. Try an image with a smaller pixel dimension and see if that helps. Since you are saving for web, it's advisable to resize the image before saving for the web.
One last note - when installing CC on a Win 64 bit box, make sure that the desktop icon or task bar icon actually points to the 64 bit version of CC. Photoshop CC installs both the 32 and 64 bit versions.

Artwork shifting when exporting or saving for web?

Similar Messages

Maybe you are looking for