Joshua Johnson

Graphics / 17 Jan 2012

New Logos for the Marlins, Orioles and Jays: Did They Get Better or Worse?

With a new year always comes new branding attempts. Organizations want a fresh face to signal progress and ongoing evolution and branding is the vehicle that designers use to achieve this goal.

As we all know quite well, this is a risky venture with large entities. If it goes well, your customers (or fans in this case) love you for it. If it doesn’t, you’re setting yourself up for plenty of public ridicule. Today we’re going to venture into the world of sports and check out three new Major League Baseball team logo designs. Which teams are updating their look for the new year? Were they successful or is the result a surefire embarrassment? Read on to find out!

Graphics / 12 Jan 2012

When the Photo Doesn’t Fit the Space: Tips and Tricks for Making It Work

You’ve been there a thousand times, staring at a big empty canvas that simply doesn’t seem to work with the photo that the client has provided. Perhaps you have a vertical space and a horizontal photo (or vice versa), or maybe the image is simply too small to resize without unacceptable quality loss. What now?

Today we’ll go over some tricks of the trade and teach you how to cope with images that don’t fit where you need them to. The next time you run into a problem, you’ll be ready!

CSS / 11 Jan 2012

Build a Fun Trivia Game With the CSS Active Selector

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

Typography / 4 Jan 2012

Typography With Perspective: Learn to Wield Illustrator’s Perspective Grid Tool

Today we’re going to take a look at how to use the Perspective Grid in Adobe Illustrator. This awesome and fairly new tool allows you to automatically flow vector elements onto a prebuilt three dimensional grid.

You might think that you need to be an artist to use this tool but there are in fact all kinds of practical uses for it in every day design. We’ll use it to lay out some type like in the example above.

CSS / 3 Jan 2012

How to Build a Responsive Thumbnail Gallery

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

CSS / 2 Jan 2012

Mastering Mouse Enter and Exit Events With CSS Transitions

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

CSS / 29 Dec 2011

Journey Into Mordor With CSS

Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.

This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. Let’s get started.

Software / 28 Dec 2011

The Ultimate Beginner’s Guide to Using Scatter Brushes in Photoshop

In web design we often focus on using Photoshop to create pixel perfect designs that are meticulously shaped and layered until they’re absolutely pristine. Repeated patterns, tiny strokes, complex gradients and reflections are trademarks of this design style.

But what if you’re going for something more organic? How can we use Photoshop to create complex and random particle arrangements that don’t look cheesy and contrived? The answer of course is to utilize scatter brushes. This awesome tool seems fairly simple on the surface but there’s a ton functionality and limitless possibilities to explore so even if you’re a Photoshop pro, read on to see some great ideas for how to use scatter brushes in your work.

Graphics / 26 Dec 2011

How to Use Synergy to Take Your Designs to the Next Level

“Synergy” – In business this is a term that has been so often abused that it has become a meaningless buzzword. Some of you may cringe just at the sound of it.

However, in design synergy is a powerful weapon that, when wielded properly, can make your designs much more interesting and creative. What is synergy? Where can we find some solid examples of synergy in design? How can you use synergy in your work? Read on to find out.

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Graphics / 19 Dec 2011

Branding Lessons From the Guitar Gods: Taylor, Gibson, Fender and More

Today we’re going to discuss how design projects often require you to take a step back from who you are as a designer and forget your own personal taste while taking on the personality of a given brand.

The companies who hire you will have vastly different brands, strategies, and most importantly, customers. This principle is displayed quite prominently in the brands of major guitar manufacturers. Let’s dive in and see how Taylor, Fender, Dean, Gibson and more target the right customers through design.

Layouts / 15 Dec 2011

Tips and Ideas for Designing With Blurred Images

“The supreme accomplishment is to blur the line between work and play.”
– Arnold Toynbee

The topic of today’s discussion is blurry photos. No, not the kind that you accidentally take because your kids won’t sit still. The intentional kind, the use of which can serve several practical purposes in design.

We’ll learn all about how to use blur effects to help make text more legible, direct the viewer’s attention, and just make backgrounds more fun. We’ll also take a look at some different types of blurs and how to properly apply selective blurring.