jMar"s Blog DevSmash Developer Portal

Thursday, June 26, 2008

Kwicks 1.5.1 Released!!!111!!


So it turns out that people didn't really like the "Invalid Argument" error that Kwicks 1.5 was throwing in IE7+.

Kwicks 1.5.1 fixes the bug and is ready for download.

Once again, I would like to thank Rúbel Mujica for his role in identifying and fixing the bug. I would also like to thank everyone else who has shown an interest in the Kwicks plugin and for all of your invaluable input!

Tuesday, June 17, 2008

Kwicks 1.5 Released!

Kwicks 1.5

Well I'm happy to announce that I have finally wrapped up the v1.5 update to the Kwicks plugin. Kwicks 1.5 builds upon the original release in several big ways - here is a summary of what's different:

  • Vertical Mode!

    This was a common request, so there was no way I could leave it out of this release.

  • Min vs. Max

    The previous release required developers to specify the "max" width of the active kwick. As of v1.5, developers may now opt to specify the width/height of all of all of the non-active kwicks instead. This feature doesn't really add new functionality, but is merely offered as a convenience.

  • Sticky Mode

    When sticky mode is enabled, one kwick will always be open. This allows for more of an "accordion" type experience.

  • Custom Trigger Event

    Kwicks 1.5 lets you specify the trigger event for the animation. The default is still 'mouseover', but many users had wanted to use 'click' in instead.

  • Smoother Animations

    This release I did some refactoring of the code behind the animations. Several calculations were moved outside of the inner loops allowing for a less tasking, and consequently smoother, animation.

  • Packed Script

    While this release still comes with fully commented and readable code, it also comes with a packed version which is far better for production use. The new packed version is only 2.4 KB, which is actually smaller than the original release.

All in all this is a huge addition to the original version - many of the excellent suggestions I have received were addressed, and I hope that you will find the added flexibility more helpful than confusing. I always believe simplicity is key, so I have tried to keep that in mind as the new features were added. So what are you waiting for? Go check it out!

Wednesday, May 28, 2008

A "Dirty" Photoshop Tutorial

Well, despite being a long time user of Photoshop, I've never sat down and attempted to make a tutorial. I realize that the web is chock full of text effects for Photoshop, but this is a particular look that I haven't seen described before. During the tutorial I share a couple of the hot-keys that I employ most often, so I'll apologize to the Mac users for only providing the Windows version (where they differ). From what I understand, they're all pretty close... so that's that. Let's dig in...

Create a New Project

Press Ctrl + 'N' to open a dialog for creating a new project. Normally I work at higher resolutions, but for the sake of this tutorial I chose 640px by 480px.

Create a Background

Something simple here will do. I set my foreground and background colors to darker shades of blue (#2C326E and #2D304A respectively). Pressing Shift + 'G' will let you toggle between your gradient and bucket tools. Using the gradient tool, click and drag your mouse from the upper left to the bottom right corners of the canvas. Your canvas should now look like this:

Create Dirt Layer

Press Ctrl + Alt + Shift + 'N' to create a new layer. We're going to create a new gradient just like we did in the step above, but this time, select two different shades of brown. I chose #A2702F and #7F561E for the foreground and background respectively. Your canvas should now look like this:

Add Noise to Dirt Layer

Next, in order to simulate the gritty nature of dirt, we're going to add a Noise filter to our dirt layer. Click Filter > Noise > Add Noise...

I used the options shown in the following image:

Add Text

Next we want to add some text. The exact font you use isn't important, although I have found that "round" works better than "sharp" for this effect. Also, you will want the font to be sufficiently thick (i.e., don't use Arial Narrow). I chose a font called "Elephant" and used 170pt for the size. The color is of no consequence here.

Create Mask from Text

This step requires performing the following actions:

  • Hide the text layer by clicking on the corresponding "eye" symbol.
  • Select the dirt layer.
  • Click the 'T' on the text layer while holding the Ctrl key.
  • You should now see that the outline of the text is selected.
  • Click the "Add Layer Mask" button shown below:

Your canvas should now look like this:

Add Loose Grains of Dirt

This is where we want to start adding in the random grains of dirt to make this look more natural. This step requires performing the following actions:

  • Select the brush tool (press 'B').
  • Choose a grainy looking brush. I chose one of the default brushes as shown below:
  • Now select the dirt layer's mask by clicking on the layer mask thumbnail, as shown below:
  • Ensure that your foreground color is white.
  • Now you need to rely on your artistic eye a bit and click around in various places to reveal the dirt texture behind the mask. Note that you don't want to drag the brush while clicking, since streaks will not look natural. Mine ended up looking like this:

  • The scattered dirt effect doesn't look quite right, so now we're going to switch the foreground color to black and selectively remove some of the dirt. Mine ended up looking like this:

Add Depth to the Dirt

The layer mask is finished now, but the dirt looks too flat. Double click on the dirt layer to bring up the Layer Style dialog. Make sure that "Layer Mask Hides Effects" is not checked. Now add a drop shadow with the following properties:

For the color, I used #3A2900.

It's getting closer, but let's add a gradient overlay to give the light a little more "play" on the dirt. I used the following properties:

Smooth Dirt

Some of you may wish to stop here, but I found that the Noise filter had left the dirt looking a little too grainy for the look I was after. To smooth it out a bit, I unlinked the layer mask from the dirt layer by clicking the unlink mask button...

...and then I applied a very light Gaussian Blur (Filter > Blur > Gaussian Blur...) to the dirt layer:

That's it! Here's the finished effect:

Mixing the random characteristics of scattered dirt with purposeful lettering can be tricky, but I feel this effect does a decent job of providing just that. If you have any suggestions on how to improve the realism, please comment!