Category Archives: Portfolio

Case Study Nerd Portfolio

Boating Lake, aka Photoshop is still useful for the web

So I made a silly thing one evening. I’ve embedded it above, and you can see the source at https://github.com/crccheck/boating-lake for more details about the inspiration and implementation. I thought my two readers might be interested in my process for preparing the graphics.

Finding the source

A quick Internet search revealed a clean source for the comic. I downloaded it and brought it into Photoshop.

Creating a mask from line art

Making cutouts is the infantry of the Photoshop army. There are more tools and techniques for making cutouts than any other Photoshop task; I thought I’d show favorite technique of cutting out line art.

boating-lake-step1-original

Duplicate the layer to preserve your original. The goal of the next steps is to use the art as its own alpha mask. Select All (Ctrl+A), Copy (Ctrl+C), Create a layer mask, Alt+Click to Enter the layer mask, Paste (Ctrl+P), and then Invert the the mask (Ctrl+I).

If you exit the mask, you’ll see that you’ve sort of created a mask without using a brush, eraser, lasso, or wand!

boating-lake-step2-inverted-mask

Now to fix the alpha, go back and re-enter the layer mask (Alt+click the mask in the Layers palette).

boating-lake-step3-edit-mask-alpha

Edit the mask’s levels (Ctrl+L). I’m going to make a mask for the characters in the “Key” area first, so I’ll set the black point and white point accordingly.

boating-lake-step4-mask-black-white-points

It’s a good idea to tighten up the black point and white point a bit to make the alpha cleaner.

boating-lake-step5-mask-black-white-points2

Now I have a nice mask for the characters.

boating-lake-step6-masked

Now I just Copy Merged (Shift+Ctrl+C)/Paste (Ctrl+V) each shape into its own layer. I kept finding mistakes and had to go back to fill in the robot’s face, and resize the characters to be 15% smaller so they would fit in the boats.

The process is the same for getting the boat and waves, except you pick the water as the black point for the layer mask.

boating-lake-step7-lake-mask-black-white

Repeat this process to create a mask for any other element you want to isolate. I also grabbed the title and the entire key.

Automating the export

To export each sprite, make sure their layer is visible, and hide all the rest.

Then go to File -> Scripts -> Export Layers to Files…

boating-lake-step8-export

Make sure File Name Prefix is empty, File Type is PNG, Transparency is on, and Trim Layers is on. The process may take some time, but you’ll end up with a nice pile of sprites.

Extra Hints

  • Depending on how clean the source material is, you’ll probably want to run the “Despeckle” de-noising filter to remove jpeg noise.
  • If your alpha isn’t very clean, you can try tightening the black point of the layer mask.
  • I have a layer called “bg fill” that I usually fill with a solid color. I use this to help catch mask spills and refine edges.
  • If you need to do isolated manual cleaning on a layer, I create a new document with just that layer. There’s a shortcut for doing this! Layer -> Duplicate Layer… Then set the Destination Document to “New”.
  • You’ll notice the file names look like  _0000_boat.png or _0000s_0001_robot.png. The number is the layer number, and multiple numbers mean it was in a group. I once wrote a Photoshop script that did the same thing but without those numbers, but Photoshop’s built in script got better, and I didn’t feel like upgrading my script, so I just use the built in script now and manually clean off the numbers. If you need to do a lot of files, you can use a mass file renamer (For Windows, I recommend ReNamer by den4b, which has preview and supports regular expressions).
  • To speed up the export, delete as many hidden layers as possible. The script isn’t very smart.

Errata

I ended up exporting the waves separately for some reason, so they’re not documented here. Also, I prefer Photoshop for Windows over Mac.

Nerd Portfolio

LazyColor updated!

screenshot of LazyColor
LazyColor has been updated!

Why choose just from standardized colors when you can could be choosing from colors that sort of also look like real words! From Abacas to Salted, pick a color that will be remembered for a lifetime. As usual, the source is available on Github.

