If you’re the kind of Photoshop user who primarily opens the software to resize and crop images, you might never touch the Brush tool. However, if you’re in Photoshop day-in and day-out, Brushes are likely to be your best friend. Having as many options as possible will undoubtedly make your life a little better. And if those options are free, then maybe it will be a lot better.
While many brushes emulate real-world artists’ tools, not every single one does so. Dispersion is a free Photoshop brush that gives you the unique effect of shattering (or dispersing) parts of your work. Doing an effect like this by hand would be incredibly time-consuming. But with Dispersion, a few clicks and strokes…and you’re good to go. This particular set comes with 20 high-resolution brushes for pretty much anything that you could want to do with it.
2. Lens Flare
It may have been given a bad rap in pop culture lately because of its overuse in some movies, but lens flare is an effectthat can really take a design to the next level. Using it sparingly and effectively in your designs can give a feeling of peace and calm or even of adventure and excitement just by placing a single flare in a work. Don’t overdo it with this set of 20 high-res brushes, and your work will undoubtedly impress your clients.
Superheroes are everywhere these days, and at some point, a client is going to want a comic- or superhero-themed design. You might as well prepare yourself for that by downloading this 15-brush set, aptly called Comic. There is no way that having this set of brushes won’t save you time and effort.
4. Spray Paint
The creative nerds over at Creative Nerds have put together some delightfully pretty spray paint-themed free Photoshop brushes for you to download. This one does cost you an email address to unlock the freeness, but it’s worth it. While PS does come with some spray brushes, they can be pretty limited. The nerds have done a great job of letting your brush strokes more realistically splatter the digital canvas with the speckles that give real spray paint its allure.
5. Watercolor Splatters
If spray painting isn’t your style, but you really like that abstract look, maybe the Watercolor Splatters 32-brush set will work for you. Even in more specific and detailed work, you can use a splatter brush for accent and distressing.
6. Stone 4
Stone 4 is actually full of 15 free Photoshop brushes. Instead of having to deal with masks and layers to achieve a stone-like finish, wouldn’t you just prefer to press B and pick a brush to do it for you? We certainly would. In terms of a time-saving brush that will certainly improve your quality-of-life, Stone 4 doesn’t disappoint. While some brushes and styles go in and out of trend, having a solid, stone brush that you can turn to never goes out of style. Clients will always need this kind of look to emphasize professional power and authority, so grab these 15 and help empower them. There is also a Stone 1-3, too. Stone 3 is extra pretty, too.
Much like Dispersion at the top of the list, Shattered gives you a fantastic effect that can improve your quality of life and give clients a unique design in much less time than hand-creating every shard. While we generally see this kind of effect in logos and advertising, there are a lot of uses for it in web design that can create some unique page transitions and effects. And at least with this broken glass, you don’t have to worry about cutting your fingers.
8. Smoke Brushes
Smoke is one of those elements that you can use in pretty much any design for any reason, and it would fit. So grabbing Smoke Brushes is a no-brainer, we think. Whether you’re enhancing the mystique of an evening’s photoshoot, giving website users a tour of mystery, or adding wispy whimsy to lettering or illustration, this set of free Photoshop brushes will be right at home in any designer’s toolbox.
Retro technology is everywhere right now. What is old is new again, and what is new again at this moment is ’80s-style technology. And while for its day, the tech was amazing, we’ve come to associate the occasional fuzzy screen and flicker or glitch with the time period as well. Because it’s so trendy and popular, keeping a few brushes to emulate the glitches of decades past would not be a bad idea. In fact, it would be a good one. Additionally, this isn’t the only set of Glitch brushes available. As you scroll down the page for this particular set, you will find over a dozen variants in the series to create whatever kind of computer problems or corruption your clients might need.
In life, glitter can be a pain. While it’s gorgeous and adds sparkle to literally anything, that sparkle is sometimes
hardimpossible to get rid of. Not true in the digital realm, where you can add as much glitter to your designs as you or your clients want. This is the one time that it’s okay to glitterbomb someone or something. There’s no clean up required, and there won’t be any tiny pieces stuck to places you don’t want. With these fabulous free Photoshop brushes, any design you create will shine as bright as you can imagine.
When designing for the web, you have to keep one thing in mind at all times: readability. It doesn’t matter how great the design is, how gorgeous your layout is, or how genius your use of color. If people can’t read the words on the screen (and this is assuming there are words on the screen, of course), the website cannot serve its function. Three of the most important elements of readability for text are kerning, tracking, and leading, though many people either get them confused or simply don’t understand how to use them effectively. We intend to fix that today.
Kerning, Tracking, and Leading
If you boil these three down to the absolute fundamentals, you’re looking at the spacing between characters on both the X and Y axes. Digging in, you’ll see there’s more to it than that, but in essence, you’re looking at the relationship between text characters. It’s important to understand the relationship between these three attributes because good design and readability depend on your using them to the best of your ability.
And that comes with time and practice. But once you start paying attention to them, you’ll notice how kerning, tracking, and leading are used both effectively and poorly on everything you read and see on a daily basis. Let’s dig in.
Adjusting Kerning, Leading, and Tracking (and More!)
Actually, before we dig in, let’s go over how you change and adjust these settings. While most word processing programs have options for adjusting them, most people won’t ever need to when writing copy or typical text. It’s when you’re designing text that it becomes more of an issue, so programs like Photoshop, Illustrator, etc. will have the options you need most.
In the Adobe products, you just have to open up the Text Layer Character Panel, and you have everything you need. The V/A is kerning, the VA in a box is tracking, and the underlined, vertical A’s are Leading. You can also adjust strikethrough, weight, size, super/subscript, and so much more in this panel. It’s worth getting used to keeping this open.
Just place your cursor where you need to adjust the spacing and go.
What is Kerning?
Let’s begin with kerning. Kerning is the simplest of the three, really. It’s the space between two side-by-side characters. In a word, you can have variable kerning because the space between the first two letters may be different than between the last two (and so on).
In monospaced fonts, each character takes up exactly the same amount of horizontal space with no overlap. The A is the same width as the B as the J as the K. Adjusting the kerning between these letters tends to be easier than variable spaced fonts, where the letters might overlap as well as print at different widths.
In the example above, we have three lines that were copy and pasted using the monospace font Courier New. The top row’s kerning is set at 0, which is the default and uses whatever spacing the font designer chose. The second row is set equally between letters (and spaces) at 200. As you can see, the spaces are uniform between characters across the line. Finally, the third line was kerned at random with both positive and negative spacing within each individual word. As you can see, each character can have different kerning on each side.
What is Tracking?
Tracking is similar to kerning, but it’s not kerning. Where kerning is the space between two individual characters, tracking is the uniform space between each individual word or line. Instead of worrying about how things are put together on a letter-by-letter basis as with kerning, you make sure the entire line is uniformly spaced. Looking back at the earlier example image, the second line could have been done in a much easier way.
What I did for the kerning was to place my cursor between each individual character and adjust to 200. I essentially tracked the whole line. Which is what you should do. Simply highlight what you need to track and adjust it in the Character Panel.
Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.
Handwriting fonts and cursive typefaces are set with specific kerning, and if you adjust the tracking, you will get gaps in an otherwise unbroken line. Or going the other direction to compress the lines, you might simply make the script unreadable.
What is Leading?
With Leading, you’re no longer dealing with spacing between characters. Leading is the space between lines.
Effectively making use of leading lets you effectively make use of whitespace in your designs. Cramped lines — even with correct and well-done kerning/tracking — can make a miserable experience for readers.
In some places, you might see leading called line height, but they’re roughly the same thing. One good rule of thumb is to make sure that you leave at least a little space above and below your characters. As you can see in the top example, a 40px font has a 48px line height. That means that no matter what, there will be spacing between the letters. If you set that at or lower than the font size, you will get character overlap.
Additionally, this is the height of the line that the characters sit on. This is not the height of the character. Just as kerning and tracking don’t make the characters fatter or thinner, tracking doesn’t make them shorter or taller. It is simply the space around them.
As you can see, however, the options under the kerning/tracking in the Photoshop Character Panel adjust the width/height of characters independently of kerning, tracking, and leading.
Photoshop/Illustrator Keyboard Shortcuts
The only downfall of the Character Panel is that it gets to be pretty annoying when you’re needing fine adjustment. Thankfully, there are keyboard shortcuts that make kerning, tracking, and leading an absolute breeze to use.
These shortcuts are for the Adobe Creative Cloud suite, so they might be different in Gimp or Paint.NET or another program.
- Kerning – With the cursor between two characters, hold ALT (or Option on Mac) and use the left/right arrows to adjust the kerning
- Tracking – With the word/line highlighted, hold ALT (or Option on Mac) and use the right/left arrows to adjust the tracking of the highlighted text
- Leading – Highlight the lines you want to adjust, hold ALT (or Option on Mac) and use the up/down arrows to adjust the space between lines
While you can place your cursor or highlight the text and type values into the Character Panel, the keyboard shortcuts make the whole process much less tedious and time-consuming. Plus, you get more granular control, so you can make better designs that way, too.
(As an aside, if you aren’t using Photoshop/Illustrator/Premier, etc. keyboard shortcuts regularly, we highly recommend learning, as it makes your workflow much smoother, more enjoyable, and more productive, too.)
Kerning, tracking, and leading are fundamentals of readable text in web design (and design in general). Learning the difference and how to use each of them effectively will make you a much better designer. It may seem a little odd that something as simple as the spacing between letters and lines could have such a large impact, but once you deal with it for even just a little while, you will never look at websites, advertisements, logos, or billboards the same way again.