This is an incredible shot I pulled off following a storm here in Chicago. The sky was eerily chaotic and orange. There probably wasn’t a single person in the city that wasn’t freaking out and taking pictures at this exact moment.

Sort of a Photographer

On a scale of 1 to 10, with 1 being a baby with a cellphone, and 10 being Ansel Adams, you could rate my photography skills at perhaps a 3 or 4. Nevertheless, I find photography to be an awesome hobby. Normally I’m trapped behind a computer all day, so being creative outside among the other humans is pretty exhilarating.

My Best of 2010

Including the shot of Chicago above, here’s a collection of my favorite photos that I shot in 2010.

Another great shot of Chicago. The sky really was that pink during the sunrise. Looks like cotton candy.

Crazy storm one night, with lightning striking buildings every few seconds. I made sure to have the color scheme feel like Gotham City rather than Chicago.

Update: Some of these photos are available as 6″ Photo Prints on my Kickstarter Poster Project!

Well there you have it. My best attempts at photography of this year. If you want to see more, check out Fringe Focus on Flickr. I’ll be sure to upload tons more photos in 2011.

What do you think of these shots? Constructive criticism is allowed, haha. Drop your thoughts in the comments!

Banding is one of the universal annoyances that every designer has to deal with.  Although it’s certainly more common among web designers, banding has also given plenty of headaches to print designers and photographers. Banding is a newer problem; unique to the digital realm, as old-school methods of photography and publishing weren’t limited to the digital color space. As the problem and its causes have only been recently defined, many designers may lack the techniques necessary to combat this subtle and tricky problem. If you’re not familiar with the term or are sick of reading this sentence, let’s cut to an image.

Some Banding in Action due to Compression:

This is an overly exaggerated example of banding effects on a photo I took.  In the compressed version on the right, the sky doesn’t contain enough blues to portray a smooth transition. This is because the compressed version is trying to save space by limiting the number of colors used.  This actually works really well in the building section of the photograph because our eyes don’t pick up on subtle brightness changes when looking at busy or high-contrast areas. It’s only when the color jumps from “Slightly Light Blue” to “Slightly Less Light Blue” that we really notice.

It’s as if the compression algorithm thought “Hey man, that looks like solid blue. Six colors ought to cover it–done!” Idiot.

While compression is a common cause of banding, it’s important to remember that all digital images share this property of stepping harshly from one color to the next.  Indeed, each pixel is its own little square, not blending with any pixels around it. Fortunately pixels are much too small for our eyes to detect that stepping.  It’s only when compressors force similar areas of color into much larger groups that we pick up on the changes.

Banding with the Gradient Tool:

The gradient on the left side was created by picking two colors and fading them together with Photoshop’s gradient tool. The gradient on the right side only used one color, and simply faded itself from 100% to 0% opacity.  Obviously they both achieve very similar results, and perhaps that’s why most designers may use the techniques interchangeably. If you look very closely, however, the gradient on the right actually shows some harsh stepping from one shade to the next.

Add some levels adjustments, and you can really see the difference:

The good news is that Photoshop’s gradient tool handles gradients pretty well with multiple colors.  Photoshop does the math and immediately rasterizes the outcome.  Through a combination of dithering and subtle noise the fade is rendered pretty smoothly.  You can even hit the levels or curves adjustments later and it looks decent.  The gradient on the right, however, didn’t have two colors that Photoshop could do the math for, so no dithering or noise could be applied.  Without knowing what color it would be fading to, it simply renders the gradient in bands ranging from 100% opacity to 0% opacity.

Noise is the Solution! Sometimes…

The solution that is often thrown about is “Add a bunch of noise dude!”. While it’s true that adding noise to break up the bands is effective, you have to be careful that you aren’t bringing a bazooka to a knife fight. Adding too much noise unnecessarily will degrade your image and take clarity out of your highlights and shadows.

Fix #1 – Use Two Color Gradients

To prevent banding while using Photoshop’s gradient tool, always use at least two colors. Fading a single color to transparency will not yield pretty results.  If you absolutely must fade a color to transparency, make sure the gradient is small, or that the range of color difference in the gradient is high.  It’s the long and subtle gradients that cause problems.

Fix #2 – Use Noise in One Channel

If you’re experiencing banding when compressing or saving your images, you may want to add noise to prevent noticeable stepping.  If you want to do this without harming ALL of your color data try applying noise to only one channel–ideally, the channel where the most banding is occurring.

1. Select the ‘Channels’ tab next to your layers palette.

2. Click on a color channel.  Perhaps red if you have banding in a sunset photo, or blue if there’s banding in a bright blue sky.  Choose whichever channel works best in your situation.

3. Choose Filter > Noise > Add Noise. Check ‘Gaussian’ as the distribution format. Choose 1-2% as the amount, as you can always add more noise later if necessary.

Save your image out as you did before, and ideally this method should have decreased your level of banding.

Fix #3 – Use Noise in Another Layer

If you absolutely need to maintain a lot of integrity in your photo, but still need to remove banding in some area, try adding the noise to its own layer.

1. Create a new layer and fill it with 50% gray.  That’s about #808080 if you’re working in RGB.

2. Place this layer above the image you’re adding noise to. In the layers palette, choose ‘Overlay’ as the blending mode.

3. Add noise to this gray layer, 2-3% should suffice.

You’ll notice that the noise does not affect any very bright or dark areas of your image.  Because the noise is in ‘Overlay’ mode, you’re free to crank up the noise as high as needed, without destroying the quality of your highlights or shadows.

