I’ll show you a quick way to make a software screenshot more interesting, how to create awesome vector grunge textures and a super fast way to build a vector starburst.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Breakout Screenshot

When you’re designing a website for a web or desktop app, you’ll inevitably end up incorporating a few screenshots into your design, which is great because they make for attractive graphics that are super easy to create. Simply bring up the app on your attractive but minimal desktop, hit a keyboard shortcut, add some text and you’re done!

This is definitely a beautifully simple way to create artwork for a website, but it’s worth the extra effort to put some thought into how you can go further and make the graphic even more interesting.

One super simple way to do this is to have the screenshot exceed the boundaries of the background image. This quick and easy trick makes your design seem more alive and layered.

Now, the long and difficult way to perform this trick would be to mask out part of the background on your screenshot, but that’s a real pain. It’s far easier to simply create a transparent PNG of your app window that contains no background, which you can then place over anything you want in Photoshop.

To do this on a Mac, hit Command+Shift+4 to bring up the crosshairs that will let you take a screenshot of a selected area. Then place your cursor over the app window and hit the Space bar. The crosshairs should transform into a camera icon and the window you’re hovering over should be highlighted. Simply click to create a file on your desktop containing that window and its shadow on a transparent background. Windows users can follow these steps for snapping a window screenshot.

Once you’ve taken the screenshot of the window, then grab a background to place it on and open them both in Photoshop.

From here, it’s easy to crop the background so that the screenshot peeks out of it. Notice that I took the opposite route on the bottom of the screenshot, which is tucked into the background image.

In The Wild

This trick is very common in web design right now and can be seen on any number of desktop software and web app sites. One shining example is the current Sparrow for Mac website.

Easy Illustrator Starburst

I hesitate to teach you this trick simply because I generally hate starbursts in design. However, I will accept that there are in fact some legitimately cool uses for them. More importantly, I know a pretty cool trick for making them that I love to show off.

To start, open up Illustrator and draw a circle. Then set the circle’s stroke to a dashed line. The parameters don’t matter too much at this point, just make sure you have something that looks approximately like this:

Here comes the fun part. Take the stroke weight on your circle and crank it way beyond anything logical (into the hundreds). Finally, set your first dash and gap values to be identical. The result is a nice perfect starburst.

The awesome part is that this trick gives you full control over the width of the lines and gaps. Here’s a slightly tweaked example that’s a little more spread out.

Take it even further and add some random values to some of the other dash and gap spaces. This will start to give you some really creative results, here’s a nice little pattern that reminds me of a peppermint.

Expand It

Now, working with a funky stroked item like this in the long term will get messy so once you decide on your general shape and patter, I recommend going to Object>Flatten Transparency. This will give you a nice, expanded vector starburst that looks like you built it the hard way (outline stroke gives some weird results). Just be sure to delete the original circle’s stroke to keep things clean.

Grungy Vector Textures

Photographic grunge textures are easy to come by, vector grunge textures, not so much. Fortunately, it’s fairly easy to create the latter through the use of the former.

Let’s start with by hitting up Flickr Creative Commons to find a decent grunge texture. Here is a great one from D. Sharon Pruitt.

Now, I intentionally picked this one because it contains light scratches on a dark background, which seems like it would be much harder to work with but really isn’t at all.

Open up the texture in Photoshop, hit Command+I to inverse the colors and suddenly you’ll have a nice white background with black scratches. Then use a basic Levels adjustment to bring up the whites and down the blacks. The result should look something like this:

Now save the image out as a JPG and open it up into illustrator. From here, we have some really basic shapes that can be Auto Traced with relative accuracy. Run the Auto Trace command and set your parameters to something like those shown below. One critical step here is to make sure you click the “ignore white” command so that Illustrator only traces the black parts.

From here you simply hit the “Expand” button in the menu bar. This will give you 100% scaleable and easily applicable grunge scratches.

We can combine this trick with the last one and we have an awesome retro piece of vector artwork. Pretty cool!

Conclusion

