Transparent GIFs for the web

Hope someone can help with this.
I'm basically trying to optimize a transparent image for the
web. I have a straight PNG vesion here, which is what I'm trying to
do, but it's around 96k - so a bit high.
It looks like :
example
one
I tried exporting it as an 8 bit PNG, which got the file size
down, and looks OK in Safari, but looks hopeless in IE (6) :
example
2
So I tried exporting as a transparent GIF, but it only looks
like these :
example
3
example
4
Any tips on how I can optimize it a bit better for the web,
and retain it's original appearance?
Cheers.

As I have asked several times on the DW forum, how did you
export the PNG
image?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iain71" <[email protected]> wrote in
message
news:fan87d$n8r$[email protected]..
> Hope someone can help with this.
>
> I'm basically trying to optimize a transparent image for
the web. I have a
> straight PNG vesion here, which is what I'm trying to
do, but it's around
> 96k -
> so a bit high.
>
> It looks like :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp.shtml
>
> I tried exporting it as an 8 bit PNG, which got the file
size down, and
> looks
> OK in Safari, but looks hopeless in IE (6) :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepage.shtml
>
> So I tried exporting as a transparent GIF, but it only
looks like these :
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp3.shtml
>
>
http://www.handprintdvd.co.uk/webdesign/carcarenew/homepagetemp4.shtml
>
> Any tips on how I can optimize it a bit better for the
web, and retain
> it's
> original appearance?
>
> Cheers.
>

Similar Messages

Save for the web - Colors and Shift key

Hi Everyone,
With CS3 and Save for the Web, while saving a transparent image using GIF, you could use the Eyedropper Tool (i) and hold Shift key to select multiple colors at a time ON the image itself.
Trying this in CS4 and it doesn't look like it's working. Anything changed? No I have to select the colors one at a time and this is painfull when you're on 256 different colors.
Thanks!

It would appear this functionality is no longer available. Shift clicking on the swatches is, though that doesnt help much here.

How to create clean text for the web in Photoshop/Illustrator

I am puzzled to death on how in the world to get clean text for the web in Photoshop/Illustrator, particularly white text. I want my text to turn out exactly like the text at this website: thepainteddoor.org
If you scroll down to the bottom of that page, notice the titles "Featured Media", "Social Networking", and "Contact Information". They are all .gif images. I have tried to replicate what these images look like for about 3 hours now to no avail. Can anyone tell me how to do this? It just looks like a simple outline or drop shadow, but I can't get it to show up like that. If someone could help me replicate that effect with text (aka make it show up clean as an image), I would graciously give them money through PayPal*.
* = I will only give cash if it will replicate it exactly (and I mean exactly)..and it won't be too much..I'm a poor college student. :-P
Thanks in advance!
Thomas

You would do it the way I created it:
Select the Text tool in Photoshop and set the font and parameters as I have listed. Then enter whatever text you like. It will be rendered over the top of the lower layers you may have in the document. Save as an image of the appropriate type and you're there.
Note that "lower layers you may have in the document" could conceivably be none at all (i.e., you render the text over a transparent document). You could imagine saving that as a .png with transparency and get light text in an image that could then be put over the top of anything else. The alpha mixing will see to it that the edges smoothly blend with the background. I haven't actually tried this (I usually do try my own suggestions) because of lack of time right now.
-Noel
Edit: Markerline and I seem to be on the same crystal-controlled wavelength.

Saving JPG to PNG using Save for the Web

