How to export a transparent image background for the web

Hi Everyone
I have made a mock up webpage in adobe fireworks 5. I am now in the process of using the slice tool to cut up the seperate parts and export them to dreamwever.
My question is this: how do i slice the images in such a way that the background is transparent .
Also, when exporting the image that i have just made trasparent, what do i need to do to expot it as a transparent background.
warm regards
Andreea

When you're ready to transfer your Fireworks layout to DW select FILE > Image Preview. In Options select Format PNG8 and beneath the color grid change the No Transparency dropdown to Alpha Transparency.
Click the Export button, name your file, choose the destination location, and in the dropdowns select Export > HTML and Images, HTML > Export HTML File, Slices > Export Slices, Pages > All Pages. (Also some choices may be handy for you in the Options button including Background Image for the exported file.)
PNG can be used, just as JPG, TIFF, PICT, BMP and GIF, all of which are in your Options > Format dropdown list.
Generally JPG is better for files that have gradients, GIF for simple images and text, but they don't do transparency so the larger PNG file is necessary for that.

Similar Messages

High def for the web?

I am working in hdv 1080i with final cut 5.1. If I want to export clips in h.264 for the web, what are the settings for things like bit rate to export clips considered high def?

Well, right now i am using fcs 5.0, upgrading to 5.1 in a few days, and i was using compressor which overall i am not so happy with. With compressor I was using frame controls to change it from hdv 1080i to progressive, but using frame controls in compressor goes forever even on my quad g5. Using qt conversion for h.264 is way quicker and honestly was giving me better quality to boot(is this due to compressor 2.0 bugs and will it change in upgrading to 2.1??) but I don't think you can switch from interlaced to progressiv in qt conversion, is that true?

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

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

How do I change the image selected for the finalized movies pane in all events?

How do I change the image selected for the finalized movies pane in all events? I made a movie some time ago in iMovie, and a still from this now appears as the image for Finalized Movies in the All Events pane (as well as showing up if I then click on this pane to take me to Finalized Movies). Anyone know how to change or delete this image, please?

Unfortunately, the suggested solution in that thread does not work and the thread appears to be closed to replies. That is, even though I am logged in the Reply|Quote|Mark as answer|Report as abuse items are missing.
The suggested solution is:
First, I found I had "img100.png" in C:\Windows\Web\Screen and
C:\Windows\WinSxS\x86_microsoft-windows-themeui-client_31bf3856ad364e35_6.2.9200.16384_none_69ee3fa2269e545e
1. Belonging to the Administrators Group, I replaced file Owner TrustedInstaller with my Username on both "img100.png" files
2. After resizing the image I wanted to see on the Login screen to the resolution of "img100.png" file,
I copied and pasted it to both "img100.png" files keeping this way the format (extension) and resolution of the original "img100.png" file,
which I permanently deleted.
However, I have not been able to replace the img100.pgn in C:\Windows\Web\Screen even after taking ownership of it and setting the permissions for my userid to All. I edit it with mspaint and then try to save it. The save starts that then says the
save was interrupted.
The appears to be some additional protection besides the standard acls.
http://www.saberman.com

HT5182 How can I convert Raw images from iphoto to jpg for the web?

I have some pictures in Raw mode stored in my Iphoto that I need to convert in JPG for the web and to print in business cards, I have been going around e-mailing the pictures to myself in large or medium size and then saving them again to my iphoto. Is there a way to do this from iphoto directly?

iMac (24-inch Early 2009), iOS 6
Are your pictures on your iMac or on an IOS device?
On your iMac use "File > Export " set the jpeg quality and size you want:
Regards
Léonie
Sorry, Ralph, I see, we have been cross posting

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.

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.
>

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.

Exporting widescreen anamorphic video for the web

I have a project in fce which is filmed in widescreen anamorphic at 720, 576 the setup in fce is dv-pal anamorphic and anamorphic is checked in item properties. When I export using quicktime using h.264 encoder it shows at as widescreen in the preview but when I open it after export it is squashed. I know that is because it is anamorphic but how can i export for the web and get the correct image? If I was doing full scale I could just change the resolution from 720 to 1024 but what if I want to do lower resoultion is there a better way? Thanks.