Another benefit to having the noise in its own layer is that you can use your eraser tool to remove noise from areas where it is not needed.  You could even take one step further, creating a complex mask and applying it to the noise layer, giving you full control over which areas are affected.

No More Banding!

Hopefully some of these ideas got rid of your nasty banding issues.  If you have any other tips or tricks to solve this problem, drop me a line in the comments.

Other Resources to Regarding Banding:

Wikipedia – Posterization

Greyscale Gorilla – How to Remove Banding Artifacts in After Effects

If you’ve designed a website in the past decade (I know, there aren’t many decades to choose from), then you’ve probably run across a situation where you needed an image with transparency. Perhaps you need to see the background through the image, or the image has gaps that need to be transparent. Even more often, you’ll have a relatively solid image, but with complex edges that simply won’t work in a big rectangular JPEG. Logos and other design elements that might move when the browser window is resized, often need transparent edges to look right no matter where they are on the page. Fortunately all of these problems, as you may know, have already been solved with the development of the .PNG image format.

So we’re done! No tips, no tutorial, PNGs have saved the day! Not exactly.

The Pros of the PNG

• Full range of opacity (0%-100%)
• Full range of color (16.7 Million, anyway)

The Dirty Secrets (Cons) of the PNG

• Relatively large file size
• Doesn’t support blending modes
• Doesn’t work in IE6 (If you care about that ugly monster)

These points only apply to 24-bit PNGs, as 24-bit PNGs are the only common format to allow full alpha transparency. Its younger brother, the 8-bit PNG, doesn’t share the same problems (but only supports binary transparency).

Whoa, alpha binary what? Bit? Slow down Star Trek!

Alpha transparency, in short, is the kind of transparency you’re used to in Photoshop. There are varying degrees of opacity, that are all mapped in an alpha channel, those black and white images in your channels palette. PNGs include an alpha channel, so any given pixel in the image can be any given opacity (0%, 32%, 99%, etc.). This is great for shadows, glows, or anything translucent.

Binary transparency, is when robots are invisible. Actually, it’s what it sounds like. Binary means you have two options: 1 or 0, on or off. The same goes for the opacity in a binary transparent image. A pixel is either 100% visible, or totally off. 8-bit PNGs, and GIFs support this simple level of transparency.

Lastly, we won’t get into too much math here, but 24-bit ultimately means the image contains the full range of color data for all 3 color channels. 8 bits of red, 8 bits of blue, 8 bits of green. Add that up, and you can see why it’s 24-bit. 8-bit image formats only support 256 colors, while 24-bit image formats can support 16.7 million.

Problems with your 24-bit PNGs

Obviously full alpha-transparency has its benefits in web design. But with great awesomeness, comes great file sizes. Alpha transparent PNGs are often three or four times larger than their binary counterparts. If your logo, borders, backgrounds, and sprites are all huge 24-bit PNGs, loading times can get slow… fast. While internet speeds are increasing, and this may not seem like a problem, the speeds on mobile phones, netbooks, and 3G wireless networks aren’t quite there yet.

Additionally, it is rarely the case that alpha transparency on its own will solve our design problems. With all of the beautiful uses for the overlay, screen, or multiply blending modes (to name a few)… simply having an image at 50% opacity might seem a little boring.

Old School 8-bit to the rescue!

While alpha transparency is definitely helpful in some cases, let me show you my process for making 8-bit PNGs or GIFs look just as good, at smaller sizes.

Let’s say you wanted a logo to appear on top of a grungy background like the above image. We have a logo with blurred edges, that needs to show strong detail behind it. A 24-bit PNG would certainly do the trick, but we can show all of that detail in an 8-bit PNG or GIF with a few simple steps.

1. Turning off your background layer, your first assumption would be that this image couldn’t possibly work with binary, jagged edges.  Let’s try…

2. Go to File > Save For Web & Devices.  Under presets, choose 8-bit PNG.  Make sure ‘Transparency” is checked.  Then choose a matte color, in this case, black.

3. This is close, but pretty janky.  Even if that black was a little lighter, you’d still not be able to see all the texture in between the letters.  So let’s try something better.

4. Select the logo layer’s alpha by Ctrl+Click-ing on that layer (that’s Cmd+Click on a Mac obviously).  Then copy the merged layers by hitting Shift+Ctrl+C (Shift+Cmd+C for Macs). Open a new file, and paste the merged logo there.

5. Now that the merged file is pasted here, you can see that some of that background data was pulled.  But simply saving the image with no matte would still cause problems, so we first have to bring all of the opacity up to 100%.  Do this by Alt+Click-ing on your logo layer and dragging up or down.  This creates a duplicate of your layer.   Now that you have two copies, select both of the layers by Shift+Click-ing on each of them, and then merge them by hitting Ctrl+E (or Cmd+E).  You now have one slightly more opaque version of what you had before.  Repeat this process four or five times.  Duplicating, merging, duplicating, merging, duplicating, merging until you see that the image is 100% opaque.

6. Your image should now have a janky, but detail rich fringe matte (no pun intended). Go ahead and save it out as a transparent 8-bit PNG, or even a GIF if that floats your boat.  Keep in mind 8-bit PNGs generally have smaller file sizes than GIFs.

7. Voila! You now have a relatively tiny, 8-bit PNG looking just as sexy as its 24-bit counterpart.  Of course, this technique only works if your background stays stationary, but if your background was a horizontal or vertical gradient, then these steps would still work.

Go ahead and try this with your navigation menus, sprites, or borders.  It can save countless kilobytes!

If you have any additional tips, ideas, or thoughts about image transparency, drop me a line in the comments.