Unlike the last design, the colour scheme here is dominantly white and cyan. This time around I really wanted to show that I wasn’t all dark and suicidal. That scares people away. What the lighter colours do here is invite people to come in and read (hence the dark text on white background). If you’re complaining that it makes your eyes bleed, then that’s your fault. Turn on some [more] lights and sit farther away from the monitor — you’re mutilating your eyes (glasses/contact user, here) by not doing so.

To expound a bit, this theme was derived, code-wise, from the stock TwentyTen WordPress theme. It’s a great base to build upon, despite the somewhat messy CSS. Regardless, the code is simple and it’s easy to implement your own uniqueness. As far as design, I can say it was partially based on my previous Cloudy design. I ended up spending a lot more time on this than I really thought I would.

In the end, the result is passable and I can be proud of it. Just recently I added the recent work slider and tweaked some inconsistencies in the sidebar. I still have a long list of things to either add or change, and I look forward to checking off items as the year goes on (time permitting).

As a tradition, I like to share the song that was the driving force of my inspiration and motivation to work on this, because music really is powerful! This is a great track!

To close: I’d just like to point out that every time I re-design something, it is a sign that my design or development skills and tastes are evolving. By re-working something, I am able to take what I had learned previously making the theme and apply it alongside my new found skills and tastes.

“Prairie Sky” by Jesse Therrien (source)

There are a few ways of doing this, but this way is by far my favourite because it’s so easy to modify the effect later on if needed.

First, a short history lesson.

To make you a bit more savvy on the subject, let me fill you in on the origins of the letterpress effect. You most likely own a book, container, or even business card that you’re able to rub your fingers along and feel the letters raised in or out. You guessed it, that’s the letterpress effect. Origins go back to as far as 750AD and has almost been used exclusively in physical printing until around a decade ago. Graphic and web designers then adopted it as part of their design toolkit. Current design trends were beginning to age, so designers needed something to spice up their work.

If you’re interested in seeing some examples of letterpress in web design, take a look at Line25’s fantastic gallery article.

Alright, let’s do it!

Pop open Photoshop and proceed to create a new canvas. In this tutorial, I’ll be using a canvas with the size of 400x400 and background colour of #555555. After doing that, go ahead and type your text out and make it’s colour #999999. You can replicate this if you’d like, it shouldn’t really matter but this colour and size should yeild the best results.

Alright, now let’s actually get into doing the effect. In this method, we can be pretty non-destructible by only using layer styles. You’ll see what I mean in a minute.

Select your text layer in the layers panel. Now, head over to the bottom of the layers panel and choose Layer Styles → Drop Shadow. Now, make sure to replicate the options in the next image below. I’ll explain what these do in a moment.

Replicated everything yet? Good. Now let me explain a few things. The first thing you should have done is set the blend mode to normal. This ensures that the drop shadow will stand out. Next up is the colour change — make sure it’s #333333. It’s dark enough to stand out against the background without being too disruptive. You should have set the opacity to 100%, which will ensure that the drop shadow is nice and crisp. Next is important, make sure you set the shadow angle to 90°. Last part is easy, just make sure the both distance of the shadow and the size of it is 1px. You can change these later if you want to change the look of the letterpress, but we’ll keep it like this for a more classic letterpress look.

Alright, now we’ll be doing doing the second part of the effect — the inner shadow. Since you already have the effect panel open, just go over to the list of effects on the left and select Inner Shadow.

You’ll immediately see the inner shadow applied, but we’ll change that in a moment. Just take a look at the image below and copy the settings.

Alright, a lot of familiar stuff here. You really just need to duplicate the settings that you used on the drop shadow, but with one major difference. Make sure to set the inner shadow colour to #cfcfcf. This is lighter than the colour we set the text to (#cccccc), and adds a bit of polish.

And that, my friends, is the letterpress effect in Photoshop. I prefer this method because it’s really easy to change the colours of the shadows and text, and believe me, that happens a lot! In this example, the text is pressed outward, but if you were to reverse the colours of the shadow and tweak the text colour as well, you could easily achieve an inset letterpress. I’ll leave it to you to experiment with that, though.

If you want to get fancy, you can also add some gradients and such. I won’t go into the details of doing this, but the above image is an example of what a little bit of creative tweaking can do.

So, in closing, let me outline a few things that you need to remember when doing the effect with this technique:

• There are always two shadows.
• If you want an inset, the inner shadow is should be a colour darker than the background, the drop shadow should have a lighter colour than the background, and the text colour should be the same as the background.
• If you want an outset, the inner shadow is should be a colour lighter than the background, the drop shadow should have a darker colour than the background, and the text colour needs to be a colour that is light, but not as light as the inner shadow.

I’ve always loved typography used as the focal point in motion graphic videos. I’ve even tried my hand at making them. Needless to say, I wasn’t successful due to the lack of patience on my part. However, that made me further appreciate the time and effort that these people have put into making these videos.

Sure, they’re cool, but take into account that each movement of text is scripted and perhaps you will understand the almost artistic beauty of these videos.

These videos are not order in any specific way.

#1: “Still Alive”

#2: “The Big Lebowski”

#3: “Online Songs”

#4: “Typefaces Give Us Signals”

#5: “If”

#6: “Into the Ocean”

#7: “The Cigarette Is Dead”

#8: “That Was Epic”

#9: “Lions Roar”

#10: “Dane Cook”

Bonus

These videos have more imagery than typography, but the motion graphics are still present nonetheless. Of course, the cool factor remains as well.

“Non-O-Biography”

“You’ll Rebel to Anything”

“Tangible Actions”

Before I start, I just want to share the songs that fueled me while doing the bulk of the work on the rework last night. You know, for fun. I was kind of in the mood for some energetic, synth-poppy music.

In v13 I removed everything that reminded me of the terrible colour scheme in v12, opting for a cleaner look with some cyan and gray mixed about. You’ll see a few subtle instances of radial gradients still, but it’s not really notable. As of now the header section is a bit too bloated for my taste so I may end up chopping that down eventually.

The content pages (Portfolio, Media) haven’t changed much. Yes, they’re still empty, and will probably remain that way for a while until I can find the patience to put them together. The contact page, however, has been tweaked a bit from the last version to make for a better experience with the AJAX interface. I also finished up the About page for now, but plan to add a few more things to it once everything else is done.

A lot has been added to the footer to de-clutter the sidebar. There are the typical social icons like before, but now my tweets and Flicker pictures are also being snagged from the respective services and are now living in the footer as well.

Also worth noting is the addition of the Labs. This was up for a while but I only showed it to a few people. Hopefully it’ll serve as a nice hub for my spontaneous projects. It’s not done yet, like most things on this site, though.

As always I welcome any feedback, and knowing me you can expect another major revision by the end of the year… Here’s to OCD!

Click for the Video

Click for Full Size Image (1200x1000)

I would be lying if I said this wasn’t Twitter inspired. I initially started with an ugly black colour palette in mind but quickly swapped that for a clean, white and blue scheme. From there, I immediately thought of clouds — that’s where cloud-no9’s brushes came in handy. Admittedly, the placement of everything isn’t very original, but that’s alright.

I probably won’t end up converting the psd to xhtml, but if someone wants to, or just wants the psd, leave a comment and I’ll send it to you.

Hopefully, if I do another one of these videos, the end result will be much more interesting. It should be noted that I still consider myself an ametuer at web design.