Creating Image Assets in Photoshop

In Photoshop CC, an alternative to using the slice function is the "Image Asset" function. Up until recently, each image was extracted and saved using the slice tool. But after CC, using the Image Asset function, you can cut out individual images separately without concern for the overlapping of layers. Let's look at how to slice elements using the Image Asset function, and then export them.

The IT Industry Guide is a collection of articles and resources by Internet Academy, Japan's first learning institute specialising in the Web. Here, we introduce you to industry insights in an easy-to-understand manner.

Table of contents

How to use the Image Asset function

[Step 1] Add an extension

First, add the "extension" to the layer name you want to export as an image file. For example, if you want to export a layer named "test" as an image file in PNG format, name the layer "test.png".

[Step 2] Generate the file

With the layer still selected, select "Generate" -> "Image Asset" from "File" above the application bar. By doing this, a folder called "sample-assets" is automatically created in the same hierarchy as the working PSD file (assumed to be sample.psd), and "test.png" is created in the folder. Since "test.png" is automatically updated every time "sample.psd" is saved, it is not necessary to repeat this step to create the same Image Assets every time.

Difference between Image Asset function and Slice function

Image Assets are excellent for work efficiency because images can be generated as desired just by changing the layer name and exporting them without worrying about overlapping layers and creating divisions with the slice tool.

Prior to Photoshop CC, we created arbitrary areas using the slice tool, cut out the contents of the displayed layers, and exported them as image files. Slices are still a popular technique, but when you want to select the image you want to cut out, you have to hide all the layers beneath the image. This is repeated for as many number of images needed to be cut out, and can be troublesome and time-consuming.

By using the Image Asset function, processing is completed with only one layer, which reduces the time and effort required for the operation, making mistakes less likely to occur.

Reducing the image size

One point to keep in mind regarding slicing is to minimize the data size of the exported image to speed up the display of the website. There are two ways to suppress the image size: "change the file format according to the image quality" or "resize the image resolution".

When changing the file format according to the image quality, you have the choice of JPEG, GIF, and PNG. The size of the image data is decided by the number of colors handled, as well as the transparency. The general data size of a JPEG is larger than a GIF. PNG has the merit of preserving transparency of colour, as well as a high compression ratio. So, in some cases, there is an advantage that the image size can be made smaller than the GIF. On the other hand, if it is set to full colour, there is also a disadvantage that the image size becomes larger than a JPEG, so according to the contents to be saved, let's use JPEG, PNG or GIF properly

If the image is too large for the displayed space, please resize the image resolution. You can minimize the image size by specifying the width and height of the image and specifying the appropriate image resolution.

In conclusion

By utilising the Image Asset function, it is possible to drastically improve the efficiency of slicing elements. Also, it is stressful for the user to wait for the display of elements on the website. But, if you minimise the image size at the time of image slicing, you can improve the display speed of the website.

When using Photoshop, let's not only learn how to use the software, but also proceed with understanding the meaning of each tool and concept. At the Internet Academy, professional instructors with abundant field experience can help you acquire skills such as image editing and processing, in addition to Web Design. If you would like to experience a Web Design classroom in session at Internet Academy, please do not hesitate to contact us for a free trial lesson.