Morning
I came across Paul Riggott's script for saving PSD to PNG which I changed to JPG to PSD.
The only problem with this is that the file size in most cases is larger than the original.
Is there a way to do a save as for the web as well?
Here is the original code:
#target photoshop
var imageFolder = Folder.selectDialog("Select top folder to process");
var folderList=[];
if (imageFolder != null) {
processFolder(imageFolder);
folderList.unshift(imageFolder);
createPNGfromJPG(folderList);
function createPNGfromJPG(folderList){
for(var a in folderList){
var fileList = folderList[a].getFiles ("*.jpg");
   for (var z in fileList){
    var file = fileList[z];
    open(file);
    var Name = fileList[z].name.replace(/\.[^\.]+$/, '');
    var saveFile = File(decodeURI(fileList[z].path+"/"+Name+".png"));
    SavePNG(saveFile);
    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
function processFolder(folder) {
    var fileList = folder.getFiles()
     for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
if (file instanceof Folder) {
folderList.push(file);
       processFolder(file);
function SavePNG(saveFile){
    pngSaveOptions = new PNGSaveOptions();
    pngSaveOptions.embedColorProfile = true;
    pngSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;
    pngSaveOptions.matte = MatteType.NONE;
    pngSaveOptions.quality = 1;
pngSaveOptions.PNG8 = false;
    pngSaveOptions.transparency = true;
activeDocument.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE);
Any help or support to head me in the right direction would be appreciated.
Iain

This uses "Fitimage"....
#target photoshop
var imageFolder = Folder.selectDialog("Select top folder to process");
var folderList=[];
if (imageFolder != null) {
processFolder(imageFolder);
folderList.unshift(imageFolder);
createPNGfromJPG(folderList);
function createPNGfromJPG(folderList){
for(var a in folderList){
var fileList = folderList[a].getFiles ("*.jpg");
   for (var z in fileList){
    var file = fileList[z];
    open(file);
    var Name = fileList[z].name.replace(/\.[^\.]+$/, '');
    var saveFile = File(decodeURI(fileList[z].path+"/"+Name+".png"));
    FitImage(640,640); //Resizes to the longest size
    //FitImage(128,128);
    savePNG8SFW(saveFile);
    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
function processFolder(folder) {
    var fileList = folder.getFiles()
     for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
if (file instanceof Folder) {
folderList.push(file);
       processFolder(file);
function savePNG8SFW(saveFile) {
    var desc8 = new ActionDescriptor();
        var desc9 = new ActionDescriptor();
        desc9.putEnumerated( charIDToTypeID('Op '), charIDToTypeID('SWOp'), charIDToTypeID('OpSa') );
        desc9.putEnumerated( charIDToTypeID('Fmt '), charIDToTypeID('IRFm'), charIDToTypeID('PNG8') );
        desc9.putBoolean( charIDToTypeID('Intr'), false );
        desc9.putEnumerated( charIDToTypeID('RedA'), charIDToTypeID('IRRd'), charIDToTypeID('Sltv') );
        desc9.putBoolean( charIDToTypeID('RChT'), false );
        desc9.putBoolean( charIDToTypeID('RChV'), false );
        desc9.putBoolean( charIDToTypeID('AuRd'), false );
        desc9.putInteger( charIDToTypeID('NCol'), 256 ); //Number of colours.
        desc9.putEnumerated( charIDToTypeID('Dthr'), charIDToTypeID('IRDt'), charIDToTypeID('Dfsn') );
        desc9.putInteger( charIDToTypeID('DthA'), 100 );
        desc9.putInteger( charIDToTypeID('DChS'), 0 );
        desc9.putInteger( charIDToTypeID('DCUI'), 0 );
        desc9.putBoolean( charIDToTypeID('DChT'), false );
        desc9.putBoolean( charIDToTypeID('DChV'), false );
        desc9.putInteger( charIDToTypeID('WebS'), 0 );
        desc9.putEnumerated( charIDToTypeID('TDth'), charIDToTypeID('IRDt'), charIDToTypeID('None') );
        desc9.putInteger( charIDToTypeID('TDtA'), 100 );
        desc9.putBoolean( charIDToTypeID('Trns'), true );
        desc9.putBoolean( charIDToTypeID('Mtt '), false );
        desc9.putInteger( charIDToTypeID('MttR'), 255 );
        desc9.putInteger( charIDToTypeID('MttG'), 255 );
        desc9.putInteger( charIDToTypeID('MttB'), 255 );
        desc9.putBoolean( charIDToTypeID('SHTM'), false );
        desc9.putBoolean( charIDToTypeID('SImg'), true );
        desc9.putBoolean( charIDToTypeID('SSSO'), false );
            var list3 = new ActionList();
        desc9.putList( charIDToTypeID('SSLt'), list3 );
        desc9.putBoolean( charIDToTypeID('DIDr'), false );
        desc9.putPath( charIDToTypeID('In '),File( saveFile) );
    desc8.putObject( charIDToTypeID('Usng'), stringIDToTypeID('SaveForWeb'), desc9 );
    executeAction( charIDToTypeID('Expr'), desc8, DialogModes.NO );
function FitImage( inWidth, inHeight ) {
if ( inWidth == undefined || inHeight == undefined ) {
alert( "FitImage requires both Width & Height!");
return;
var desc = new ActionDescriptor();
var unitPixels = charIDToTypeID( '#Pxl' );
desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
executeAction( runtimeEventID, desc, DialogModes.NO );

Problems with PSE 10 when saving for the web.

I'm having problems saving for web with PSE 10. I edit in RAW, edit in PSE 10, save as Jpeg, resize and save for the web. Results are muddled and not sharp (looks cartoonish). Also, there is no metadata when you look at the image properties. I uninstalled the program and installed again. No change.

Are you resizing the photo before save for web?
What settings are you using in the save for web dialog for the jpeg quality?
If you compress the jpeg too much (low quality settings below 60), that can make your photos look bad.
And save for the web in pse 10 automatically strips any metadata in order to keep the file sizes smaller.
Also, the save for web in pse 10 has a bad habit of not remembering your last used settings, so it's good to verify that your actually set to jpeg instead of the default GIF setting.
Message was edited by: R_Kelly

OUTPUT PNG W/ Alpha for the web?

Hello to everyone.
I'm hoping someone can shed some light on this...
I need to output my file as a PNG with an ALPHA Channel for the web. First, I created an alpha for my image, and then I tried to simply use the "save as" function and select the PNG format, but the ALPHA selection is grayed out. I've also tried "the save for web function" and selected transparency, but when I reopen the file the alpha channel has dissappeared. I know that it is possible to save an alpha channel to a PNG, but I can't seem to do it with Photoshop... Can anyone help?
Thanks in advance.
Bryce

Hello Zeno Bokor
Thanks for your reply.
In fact, my client, who is using the images for a web game that they are developing, requested that the files have an Alpha channel. They have explained that the alpha channel helps the video program understand what areas are transparent.
I wish that it was just a case of transparency... It would be hell of a lot easier.
Any ideas?
Thanks again.
bgub.

Save for the web seq

I need to save for the web an animation of about 100 frames. The problem is the only way to do that seems to be saving the file as a gif but I need to keep them frame by frame. I was wondering if there is a way to save for the web the entire sequence and keep it as a jpg or png.
Tx

Simply render the animation to whatever format you find suitable using File --> Render Video, then convert the result using batch processing.
Mylenium

How stop PS6 from removing the DPI value from an image when using "save for the web"?

How stop PS6 from removing the DPI-value from an image when using "save for the web"?
Example:
- Open a tif image, that contains a dpi value (resolution).
- Use the splice tool in PS6.
- Export the slices with "Save for web", as gif-files.
Then the dpi value is removed, the gif files has no dpi value (it's empty).
How can we stop PS6 from removing the dpi value when using "save for web"?
OR:
When using the slice tool, how can we save the sliced pieces without PS removing the dpi value?

you can make your art go a little bit over the bounds. or you can make sure your artboart and art edges align to pixels

Why does photoshop elements 12 freeze when trying to save an image for the web?

Everytime I try to save an animated GIF image for the web the whole application freezes and I have to force quit. The file sizes are small. Can someone help me with this issue?

Try:
- Reset the iOS device. Nothing will be lost
Reset iOS device: Hold down the On/Off button and the Home button at the same time for at
least ten seconds, until the Apple logo appears.
- Restore from backup. See:
iOS: How to back up
- Restore to factory settings/new iOS device.
If still problem, make an appointment at the Genius Bar of an Apple store since it appears you have a hardware problem.
Apple Retail Store - Genius Bar

Exporting Clipped images for the Web... CONFUSED! ? Help ..? AI CS3

Hi folks,
I don't use Illustrator as much as I'd like, since my workflow is mostly on
the web, but I'm finding it nearly impossible to export images I receive
from print designers for web use. Many of these images are EPS or AI.
They are clipped images, which is great, BUT when I try to Save for the Web,
the error comes back that they are too large for the web and may crash AI.
OR if I export to PNG or PSD, the files lose their transparency and I have
to extract them manually from the white backgrounds, which defeats the whole
purpose. I have tried opening in Fireworks and Photoshop with the same
result. I've changed the originals from CMYK to RGB, but it doesn't help.
Plus the images export with a huge crop area instead of just the image
itself.
I'd really like to be able to use AI, but I'm finding this situation
unworkable. I am sure I'm missing something simple , but I'd appreciate any
help greatly!
Thanks
Jeff
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.com

Thanks for your help Jean et al.
I only use Illustrator occasionally and when I have to. Not because I don't
like the idea, but I'm almost completely web oriented and I find its layout
is not as instinctive and smooth as Fireworks, and I use Photoshop for
original layered images. The problem comes when I get a file from a printer
who uses Quark and knows nothing about web prep and exporting for other
uses. He couldn't export a layered file for some reason even though he had
the backgrounds layered for print work.
You are right, I've opened the tiff and eps docs from the printer before and
played with them in AI, and saved them to ai native formats. I *thought* the
eps files were created in ai by the printer, because they had the clipping
paths and artboards. Obviously they were not. They had just opened with the
default 14400 artboard which is why I thought they had been "set." So when I
set the new 30x30 custom, I started seeing these files with a new
artboard...
So, in sum, I first tried to use these files in Photoshop, but they open
as flat files and the clipping paths are lost. Only by experimenting with
ai, did I find the files had clipping paths. I guess what threw me was that
ai could extract clipping paths from eps that Photoshop could not.
Jeff
~~~~~~~~~~~~
Jefferis Peterson, Pres.
Web Design and Marketing
http://www.PetersonSales.com

Why can't font graphics for the web be created with sophisticated "hinting" in Photoshop?

It seems when a font is generated as a web graphic -- either a GIF or a high quality JPEG -- it never looks as clean as live fonts in HTML? I've been researching fonts a bit, and apparently they come with built-in "hinting" that makes them appear better on screen. But if you set the same type in Photoshop or Illustrator and export for the web, it's blurrier and never as good. Is there a way around that?

http://en.wikipedia.org/wiki/Subpixel_rendering

Exporting a masked object for the web

Hi everyone,
I've created a pattern tile in Illustrator and need to export it for the web. The problem is that when I do this, the area that is masked out is showing up in the the save for web dialogue box as a blank transparent area.
Anyone know how to avoid this so that only the pattern tile itself is saved for web?
Appreciate any help.

Hi,
I tried filling a square with a pattern fill then expanding it but this doesn't work because the pattern definition is no longer accurate, ie. I need to use the original pattern object in order for it to tile correctly.
I also tried the two previous suggestions, ie. defining an artboard the size of the pattern and then exporting and also tried defining a slice. Both of these methods failed because it seems illustrator is adding an extra 2 pixels to the overall pattern which destroys the tiling effect.
The only way I could get it to work was to copy the pattern tile, paste it into Photoshop and then trim off 2 pixels from all four sides. This seems like an awful lot of work though. I wish there was an easier way.
By the way I'm using CS4.

The save for the web function has stopped working in my copy of photoshop elements 12. I get this message, " The operation could not be completed. The system cannot find the path specified" Resetting preferences did not fix.

The save for the web function has stopped working in my copy of photoshop elements 12. I get this message, “ The operation could not be completed. The system cannot find the path specified” Resetting preferences did not fix.

my os is windows 7. elements 12 worked fine for many months then save for the web stopped working

HD video compressed for the web

I was doing some testing trying to figure out the best way to compress the HD video I get from the Sony XDCAM HD for the web (streaming). I shoot in HD (1080/30P) because it's needed for our videos. The web streaming is secondary.
I would prefer to make the web videos .flv because it works best and most easily cross-platform. In the real world, the majority of users have Windows PCs, which made me hesitant to use h.264 (.m4v) because it probably would require the average user to download things they may not wan to. Nonetheless, it has to be viewable on all computers in all browers.
So, I took three 10 second clips of steady camera video with audio from the camera that I used in all tests. I will refer to them by clip number...
Clip 1: 30P 16:9 High quality, 10sec=45mb
Clip 2: 30P 16:9 Low Quality, 10sec=24mb
Clip 3: 60i 16:9 High Quality, 10sec=45mb
First I tested making FLV is Adobe CS3 Encoder using the High Quality (700) setting.
Test 1 used size 848x480 (16:9)
Clip 1: 1.3mb
Clip 2: 1.1mb
Clip 3: 1.2mb
Comments: Looked very crisp, audio was clean, slightly darker image than original on default settings
Test 2 used size 480x270 (16:9)
Clip 1: 1.2mb
Clip 2: 1.1mb
Clip 3: 1.1mb
Comments: Looked very crisp, audio was clean, slightly darker image than original on default settings
Next, I tested making .m4v using the h.264 iPod settings in Compressor.
Test 1 used size 640x370.
Clip 1: 240kb
Clip 2: 1440kb
Clip 3: 204kb
Comments: Image wasn't quite as clean as the Flash files, but still good. Much lighter/brighter than the Flash files also. Low Quality HD video had high file size... why? I don't know, but I don't shoot on LQ for things anyway.
Test 2 used size 320x180.
Clip 1: 160kb
Clip 2: 865kb
Clip 3: 865kb
Comments: Image wasn't quite as clean as the Flash files, but still good. Much lighter/brighter than the Flash files also. Low Quality HD video had high file size... also the 60i file...why? I don't know.
In conclusion, I'm lucky that I shoot 30P since it worked well in all areas. The h264 codec provides a much smaller file size than Flash, with a good image. Amazing considering we started with a 45MB clip. What are the standards for aspect ratios for putting 16:9 video on the web? I haven't heard much set in stone like you have for 4:3 video. Nonetheless, the 640x360 or 480x270 seem to be a nice size for most uses.
I have heard that in Flash 9 you can chance the m4v extension to flv and it will work. IF that is true, that would be great because now my concern is that a base Windows PC cannot play these .m4v images without plugins/codecs. I suppose right now its a tradeoff between smaller file size/less compatibility with h264 or larger file size, great compatibility with Flash.
Any comments or suggestions to help out would be great. I typed this fast so forgive me if I left out any important info.

Hi APPLE27:
One comment from your post that immediately caught my attention was this, "Nonetheless, it has to be viewable on all computers in all browsers."
Unfortunately, it is unrealistic to expect one digital video file to be viewable on "all computers in all browsers" as there are simply too may variations in both hardware and software.
A common approach when offering digital video is to provide two formats to choose from and then within each of those two formats a few versions of the video for different bandwidths.
For example, a web site might offer Video for Windows and QuickTime. For each of these, there would be a low bandwidth Video for Windows file and QuickTime file and a high bandwidth Video for Windows file and QuickTime file (four files total). Of course, there's also Flash Video, Real Video, MPEG1, and so on.
For better or worse, YouTube.com has allowed video content creators the realistic expectation of creating a digital video file that is viewable on "most computers". But, the video is unavoidably tied to that web site.
When it comes to online distribution of video, it's still very open ended.
Also, computers are not all that's out there. Mobile devices are a huge market and you'd be hard pressed to create a single digital video file that will play on all mobile devices (iPhone, iPod Touch, Palm Treo, Sony PSP, etc.) either from local storage or from a mobile browser.
QuickTime offers a solution for creating a referencing movie - one file that links to other digital video files, but it too is imperfect at best when it comes to reaching the broadest audience possible.
With my few comments here, I'm just scratching the surface. But, it all starts where you are right now: caring about the image quality when exporting from your edited master.
-Warren

Exporting FCP 16:9 to QT for the web in 16:9?

Hello everyone,
I recently began doing my projects in 16:9 mode. I shoot them with my GL2's in 16:9, then capture to FCP as usual. FCP then automatically recognizes the 16:9 footage and adjusts everything perfectly for me. I figured out how to get the footage to DVDSP by 'forcing letterbox'. This plays the true 16:9 footage on a widescreen TV perfectly.
Now, I've come to another bridge that I can't seem to cross... that is... exporting the video to QT for the web in 16:9. I did a lot of searching here and all of the topics related to this did not help me at all. So, what I'm going to do is explain what I used to do when I shot in 4:3 mode:
1. In FCP... File>Export>QT Conversion
2. Format: QT Movie> Options
3. Settings> Sorenson Video 3
4. Frame Rate>15
5. Key Frames: Every 150 frames
6. Compressor> Medium
7. Data Rate: Automatic
8. OK
9. Sound>Settings>Mpeg-4 Audio, 16bit, Stereo
10. OK
11. Prepare for Internet Streaming> Fast Start
12. OK
13. SAVE
This usually turns a full sized 5 minute clip into a nice little presentation for the web no larger than 35 or so MB's. You can see a boat load of files like that on my website at (www.buerhausdesign.com).
Now, what I want to do is get a similar sized video for the web, only in 16:9 as I'm now shooting and editing in 16:9.
Does anyone have step-by-step instructions on how to do this? I know it's possible as I see movie trailors in 16:9 all the time in QT.
Any help would be appreciated:)
Matt

Nope, tried all of that. It stretches the image way beyond 16:9. Currently, if I export as a 4:3 file, the widescreen displays correctly, but I get two black bars at the top and bottom of the frame. Manually sizing to a 16:9 size, to say 720x404, stretches everything... including the unwanted black bars.
When I export to DVDSP, the black bars go away when I 'force letterbox'. There's gotta be a way to get it to work in QT.

Transparent GIFs for the web

Similar Messages

Maybe you are looking for