Nerd Portfolio

CodebaseHQ Tickets+ for FireFox

What’s this? Another release already? Well yes. I’ve been working on this project, and we use Codebase for project management. And the whole time, I kept thinking, “Why can’t I sort these tickets?!”. Apparently, I’m not the only one, because I overheard some other people say the same thing so I decided to make a Greasemonkey script.

While there is a mechanism to sort, it requires modifying your search query and a page refresh. My script not only does all that live, but it also turns the search box into a live-search, which makes finding a particular ticket fast. To accompany all this, I also de-paginate the results so all the tickets are in one page. This could potentially cause problems, because some projects might have thousands of tickets; but that’s a problem for another day.

While I have been on a jQuery spree recently, I made sure not to use it for this Greasemonkey script. Even though there is a lot of DOM manipulation, I rely on Xpath and JavaScript 1.6 Arrays. The script is simple enough where it’s easy enough to convert to jQuery if needed.

If you use FireFox, Greasemonkey, and CodebaseHQ, Give CodebaseHQ Tickets+ a shot.

Life=Boring Mental Note: Add Category Portfolio

Announcing allbfcards.com

So I’ve been playing this game called BattleForge, and there are a handful of websites that exist just to display information about these cards you can collect in the game (think Magic: The Gathering or Pokemon). People have also made Adobe AIR applications and Microsoft Access databases. So, naturally I thought I would pollute the web with another website.

At first, I was going to use xml + xslt to make it. I actually got a proof of concept working nicely. But once I tried using javascript, it got weird on me because it was XML instead of HTML. Then I changed it to plain HTML + an XHR request to get the XML file and got basic realtime filters working. Then someone pointed out that there was some google docs with the information I wanted so I switched from XML to JSONP.

Anyways, this is the limit of my attention span so I’ll paste the URL now. http://allbfcards.com/

Mental Note: Add Category Nerd Portfolio

Next adventure in HTML Canvas

This one comes with a live demo!

demo01

One of the biggest problems with my  last Canvas experiment is that if you put text labels over points of interest, they quickly clutter up and become difficult to read. In this demo, I take a list of labels and the coordinates they belong, then I treat each label as a like-charged ion and they automatically repel each other and find their own non-overlapping positions. I also put a spring force between each label (visualized by the red line) to its original position so they don’t stray too far. There are also some visual embellishments specific for the application.

In my next iteration, I’m going to try and properly attach events to each particle. I have rudimentary drag and drop now, but it’s not robust enough for other ideas I want to add. I also want to be able to add uncharged particles and have wind and gravity. So I can make the whole thing a proper particle playground.

Note: since the code was ripped from a Greasemonkey script, it’s FireFox only.

Update 18 July, 2010: I’ve made it a little more interactive, re-ported a more up to date version of the code, and made it somewhat compatible with Safari and Chrome.

Case Study Portfolio

Secret Stash script

I started writing my “Secret Stash” php script as a simple DirectoryIndex skin and evolved it to a full-featured entity of its own. My client needed an aesthetic way of showing their assets. Previously, they would either send them to an open directory on their web server, or write a new HTML page every time they needed something more. Even though they had their workflow down to a series of copy and pastes, it was a lot of work every time there was a change. Especially compared to the system I gave them.

What I did was create a php script that created a parallel version of the open directory. The script used the same CSS and design cues from the main site, scraped the open directory and its subdirectories, and presented the clients files in a context-appropriate way. Subdirectories were grouped together, there was a widget to play audio files from the browser, videos could be played in-line, and images were thumbnailed and loaded in a lightbox. And the best part is that just maintaining the files was all it took to create the corresponding client site.

I added more features beyond that– like simple file maintenance through the web interface, and the ability to add comments to each file.

The script was flexible enough to be used for different kind of clients, significantly reduced the maintenance time, and also made it possible for anyone with an FTP client to create client sites.