You’re sitting there, in a remarkably comfortable office chair that you wish was your own. You’re thinking about how many business cards you’ll need to hand out, and whether or not any of them were accidentally bent in your wallet. You’ve brought your laptop, but have no idea if it was necessary to bring it along. Suddenly, two guys dressed a lot more casually than you are enter the room. You’re told: “So you’re a designer, tell me about yourself.”

Job interviews are always a challenge, and they’re made even worse in the current economy, where dozens of applicants are interviewing for the same position. Designers may have an even harder time, with thousands of new design graduates each year and only a handful of positions.

Not every aspiring designer will land a job. In fact, many will give up and move onto other career paths. Fortunately for you, you’re reading my blog, so here’s some tips to help you land that killer job. These apply to job-seekers, interns, and freelancers alike.

1. Don’t be nervous, nerd.

Maybe it’s your first interview, or maybe it’s your twentieth: either way the process can be pretty stressful. You never know if you’ll be speaking to one person or five, if you’ll need to answer questions about your work, or your favorite font; you may even be asked to draw something on the spot. The bottom line is that there’s a lot to think about, which leads to a lot of anxiety.  Here’s the good news: having given a few interviews, I can tell you this: We care a lot less about this interview than you do. If it’s before 12, we’re thinking about lunch… if it’s after 12, we’re thinking about what we already ate for lunch. Job interviews are probably the most relaxing part of the day for your interviewer.

Employers are used to lackluster interviews; they’re used to sitting through a lineup of mediocre talent, and they’re  waiting for someone interesting to come along.  So be interesting! Express your opinions, project your voice, make jokes, make it an interesting conversation. The fact that you’re in the room at all means they liked your portfolio, you just need to show you’re smart and capable. So be yourself, pretend you’re talking to your friends. Handle yourself the way you would if you were working there on a day-to-day basis, because that’s what they need to see. If you have fun with it, and you work is good, you may have just landed yourself a job.

2. Have a website

This should be obvious, and the fact that you’re even getting an interview means somebody probably went through your website already. But perhaps you don’t have a website and you simply wrote a good cover letter, or you were a referral from a friend, or they saw a specific piece of yours out in the wild.

I know this is more of a tip to help you get an interview than it is to help once you’re there, but I’ve been to plenty of interviews where they’ll throw your website up on a projector or laptop. If you’ve put together a great collection of your work online, and they ask to see it in the interview, then you’ve scored a solid 10 minutes where you have a lot of great things to talk about. Let’s face it, we’re all very visual people,  so the more time you can spend talking about yourself with a visual aid, the better.

A lot of these ideas apply to print portfolios as well, but honestly, most people would rather browse your website than flip through a booklet.

If you’re not a web designer, don’t worry. All you need is a clean collection of your work online. Use a WordPress theme, or try Squarespace. There are also  quite popular and easy to use portfolio services such as Krop, Cargo Collective, or Indexhibit.

3. Tell stories

Simply answering questions in rapid succession is a good way to make your interview go fast, but it’s not a good way to get hired. Opening up and telling a story is a good way to avoid awkward silences, and it can usually help you loosen up.

Obviously you shouldn’t just go on about anything; try to think of an interesting story with a past client or project. Maybe it was a  past mistake of yours—maybe something really funny happened to one of your websites—just think of something that can keep people interested for a few minutes.  And while you have their attention (this is important part), make sure you include plenty of details that show your mastery of your craft.  If you’re a UI designer, tell a story about how you solved some crazy e-commerce checkout problem. If you’re print designer, talk about how you fixed a bunch of files with a ridiculous deadline because the client’s printer was a huge problem.

Telling a story allows you to be interesting and intelligent at the same time, which is always a good thing. Plus, a good story can reveal things about you or your work than your interviewer may have never known otherwise.  Remember, those who are hiring you are often not expert recruiters—they’re just trying to get a handle on who you are. They might not always ask the best or most pertinent questions. It’s up to you to make sure they hear everything they need to hear, and stories are a great way guide that conversation. Just don’t talk too long.

4. Care about the company

We already know you enjoy Facebook stalking your friends—here’s where that pays off. Google your potential employer, look through everything in their portfolio, read about their clients, and definitely read their ‘About Us’ section.  Reading about the history of the company can give you a good understanding of their values—and more importantly, the kind of people they’d like to work with.

