The ‘World Travel Issue’

I was four years old when it was published. The cover price is USD1.25, which seems a bit steep for 1978?

I can’t help but pull it out every so often and check out the ways things were. It’s full of big hair, bell bottom jeans, empty Californian backyard pools, big concrete pipes, makeshift ramps and freestyling.

Pool antics

There’s also some nice typography and examples of fundamental grid layout.

Grids

The plan is to channel some energy left over from freelancing into maintaining a half decent blog about CSS, design, the web industry and freelancing etc. OK, admittedly that was my intention 8 months ago, but I’ve got renewed enthusiasm and new ideas!

I’m still making some decisions on how to handle the portfolio, and fixing the mark up on old content, so things may appear a bit sparse for a bit. It’ll slowly polish up over the coming weeks.

Wordpress generates a list of categories when you use the ‘wp list categories’ template tag. By default you get the name of the category as a link, followed by the post count in brackets. I wanted the post count wrapped in a span.

I’m not great with php, but thankfully Wordpress is pretty easy to get your head around. After some digging in the back end I found the relevant code. In wp-includes/classes.php, line 1352, I replaced:

$link .= ' (' . intval($category->count) . ')';

With:

$link .= '<span>' . intval($category->count) . '</span>';

And it worked a treat.

The new cards

After taking the plunge into freelance-dom a couple of months back, the first thing I did was design and order myself some business cards. I decided I could afford 500, and ended up with 1500.

I ticked the ‘customer will pick up’ box on the printer’s online order form. After I hadn’t heard from them after a couple of weeks, I called the printer and enquired as to when they might be ready. They explained that they had mistakenly arranged for them to be delivered, but the courier had misplaced them. They said they would print some more for me. They also promised that the original batch, when found, would be mine too.

So I picked up the fresh batch, and wasn’t feeling too bad about the whole thing. They looked nice, and the FF Info Text I used for my email and phone number didn’t look so small after all. Then I got home and discovered the original box on my door step!

The printer then called and said that the original box was well and truly lost. Juggling two boxes and the telephone, I agreed that was probably the case.

They said that a third box would be printed to replace the original…

Step 1: Finding the Right Scale

Scale is always important, but even more so in the absence of any real perspective. Determine how big your want your fold to be, and place your guides accordingly. You’ll use them to draw the folded corner, and the page itself, both on separate layers. In Figure 1 you can see the dimensions I am using.

Figure 1: Placing the guides.

Step 2: Drawing the Page Itself

Create a new layer for the page background. Select the pen tool and draw the outline of the page, minus the corner to be folded, like so (Figure 2):

Figure 2: Drawing the page.

Step 3: Apply Your Shadow of Choice

You’ll probably want to apply some sort of drop shadow to your newly created page background layer to give it some lift. The more subtle the better. In this case I add a drop shadow with no distance, a size of 2 pixels, and opacity reduced to 20%.

Figure 3: Drop shadow settings for the page.

Step 4: Into the Fold

Create a new layer for the actual fold. Select the pen tool again and draw the scaline (almost a reason for learning that word in high school) triangle shaped fold using three anchor points snapped to your guides, like this:

Figure 4: Drawing the fold.

Step 5: Apply a Drop Shadow to the Fold Layer

To create the effect you’ll need to apply a drop shadow to the new layer with a bit more size (roughly 4 pixels in this instance), some distance (2 pixels) and slightly more opacity than I used for the page background layer.

And there you have it. A modest work, but neat and tidy.

Figure 5: The finished product.