vmc communications, llctaxi farevmc communications, llc
Select Page
How to Reduce the Size of JPEG and Other Image Files

How to Reduce the Size of JPEG and Other Image Files

The images you use on your website are one of the most important elements. Not only do you want to have visually compelling imagery, but you also don’t want those images to be so large that they slow down the load time for your site. One of the main reasons a site will lag is because the images included in it have not been resized for optimal site performance.

In this article, we will explore manual methods for reducing image sizes in Photoshop including changing the file type, resizing, and compressing files using the Save for Web function. If those looking for something more automated, we’ll also look at some plugins and web-based options.

Changing The File Type

“File Size” for an image file refers to the number of pixels per inch. Generally, the more pixels per inch, the more information the file holds, thus, the bigger its size.

The two most common file types for images are JPG and PNG.

  • PNG – Portable Network Graphics  – This file type is mostly used for graphic files like logos, icons, illustrations, and text. When edited in a photo editing application like Photoshop, these files don’t lose much data when you manipulate or compress them. They are referred to as “lossless” for this reason. These files tend to be bigger in size for this reason.
  • JPEG – Joint Photographic Experts Group – This is the most common file type you’ll find for most images on the internet. This file type can manage millions of colors, can be highly compressed while preserving quality. These are referred to as “lossy” because the process of compressing them removes pixels from the image.

Either file type can work. Which one you choose really depends on your site, the number and type of photos you choose to use.

Here is a sample photo. Its original format was as a JPG file.

I used the File>Save As command in Photoshop and chose the PNG format and completed the save function.

When I changed the file type, the size of the file went from 646 MB to 1.3 KB. As noted above, PNG files are typically larger, so for this type of picture with a lot of color and detail, you may be better off staying with the JPEG version to ensure faster load times. If you know your image needs to be able to scale larger without losing resolution, go with the PNG version.

Note that there are many other file formats available. I’ve focused on JPEG and PNG because they are the most popular.

Manual Resizing in Photoshop

In Photoshop, you can use the Image>Image Size function to manually resize your image. The tool looks like this:

reducing file size in photoshop

You can see the current Image Size and pixel Dimensions are noted at the top of the tool. Any adjustments you make here will change the size.

Fit To is a drop-down list that has preset sizes and pixel settings.

resizing image files in photoshop

If I choose the first option in that list to adjust the dimensions and pixels per in (ppi) I can see how the file size will change.

resizing image files in photoshop

You can experiment with these settings to determine whether a standard size from the drop-down will work, or if you need to manually change the width, height, or resolution options to get the size you need.

Save for Web Function

Save for Web is different from Save As in that the web option removes metadata (details about the type and origin of the image) from the file before saving. This function is specifically meant for images that will display on the internet, so it can be a very fast way to resize while maintaining quality.

Find the Save for Web option by navigating to File>Export> Save for Web:

resizing images in photoshop

When the Save for Web window opens, you’ll notice another benefit of this function. If you select the 2-up tab at the top, you can see a comparison of the original image side-by-side with the changed image.

resizing images in photoshop

From here, use the presets in the upper-right corner to choose the JPG format and adjust the quality as you wish. After you make changes, you can see whether or not your new file is up to your quality standards via the image preview, and you can validate the change in file size by looking at the data under each image:

Note that you can also change the size by using the width and height fields in the lower right corner. Because this article is specifically looking at resizing, we aren’t covering the other options shown in the Save for Web screen, but you can read here for more detailed information.

WordPress Image Optimization Tools

Photoshop is a great option if you like to turn the dials yourself to reduce image file size yourself. If you are looking for something more automated to help with resizing your images, there are a good number of WordPress plugin options that can help. Here’s a list of a few popular options and a brief description of their benefits:

Imagify – Optimize all your images in one go, resize with ease and restore photos to their original versions when needed. It’s affordable too. This plugin is free to download and includes 20 MB of file space. Other options are $5 per month for 500MB and $10 per month for unlimited space.

ShortPixel – No file size limit and one API key for multiple sites allow for great utilization for this plugin. They also offer one-time and monthly plans for budget flexibility.

Optimole – For the data-oriented, Optimole offers a dashboard where you can review optimization stats. Their free plan allows for 5,000 visitors per month and unlimited bandwidth.

For a more complete comparison of these options and a handful of others, see this article.

Web Resources for Image Optimization

If you’re in a pinch for time and/or money, there are plenty of free online image optimization tools.

