Transparent Backgrounds

How can I get a transparent background

Terina from Florida, using Photoshop with Windows , writes in with:

[Quote:]
Dear Photoshop 911, I would list to set the background of a JPEG file to be transparent? I'm building my website in Photoshop and I need to get rid of the white box on the web page. [END QUOTE]

Photoshop 911:

For every 1,000 questions we get, at least 100 of them ask this exact question. We're building a complete tutorial for this, covering all today's popular software programs -- we'll let you know when that's available -- or just keep checking the site. We'll have a primary button to this tutorial so people don't ask as often.

IMPORTANT :

The JPG (jpeg) image file format does NOT support transparant backgrounds.

You have TWO choices:

1) MAKE IT A GIF

If you are creating a new Photoshop file, the default background color is White, so first place to look is in File > New... and change it to Transparent.

In existing image files with one layer, then that layer is the backgroundlayer. To unlock that alt/double-click (Option/double-click) on the layer to unlock it.

Create a new layer. (Click on the "New Layer" button in the Layers Palette) This new layer will be transparent.

Drag to be under (below the "background" layer in the Layers Palette stack) the previous layer.

You can now edit or delete unwanted pixels from the original layer so that the new Transparent layer below shows through.

Once the image is completely isolated and surrounded by transparancy, you can then use the "Save for Web" command in the File menu to save the file with a transparent layer.

Select "GIF" in the format pull-down button, and utilize the other commands/features to "Optimize" the image.

2) MATCH BACKGROUNDS

If you absolutely have to have a JPG file, and, if the background on your web page is a simple color fill or a simple pattern fill, then save the JPEG using the very same color or pattern as the background.

The JPEG will then "appear" to float on the web page background

We caution you to test it on the web however, utilizing different browsers. Many times, the browser will display the background slightly differently than the JPG and the edges of the JPG box will be noticable.

Web Sites in Photoshop

While Photoshop is NOT a program for building web sites, Adobe has added in enough features and inter-connectability with other programs to make it possible. Using the "slice" command in conjunction with ImageReady and GoLive (or other program like Dreamweaver) you can interpret the full page image over to HTML. Caution is advised however -- everyone at Adobe is working from a T1 or faster connection so they don't worry about huge graphics and overly (not advised) complicated table files. On dial-up, most people will not wait for the site to load -- unless you've done an extraordinary job of optimizing the page graphics.

This technique however goes beyone the scope of this post, so we advise you to pursue these excellent tutorials:

Colin Smith: 8 Lessons has the least advertising and screen spam:

1. Preparing the background
2. Adding the design elements
3. Preparing rollovers with Layer Styles
4. Slicing in Imageready
5. Rollovers in Imageready
6. Optimizing and publishing
7. Bringing it into Dreamweaver
8. Turning the page into a web site

Jennifer Apple also has a fairly good starter tutorial, but not as complete as Colin's above. Jennifer also offers a list of links for further learning.

If you can help, just comment below! Thank you!

PLEASE don't post new questions here! POST QUESTIONS at the Photoshop 911 EMERGENCY ROOM

See the Resources Department for more tutorials, downloads, books and more...

Comments

[Jordan]

As far as I know, for I think I've used this before, PNG has beautiful quality and supports transparency too. Why not save as PNG?

[holla]

Dreamweaver MX does not seem to wha?? Compared to Front-huh? It's 2008, Adobe has a lock on this sheet, Drop FP.

[Wilfred du Preez]

Will you believe there may be a third choice in addition to making it a gif or matching backgrounds?

We found that FrontPage 2003 somehow inexplicably makes the white box around the jpg transparent and renders the result perfectly on an unmatched background.

Admittedly a gif is automatically produced but that gif looks awful (halo & jaggies) whereas the image on the webpage is perfect!! Now that seems to come at a price of clunky code that prevents us from attaching a target="_blank" to the link on an absolutely positioned button. So we are forced to start from scratch in Dreamweaver MX which does not seem to have the same capability of dealing with a jpeg!

So back to gif. Talk about giving with the one hand and taking with the other!!!