Ultimately the purpose of an interview is about determining whether or not you’re a good fit. Stalk everyone’s LinkedIn profiles, check out the company’s Yelp rating (if it actually has one), be as creepy as you need to be. Just make sure you don’t walk in only knowing the company’s name. The more you know about what they do, the more you’re able to tailor your conversation to what they’re looking for.

The unfortunate drawback to this step is that after Googling your potential employer for a while, you might find that you do not want to actually work in that environment. This could result in you cancelling your interview, but I would highly suggest going to speak with them anyway.  You never know if a company’s website is a gross misrepresentation of who they are.

(That’s me. You should get those glasses.)

5. Dress like a designer

If you wear a suit, you’re going to feel awfully out of place. You can wear a tie, but only if it’s a really sweet tie that you actually enjoy wearing. If you feel out of your element, this can affect your demeanor, and lead to an awkward interview. Ladies, this means don’t dress like Hillary Clinton… not that I’ve ever seen anyone come in dressed in a pant suit anyway.

Ultimately, it’s all about honesty. Dress like you normally would, talk about real projects, and care about the company if you genuinely like them.  If you’re a talented and cool person, you’ll go far in this industry.

Have any other tips for interviews, or thoughts on the design industry? Leave a comment!

I was contacted by a local college prep school to give some design tips to their students.  The students were in an after school club that produces an annual creative magazine (full of poetry, short stories, and art).

After a quick rundown of my work, I gave six quick tips to improve their design skills. While some are obvious to an advanced designer, this presentation still is full of great tips for anybody looking to improve their work.

Apologies for the audio/video quality, this was shot on a webcam, haha.

What do you think about this video? Leave a comment!

Mo’ Images = Mo’ Problems

My work folder currently has 32,000 files in it. An unbelievable amount of them are images or image related (JPEGS, GIFs, PNGs, PSDs, AIs, etc.). As an interactive designer, I can easily accrue hundreds of images throughout the design (and development) process. While I may let all my local files multiply like rabbits, it’s important not to bring this chaos onto the web. The number of images used in a website design can get wild pretty quickly, so it’s important for us as designers to have a weapon to reign them in, not unlike the Ghostbusters.

What’s a CSS Sprite, Daddy?

Well technically a sprite is just an image.  CSS is then used for separation and reorganization of that image. The sprite itself is generally used to combine many small images into one large image. This is done not only save precious loading time and bandwidth, but also to keep your site structure clean and manageable.

How Image Sprites Save Time

Suppose you have fancy navigation bar on your website, with 8 links. Suppose said links each had a fancy rollover, the kind with that ‘glow’ and ‘twinkle’ that makes your clients drool. In the past (or today if you aren’t yet using the CSS sprite technique) this would require 8 separate images, with another 8 images for the hover state. That’s a total of 16 images for the navigation alone.  That’s 16 files you’d have to create, optimize, name, and save. 16 files you’d have to call in your stylesheet, and upload through FTP. Worst of all, that’s 16 HTTP requests on your server from a visitor. While the images may be very small, each request takes time, and ultimately increases the loading time for your page.

Instead, one could create a sprite showing all of the links with each of their rollover states  as one image. This means one HTTP request. When dealing with dozens of small images, this technique can often cut loading time for images in half.

How the CSS Sprite Technique Keeps it Clean

Here’s some example CSS for 4 links with rollovers. 8 images are called because there is no use of the sprite technique. Each link has its own image, and each link has its own rollover image… these links are greedy.

.link_one {background-image:url(img/link_one.png);}
.link_two {background-image:url(img/link_two.png);}
.link_three {background-image:url(img/link_three.png);}
.link_four {background-image:url(img/link_four.png);}
.link_one:hover {background-image:url(img/link_one_hover.png);}
.link_two:hover {background-image:url(img/link_two_hover.png);}
.link_three:hover {background-image:url(img/link_three_hover.png);}
.link_four:hover {background-image:url(img/link_four_hover.png);}

While that may not seems like a huge problem, imagine if you wanted to change the color of ALL those image links one day.  That’s 8 separate times you’d have to open a file, change a color, and save it. Do this for larger menus, sidebar items, or footer areas, and you’ll quickly have a massive pile of images that you have to maintain. This almost always leads to designers abandoning beneficial changes on their websites because “It’ll take too long!”

Here’s what some of your CSS would look like were you to move all those images into a single sprite:

.link {background-image:url(img/link.png);}

.one {background-position:0px 0px;}
.two {background-position:20px 0px;}
.three {background-position:40px 0px;}
.four {background-position:60px 0px;}
.one:hover {background-position:0px -20px;}
.two:hover {background-position:-20px -20px;}
.three:hover {background-position:-40px -20px;}
.four:hover {background-position:-60px -20px;}

Obviously this is a bit cleaner, but the important takeaway is that if you wanted to edit the look of ALL of these links at once, you could. Simply drop that sprite into Photoshop, re-save, and you’ve fixed them all at once.

Alright, so you understand that it WOULD save you time and energy, but you don’t know how to make a sprite? Who could possibly teach you how to do this on your very own? Perhaps its…

TERRIFIC TUTORIAL TIME!

How to make a CSS sprite based navigation of your very own:

1. Let’s say you want to make a simple navigation with 4 links. We’ll go with the most basic essential links here: ‘Home’, ‘About’, ‘Pterodactyl’, and ‘Contact’. Go ahead and create a quick mockup in Photoshop of some navigation like this, or apply the following steps to your own current web projects.

2. Make sure you have one layer set as the default ‘normal’ state. This is how the links will generally appear in your design. Also create another layer that shows all of the links in their ‘hover’ state. In this case I’ve altered the styling, color, and added an underline. Ideally your link size shouldn’t change (If you’re smart you can technically get away with it, just make sure you give ample space for that growth in the sprite, we’ll touch on that later).

3. We need to single out the navigation now, and make it its own image. You can copy your navigation only, create a new image by hitting Ctrl+N (Cmd+N for Mac Folk), and paste it in. Please note in my example I’ve done a more complex selection around the links, preserving the transparency. You can learn how to do that in my Transparency in .PNGs article, but dragging a simple rectangular selection around your menu items is perfectly fine as well.

4. Double the canvas size of your navigation image by choosing Image > Canvas Size… (Alt+Ctrl+C or Alt+Cmd+C). You can double the height without doing any math by simply checking off ‘Relative’ and increasing the height by 100% (or don’t click it, and increase by 200%, I won’t stop you). Your resulting canvas should now have enough room to paste in your ‘hover’ version below your ‘normal’ version.

5. Uh oh! Remember I said the link size shouldn’t change, and this is why. Adding an underline technically makes the ‘hover’ links a bit taller than the ‘normal’ links. Simply giving room for the bottom underline will cause a huge headache later on in the CSS. We’ll need to add space on the bottom of each row.

6. In this case, adding 3 pixels to the bottom of each row did the trick. If your links have added hover effects, just be sure to include extra space in the sprite so that the corresponding normal link is the same size. That’s true for both horizontal and vertical space.

7. Now you can eliminate the negative space in your image. This slightly decreases your file size, but more importantly it makes the bit of math we’ll do in the CSS much easier. You won’t have to count the pixels in between the margins of your sprite if you simply line everything up next to each other. The amount of background-position shifting will simply equal the width of the previous link! That was the most boring statement to ever warrant an exclamation point.

.______ {
display:block;
height:__px;
background-image:url(______);
margin__:__px;
float:____;
}

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

8. The first CSS class you need to write is your parent class. This is the main class that holds all of the similar properties for your navigation. In my case, all of my links are 24 pixels high with a margin of 24px between them. The margin might not be necessary depending on how you styled your links, but in this scenario a quick ‘margin-left’ will work. The background image will obviously be the same for all of our links (that’s the whole point), and the ‘display’ block is simply used because we will be defining a height and width to each of our links.

.______ {
width:__px;
background-position:__px __px;
}

.home {
width:68px;
background-position:0px 0px;
}

9. The second class you need to write applies to the individual link itself. You’ll need to write one for each link in your navigation, as well as another for each hover state (which we’ll get to in a moment). In this case the ‘home’ link has a width of 68 pixels. The ‘background-position’ refers to the point that the background-image will begin to display from. Since ‘home’ is in the upper-left, both the x-axis (horizontal) and y-axis (vertical) will start at 0 pixels.

.home {
width:68px;
background-position:0px 0px;
}
.about {
width:81px;
background-position:-68px 0px;
}
.pterodactyl {
width:165px;
background-position:-149px 0px;
}
.contact {
width:109px;
background-position:-314px 0px;
}