Compressjpg allows you to upload multiple files and resize them all at once. It also has a feature that will convert iPhone HEIC format photos to JPEG. Other similar sites are Tinypng well as Image Compressor.

Canva Pro is another popular site that not only resizes but also allows you to design and animate images, as well as format them for web or social media use. Its layout is intuitive and easy to use.

Wrapping Up

Don’t underestimate the importance of optimizing your images. Slow sites not only turn off viewers, they don’t get traction on Google search either.  Fast-loading, sharp images can provide that little extra something that sets your site apart from the rest. An optimized site will keep visitors coming back for more.

Netflix drops official trailer for highly-anticipated “Breaking Bad” movie

Netflix drops official trailer for highly-anticipated “Breaking Bad” movie

Netflix released the first official trailer for the long-awaited “Breaking Bad” movie Tuesday after giving fans a sneak peak during the Emmy Awards on Sunday. The movie will pick up right where the series finale left off six years ago — and Aaron Paul’s character Jesse Pinkman is looking for revenge.

AMC’s hit drama ended in 2013 after wanted drug kingpin Walter White, played by Bryan Cranston, rescued Pinkman from the hideout of a white supremacist gang where he was being held captive and forced to make meth. Audiences last saw Pinkman crashing through the gates of the complex and cheering his newfound freedom.

But, a very different Pinkman greets fans in the brand new trailer for “El Camino: A Breaking Bad Movie.”

Movies More 

The antihero is first seen hunkering down in a car as police sirens wail by before he knocks on the door of his friend Skinny Pete, portrayed by Charles Baker. Pete appears to take him in, as the exhausted Pinkman is seen sleeping and washing up before staring out a sun drenched window. Pinkman’s old friend Badger, played by Matthew Lee Jones, also makes an appearance.

The second half of the trailer shows Pinkman traveling and preparing to take revenge upon an unseen villain, who in the last shot simply says, “You ready?” as the men appear to be engaged in an old-fashioned standoff.

“Yeah,” Pinkman replies, before the trailer cuts to black.

White, who died in the show’s finale, is notably absent in the trailer. However, speaking in a radio interview in November, Cranston said he would “absolutely” reprise his role as White in a potential movie. Only time will tell if the “one who knocks” will make one last appearance.

The movie, directed by “Breaking Bad” showrunner Vince Gilligan, will drop on Netflix and theaters in 68 cities on October 11, reports The Hollywood Reporter. It will also air on AMC early next year.

See the full trailer below:

http://vmccom-com.stackstaging.com/shop/breaking-bad/los-pollos-hermano-lunch-bags/ Los Pollos Hermanos Bags were designed to match the bags on the tv series Breaking Bad starting Walter White. Having a party, why not impress your family and friends and hand this one of a kind bags with some goodies. Holds up to 4-lbs. 5″ x 3″ x 10.5 “. The artwork is printed directly on the bags.

10 Beautiful Free Photoshop Brushes for Your Web Design Projects

10 Beautiful Free Photoshop Brushes for Your Web Design Projects

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.

1. Dispersion

Free Photoshop Brushes

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.

More Information

2. Lens Flare

Free Photoshop Brushes

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.

More Information

3. Comic

Free Photoshop Brushes

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.

More Information

4. Spray Paint

Free Photoshop Brushes

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.

More Information

5. Watercolor Splatters

Free Photoshop Brushes

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.

More Information

6. Stone 4

Free Photoshop Brushes

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.

More Information

7. Shattered

Free Photoshop Brushes

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.

More Information

8. Smoke Brushes

Free Photoshop 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.

More Information

9. Glitch

Free Photoshop Brushes

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.

More Information

10. Glitter

Free Photoshop Brushes

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.

More Information

The Golden Ratio

The Golden Ratio

The Ultimate Guide to Understanding and Using
“The Golden Ratio”.

Designers everywhere should know about the Golden Ratio. It is a mathematical ratio that creates aesthetically pleasing designs. Since the Golden Ratio exists so frequently in nature, it’s not a surprise that its results are natural-looking.

Golden Ratio
Golden Ratio

Photo by Bogomil Mihaylov on Unsplash

The Golden Ratio goes by several other names, too:

  • Divine Proportion
  • Golden Mean
  • Golden Section
  • Phi (Greek letter)

The Math Behind the Golden Ratio

I’m going to explain the Golden Ratio’s math as simply as possible and without going into the details you don’t actually need to know. If you can keep up with the math, great. But if you can’t, that’s okay – you’ll still be able to use the concept in your designs.

