How to Export Photoshop Assets For the Web With PNGHat

The recently released PNGHat plugin for Photoshop, made by Source, creates an entirely different workflow for exporting PSD elements for use in websites, games, apps or whatever other types of projects you design for.

It's a robust software with a stack of great functionality, but the most enticing feature it has on offer is its ability to boil exporting down into three simple steps:

STEP 1: Push button
STEP 2: Copy & paste code
STEP 3: Profit!

Okay, so in all seriousness that's just two steps, but it really is that easy. The plugin essentially eliminates the typical Photoshop export process of slicing, naming slices, dealing with overlapping slice areas, previewing, selecting optimization choices, choosing export options, saving out, then manually writing up code to integrate the images into your project.

It can also trim white-space around elements automatically, and handle multiple resolution exports for retina support and responsive image techniques. Images can be output locally on your computer, instantly uploaded to cloud storage, or even generated as Base64 code so you don't need image files at all.

Let's start with a look at the core of the plugin; the push button image export functionality.

Push Button Export

Exporting images using PNGHat really is as easy as it gets. For example, in this Mobile Game UI from Graphic Burger, let's say you want to export the "Play Button".

First, you select the layer(s) or group for the "Play Button":

Then you click the PNGHat Export Selected Layers button:

And hey presto, you get a perfectly optimized PNG:

That's it! In this example we covered two mouse clicks and about a two second wait.

If exporting your images locally, you can set where they should go by clicking the ... button you'll see towards the right of the second section of the PNGHat panel, then browsing to the folder of your choice.

There are various other options you can set and tweak, which we'll cover below, but in a nutshell that's the entire process; select, push button, done.

Copy & Paste Code

At the same time as PNGHat outputs your image, it also prepares copy and paste ready code so you can easily incorporate that image into your project. You get HTML, CSS, canvas, Android and iOS code, for example:

HTML:

1

<img src="images/Play-btn.png" width="108" height="109">

CSS:

1

background-image: url(images/Play-btn.png);

2

3

4

5

width: 108px;

6

7

8

9

height: 109px;

Canvas:

1

var img = new Image();

2

3

4

5

img.onload = function () {

6

7

8

9

    ctx.drawImage(img, 0, 0, 108, 109);

10

11

12

13

};

14

15

16

17

img.src = 'images/Play-btn.png';

Android:

1

<ImageButton

2

3

4

5

    android:layout_width="wrap_content"

6

7

8

9

    android:layout_height="wrap_content"

10

11

12

13

    android:src="@drawable/Play-btn.png" />

iOS:

1

[UIImage imageNamed:@"Play-btn.png"]

From here you just hit the "Copy" button on the PNGHat window and you're all set to paste straight into your relevant project file:

Built-in Cloud / CDN Hosting

Instead of needing to FTP your images after export, PNGHat gives you the option to instantly upload your images to the cloud storage they provide. At the moment the plugin comes with 1Gb of free cloud storage, with images delivered via CDN so users are served from the nearest possible location.

Exporting images for the included hosting is absolutely no different to the process for local export. To activate the auto upload you select the "Cloud" option from the first section of the PNGHat window:

From there, you use the same "select" and "push button" approach as described above. The only difference is that after the image is automatically uploaded to your account, the copy and paste code will provide you with the cloud-hosted URL for example:

1

<img src="http://piff.ly/4077/2e404609f9b571eff1f24fd558ebd0e25cecf44f/Play-btn.png" width="108" height="109">

Base64

The third export option PNGHat provides is Base64, which outputs your image as pure code which can be incorporated into your project's HTML, CSS or canvas. Without needing a separate image file, the element can be loaded without the extra http request and hence can speed up your project's load time. As with switching between local and cloud export, you can select Base64 at the top of the PNGHat window:

Base64 code can be used with HTML, CSS and canvas, for example (abbreviated code):

HTML

1

<img src="data:image/png;base64,iVBO......FTkSuQmCC" width="108" height="109">

CSS

1

background-image: url(data:image/png;base64,iVBO......FTkSuQmCC);

2

3

4

5

width: 108px;

6

7

8

9

height: 109px;

Canvas

1

var img = new Image();

2

3

4

5

img.onload = function () {

6

7

8

9

    ctx.drawImage(img, 0, 0, 108, 109);

10

11

12

13

};

14

15

16

17

img.src = 'data:image/png;base64,iVBO......FTkSuQmCC';

