Saving for web - how to get transparency saved?

It works with saving it as png24, but only on a white background. How can I save it for web so that I can put a shop-banner with rounded corners on any coloured website background without adjusting it to the special colour onto which it shall be put. Or let's put it otherwise: How can I save it for no special colour, so that a customer may put it onto any kind of colour without having stupid white or black or grey coloured edges showing where the corners have been rounded and where I want it to be transparent?

You need to replace the background with true transparency. First rename the Background layer to anything else. It is sufficient to double-click it in the Layers Palette and accept the default name "Layer 0". Select the background and delete it, replacing it with checkerboard pattern indicating transparency (in some cases it might be easier to select the object, invert the selection, and delete). Then when you save it to png or any other format, check the preserve transparency option if there is one.
Here I started with a flag on off-white background. After renaming the Background layer and deleting the background here is the result.
Important! File types PSD, TIFF, PNG, GIF, EPS support transparency. JPG, BMP do not.
Note that you get the same result if you duplicate the Background layer, do the select/delete on the copy layer, and turn off the vivibility of the Background layer:

Similar Messages

When saving for web in cs5, I get slices saved. How can I change this preset?

Since I started using photoshop cs5, every time I save for the web, I get slices saved, what's annoying about this is the fact that instead of getting the images or slices in this case, saved in the folder I select, it'll automatically create an image folder and then I have to go over the folder and rearange all the images again, it's really time consuming.
Is there a way to avoid this, so that when I select the slices I want to save, they'll go directly to the folder I want instead of having an extra images folder created within my folder...
Thank you

In the save for web dialog under output settings>saving files, uncheck
Put images in folder.
MTSTUNER

How can I get PS CC to always load my preferred Preset while saving for web output?

For my purposes, I'd prefer to save all JPEGs at 100% quality while saving for web output. I've made a preset as seen below.
However, PS doesn't always defer to this setting when I begin saving an image for web. Is there a way to make this preset automatically
load every time I open the output to web process? I process a large number of images, and if I could avoid correcting this it would save me a lot of time.
I'm using PS CC on a PC. Any help will be appreciated!

This is the only custom preset I've made with this particular system. So I'd need to delete the pre-loaded PS presets?
I'm a little loathe to remove the options in case they might be needed in the future or for a task other than the primary one described.

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

Photoshop PNGs saved for web in CS3 v.10 still are not transparent in iWeb 08 2.0.4

I have read the topics and tried the tricks and still have black backgrounds on my photoshop graphics. After saving for web & devides as png8 with transparency I have a checkerboard pattern behind my graphic. I am using the magic wand tool, selecting the emptiness/checkerboard behind, then choosing to select the inverse, the ctrl c, then ctrl v in iWeb
Thanks for any help.
Kristie

When you use the Save For Web or Devices be sure to click on black in the pallet and then on the transparent "button" just below the pallet before saving as a png file.
OT

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

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?

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.

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.

Different Colors by "Saving for Web" - why???

hello,
i save pics for the web, incl. profile sRBG.
but the pics look colder - warm colors get lost - in firefox, because ff is not able to use profile (but only with an extension as i know).
safari is able to show the collors correct.
bridge color prefs are set to "for web/europe".
i am choosing "saving for web", and "Incl. ICC-profile"...
any ideas?
thanks
claus

i have no ie (win) here right now, only mac.
but here are some pics/examples:
the original file (incl. sRGB profile, but size reduced in ps3):
http://www.clausinisland.de/images/IMG_6438kl.jpg
(ok in safari, but "cold" in firefox 3)
here we have a jpg by "saving for web...", excl. ICC-profile!:
http://www.clausinisland.de/images/b2222mm.jpg
(colder colors, see the skin color, like the original in ff3)
one more:
http://www.clausinisland.de/images/bild2.png
left: jpg with profile in ff3
right: same pic in preview
hope this helps a little...
i wonder, if others have not similar problems?!?!? what i am doing wrong?
thanks
claus

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.

