jMar"s Blog DevSmash Developer Portal

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!

Friday, May 23, 2008

How to Fix the Blogger Comment System

I'll be honest - I really like Blogger. Despite the fact that nearly every co-blogger I know has urged me to give Wordpress a try, I'm still (mostly) satisfied with what I've got. I serve static pages and other content myself, and let Google worry about hosting the blogs that account for over 90% of my total traffic. However, there is one thing, in my opinion, that is unforgivably lacking in Blogger: the comment system.

The comment system is so abysmal that I'm literally on the verge of creating my own message board that I can simply embed in an iframe. If I weren't so packed for time lately, you could consider it done. However, before I launch another harder-than-I-thought-at-first project, let me share with you the features that I believe, for the most part, any blogging platform should afford.

So here they are, in no particular order:

  1. Unique Styling for Author Comments

    This one seems obvious to me. Every other message board on the planet does this, yet Blogger currently offers no CSS accessible way to distinguish an author comment from a user comment. I've previously discussed a hack method using JavaScript to accomplish author comment styling, but it's ridiculously more painful than it should be.

  2. Threaded Comments

    This one's pretty straight forward - users should have the option of replying to a particular comment, rather than being forced into a flat discussion. Tree style comment threads allow for individual conversations to be self contained.

  3. Collapsible Threads

    This feature is obviously dependent on the previous one. But assuming threaded comments were implemented, I would expect the ability to collapse a thread that I was not interested in. Think Digg...

  4. Get Rid of that Separate Comment Page!

    Why oh why am I taken to another page just to leave a comment? Can there possibly be a good explanation for this?

  5. Language/Profanity Filters

    Ya, some of us are still old fashioned like that. This would be especially appreciated in family and faith oriented blogs.

  6. WYSIWYG Editor

    Personally, I hate them - but the fact is, WYSIWYG editors are now a consumer expectation. Given the crowd that tends to follow my articles, this blog would probably benefit a lot less from this than a less code-savvy user base.

  7. Private Comments to Authors

    I'll admit that from here on out I'm probably going above and beyond what I'd consider "minimum requirements." However, being able to send private comments to the author would be a handy feature. For one, it would be a safe and convenient way to share personal contact information.

  8. Spell Check

    Since I use Firefox, I simply use the built in spell checker, but this would be helpful for visitors using other browsers. This is another example of something Digg did right...

  9. Arbitrary Thread Locks

    The author of a blog should be able to enable or disable comments on a post-by-post basis. This disable feature should have the option to actually hide all the comments, or simply disallow additional comments.

  10. Statistics

    This is probably the least crucial of all my wants, but it would be nice to see some overall statistics (e.g., average comments per post, post with most comments, etc...).

Well that's it for my list. Please feel free to add any additional ideas in the comments!

Monday, May 5, 2008

jQuery UI 1.5b4 Released

Paul Bakaus and the jQuery UI team have just released jQuery UI 1.5b4 - the last scheduled beta version before a release candidate. Along with the new beta version, the jQuery UI homepage has been given a major overhaul. While parts of the site are still under construction, it does include several functional improvements, such as a download builder and an improved demo showcase. So head on over and check it out!

Happy Cinco de Mayo!

Thursday, May 1, 2008

Why PHP and JavaScript IDE's Suck

Few things fire up an engineer faster than over generalizations, criticizing a favorite language, or attacking their favorite IDE. So I'm off to a good start. Oh ya, my mom hates that word too (sorry Mom)!

However, interestingly enough, this fact (just concede for now) is not the fault of the given language, or even the IDE developers. So who's fault is it? In truth, no ones. It's really more of a bi-product of these languages themselves (and as we'll see, many other languages (such as Perl) could be thrown into this bunch as well). In fact, the same IDE, such as Eclipse, can be outstanding with a language like Java, yet be rather disappointing when it comes to PHP.

So before we go any further, I need to lay out a tighter definition for "suck". I'll admit that it's too broad a stroke, albeit attention getting. If I had to pick one single feature that makes or breaks an IDE for me, it would be autocomplete (or Intellisense for you Visual Studio people). The frameworks and libraries that we use today are simply too big to try and remember every single class/object member, and it's just too slow to go sifting through the documentation every two minutes. Nothing speeds up my productivity like being able to press Ctrl + Space and voila - there are my options. Therefore, to me, and for the purposes of this discussion, any IDE that doesn't have autocomplete that's up to snuff, sucks.

Thus far, the languages that I've interacted with the most are Java, PHP, C#, C++, JavaScript, and I've dabbled with Object Pascal. I'd consider myself a jack-of-some, master-of-none. In the bizarre scenario where I had to put each of these languages into one of two buckets at gun point (me, not the buckets), I would divide them based on this single comparison: strongly-typed versus loosely-typed.

Interestingly enough, if I compared them based on their respective "IDE suckiness", they'd end up in the same buckets. Why is that? Well, as I've already implied, there's a strong correlation between how a language is typed, and how effectively an IDE can offer suggestions from a given context. In contrast to a loosely typed language, a strongly typed language can make some guarantees about what a variable holds.

For example, if I'm working on a Java application in Eclipse, I can use autocomplete to inspect the members of my current object, like this:

Eclipse Screenshot

Most conveniently, all of my autocomplete options are relevant to my Person object. Eclipse can do this because in Java, once I declare jMar as a Person, it now has a guarantee that jMar is and always will be a Person. This guarantee holds true for other strongly typed languages as well, which provides their respective IDE's with the same promise.

Now let's say I'm working on a PHP application in Dreamweaver. If I reproduce the equivilent Java code from above, my "autocomplete" options are really just a list of every function defined in the PHP5 documentation.

Dreamweaver Screenshot

Slightly more helpful than nothing, but it's far short of I had before - not to mention that this gives me no insight into the members of my Person class. But don't hate Dreamweaver - what else can it do? Remember - when you're coding in PHP, you're not making any guarantees as to what a variable holds.

Consider the following perfectly legal PHP code:

class FirstClass {
 ...
}

class SecondClass {
 ...
}

$foo = new FirstClass(); // $foo is now a FirstClass
$foo = new SecondClass(); // $foo is now a SecondClass
$foo = "bar"; // $foo is now a string
$foo = true; // $foo is now a boolean
$foo = 777; // $foo is now an int

No wonder the autocomplete isn't much help. And this is the exact same scenario for JavaScript, Perl, and other loosely typed languages.

I know I've personally been frustrated on numerous occasions with the apparent "lack of effort" being given to autocomplete with regards to these widely used languages; however, after pondering some of the fundamental obsticles that the IDE developers are facing, I can understand how the feature set is impacted by the target language. I suppose an article can only be so valuable without offering some sort of a solution, but just consider this a "state of affairs" on the IDE world, and thanks for reading!