To understand the Golden Ratio, you have to first understand the Golden Rectangle

The Golden Rectangle is a large rectangle that has a square inside it. The sides of the square are equal to the shortest length of the rectangle:

Golden Ratio

Source: Wikipedia

The Golden Ratio is a number that’s (kind of) equal to 1.618, just like pi is approximately equal to 3.14, but not exactly.

You take a line and divide it into two parts – a long part (a) and a short part (b). The entire length (a + b) divided by (a) is equal to (a) divided by (b). And both of those numbers equal 1.618. So, (a + b) divided by (a) equals 1.618, and (a) divided by (b) also equals 1.618.

Back to the Golden Rectangle, because it’s so much easier to understand

When you place a square inside the rectangle, it creates another, smaller rectangle. Ignore the black lines and look at the red and green boxes:

Golden Ratio

The red square has four sides equal in length, and that length is equal to the shortest length of the rectangle. By sectioning off that square, you automatically create another, smaller rectangle (outlined in green). Together, they create a complete Golden Ratio layout and a base for the Golden Spiral.

You can also make a new Golden Rectangle out of the smaller rectangle, like this one I’ve outlined in blue:

Golden Ratio

A traditional Golden Ratio diagram has eight Golden Rectangles:

Golden Ratio

And here’s the smallest Golden Rectangle, #8:

Golden Ratio

If you start in the bottom left and make an arch to connect the far side of each square-and-small-rectangle cross section, you’ll get the Golden Spiral.

The Fibonacci Sequence

The Fibonacci Sequence is pretty simple to understand: you start with zero and 1, then get the next number by adding up the two numbers before it. 0 + 1 = 1, then 1 + 1 = 2, etc. The first few numbers in the sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

If you use those numbers to create squares with those widths, you can pretty much create a Golden Spiral:

Golden Ratio

Source: Math is Fun

The Golden Circles

Sometimes, you’ll see circles drawn in the squares instead of or in addition to the spiral. If you draw perfect circles in the boxes of the Golden Ratio overlay, they’ll have the 1:1.618 ratio with one adjacent circle.

Golden Ratio

Source: Limelight Department

The Pepsi and Twitter logos use the Golden Circles:

Golden Ratio

Source: Hybrid Talks

You’ve Seen This Before, A Lot

Nature is full of the Golden Ratio. It’s in flora, shells, weather…

Golden Ratio

Source: Photo by Annie Spratt on Unsplash

Golden Ratio

Source: Photo by NASA on Unsplash

And because we see it so often, our brains prefer it. That innate attraction is why it’s such a powerful layout for designers to use.

The Golden Ratio in Art and Design

Sometimes the Golden Ratio super easy to recognize:

Golden Ratio

Source: staceysdetailinginc.com

Sometimes you go, “I have no idea what you’re talking about… oh wait. Now I see it. I think.”

Golden Ratio

Source: Marketing Insiders

Other times you could go crazy looking at it…

Golden Ratio

Source: Widewalls

…but if you zero in on the main Golden Rectangle, it becomes a little more clear:

Golden Ratio

Let’s take a look at a commonly-referenced example: the Parthenon

Golden Ratio

Source: Creative Bloq

At first, you might see this and go, “That just looks symmetrical to me. How does what I’m looking at fit into that Golden Rectangle Spiral thing?”

The Golden Ratio isn’t about how each part of a design fits completely and only into the specific sections. If that was the point, the right side of the Parthenon would be one big block and the left side would be sectioned into smaller blocks.

Instead, the ratio is used to create harmony and proportion, and that can be interpreted in a few different ways.

While the Golden Ratio is grounded in math, it can be adapted in creative ways. In the case of the Parthenon, the Golden Ratio determines the height and placement of design components. Plus, there are a number of ways to lay Golden Ratio diagrams over it:

Golden Ratio

Source: Archinect

Golden Ratio

Source: Esther Sugihto on Medium

Golden Ratio

Source: GoldenNumber.net

The Golden Ratio and Website Design

Whether you’re into math or your head’s about to explode, the Golden Ratio is a bit easier to understand in terms of design. You’ve done the heavy lifting. Now it’s time to take the basic overlay and make your web components perfectly pleasing.

The Golden Ratio and Layout

If you want a perfect Golden Ratio layout, set the dimensions to 1:1.618. For example, you can set the width to 960 pixels and the height to 594 pixels. The Golden Rectangle is 594 pixels on each side and the rectangle takes up the rest of the layout (594 x 366).

