Blogs about graphics from Pew Pew Laser Blog

Photoshop - Seamless Background Photos.

I used my own photograph of Dale Chihuly's glass installation at ceiling of the Bellagio as the base for this seamless background. The number of objects and variety of color in this photograph made it quite an ambitious choice, but the transparency inherent in the glass artwork mitigated some of the odder blends.

I created this background in Photoshop. Here is a summary of the steps I used:

1. Leaving a wide margin, copy a new image from original. This margin will give you extra source data for the blending the seams, so make it a little wider than the objects in the original photograph.
2. Use the Offset Filter (Filter > Other > Offset) to shift the image 50% of its total dimensions both horizontally and vertically.
3. Save your .PSD.
4. Create a new layer.
5. Use the clone tool to paint a large area into the new layer from the original layer.
6. Align the new layer directly on top of the original layer. Set the layer blending mode to "difference" and nudging with the arrow keys will help.
7. Add a layer mask to the new layer.
8. With a soft brush, edit the new layer to blend nicely into the original layer. Paint black to "erase" the new layer and white to paint it back in.
9. Go back to step 3 and repeat until the seams are gone.

Some notes:

• To check your work, first Save your .PSD, then flatten flatten all the layers and repeat the offset filter.
• If you'll be shrinking the image to a smaller pixel size in it's final form, work on the full-size image first, then re-size to the smaller size.

Here's a more thorough tutorial of turning photographs into seamless backgrounds.

Experiments with IE6 and Alpha .PNG Solutions.

One of the things that I've been busy doing is working a new article. IE6 (and lower) .PNG Experiments is a series of tests of various solutions for the grey background that appears on .PNGs with alpha transparencies in Internet Explorer 6 (or lower).

The really important part of this article is the major drawbacks to any solution that is based on using the AlphaImageLoader filter. In short, doing so caused hard lockups of IE6 that some serious Microsoft ninjas were unable to resolve. My very strong recommendations is that you use a graphic-based solution such as using Fireworks to add an alternate color palette to the image, or simply re-matting the image against the desired background color.

Alpha Transparent .PNGs in IE6 Using Fireworks.

I have finally got around to researching Alex Walker's article on PNG8 and their potential to solve the old IE6 grey background with alpha transparencies problem. I am pleased to report success with this method, and I've written an article about how to edit your alpha transparency .PNGs for use in IE6.

The great news about this technique is that this works just fine, and gives you one single file that works in IE6 and earlier, but has no loss of quality in the other browsers. The bad news is that your image will have a faint jagged edge when viewed it IE6. The bad news is that if you have a lot of alpha transparency in your image, it will look pretty bad in IE6. If this is the case, you should consider re-matting the image against the desired background color.

Bear in mind that you may not need to worry about IE6. Check your your web site's stats to see if you're getting a sufficient number of IE6 users to justify the effort involved in changing all your images. The only statistics that matter in making this decision are your own.

IE and .PNGS - Fini.

You've looked at your site's statistics, and decided to create some .GIFs for your early IE users, so that they can view your site without all the ugly backgrounds that IE adds to your beautiful alpha transparency .PNGs. Here is a recap of why:

• The .GIFs will make your site look nice in all versions of Internet Explorer, not just IE5.5 and IE6.
• You are fixing the ugly images using the same technology that created them initially. A JavaScript solution won't work if the user has disabled JavaScript.
• No JavaScript, no behaviors - no code you can't grok.
• This solution uses the absolute minimum lines of code. Less code is why you're using CSS right?

Here's the best may to get it done. (This walk through uses Photoshop CS2; adjust your steps accordingly for other tools.)

First, set the foreground color to the background color for your .GIFs. Then, open up one of your beautiful .PNGs.

In the Actions palette, click the 'New Action' button - shown right. Give it a name (I've used "PNG into GIF") and click Record.

In the Layers Palette, create a new layer - this will be called Layer 1 by default. Then click and drag Layer 1 below the existing layer (Layer 0) for your .PNG. Make sure that the new layer (Layer 1) is highlighted.

Now select the paint bucket tool, and click anywhere on the image. Easy! The penultimate step is to save the image.

From the file menu, choose Save For Web. Be sure that the file type is set to .GIF, and click the Save button. Go to the appropriate location, and then save your new image.

Last, click the 'Stop Recording' button in the Actions Palette. (Example shown right.) You can now close the original .PNG, without saving the changes.

Now, whenever you need to make a .PNG into a .GIF, you can simply open up Photoshop, set your foreground color, and then click the Play button (in the Actions palette). If you need to create even more .GIFs at once, use Photoshop's Batch processing.

Now that you've created the .GIF images, just use some conditional comments to override the .PNG background image declarations with the .GIF background image declarations, only for early versions of IE. Example:

Simply use create a new declaration for background-image with the new .GIF file specified. The other background properties such as repeat and alignment will be retained.

Conditional comments will always be ignored by non-IE browsers, and are designed specifically for the purpose of delivering code to certain versions IE only. They are a much tidier way to deliver browser specific CSS than using hacks or browsers detection scripts. You can learn more about Conditional Comments at Quirksmode.org.

IE and .PNGs Continued.

As I continue on my discussion of using .PNGs in IE, please note that you must view this page in IE 6 or 5.5 to see the effects of the scripts.

The first solution I investigated is Bob Sola's pngfix.js solution. It is essentially based on the AlphaImageLoader filter. The clever part is that it uses JavaScript (hidden in conditional comments) re-writes the HTML tags for the .PNG images as needed. Mr. Sola has conveniently provided a nice plug-in solution for the problem, but there are still too many limitations for it to work for me. ("CSS backround PNGs not supported") - D'oh!

Secondly, I looked at Angus Turnbull's CSS-Only IE .PNG solution. It works by using CSS to apply a behavior (another IE-only scripting method) to the troublesome .PNG images. (Quick & dirty install instructions.) It still relies on the AlphaImageLoader filter, so no support for IE earlier than 5.5. Also, don't try testing from a local directory on your computer; the .HTC file seems to require that the page be hosted from a server. But it actually works pretty well, as you can see on Fire Flower, Starman and Mr. Goomba here. You've got to be careful with your borders & height/width tags - see how Mr. Goomba is a little fuzzy here? Also, the fix only applied itself sporadically on when used page; which is what's causing the sidebar elements to be too long, and hence the whole sidebar doesn't fit floated next to the main content. I'd say it's a reasonably good solution if you're dying to go this way, but it's not yet perfect.

After looking at all these script-dandy solutions, I haven't found one flexible enough to be worth the effort it takes to implement it. The ROI just doesn't exist for me. Particularly since IE7 does handle the .PNGs well enough, so the future is looking up.

IE6 isn't gone yet, so it still needs a solution for websites that must degrade gracefully. The solution I'm going to propose isn't clever. It's dead simple, requires an absolute minimum of code, and provides a semantically appropriate solution for IE6, IE5.5 and earlier. My solution is to make .gifs. Next time, I'll give you a Photoshop tutorial for changing all your .PNGs into .GIFs for IE only. If it's worth it to you...