Keep those .PNGs neat: How to safely trim away empty pixels.

Keep those .PNGs neat: How to safely trim away empty pixels.

anita-richards-designs-ornament-black-flipped

 

Empty space in the transparent backgrounds of .PNG files can chew up a LOT of hard drive space, literally for nothing, as well as make placement of elements difficult in some programs. Excessive empty transparent space can also sometimes be a hiding ground for stray pixels that can cause issues on layouts, particularly by playing havoc with drop shadows … more on that in another post.

For the folks who prefer listening to podcasts rather than reading blog posts I have included the sound byte here for you too, just scroll to the bottom of the page to listen in.

One of the very first things I like to do when I download a new kit to my hard drive is check if the element .PNG files have been safely trimmed to remove excess empty pixels.

Many designers routinely trim excess empty space from their designs with transparent backgrounds. However, some designers don’t for whatever reason.

At first glance it seems simple to just go ahead and hit the Trim command in Photoshop, but doing that always results in rounded elements ending up with flat spots from the trimming process. I didn’t know this for a very long time and was just hitting trim on everything … big mistake!

There is an easy solution that is a breeze to follow to get the job done safely that leaves the beautiful rounding on your rounded elements nicely round.

These instructions were written specifically for Photoshop® Creative Suite, nonetheless, the same basic principles also apply in other imaging software programs.

If you use Photoshop® Elements despair not! There is a little surprise at the end of this tutorial for you too.

 

Step 1: Open Your File

The first step is obvious … open the file of the element that you would like to trim.

Tutorial 1173 Trimming .PNG Files image 01

 

Step 2: Select the Layer in the Layers Palette

Make sure that the layer the element is located on is selected as active in the Layers palette.

This will change the colour of the background of the active layer within the Layers Palette if it was not already selected as the active layer.

Tutorial 1173 Trimming .PNG Files image 02

 

Step 3: Apply a Stroke Layer Style

On the Photoshop Menu Bar, click on Layer > Layer Style > Stroke.

This will bring up the Layer Styles dialogue box so that you can apply a simple Stroke Layer Style to the element.

Tutorial 1173 Trimming .PNG Files image 03

 

Step 4: Set the Style Options

Set the Stroke options to 3 pixels wide and choose any colour so that you are able to see that it has been applied to the elements.

This will create a 3px stroke outlining all the opaque areas of the element. Essentially the element has now been made 6px wider and taller than it was before we applied the layer style.

Tutorial 1173 Trimming .PNG Files image 04

 

Step 5: Open the Trim Command

On the Photoshop Menu Bar, click on Image > Trim.

This will open up the Trim command’s dialogue box.

Tutorial 1173 Trimming .PNG Files image 05

 

Step 6: Trim the Background

Set the Trim command options to Transparent Pixels and ensure that ALL the Trim Away check boxes are ticked as selected.

This will ensure that all sides and all the areas with empty pixels will be trimmed away within a four-sided / rectangular perimeter.

Tutorial 1173 Trimming .PNG Files image 06

 

Step 7: Clear Layer Style

Right click on the active element layer in the Layers palette and click on Clear Layer Style.

This will remove the stroke from the element, leaving a gap around the element of approximately 3px on each side. The gap is not precisely 3px because Photoshop always trims a little more than it should …. which is why we are safely trimming our rounded elements in the first place!

Tutorial 1173 Trimming .PNG Files image 07

 

Step 8: Check Point

Pause to admire your beautifully trimmed element.

Tutorial 1173 Trimming .PNG Files image 08

 

Step 9: Resave the File

On the Photoshop Menu Bar, click on File > Save to over-right the file or alternatively click on File > Save As to re-save your newly trimmed .PNG file with a different name or in a different folder. DONE!

Tutorial 1173 Trimming .PNG Files image 09

 

Pretty easy really!

To make things even easier I have created a quick and simple action to do the grunt work of trimming .PNGs for you.

There are two versions in this download: one with an automatic Save/Close command and one without so that you can retain full control over where and how the trimmed files save.

Also included in the download are instructions for both Photoshop® Creative Suite as well as for Photoshop® Elements. Elements users can also refer to this great post at lifewire.com for more information specific to the version of Elements that they are using.

Action: Trim .PNG Files

Anita Richards Designs | Actions | Trim .PNG Files

ACTION FREEBIE

Send download link to:

I confirm that I have read and agree to the Cookies and Privacy Policy and the Terms of Use: Personal Use License that apply to AnitaRichards.com and all Anita Richards’ Graphic Designs, Digital Files and Downloads respectively.

SoundCloud Podcast Link

This is but a brief explanation of the process of trimming the transparent and empty pixels from .PNG files to optimise files sizes. Please let us know how you are going with it. Did it work as expected? Need help? Did this action work in Photoshop Elements too? I would love to know: please post in the comments below or message via the Contact page.
Keep those .PNGs neat: How to safely trim away empty pixels.
Empty space in the transparent backgrounds of .PNG files can chew up a LOT of hard drive space, literally for nothing as well as make placement of elements difficult in some programs. This blog looks at a non-destructive way of trimming them.
https://anitarichards.com.au/digiscrap-1173/

This post is part of our Digital Scrapbooking FAQ Series, the complete index for which can be found on the Start Here: Frequently Asked Questions page.

Enjoy! i Heart u

____

Related Posts:

 

anita-richards-designs-ornament-black

 

Full Disclosure: Any/all/none of the links on this post may be affiliate links from which Anita Richards may receive a small commission from the sales of certain items, the price for which remains the same for you.
Sincere thanks and boundless gratitude for your support. i Heart u

Leave a comment

Newsletter Signup

Sign up now and never miss a thing!

You're Signed Up!

Now that you are signed up, we will send you exclusive offers periodically.