Home > Technology > My Amazing Graphic Accomplishment

My Amazing Graphic Accomplishment

December 28th, 2010

Let’s start this off by saying that I am a bad artist with zero sense of graphic design. When talking to clients about development projects they inevitably ask me a design question, to which I respond “I’ll pull in a designer to answer that question, because believe me: you don’t want my design advice. If I designed our sites, everything would be in black and white.” Usually worth a good laugh out of the client and helps set the expectations — Sean != Designer.

But, this holiday season I found myself in need of a specific icon for a project I’m working on, and the design staff is either slammed or on a well earned vacation, so what’s an enterprising developer to do? Role up his sleeves and get dirty with a graphics application, that’s what! And my success was so complete, I couldn’t help but share in the wonder.

What you’re about to see was all done using The GIMP, but no reason this couldn’t be done in Photoshop or really any program that supports layers and opacity. With that, let’s get started.

The Need

The application I’m building makes use of a great set of freely available icons, which I also use on this blog. Included in that 1000+ icon package are a set of folder icons depicting different types of folders. Some with filetypes, some with pictures, almost anything you could want inside of a folder is represented. Except for “groups”. There’s a whole set of group icons, but no icon for a group folder.

The Building Blocks

Which isn’t to say I started from nothing. As I mention, there were group icons, like the plain group.png:


I also have the plain folder.png:


And as a reference I have the folder_user.png, which is essentially where I want to end up, but with the group icon instead of the user icon.


And lastly, I have the user.png icon itself:


Step #1: Resize and Positioning

First I took the original folder.png and moved the folder icon into the bottom-left corner, as all the other folder icons looked:

Step #1 - Folder Positioning

Next I determined that the person in the folder_user.png was only 12 x 12 pixels, while the original user.png was 16 x 16. So I resized group.png to 12 x 12 and then pasted it as a new layer into my work space. I moved it into the upper-right corner, where it would eventually need to be, so that layer looked like this:

Step #1 - Group Positioning

When both layers were made visible, I had the general layout of the final icon:

Step #1 - Final Positioning

Step #2: Overlap

The astute viewer will notice that on the reference folder_user.png icon, the person appears inside of the folder, such that the front flap of the folder is in front of the person graphic. At first I thought I was done for… how was I going to recreate the folder flap in front of the group layer? This is when the true genius struck (at least, for me, as a non-designer!). I copied the section of the folder that is the front flap and create a new layer with just those pixels, like this:

Step #2 -- The Flap Layer

Which I then positioned above the other two layers. With visibility turned on for all three layers, we now get a much closer to our final goal:

Step #2: With the Flap

Step #3: Opacity

After a quick self-congratulatory dance, I realized this icon wasn’t quite right. If you take a look at the reference icon again, you’ll see that the person graphic isn’t quite fully covered by the flap. It’s more that the part of the person that is covered is faded… like, the flap itself is partially transparent. The physics of transparent folder flaps aside, I was determined to get an icon that would match the set, so I set about trying to get this last detail just right.

It was then that I realized I could simply turn down the opacity of the flap layer. With only 75% opacity, I ended up with a layer that looked like this:

Step #3 -- Flap with Decreased Opacity

Because I had only copied the clap to a new layer, not cut the flap, there was an exact copy of the flap behind the top-most flap layer. By turning down the opacity on the flap layer, the group graphic was able to show through a bit as well as the identical full-opacity flap immediately behind. This way the background itself didn’t show through (which would have resulted in blue showing through when the icon was embedded in the webapp). Here’s what the semi-transparent flap looks like with a blue background without the the identical full opacity version behind it:

Step #3 -- Transparency without Full Opacity Backing

So, when we combine it all together, we have the the semi-transparent flap as the top layer, the resized group graphic as the second layer, and the full-opacity folder as the third layer, which gives us the finalized folder_group.png:


All the above graphics have been at 800% size, so here is the original reference user.png and group.png side-by-side, and then the reference folder_user.png side-by-side with my new folder_group.png.



I think I’m going to apply for a job as a designer now.

probonogeek Technology

  1. No comments yet.
  1. No trackbacks yet.