10. As you can see, all 4 links now have their own widths. You can measure the width of each link with your ruler tool. The key here is that each subsequent link is being shifted by a negative number on the x-axis. On the ‘about’ link, it’s essentially telling the background to start 68 pixels deep into the image (where the ‘about’ link just happens to start in the sprite).

Note: Remember that the background-position is cumulative. You must add the measurement of each previous link each time you enter in the position for the next. In this case 68 pixels and 81 pixels is 149 pixels.  Then the ‘pterodactyl’ link is quite wide, another 165 pixels, meaning our ‘contact’ link’s x-axis position starts at -314 pixels. It’s only addition (or subtraction), but a mistake in one early link will mess up the math for all your subsequent links. So double-check frequently!

.home:hover {
background-position:0px -24px;
}
.about:hover  {
background-position:-68px -24px;
}
.pterodactyl:hover  {
background-position:-149px -24px;
}
.contact:hover  {
background-position:-314px -24px;
}

12. To create a ‘hover’ state for your link, simply copy the class and add ‘:hover’ after the class name. It’s unnecessary to repeat the ‘width’ property. Because all of the hover links are directly under the normal links, the y-axis shift is the same as the link height: 24 pixels. It’s a lot simpler here, as you can just paste that in over and over again.

.nav {
display:block;
height:24px;
background-image:url(img/navsprite.png);
margin-left:24px;
float:left;
}

.home {width:68px;background-position:0px 0px;}
.about {width:81px;background-position:-68px 0px;}
.pterodactyl {width:165px;background-position:-149px 0px;}
.contact {width:109px;background-position:-314px 0px;}

.home:hover {background-position:0px -24px;}
.about:hover {background-position:-68px -24px;}
.pterodactyl:hover  {background-position:-149px -24px;}
.contact:hover  {background-position:-314px -24px;}

13. Here’s the completed CSS for the example. All that’s left is to add the links themselves into the HTML.

<a class="nav home"></a>
<a class="nav about"></a>
<a class="nav pterodactyl"></a>
<a class="nav contact"></a>

14. Simply apply both the parent and child classes to each link. In this case ‘nav’ and ‘home’, or ‘nav’ and ‘pterodactyl’ etc.

You just learned something! Specifically, how the CSS sprite technique works, why it is used, and how to create a slick, efficient navigation out of it. Go get yourself a drink. Or get me one, this baby was looonnng.

Give me your thoughts on this technique in the comments!

1. Use Craigslist

2. Show Old Work

3. Lower Your Rates

4. Offer Discounts

5. Be Shy

6. Do Spec Work

7. Work for Family

Doing work for family members is an easy first step into working with shitty clients. The close relationship or love you may have for your family member allow you to easily get taken advantage of both creatively and financially. You often know each other’s addresses (or may even live in the same house), so details like proposals or contracts aren’t even necessary!  Be careful not to work for a successful entrepreneur in the family (they may end up being a good client).  Ideally you should only work on projects involving their recent idea to launch an ‘e-book’, or something with ‘candle making’.

8. Say Yes to Everything

Last but not least, always say ‘Yes’. Every client, every budget, every revision. Being confident enough to say ‘Yes’ to a bad proposal is a good first step, but don’t stop there!  When confronted with low budgets and endless revisions, always say ‘Yes’ to keep your shitty client happy. This will ensure you an endless network of shitty clients that you can work with in the future!

If for some reason you prefer ‘Good Clients’, check out these links…

Freelance Folder - Ten Characteristics of a Good Client

Clients From Hell - Clients From Hell

Freelance Switch - 12 Breeds of Client and How to Work with Them

Greyscale Gorilla - Seven Rules for Building Online Portfolios

Just Creative Design - Why logo design does not cost $5.00

What do you think?  Leave a comment!

Banding is one of the universal annoyances that every designer has to deal with.  Although it’s certainly more common among web designers, banding has also given plenty of headaches to print designers and photographers. Banding is a newer problem; unique to the digital realm, as old-school methods of photography and publishing weren’t limited to the digital color space. As the problem and its causes have only been recently defined, many designers may lack the techniques necessary to combat this subtle and tricky problem. If you’re not familiar with the term or are sick of reading this sentence, let’s cut to an image.

Some Banding in Action due to Compression:

This is an overly exaggerated example of banding effects on a photo I took.  In the compressed version on the right, the sky doesn’t contain enough blues to portray a smooth transition. This is because the compressed version is trying to save space by limiting the number of colors used.  This actually works really well in the building section of the photograph because our eyes don’t pick up on subtle brightness changes when looking at busy or high-contrast areas. It’s only when the color jumps from “Slightly Light Blue” to “Slightly Less Light Blue” that we really notice.

It’s as if the compression algorithm thought “Hey man, that looks like solid blue. Six colors ought to cover it–done!” Idiot.

While compression is a common cause of banding, it’s important to remember that all digital images share this property of stepping harshly from one color to the next.  Indeed, each pixel is its own little square, not blending with any pixels around it. Fortunately pixels are much too small for our eyes to detect that stepping.  It’s only when compressors force similar areas of color into much larger groups that we pick up on the changes.

Banding with the Gradient Tool:

The gradient on the left side was created by picking two colors and fading them together with Photoshop’s gradient tool. The gradient on the right side only used one color, and simply faded itself from 100% to 0% opacity.  Obviously they both achieve very similar results, and perhaps that’s why most designers may use the techniques interchangeably. If you look very closely, however, the gradient on the right actually shows some harsh stepping from one shade to the next.

Add some levels adjustments, and you can really see the difference:

The good news is that Photoshop’s gradient tool handles gradients pretty well with multiple colors.  Photoshop does the math and immediately rasterizes the outcome.  Through a combination of dithering and subtle noise the fade is rendered pretty smoothly.  You can even hit the levels or curves adjustments later and it looks decent.  The gradient on the right, however, didn’t have two colors that Photoshop could do the math for, so no dithering or noise could be applied.  Without knowing what color it would be fading to, it simply renders the gradient in bands ranging from 100% opacity to 0% opacity.

Noise is the Solution! Sometimes…

The solution that is often thrown about is “Add a bunch of noise dude!”. While it’s true that adding noise to break up the bands is effective, you have to be careful that you aren’t bringing a bazooka to a knife fight. Adding too much noise unnecessarily will degrade your image and take clarity out of your highlights and shadows.

Fix #1 – Use Two Color Gradients

To prevent banding while using Photoshop’s gradient tool, always use at least two colors. Fading a single color to transparency will not yield pretty results.  If you absolutely must fade a color to transparency, make sure the gradient is small, or that the range of color difference in the gradient is high.  It’s the long and subtle gradients that cause problems.

Fix #2 – Use Noise in One Channel

If you’re experiencing banding when compressing or saving your images, you may want to add noise to prevent noticeable stepping.  If you want to do this without harming ALL of your color data try applying noise to only one channel–ideally, the channel where the most banding is occurring.

1. Select the ‘Channels’ tab next to your layers palette.

2. Click on a color channel.  Perhaps red if you have banding in a sunset photo, or blue if there’s banding in a bright blue sky.  Choose whichever channel works best in your situation.

3. Choose Filter > Noise > Add Noise. Check ‘Gaussian’ as the distribution format. Choose 1-2% as the amount, as you can always add more noise later if necessary.

Save your image out as you did before, and ideally this method should have decreased your level of banding.

Fix #3 – Use Noise in Another Layer

If you absolutely need to maintain a lot of integrity in your photo, but still need to remove banding in some area, try adding the noise to its own layer.

1. Create a new layer and fill it with 50% gray.  That’s about #808080 if you’re working in RGB.

2. Place this layer above the image you’re adding noise to. In the layers palette, choose ‘Overlay’ as the blending mode.

3. Add noise to this gray layer, 2-3% should suffice.

You’ll notice that the noise does not affect any very bright or dark areas of your image.  Because the noise is in ‘Overlay’ mode, you’re free to crank up the noise as high as needed, without destroying the quality of your highlights or shadows.

Another benefit to having the noise in its own layer is that you can use your eraser tool to remove noise from areas where it is not needed.  You could even take one step further, creating a complex mask and applying it to the noise layer, giving you full control over which areas are affected.

No More Banding!

Hopefully some of these ideas got rid of your nasty banding issues.  If you have any other tips or tricks to solve this problem, drop me a line in the comments.

Other Resources to Regarding Banding:

Wikipedia – Posterization

Greyscale Gorilla – How to Remove Banding Artifacts in After Effects