WMA is Windows Media Audio. I think what you meant is WMV (Windows Media Video). To export to that format on a Mac you'll need Flip4ac, available from www.flip4mac.com Once you've installed it, it adds the WMV and WMA export option to QT and other apps such as Sorenson Squeeze.
-DH

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.

HDV Aspect Ratio and Exporting For the Web

INTRODUCTION
I am trying to export an HDV video for the first time and have managed to confuse myself. I want to upload it to blip.tv and they transcoded videos into Flash with 4:3 aspect ratio. But more than that, I want to understand how this all works so I don't have to guess about the settings that will give me what I want.
BACKGROUND DATA
4/3 is 1.333...
16/9 is 1.777...
1440/1080 is 1.333... (if the pixels are square)
1920/1080 is 1.777... (if the pixels are square)
In FCP my clip format says:
Frame Size: 1440 x 1080
Pixel Aspect: HD (1440 x 1080) (Does this mean the pixels are 1.333... times wider than it is high?)
EXPORT USING QUICKTIME CONVERSION
When I go to export this clip using Quicktime Conversion under the Options... Size... dialog and look at the Dimensions dropdown, (I assume this is the dimensions of the exported video. Is that correct?)
Some of the settings are (the settings are in quotes, my notes are in parentheses.):
"HD 1440 x 1080 16:9" (if pixels are square this is 4/3)
"HD 1920 X 1080 16:9" (if pixels are square this is 16/9)
So both of these settings claim to be 16:9 but they both can't be true unless they have different pixel aspect ratios (which I find hard to believe). This makes me think I don't really know what they mean when they notate something as 16:9. Can anyone give a definition that will help me here?
EXPORTING FOR THE WEB
Using FCS2, what settings should I use to export this clip undistorted for the web (with letterbox if needed)?
Thanks for the help,
Rob:-]

What I find with HDV 16x9 1440x1080 footage, is that when you output for the web you have to hard code the size you want the result to be. 320x180 or 640x360 for example scale things nicely. If you want bigger, just do the math.
I don't know why but whenever I select a predefined output size, it always screws it up (I don't work with 4:3 ever, so I'm speaking only of 16x9). So I always enter the size I want.
And as far as Compressor 3, I really can't get that to set the size I want correctly either. Mostly its due to me being lazy and not wanting to spend a year reading the Compressor manual. A package that should basically have the easiest interface known to man is now so complicated that unless I have to hand-holding tutorial, or get to drag/drop one of their presets, I end up screwing things up with it. Not to mention that you get to wait for hours just to see how you screwed up the settings of your output.

How do I make document relative links for the site?

How do I make document
relative links for the site -
<img src="../images/foo.gif"... (for example)?

> How do I make document
> relative links for the site -
look in the bottom of the "browse to file" dialog box.
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Export for the Web and File Naming : Batch problem in Photoshop CC

Is it possible to use "File Naming" when you are using in a batch "Save for the Web" export ?
What I want to do:
I have images that I need to resize, crop and rename (change "filename.jpg" to "filename_850x490.jpg" and make an optimisation for the web
I want to create an action that I can use in a batch
What is working :
I can use my action (resize, crop, save) and use file renaming option if I use "save as" options
I can use my action (resize, crop, save for the web ...) but the file renaming option are not use at the export,
So I have to create two actions (one for resize, crop and rename and an other to compress images with "save for the web"
==> What's wrong with "File rename" and "save for the web"?
Thank You for support !
My Environement :
Photoshop CC : last update
OS : Windows 8 Entreprise - 64 bits
Proc : Intel Xeon CPU E5 3.00 GHz - Ram : 8 GB - GPU : AMD FirePro V5900 (FireGL V)

Probably a lot easier if you use the Image Processor Pro script
(part of Dr. Brown’s Services 2.3.1)
http://www.russellbrown.com/scripts.html

How can I make an image placed in the body tag expand to the entire width of the browser?

How can I make an image placed in the body tag expand to the entire width of the browser?I

background-repeat -- best used with small image tiles.
background-gradient - Ultimate CSS Gradient Generator - ColorZilla.com
background-size:cover - Resizable Full Page Background Image
Nancy O.

How to export a transparent image background for the web

Similar Messages

Maybe you are looking for