Saving for Web, Saving for Print

I have Photoshop Elements 9 & 11. I realize that for the best resolution for prints, the dpi should be at least 220. For web, pics can be saved as little as 72 dpi. Questions: if I want to have print AND web versions of pics, is it best to save them first for Print version, and then do a "Save For Web." If I "Save For Web" before I do my "Saving for Print," will this mess up print versions? I am presently saving my images as tiffs because they are layered. Also -- I don't want to duplicate files and clutter my computer so I'd appreciate feedback on what the most efficient way of saving is for doing both Web and Print. One other thing -- should I uncheck "Resample" for print versions?
Thanks!

For printing, it is desirable to have the file resolution in the 240-300px/in range. For web work, 72 px/in is ok.
DPI is a printer setting.
Suggest that you continue saving in format which supports layers as you have been doing. This will allow you to go back at a future date and make changes. Go to File>save for web, save as JPEG or PNG-24 to a separate folder. When you are done with these files, delete them. You can always go back and recreate them as needed. And, don't forget to back up the picture files to removable disk or DVD.
In the File>save for web dialog, I ususally make the longest side 600 +/- pixels, and check "constrain proportions."

By saving for web text-layer becomes a image in HTML what is wrong?

By saving for web text-layer becomes a image in HTML what is wrong? In this way I can not use CSS in the editor.

Right click on the layer, Duplicate Layer, set destination to the other image file in the dropdown.

Saving for web preserving the metadata

I'm saving for web and want to preserve all metadata except camera info, but besides the camera info, it's not saving the description either. Is it right?
Actually, I only want to save copyright information, author, keywords and description, but there's not such option....
Anyone can help?
Thanks

If you don’t save your custom Presets like Brushes, Actions etc. at least every now and then … well, then losing them because of posssibly corrupted preferences might be a learning experience.
Anyway, the preferences may not be the problem at all, trashing them is simply a trouble shooting routine that may or may not help in your case.
The sfw-preferences should, if I’m not mistaken, be at
~/Library/Preferences/Adobe/Plugins/Adobe Save for Web CS5/Photoshop/Adobe Save for Web CS5 Prefs

AI CS3: Saving for web adds pixels

I've been noticing this in AI... you have an object... 60 pixels in width... save as a .gif/.jpg/whatever. It'll always add on a pixel or two to the size. IOW, 60 pixels is now 62 pixels. Plays hell when you're trying to create a precise site...
JJ

Strokes may be the cause. Object dimensions don't include stroke widths. A 20 pixel wide rectangle with a 10 point stroke (using "Align Stroke to Center" option) will add 5 points to either side, hence it becomes a 30 pixel wide graphic in Save For Web even though it shows as 20 pixels wide in the Transform palette. I don't know if there's a way to include stroke thickness in the dimensions.
Another possibility is that the x & y values are not round numbers. If a 20 pixel wide object's left side starts at X = 100.5 pixels, it will become 21 pixels wide when Saving For Web (i.e. 20 pixels plus the anti-aliased "half" pixels on the left and right sides). Zoom in on that test rectangle in Save For Web and you'll see the left and right sides are grey (if the rectangle is black), so that's another thing to keep in mind. If you want exact and crisp graphics, you need to make sure X, Y, W & H fields are all round numbers (no decimals). This is especially true for square or rectangular graphics. That anti-aliasing is less important or noticeable if the graphic edges are all curves or diagonal lines. [edit: I believe this is what Jacob what talking about...the pixel grid.)
An alternative might be to copy and paste your graphic(s) into Photoshop then Save For Web from there. That will sidestep the "round number X + Y" issue a 20 pixel wide box pastes into a 20 pixel wide Photoshop canvas. Just ensure your colour settings are the same in Photoshop and Illustrator (eg. sRGB).

Saving for web - how to get transparency saved?

Similar Messages

Maybe you are looking for