These quick tip posts are meant to expand your bag of tricks so that you have a larger pool of ideas to pull from on your next design project. I hope you’ve learned a thing or two and have been inspired to come up with your own unique ideas based on the information above.

Leave a comment below and let us know about any techniques you’ve seen around the web but aren’t quite sure how to replicate. We’ll take a look and see if we can help in the next design tricks post.

Kerning is fun! All right, unless you’re a serious type nerd like me, that’s definitely not going to be a true statement. However, it is an absolutely essential part of your typographical education and implementation.

If you’ve been ignoring kerning or simply aren’t sure how to do it properly, take a look at these eight quick tips and get started on the road to becoming a kerning master.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Introduction

The past few years have seen an explosion of type on the web. It used to be the case that web designers were faulted for not having a strong sense of typography, but nothing could be further from the truth these days as web designers lead the art of typography to new heights of popularity and respect.

Designers have a newfound appreciation for both typographic art and the practical ways in which typography complements and even drives a strong design.

There’s still at least one major topic that web designers tend to miss out on though: kerning. The truth is, kerning on the web is still a nightmare. There are a few options for making the task easier but on the whole, we just sort of ignore it.

As a result, many web designers neither think about kerning nor do they really even understand how it works on a fundamental level. Fortunately, it’s not rocket science. The largest factor involved in learning to kern type is to make yourself aware that it often needs to be done. Below we’ll go over some basic and useful tricks to get you started.

#1 What Is Kerning? Think About Blocks

The first thing you should know about kerning is, well, what exactly it is. There are a lot of funny sounding typographical terms and it’s easy to get confused quickly so it’s necessary to make sure we’re all on the same page.

Once upon a time, there were no computers. Type was set, get this, by hand. It’s a crazy concept but believe it or not, the process of bringing a design to life used to be a pretty laborious task, unlike the cushy desk jobs that we now all enjoy.

Back then individuals letters were set onto physical blocks made of wood or metal. Obviously, the nature of the blocks meant that you could only squish two letters together so far, to the point where their edges hit. As a solution to the problem, typographers created sets of notched blocks that fit together like puzzle pieces, thus allowing the letters to move closer to one another when needed.

Photo credit: Joel Gillman

The reason that I tell you this is that it gives you something real to picture when you think about kerning. This helps you remember what it is and distinguish it from other typographical terms. Now when you hear the word “kerning,” you’ll picture woodblocks with notches in them and remember how it works.

Obviously, these days the art of manual typesetting is a novelty. Instead, this is all handled in the digital realm, right on your computer screen. However, the core concept here is identical. Kerning still refers to the adjustment of space between two letters.

The goal is simple: to equalize the appearance of the whitespace between letters. This gets tricky because you really have to feel it out. Sometimes uniform spacing between letters won’t look like uniform spacing and you have to tweak and tweak until the word looks like you think it should. There’s really no magic formula, you just have to eyeball it and decide what looks right.

#2 Kerning ≠ Tracking

One thing that trips up most new designers is the difference between kerning and tracking. Don’t make the mistake of mixing these two terms up, old school print designers love to point and laugh at people who do that.

The difference between the two is simple: tracking refers to the uniform spacing between all the letters in a given selection of text and kerning refers to the spacing between two specific letters.

Leading

Now, to add even more confusion to this equation, we can throw leading into the mix. Leading (“led-ing”) is the vertical space between lines of type. In CSS we use a similar adjustment called “line-height”.

In The Type Palette

While we’re on the topic of adjusting all of these values, here’s a quick reference so you know how to spot them in Photoshop, Illustrator or InDesign.

Note that the “Option” key (Alt) is your best friend when adjusting any of these, in conjunction with the arrow keys of course. Which one it adjusts depends on your selection and cursor. Place the cursor between two letters and Option+Left/Right adjusts kerning, or with a larger text selection the same commands adjust tracking. Similarly, Option+Up/Down with a text selection will adjust leading.

#3 Letters to Watch

Once you start making it a regular practice to kern your headlines and other important type, you’ll notice that certain letters are more problematic than others.