In my experience, Base64 is especially great for small repeating background images and graphics with a limited number of colors. I've also found the most efficient way to make use of Base64 is with CSS preprocessors, so the code that makes up an image can be saved as a variable then easily used multiple times and updated later if needs be.

Awesome Transparent PNG8

One of the things I find most impressive about PNGHat is the ease with which you can export a great-looking transparent PNG8 in order to keep file sizes low. I ran some tests using a DVD mockup from Graphic Burger, on an image exported at 758px * 758px without any settings tweaks, and discovered two things. 

First, the difference in PNG24 file size between Photoshop default export and PNGHat was a negligible 6Kb. So given file size was essentially on par I'd be more likely to use PNGHat export for this file type due to how much quicker and easier it is.

The second, and more compelling result, was that out of the box PNGHat handles transparency of PNG8 files beautifully. With default export settings Photoshop did output a file that was only 186Kb, but it included the white banding you can see in the image below. Generally speaking, transparency is used so an image can display nicely over any background so the banding would typically preclude this export format from use.

PNGHat on the other hand generated a PNG8 file that was visually indistinguishable from the PNG24 files, but less than half their size at 268KB vs 642KB / 648Kb. From where I'm sitting that makes it a very appealing choice for optimized transparent PNG export.

Trim White Space

PNGHat is able to automatically trim the space around the image you are exporting, saving you the trouble of ensuring cropping or slices are lined up perfectly with the edges of the element. The "Play button" from the first example in this article was exported using this trimming functionality, allowing it to be correctly cropped with no extra steps taken.

To activate the "Trim" option, just check this box in the PNGHat window:

Selecting the Area for Export

As well as automatically trimming around an image, you also have the option to specifically select the region you would like to export. This is just a matter of creating a marquee selection before you hit the export button. For example, creating this selection before export:

Would give you this resulting image:

Scaling Images

When you are working with vector-based images you have the option to automatically scale your image up or down for various exports, so you can handle retina support and also potentially create multiple image sizes for responsiveness.

To use scaling, set the percentage you would like to increase or decrease by in the "Scale" field of the PNGHat window:

The rest of the process again remains the same, i.e. select layer/group, push button. With our "Play button" the result of scaling by 200% is:

Controlling Image File Names

The easiest way to control how your exported files will be named is via your layer or group names. If you have a single group or layer selected your image file will be named to match it, with spaces replaced by hyphens. If you have selected multiple groups and or layers, your file will be named to match whatever's uppermost in your stack.

Alternatively, you can also check PNGHat's Prompt file name option in the window's settings panel and explicitly choose your file names on each export.

Reaching the Settings Panel

To reach the settings panel, click the little gear icon at the bottom of the window:

This will switch the window's display to the following:

To switch back again, click the gear icon a second time.

Choosing Image Export Options

PNGHat gives you two file formats to choose from: PNG and JPEG.

When you first install and run PNGHat the default option selected will be, as you might expect, PNG. However to switch to JPEG just toggle the selector in the PNGHat window:

You can also control the quality settings of your exported images by going to the settings panel (described above) and:

• Choosing between PNG8 and PNG24
  
• Checking or unchecking Optimize PNG
• Checking or unchecking Progressive JPEG
  
• Setting a JPEG quality level out of a possible 100
  

Controlling Your Copy and Paste Templates

Out of the box PNGHat gives you the five copy and paste code templates described above, however you can also edit these templates as well as creating your own.

A common case in which you might want to edit these templates is to have them reflect the path your images will be stored at. In this case you might change the {PATH} field from its default of /static/images/{FILE}, to something like images/{FILE}, as I did during my first use. You can also change any aspect of the main template, such as perhaps adding border=0 to the HTML <img> tag, or anything else you might need for your project.

Additionally, you can create new templates if the type of code you need isn't present by default. To do so, click the + icon near the bottom of the settings panel, give your new template a name and add your code, using the variables {WIDTH}, {HEIGHT} and {PATH} however you require.

Wrapping Up

Even just through the process of writing this article I personally really felt the difference using PNGHat, rather than the default Photoshop export. All the images you see above were generated by PNGHat, and I found it saved me a significant amount of time. As well as the time saving, I also found the minimal push button process much smoother, and the fewer steps I have to take to get a job done the happier I am!

It's possible there may be the occasional time I still use the native Photoshop export if a set of circumstances really demands it, but for the majority of cases PNGHat will be my go to export method from here on out.

You can learn more about PNGHat, and also watch a video of the plugin in action on the PNGHat website.