Blogs about graphics

Photoshop - Seamless Background Photos.

12.14.2009

Seamless Background Photo 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:

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

Experiments with IE6 and Alpha .PNG Solutions.

7.13.2008

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.

2.21.2008

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.

Hot .PNG News.

10.17.2007

Breaking News: Alex Walker has published an article demonstrating that Fireworks can create .PNGs with alpha transparencies that will be non-ugly in older browsers. This is very exciting, and sounds like a much better alternative than the batch processing for important images method that I wrote about previously. I'll just have to dig up a copy of Fireworks and test it now.

IE and .PNGS - Fini.

5.7.2007

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:

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:

<!--[if lte IE 6]>
<style type="text/css">
#header { background-image: url(images/header.gif); }
</style>
<![endif]-->

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.

Remaining blogs about graphics: