I’ve been producing a lot of work this year, and I came to the realization that I needed a more rapid turnaround on updating my portfolio. Cargo Collective is used by a great number of incredible artists, so I decided to bite the bullet and try it out. I was thoroughly impressed by their functionality, and have just finished replacing my entire portfolio with a new one built upon Cargo.

The new design is my customized version of their SpaceCollective theme. The organization may not be original, but it’s dead simple to update, and even simpler to browse. No doubt you’ve seen it before (James White’s Signal Noise Gallery).

From now on, my personal and professional portfolio will reside at: http://cargocollective.com/fringefocus. Exciting! Because Cargo is sexy is hell.

As designers (and developers) we always have the option of building our own system.
Custom code, or a WordPress theme, we sometimes create a more complicated solution. But if your professional life depends on speed and reliability it’s totally justifiable to move towards a third-party system. This new portfolio means the difference between “Eh, I’ll post it next week” and “Hey, I’ll post it now.”

For those of you with difficult websites or dated portfolios: Try out Cargo Collective, Squarespace, or any other third-party if you feel like you need a change. You could even go further and live entirely off of Flickr, Dribbble, Forrst, etc. to show your work. We no longer have to reinvent the wheel when it comes to showing off our work, there are plenty of new outlets that get the job done. If you still dig doing your own thing, stick to it, it’s all good!

Fringe Focus will remain as my blog & portal for everything, but my permanent gallery has moved to Cargo, that is all.

I hope you dig the new work, let me know what you think in the comments!

If you know me personally, or follow me on twitter, you may have noticed that I’ve been working on a big personal project recently. This project is actually much more than just a website, I’ve actually shifted entirely away from freelancing and now own my own design company. I co-own the venture with my incredibly talented design partner, Lisa Bun.

Plans for starting this studio began in 2009, or possibly in 2008 when Lisa and I worked together at a small web design firm. It wasn’t until early 2010, after having both freelancers for quite some time (and going a tad insane after being home alone 24/7), that our discussions reached a fever pitch and we decided to just roll with it. Lisa is super smart and independent, and I’m not comfortable unless I radically change my entire life every 12 months or so.

Our official name is Collision Labs, Inc. and we’ve technically been operational since March of this year. We’ve even had few great projects already come through our door, all before launching our website. As we all know, personal projects can suck every ounce of time and energy that you have for what seems like forever. Fortunately, forever is over:

You can visit Collision at www.CollisionLabs.com

Collision is a full service design studio, or more accurately: an awesome world where I’ll get to continue my graphic design, web design, photography, and motion work… except in a kickass office. An office where I recently drew a T-Rex DJ:

I’ll keep writing articles on Fringe Focus about freelancing, but it’s really interesting to learn the ins and outs of owning a real business.  I’ll give you a hint, it’s boring! Well, the paperwork is boring, the work is fun as hell.

By the way, if you’re in Chicago, come pay us a visit.  We have a killer office with brick walls and such.

Let me know what you think in the comments!

Kill It With Fire.

You already know what I’m going to say. You’re thinking about that work you did two years ago, that project you just had to throw up onto your portfolio. You might have thought “This isn’t the best website/logo/poster/thing I’ve ever done, but it’s alright.  Besides, I need more work to show clients.” Or maybe your first thought was “This is awesome, everyone will want to see this.” Except a few months or years later, you can point out a dozen things you could have done better. Maybe the shadows are too dark, maybe the textures are weak, maybe your attention to typographic details was lacking; for whatever reason, this just isn’t your best piece of work.

I want you take that work and place it carefully into your arms. Embrace it tenderly. Take it out back, and whisper “I’ve never loved anybody but you.” Then shoot it in the back of the head. Burn the evidence. If anybody ever asks you about that work again, just say “What work? I never made anything like that” or move to Canada as a fugitive.

Portfolios & Donuts. A Dozen is Enough.

You wouldn’t walk into Krispy Kreme and ask for 29 different donuts. Your clients won’t visit your website and look at 29 different projects.  12 is often enough.

The amount of work any freelancer or company should display is also dependent on your field. A motion graphics artist might get away with five or six pieces, due to both the length of time it takes to produce them, and having the luxury of compressing work into a 30 second to 2 minute demo reel. A print designer, however, could get away with 15 or 16 pieces, if some were smaller projects like business cards or flyers. Ideally, small pieces of larger projects should be combined. If you designed business cards, letterhead, and condom wrappers for a client; show them all in one shot or page. Ultimately, 12 projects should suffice.

Why?

Let’s say you had 29 projects.  A potential employer or client might spend time taking an honest look at five or six of them before either deciding to contact you or moving onto another designer’s portfolio.  What if that person were to look at your WORST five or six projects? Sure they’re probably not terrible, but you want to increase the likelihood that they’ll view your best projects.  So cut it down.

Killing the One.

Most of your portfolios are likely already a good size.  If you have a broad range of services, you may need 12-15.  If you’re a specialist you could show 6-8. The subject of this post is about finding the single, worst piece of work you currently have online (or on paper), and killing it in cold blood.

You most likely already know which piece I’m talking about.  If not, look at your portfolio right now. One of those pieces is lacking behind the others. It could be old work that doesn’t reflect your current skill level, or new work that just doesn’t feel right, or was rushed.

Delete it.

If you have an easily updatable website (WordPress, Squarespace, Cargo Collective, anything with a CMS) this should be easy. And if you built something more complicated from scratch, don’t worry about building a whole new portfolio right now.  Just spend time today deleting the images, the page, and every link or reference to it.  Never speak of it again.

Remember!

Just because you deleted a page, doesn’t mean the internet has forgotten.  There may be blogs, websites, or tweets linking to your project! If you remove a linked page, be sure to set up a 301 redirect for it. If you don’t know what that is, it essentially is a bit of code you place on your site that automatically redirects users on missing pages to a proper one.  So if they click a link to the old project they’d be redirected to your homepage (or portfolio page, etc.)

You could also simply delete links or reference to the project, but LEAVE the actual page intact. No new visitors would see it, but old links wouldn’t be broken.  But it would be like being haunted by the ghost of your dead project.

Enjoy the Funeral.

Delete the project (or rip that page out of your printed portfolio), and feel better knowing that the rest of your portfolio has just improved. Finally freed of the scourge that was a kind of shitty project, your new portfolio will soar to grand new heights of… whatever, thanks for reading. Have fun killing.

Tell us what you killed! Leave a comment!

Mo’ Images = Mo’ Problems

My work folder currently has 32,000 files in it. An unbelievable amount of them are images or image related (JPEGS, GIFs, PNGs, PSDs, AIs, etc.). As an interactive designer, I can easily accrue hundreds of images throughout the design (and development) process. While I may let all my local files multiply like rabbits, it’s important not to bring this chaos onto the web. The number of images used in a website design can get wild pretty quickly, so it’s important for us as designers to have a weapon to reign them in, not unlike the Ghostbusters.

What’s a CSS Sprite, Daddy?

Well technically a sprite is just an image.  CSS is then used for separation and reorganization of that image. The sprite itself is generally used to combine many small images into one large image. This is done not only save precious loading time and bandwidth, but also to keep your site structure clean and manageable.

How Image Sprites Save Time

Suppose you have fancy navigation bar on your website, with 8 links. Suppose said links each had a fancy rollover, the kind with that ‘glow’ and ‘twinkle’ that makes your clients drool. In the past (or today if you aren’t yet using the CSS sprite technique) this would require 8 separate images, with another 8 images for the hover state. That’s a total of 16 images for the navigation alone.  That’s 16 files you’d have to create, optimize, name, and save. 16 files you’d have to call in your stylesheet, and upload through FTP. Worst of all, that’s 16 HTTP requests on your server from a visitor. While the images may be very small, each request takes time, and ultimately increases the loading time for your page.

Instead, one could create a sprite showing all of the links with each of their rollover states  as one image. This means one HTTP request. When dealing with dozens of small images, this technique can often cut loading time for images in half.

How the CSS Sprite Technique Keeps it Clean

Here’s some example CSS for 4 links with rollovers. 8 images are called because there is no use of the sprite technique. Each link has its own image, and each link has its own rollover image… these links are greedy.

.link_one {background-image:url(img/link_one.png);}
.link_two {background-image:url(img/link_two.png);}
.link_three {background-image:url(img/link_three.png);}
.link_four {background-image:url(img/link_four.png);}
.link_one:hover {background-image:url(img/link_one_hover.png);}
.link_two:hover {background-image:url(img/link_two_hover.png);}
.link_three:hover {background-image:url(img/link_three_hover.png);}
.link_four:hover {background-image:url(img/link_four_hover.png);}

While that may not seems like a huge problem, imagine if you wanted to change the color of ALL those image links one day.  That’s 8 separate times you’d have to open a file, change a color, and save it. Do this for larger menus, sidebar items, or footer areas, and you’ll quickly have a massive pile of images that you have to maintain. This almost always leads to designers abandoning beneficial changes on their websites because “It’ll take too long!”

Here’s what some of your CSS would look like were you to move all those images into a single sprite:

.link {background-image:url(img/link.png);}

.one {background-position:0px 0px;}
.two {background-position:20px 0px;}
.three {background-position:40px 0px;}
.four {background-position:60px 0px;}
.one:hover {background-position:0px -20px;}
.two:hover {background-position:-20px -20px;}
.three:hover {background-position:-40px -20px;}
.four:hover {background-position:-60px -20px;}

Obviously this is a bit cleaner, but the important takeaway is that if you wanted to edit the look of ALL of these links at once, you could. Simply drop that sprite into Photoshop, re-save, and you’ve fixed them all at once.

Alright, so you understand that it WOULD save you time and energy, but you don’t know how to make a sprite? Who could possibly teach you how to do this on your very own? Perhaps its…

TERRIFIC TUTORIAL TIME!

How to make a CSS sprite based navigation of your very own:

1. Let’s say you want to make a simple navigation with 4 links. We’ll go with the most basic essential links here: ‘Home’, ‘About’, ‘Pterodactyl’, and ‘Contact’. Go ahead and create a quick mockup in Photoshop of some navigation like this, or apply the following steps to your own current web projects.

2. Make sure you have one layer set as the default ‘normal’ state. This is how the links will generally appear in your design. Also create another layer that shows all of the links in their ‘hover’ state. In this case I’ve altered the styling, color, and added an underline. Ideally your link size shouldn’t change (If you’re smart you can technically get away with it, just make sure you give ample space for that growth in the sprite, we’ll touch on that later).

3. We need to single out the navigation now, and make it its own image. You can copy your navigation only, create a new image by hitting Ctrl+N (Cmd+N for Mac Folk), and paste it in. Please note in my example I’ve done a more complex selection around the links, preserving the transparency. You can learn how to do that in my Transparency in .PNGs article, but dragging a simple rectangular selection around your menu items is perfectly fine as well.

4. Double the canvas size of your navigation image by choosing Image > Canvas Size… (Alt+Ctrl+C or Alt+Cmd+C). You can double the height without doing any math by simply checking off ‘Relative’ and increasing the height by 100% (or don’t click it, and increase by 200%, I won’t stop you). Your resulting canvas should now have enough room to paste in your ‘hover’ version below your ‘normal’ version.

5. Uh oh! Remember I said the link size shouldn’t change, and this is why. Adding an underline technically makes the ‘hover’ links a bit taller than the ‘normal’ links. Simply giving room for the bottom underline will cause a huge headache later on in the CSS. We’ll need to add space on the bottom of each row.

6. In this case, adding 3 pixels to the bottom of each row did the trick. If your links have added hover effects, just be sure to include extra space in the sprite so that the corresponding normal link is the same size. That’s true for both horizontal and vertical space.

7. Now you can eliminate the negative space in your image. This slightly decreases your file size, but more importantly it makes the bit of math we’ll do in the CSS much easier. You won’t have to count the pixels in between the margins of your sprite if you simply line everything up next to each other. The amount of background-position shifting will simply equal the width of the previous link! That was the most boring statement to ever warrant an exclamation point.

.______ {
display:block;
height:__px;
background-image:url(______);
margin__:__px;
float:____;
}

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

8. The first CSS class you need to write is your parent class. This is the main class that holds all of the similar properties for your navigation. In my case, all of my links are 24 pixels high with a margin of 24px between them. The margin might not be necessary depending on how you styled your links, but in this scenario a quick ‘margin-left’ will work. The background image will obviously be the same for all of our links (that’s the whole point), and the ‘display’ block is simply used because we will be defining a height and width to each of our links.

.______ {
width:__px;
background-position:__px __px;
}

.home {
width:68px;
background-position:0px 0px;
}

9. The second class you need to write applies to the individual link itself. You’ll need to write one for each link in your navigation, as well as another for each hover state (which we’ll get to in a moment). In this case the ‘home’ link has a width of 68 pixels. The ‘background-position’ refers to the point that the background-image will begin to display from. Since ‘home’ is in the upper-left, both the x-axis (horizontal) and y-axis (vertical) will start at 0 pixels.

.home {
width:68px;
background-position:0px 0px;
}
.about {
width:81px;
background-position:-68px 0px;
}
.pterodactyl {
width:165px;
background-position:-149px 0px;
}
.contact {
width:109px;
background-position:-314px 0px;
}

10. As you can see, all 4 links now have their own widths. You can measure the width of each link with your ruler tool. The key here is that each subsequent link is being shifted by a negative number on the x-axis. On the ‘about’ link, it’s essentially telling the background to start 68 pixels deep into the image (where the ‘about’ link just happens to start in the sprite).

Note: Remember that the background-position is cumulative. You must add the measurement of each previous link each time you enter in the position for the next. In this case 68 pixels and 81 pixels is 149 pixels.  Then the ‘pterodactyl’ link is quite wide, another 165 pixels, meaning our ‘contact’ link’s x-axis position starts at -314 pixels. It’s only addition (or subtraction), but a mistake in one early link will mess up the math for all your subsequent links. So double-check frequently!

.home:hover {
background-position:0px -24px;
}
.about:hover  {
background-position:-68px -24px;
}
.pterodactyl:hover  {
background-position:-149px -24px;
}
.contact:hover  {
background-position:-314px -24px;
}

12. To create a ‘hover’ state for your link, simply copy the class and add ‘:hover’ after the class name. It’s unnecessary to repeat the ‘width’ property. Because all of the hover links are directly under the normal links, the y-axis shift is the same as the link height: 24 pixels. It’s a lot simpler here, as you can just paste that in over and over again.

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

.home {width:68px;background-position:0px 0px;}
.about {width:81px;background-position:-68px 0px;}
.pterodactyl {width:165px;background-position:-149px 0px;}
.contact {width:109px;background-position:-314px 0px;}

.home:hover {background-position:0px -24px;}
.about:hover {background-position:-68px -24px;}
.pterodactyl:hover  {background-position:-149px -24px;}
.contact:hover  {background-position:-314px -24px;}

13. Here’s the completed CSS for the example. All that’s left is to add the links themselves into the HTML.

<a class="nav home"></a>
<a class="nav about"></a>
<a class="nav pterodactyl"></a>
<a class="nav contact"></a>

14. Simply apply both the parent and child classes to each link. In this case ‘nav’ and ‘home’, or ‘nav’ and ‘pterodactyl’ etc.

You just learned something! Specifically, how the CSS sprite technique works, why it is used, and how to create a slick, efficient navigation out of it. Go get yourself a drink. Or get me one, this baby was looonnng.

Give me your thoughts on this technique 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

Even though this website was launched only very recently, I’ve gotten a lot of positive feedback on its look. I’m relatively happy with it as well, but that was no easy task. If any of you have ever worked on a personal project, you’ve probably already learned that you are your own worst client. When you have no deadlines, no rules, and a huge imagination, it can be pretty tough to settle on your final look. You might start on one design in the morning only to immediately throw it away and start from scratch that afternoon. This post is dedicated to all of my wasted ideas and productivity, and hopefully some tips on how you can avoid a similar situation in the future.

Start With a Brief, Don’t Be an Idiot

One way to avoid an insane amount of redesigns is to treat yourself like your own client.  What are your goals, what is your target market, your intended ‘look & feel’ ? If you start with a vague idea like ‘Website about art something’, you may find yourself spending days and weeks on projects that will never see the light of day. I believe I started on the right track by thinking about my goals. Here are some key ideas/features I knew I wanted:

• Full WordPress integration. I wanted to handle all of my content, including my portfolio, quickly and easily from any location.
• A slick & memorable design that was still easy to read.
• Black and yellow. Like Batman. Seriously.
• Community features. This means a quick and easy way to comment on posts, because it’s fun to talk to my readers. It also helps me avoid sitting alone in my apartment and talking to my food.
• Integrate my design portfolio.
• Any name that’s better than ‘Loukotka’, yet felt design related.  You’d be surprised how many Google searches spell my name wrong, so this site is meant to be easy to remember and spell.

The problem was that my goals changed over time, and I should have stuck to these principles instead of designing away like a mad man. There’s plenty more ideas I could list, but let’s get to what’s important—images of all of the designs I didn’t use or show anybody, because I went insane and couldn’t settle on the right look.

A few months ago this was my first attempt at a design thought. I started blocking out areas of yellow or black, but immediately discarded everything because an all yellow website would be pretty tough to read.

This was an experiment with a minimalist look for my portfolio, but I quickly realized that dark and empty weren’t at all how I wanted my new site to feel.

Now we’re getting somewhere. This design borrows the background and name of my other website, Loukotka.com.t the time, my portfolio website was green and white, so I found this color change refreshing. Ultimately this felt too much like a showcase and less like a blog or valuable news source. This version was scrapped for the blog, but I used its ideas in the current version of Loukotka.com.

Another radical shift in thought. I was definitely digging the white with the yellow, but still felt the horizontal slide areas would only work for a portfolio, and not for an interactive blog. I even decided on the name “Neverlens”. I bought the domain, only to trash this name much later due to its similarities to “Neverland” and “Netherlands”. Oops.

I stuck with the name for a while and eventually continued down the “yellow brick road”. This version was grungy, and incredibly yellow. This certainly was memorable and open, so I explored it further. This is also the first design that actually contains some element of the current site (a small sliver of the textured header bar).

This design probably had more time put into it than any of my other trashed designs, and for good reason.  It’s strong, memorable, and edgy. My ‘home’ icon had a picture of the White House, and I had a really slick typewriter for my ‘need work done?’ link. For a while I was in love with this, but sometimes designs have to be scrapped because they don’t complete your goals.  This was visually interesting, but I felt like the strong colors and silly icons made the site feel like it was advertising itself.  This structure works great for a company, but if I added blog posts to the design, they’d have to compete with my own header for attention. I realized I had to give my written content a lot more focus.

I toned down the colors to a cool-gray. This certainly would help give focus to the written content, but I still didn’t want the structure of my site to be dictated by its textures. The background looks great, but it was quite large and would still compete with everything I was going to write.  I want to go to a blog to read articles, not to stare at a stone wall.  At least, that was my logic at the time.

I knew I was getting close here. This design gave a lot of weight to the logo, but still allowed the reader to easily jump over to reading the post.  You could navigate easily, read easily, and it still had some ‘batman’ feel with the logo.  That said, I was still mourning the loss of my previous designs, and knew I needed a little texture to bring it to life.

The name Fringe Focus is born. It’s easy to say, spell, and remember. But the site was feeling a bit too black and white—where’s my yellow?

Yeah, that’s it.

Have Hope, You’ll Finish it Some Decade.

Obviously seeing this many redesigns might not be the most inspiring moment, but I assure you there is an end in sight. If you’ve redesigned something a million times, take a moment to step back and look at those designs collectively (assuming you’re saving all of them, as you should be).  Identify the traits you like in all of them, and eliminate whatever seems to be bringing them all down.  In my case, it was that I hadn’t made my content the focus of the design.  In your case, it could be anything.  Your designs could be too bold, too timid, too warm, too cold, too crowded, too open, red fish, blue fish. Yes, that’s a Dr. Suess reference.

Even better, have your friends or other designers take a look at your past attempts.  Perhaps they will see the value in something you previously wanted to throw away.

In the End, It’s About Goals

If you spend all of your time randomly designing, hoping you’ll magically hit the right look, it may never happen.  Break out the paper, or the text editor, and write down what it is that you’re really after. Make your next design meet all of these goals (it is possible), and make yourself a drink with an umbrella in it.  You’re done.

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.