Calculator Soup has a helpful Golden Ratio calculator where you can set any term (A, B or A + B) to find the correct Golden Ratio values.

Or, you can simply use this type of two-column layout, where one column is quite a bit wider than the other column. It’s organized and clearly shows hierarchy.

Golden Ratio

Source: National Geographic

The Golden Ratio and Spacing

The Golden Ratio can help you determine where to place elements of your design, the proportions to use and where to leave negative space. Here’s a simple example, and you can almost see the Golden Ratio overlay without even having to put it on top:

Golden Ratio

Source: Digiarts 2011

Here’s what it looks like when I apply the Golden Spiral in Photoshop:

Golden Ratio

Again, the Golden Ratio is grounded in math, but when it comes to applying it to design, it’s not perfect. That design isn’t created on a Golden Rectangle, so the Golden Spiral is out of normal proportions. However, you can see how it can guide a designer to choose where to put the largest element of the design, as well as the smallest elements and negative space.

You can also layer the Golden Ratio overlay to apply it to different elements of the same design:

Golden Ratio

Source: Branding by Lemongraphic. Example from Canva.

The Golden Ratio and Content

When you think about the Golden Ratio’s layout and spacing together, you can start deciding where to place content on your website.

Let’s look at the National Geographic website again, this time with Canva’s Golden Ratio overlay on it:

Golden Ratio

The layout is split so that content lines up along the spiral’s center line. To the left, there’s a large block of content. To the right, the content becomes denser and there’s a lot more negative space. Toward the center curlicue of the spiral, you’ll see a second National Geographic logo – there’s no better way to drive home branding than to place it where the eye naturally goes.

Here’s a great example of how the Golden Spiral can lead your eye through a design, even past its main component. This is useful if you have a lot of content to squeeze onto one page. You’ll also notice that even with such a packed and detailed design, there’s still negative space in there.

Golden Ratio

Source: Design by Helms Workshop. Example from Canva.

Honorable Mention: The Golden Ratio and Images

The Golden Ratio is also used in photography composition. Instead of creating a Golden Spiral, the Golden Ratio splits the image into six blocks. The same Golden Ratio is used in this type of grid: the widths and heights of the sections are either 1 or 0.618.

Golden Ratio

Source: Canva

You then use the intersections to compose the shot. The goal is to put a subject or main part of a subject on one of the intersecting lines – the subject shouldn’t be centered, and some blocks should be left empty (in most cases, at least – macro photography and close-up portraits will fill almost all of the frame). By doing this, you create a more interesting portrait than if the subject were centered.

A much simpler and more accessible way to follow this rule is to use the Rule of Thirds grid, which you probably have on your phone’s built-in camera or your DSLR.

Here’s a picture I took of my cousin’s son. I’ve laid the Rule of Thirds grid over it to show you where the subject does, and does not, fill the frame.

Golden Ratio

Also, look how the Golden Spiral almost-perfectly wraps around the subject:

Golden Ratio

The Golden Ratio differs from the Rule of Thirds because the Rule of Thirds grid has sections with equal lengths and widths. However, it’s so close – and so much easier – that this is what photographers commonly use when composing or editing a photo.

Wrapping Up

The Golden Ratio can be used as-is or adapted to your purposes and tweaked for size – math may have hard-and-fast rules, but creativity doesn’t. While you can use the Golden Ratio from the get-go to guide your design, you can also use it after you’ve started designing to make tweaks and improvements. The goal is to have the ratio guide you, not to force fit a design into it.

Kerning, Tracking, and Leading: A Simple Guide to Effective Typefacing

Kerning, Tracking, and Leading: A Simple Guide to Effective Typefacing

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.

Kerning vs Tracking vs Leading

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.

Kerning vs Tracking vs Leading

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.

Kerning vs Tracking vs Leading

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.

Kerning vs Tracking vs Leading

Be aware, however, that some fonts and scripts may become unreadable as the tracking is adjusted.

Kerning vs Tracking vs Leading

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.

Kerning vs Tracking vs Leading

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.)

Wrapping Up

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.

Samsung TVC Ostrich

Samsung TVC Ostrich

<iframe width="560" height="315" src="https://www.youtube.com/embed/hjKd24UCPYY" frameborder="0" allowfullscreen></iframe>

VR has been notoriously difficult to advertise on regular video, but this playful and inspired spot from Samsung found a way in—via a flightless bird who learns to virtually soar. A wonderful idea brought to life with exquisite CGI.