To get a feel for how this works, let’s open up Photoshop, set our kerning to “0″ and type a few words with Times. These results haven’t been tweaked by me at all, they’re genuinely this horrid right out of the software.

All caps type definitely tends to be quite problematic so as a rule of thumb keep a close eye on it. However, we find similar problems when we start mixing uppercase and lowercase letters.

Looking at this, we see a pattern start to emerge. In general, the less a letter conforms to a block shape, the more problematic it becomes. Letters with strong slants like the uppercase “A” and “W” are bound to case some issues, whether they’re mixed with uppercase or lowercase letters. Also, notice how the overhanging bar on the “T” and the arm on the “Y” cause problems when used as initial caps. Here, the lowercase letters that follow are being spaced relative to their block outline, but we need to notch the blocks just like the old typographers:

You can find big lists of specific letters to watch, but as a rule of thumb, I generally keep a close eye on letters with diagonal lines like “A” and instances of initial caps (especially when a “T” is involved), no matter what the pairings. Also, though lowercase letters tend to play fairly nicely together, you’re not off the hook with them. Notice the how the “ly” in the example above differs greatly from the “ry” spacing.

#4 Kern Upside Down

The reason kerning is so easy to miss is because your eyes tend to ignore the spacing in pursuit of reading the word or sentence. After decades of reading, adults don’t see letters anymore, we see words.

To help account for this, some designers suggest the simple trick of flipping your type upside down before kerning. It’s a brilliantly simple technique that really helps you focus on the letter shapes and how they fit together instead of getting distracted by the words.

#5 Don’t Kern Before You Decide on a Font

Obviously, letter spacing is going to differ drastically on a font to font basis. On a practical level this means your process should be to choose a font first, then kern.

Easy right? We tend to forget this step though when we change our mind on a font at the last minute. At this point, you can’t bank on the kerning that you’ve already done but instead have to pretty much start from square one and treat each font as unique.

#6 Watch Word Spacing

We’ve discussed tracking, leading and kerning but there’s one more area of typography spacing that you really have to watch out for: the spacing between two words. This essentially boils down to the size of a “space” in a font.

One thing that has really been bugging me lately about free fonts is how many of them tend to have really awkward amounts of space between words.

In general, kerning in free fonts can be a pretty bad, but the word spacing tends to be a specific problematic point that you want to keep an eye on. A font with really poor word spacing becomes super high maintenance when you start actually working with it so it’s best to use them sparingly or avoid them altogether.

#7 Don’t Trust the Software

As I outlined in a recent article on general typography tips, Photoshop and Illustrator have a few built in auto-kerning modes. These are great to use, but use them in conjunction with manual kerning, they’re simply not smart enough to handle the task on their own.

#8 Use Kern.js to Kern Online

All of these tips are great if you’re designing for print or turning your headline into an image, but what about live web type? As I mentioned above, kerning on the web is a pain and many designers suggest just living with poor kerning where web type is concerned. However, recently some great JavaScript tools have been created to make the job a little easier. One of the best I’ve seen thus far is Kern.js, an extension of the excellent Lettering.js.

Conclusion

To sum up, kerning isn’t the hardest thing you’ll ever do in design, but it can get a little tedious and tends to be something that you flat out forget to do.

Make it a point to keep kerning in mind and to always analyze your letter spacing. Sixty seconds of kerning on every headline you create will improve your typographical competence by leaps and bounds.

Title photo credit: katietower.

This article contains several tips and examples to help you create an amazing single page portfolio.

Pictures Speak Louder than Words

Unless you want to showcase your copywriting skills, focus more on showing off your work than conveying your life history. Displaying only one or two designs can leave potential clients wondering how much experience you really have. Feel free to pull out all the stops and display everything you’re proud of creating.

Use Social Media To Encourage Personal Contact

Giving social media links prime real estate on your page encourages visitors to make lasting connections with you. This can have several benefits. First, repeated contact builds familiarity and makes you more approachable if the person ever finds themselves in need of a designer. It also have the viral effect of granting you visibility to their other friends and professional connections.

Contrast Is Your Friend

Creative use of contrast will emphasize the beauty of your work. The website above takes bottle designs we see everyday and transforms them into stunning portfolio pieces by making the bottles the most visually appealing item on an otherwise plain page. They could’ve just as easily placed the bottles in their natural environments but the effect would not have been as powerful.

Side Scrolling

Don’t be afraid to break the mold of a vertically scrolling site. Side scrolling sites like “We Shoot Bottles” from the previous example can provide an unexpected and welcome impression of creativity. However, keep in mind that users will expect a vertically scrolling site so it’s often a good idea to include arrows and/or instructions to help them along the way. Also be sure to consider popular screen sizes when creating a side scrolling site. The site above did not fit well on my laptop’s 13″ screen and left me scrolling both vertically and horizontally in an awkward scavenger hunt to discover all of the content.

Themes are Cool

Consider using a theme as a creative method of tying disparate content together. The site above displays a portfolio of unrelated iPhone apps spanning multiple categories. This is ingeniously pulled off through the illusion of a sushi menu, which has nothing to do with any of their apps but makes for a familiar, easy to read format supported by attractive visuals.

One Page, Lots of Content

jQuery makes it extremely easy to cram multiple pages of information and graphics into a single page layout. Bite-sized content presented in a click-to-proceed manner can add an interactive feel not found through scrolling and gives the creator greater control over the viewer experience.

Make Contact Effortless

Single page sites can be tricky. You need to convey who you are, what you do and how to you can be reached in as succinct a manner as possible. Contact information and means can quickly get lost in the heap of content or take a back seat to “more important stuff”. However, if making new contacts is your primary goal for the site, then that should be reflected in the layout of the page. Notice how important the “get an estimate” button is in the layout of the site above. This immediately conveys that the site owner is eager to take on new customers and will be open and forward regarding cost (a characteristic many designers lack). Considering cost is often the among the most important concerns of your potential clients, this openness can be an important competitive advantage.

Travelling Navigation

If your single page portfolio contains enough content to require lots of scrolling, consider using a navigation menu that stays with the user as they scroll and provides shortcuts to specific sections. Visit Alamofire above and click on one of the tabs in the top right of the page to see this technique put into practice.

Always Consider Your Target Audience

Think about the two contrasting examples above. Personally, I love the first. It’s crazy, unique and contains beautiful comic book illustrations (what’s not to love?). However, there are a lot of potential clients who wouldn’t give a second look at this site because it isn’t itself a display of what they would like. The second example, though still very attractive, is fairly boring by comparison. However, a serious professional might spend more time on this site than the one before it. So which is better? The answer, of course, is neither. When designing your portfolio you should consider what type of clients you desire to impress and therefore earn. There are a ton of businesses looking for serious, professional designers but there might be just as many looking for someone fun and creative that thinks outside the box and isn’t afraid to be original.

Putting Your Best Foot Forward

Think about what makes you unique as a designer. Put more practically, why would someone hire you instead of the million other designers screaming for their attention online? Don’t be afraid to list your huge skill set, but focus on one or two things that you do best and convey those ideas visually. The site above is for a team of web designers and programmers. However, their site and the examples featured on their site communicate one idea stronger than the rest: illustration. Like the comic book art in the previous example, these guys want you to know that they can create beautifully colorful, custom illustrations for your brand. This sets them apart from a huge portion of web designers that are limited to stock art due to their shortcomings as artists. So whether your strongest talent resides in pretty pictures, amazing typography or clean code, scream it loud and proud on your portfolio.

Inspiration

Want to see more examples of great single page portfolios? Here’s where I started:

• 95 Fresh Examples Of Single Page Website Designs
• 25 Beautiful One Page Portfolio Websites of Designers on Twitter
• Single-Page Portfolio Sites

Conclusion

I hope these ten tips have inspired you to create an amazing single page portfolio (or to revise your current one). Use the comments below and send us links to portfolios you find inspiring, whether they belong to you or someone else.