RSSNewsRobot
Senior Member
Authors:
Chad Chelius
Body:
In Adobe Photoshop CC, Adobe released a powerful new feature called Asset Generator that allows users who produce web comps in Photoshop to automatically generate web assets to specific sizes, formats, and other parameters automatically on-the-fly. It truly is an amazing feature that can save users tons of time and takes a lot of the guesswork out of the process.
For web designers this is a very impactful feature, but it can also be useful for print designers. One thing that almost all designers are requested to do at some point, is create images that will be used on a web site. Im not talking about the look and feel of the web site per se, but instead the images that are placed in articles of the web site. I was recently providing training to a small group of users and they were explaining to me that in addition to their day-to-day design duties, they were required to generate multiple sizes of several images that get uploaded to their corporate web site. Here were the sizes that they needed to create:
500px × 500px
800px × 800px
1000px × 1000px
1500px × 1500px
600px × 400px
900px × 600px
1200px × 800px
1500px × 1000px
Although performing the task of cropping and then scaling the image to achieve the desired sizes isnt particularly difficult, it certainly is time consuming. Being eager to provide them with a better solution to their problem, my thoughts initially went to creating a Photoshop action that would perform the necessary scaling and saving of the images. Although this solution would certainly work, it isnt very scalable because if any of the requirements change, the action would need to be recreated.
I then thought about the Asset Generator feature in Photoshop CC. This provides a way to automatically generate image assets based on parameters that you define for each layer or layer group. Pretty cool! Lets take a closer look at the approach that I suggested to solve this students particular problemand hopefully yours too!
[h=2]Setting up the file[/h]This first thing I did, was to create a new file to the size of the maximum asset that I needed. In this case based on the sizes listed above, that was 1500 pixels by 1500 pixels. Keep in mind, the actual size of the file is determined by what is on each layer or layer group. So by making the file extra large, Im just giving myself plenty of room in which to work. I saved my file as a PSD file and called it Web Assets.psd, although you can use any name that you wish.
Next, drag an image into this file so that it creates a new layer. Dont worry about the name right now, well give it an appropriate name later. What you want to do now is crop the image to the maximum file dimension that you need. You cant use the Crop tool to do this however because it will crop the entire file. Instead, create a marquee selection to the appropriate size, position it, and change the size of the selection by choosing Select > Transform Selection. Once the selection is at the correct size and location, choose Select > Inverse, then press the delete key to remove any unwanted image area. Im starting with the landscape version of the image first and in the figure below you can see how Ive trimmed the image to the appropriate size and aspect ratio.
Now we need to tell Photoshop that we want it to generate image assets automatically based on the layers in our document. So choose File > Generate > Image Assets. Theoretically, this will create a new folder in the same folder where your .psd file lives that contains the automatically generated assets. However if you look there now, you wont find anything. Thats because we havent defined any parameters that Generator can use to generate our assets.
[h=2]Setting the parameters[/h]Generator provides a robust choice of options for defining the properties of the assets that you need to generate. Going over every option would make this article way too long, but you can read about the details here.
To get started, were just going to rename our layer as raindrops.jpg. Generator supports the .png, .gif, and .jpg formats, so whichever extension you use for the name of your layer, that is the format that will be created. Go ahead and look in the folder where your .psd document resides and you should notice a new folder with the same name as your .psd file with assets appended to the end of it. Inside of that folder, you should see a jpg file at the same size as the layer in the .psd file.
Now, we may want to get a little more specific by defining the quality as well as the specific size of the generated asset, so Im going to change the name of the layer to 1500 x 1000 raindrops.jpg85%. When a unit of measurement is not specified, pixels is assumed but you can use any supported unit of measurement that you wish including in, cm, mm, etc. Yes, there is a space between the size parameter and the filename. This implicitly sets the size of the image as well as the jpg quality. You can adjust the quality as your requirements dictate. The important thing to remember at this point is that the asset has already been updated. No additional instructions are needed, no button to push, its done!
That gives us our initial image, but we need 3 more images at this aspect ratio. This is quite easy to do as we simply have to add the additional sizes separated by commas as the name of the layer. So well change our layer name to:
1500 x 1000 raindrops_1.jpg85%, 1200 x 800 raindrops_2.jpg85%, 900 x 600 raindrops_3.jpg85%, 600 x 400 raindrops_4.jpg85%
Note that Ive appended a number to the name of each file to avoid an error during asset generation. Each file needs a unique name in order to generate each individual asset. Also, keep in mind that you cant define any arbitrary number you wish for the size properties. Actually you can, but the images will get distorted. For each version of the asset that we defined, weve ensured that the aspect ratio remains consistent.
[h=2]Wrapping it up[/h]Were not quite finished yet, as we need the square versions of the images now. So I dragged another version of the image into my PSD file, cropped the image information on the layer to the maximum dimension that I need so Im always downsampling and not upsampling. I then named the layer to reflect the dimensions, file names, and image quality that I desire, and the assets have been generated on the fly.
As a finishing touch, I thought it would be helpful if I could put the assets for each layer into its own folder to further keep things organized. It turns out that Generator makes this quite easy. Simply enter the name of the folder that you want the assets organized inside of followed by a forward slash in front of each asset instance name that you defined and that will create a subfolder in which the assets will be stored. Ive included the names of my layers below.
1500 x 1500 Square/raindropsSQ_1.jpg85%, 1000 x 1000 Square/raindropsSQ_2.jpg85%, 800 x 800 Square/raindropsSQ_3.jpg85%, 500 x 500 Square/raindropsSQ_4.jpg85%
1500 x 1000 Landscape/raindrops_1.jpg85%, 1200 x 800 Landscape/raindrops_2.jpg85%, 900 x 600 Landscape/raindrops_3.jpg85%, 600 x 400 Landscape/raindrops_4.jpg85%
The resulting asset folders look like this:
Depending on the type and number of assets you need to generate, your Photoshop layer names can become quite long. To make this process easier, Ive created a text file that contains common asset combinations that I need to generate. This way I can make the adjustment to the properties in the text file (which is much easier to see) and then copy and paste from the text file to the layer name. Im a huge fan of TextExpander as well which allows you to type a sequence of characters that will automatically enter text associated with the character sequence. This also streamlines the layer naming process although its still a bit tricky to edit inside of Photoshop. Either way, the end result is a folder full of assets in a fraction of the time that it would take to do the work manually.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]Know Your Photoshop File Sizes[/h]
How can one Photoshop image grow and shrink dramatically during production, even without compression? The answer could save you a lot of storage space on your hard drive or in the cloud. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Instantly Extract Photoshop Layers as Images with the Adobe Layer Namer[/h]
New panel makes saving Photoshop layers as separate files much faster and easier than before. Read More
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]How to Choose the Right Image File Format for Print[/h]
The ABCs of JPEG, TIFF, EPS, PDF, PSD, and more. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Creative Thinking in Photoshop: Using Layer Comps to Create Variations[/h]
Layer Comps -- new in Adobe Photoshop CS -- may well be one of the first great inventions of the 21st century (at least in the digital world). A simple click in the palette to Save New Layer Comp,... Read More
[/TD]
[/TR]
[/TABLE]
Graphics
More...
Chad Chelius
Body:
In Adobe Photoshop CC, Adobe released a powerful new feature called Asset Generator that allows users who produce web comps in Photoshop to automatically generate web assets to specific sizes, formats, and other parameters automatically on-the-fly. It truly is an amazing feature that can save users tons of time and takes a lot of the guesswork out of the process.
For web designers this is a very impactful feature, but it can also be useful for print designers. One thing that almost all designers are requested to do at some point, is create images that will be used on a web site. Im not talking about the look and feel of the web site per se, but instead the images that are placed in articles of the web site. I was recently providing training to a small group of users and they were explaining to me that in addition to their day-to-day design duties, they were required to generate multiple sizes of several images that get uploaded to their corporate web site. Here were the sizes that they needed to create:
500px × 500px
800px × 800px
1000px × 1000px
1500px × 1500px
600px × 400px
900px × 600px
1200px × 800px
1500px × 1000px
Although performing the task of cropping and then scaling the image to achieve the desired sizes isnt particularly difficult, it certainly is time consuming. Being eager to provide them with a better solution to their problem, my thoughts initially went to creating a Photoshop action that would perform the necessary scaling and saving of the images. Although this solution would certainly work, it isnt very scalable because if any of the requirements change, the action would need to be recreated.
I then thought about the Asset Generator feature in Photoshop CC. This provides a way to automatically generate image assets based on parameters that you define for each layer or layer group. Pretty cool! Lets take a closer look at the approach that I suggested to solve this students particular problemand hopefully yours too!
[h=2]Setting up the file[/h]This first thing I did, was to create a new file to the size of the maximum asset that I needed. In this case based on the sizes listed above, that was 1500 pixels by 1500 pixels. Keep in mind, the actual size of the file is determined by what is on each layer or layer group. So by making the file extra large, Im just giving myself plenty of room in which to work. I saved my file as a PSD file and called it Web Assets.psd, although you can use any name that you wish.
Next, drag an image into this file so that it creates a new layer. Dont worry about the name right now, well give it an appropriate name later. What you want to do now is crop the image to the maximum file dimension that you need. You cant use the Crop tool to do this however because it will crop the entire file. Instead, create a marquee selection to the appropriate size, position it, and change the size of the selection by choosing Select > Transform Selection. Once the selection is at the correct size and location, choose Select > Inverse, then press the delete key to remove any unwanted image area. Im starting with the landscape version of the image first and in the figure below you can see how Ive trimmed the image to the appropriate size and aspect ratio.
Now we need to tell Photoshop that we want it to generate image assets automatically based on the layers in our document. So choose File > Generate > Image Assets. Theoretically, this will create a new folder in the same folder where your .psd file lives that contains the automatically generated assets. However if you look there now, you wont find anything. Thats because we havent defined any parameters that Generator can use to generate our assets.
[h=2]Setting the parameters[/h]Generator provides a robust choice of options for defining the properties of the assets that you need to generate. Going over every option would make this article way too long, but you can read about the details here.
To get started, were just going to rename our layer as raindrops.jpg. Generator supports the .png, .gif, and .jpg formats, so whichever extension you use for the name of your layer, that is the format that will be created. Go ahead and look in the folder where your .psd document resides and you should notice a new folder with the same name as your .psd file with assets appended to the end of it. Inside of that folder, you should see a jpg file at the same size as the layer in the .psd file.
Now, we may want to get a little more specific by defining the quality as well as the specific size of the generated asset, so Im going to change the name of the layer to 1500 x 1000 raindrops.jpg85%. When a unit of measurement is not specified, pixels is assumed but you can use any supported unit of measurement that you wish including in, cm, mm, etc. Yes, there is a space between the size parameter and the filename. This implicitly sets the size of the image as well as the jpg quality. You can adjust the quality as your requirements dictate. The important thing to remember at this point is that the asset has already been updated. No additional instructions are needed, no button to push, its done!
That gives us our initial image, but we need 3 more images at this aspect ratio. This is quite easy to do as we simply have to add the additional sizes separated by commas as the name of the layer. So well change our layer name to:
1500 x 1000 raindrops_1.jpg85%, 1200 x 800 raindrops_2.jpg85%, 900 x 600 raindrops_3.jpg85%, 600 x 400 raindrops_4.jpg85%
Note that Ive appended a number to the name of each file to avoid an error during asset generation. Each file needs a unique name in order to generate each individual asset. Also, keep in mind that you cant define any arbitrary number you wish for the size properties. Actually you can, but the images will get distorted. For each version of the asset that we defined, weve ensured that the aspect ratio remains consistent.
[h=2]Wrapping it up[/h]Were not quite finished yet, as we need the square versions of the images now. So I dragged another version of the image into my PSD file, cropped the image information on the layer to the maximum dimension that I need so Im always downsampling and not upsampling. I then named the layer to reflect the dimensions, file names, and image quality that I desire, and the assets have been generated on the fly.
As a finishing touch, I thought it would be helpful if I could put the assets for each layer into its own folder to further keep things organized. It turns out that Generator makes this quite easy. Simply enter the name of the folder that you want the assets organized inside of followed by a forward slash in front of each asset instance name that you defined and that will create a subfolder in which the assets will be stored. Ive included the names of my layers below.
1500 x 1500 Square/raindropsSQ_1.jpg85%, 1000 x 1000 Square/raindropsSQ_2.jpg85%, 800 x 800 Square/raindropsSQ_3.jpg85%, 500 x 500 Square/raindropsSQ_4.jpg85%
1500 x 1000 Landscape/raindrops_1.jpg85%, 1200 x 800 Landscape/raindrops_2.jpg85%, 900 x 600 Landscape/raindrops_3.jpg85%, 600 x 400 Landscape/raindrops_4.jpg85%
The resulting asset folders look like this:
Depending on the type and number of assets you need to generate, your Photoshop layer names can become quite long. To make this process easier, Ive created a text file that contains common asset combinations that I need to generate. This way I can make the adjustment to the properties in the text file (which is much easier to see) and then copy and paste from the text file to the layer name. Im a huge fan of TextExpander as well which allows you to type a sequence of characters that will automatically enter text associated with the character sequence. This also streamlines the layer naming process although its still a bit tricky to edit inside of Photoshop. Either way, the end result is a folder full of assets in a fraction of the time that it would take to do the work manually.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]Know Your Photoshop File Sizes[/h]
How can one Photoshop image grow and shrink dramatically during production, even without compression? The answer could save you a lot of storage space on your hard drive or in the cloud. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Instantly Extract Photoshop Layers as Images with the Adobe Layer Namer[/h]
New panel makes saving Photoshop layers as separate files much faster and easier than before. Read More
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]How to Choose the Right Image File Format for Print[/h]
The ABCs of JPEG, TIFF, EPS, PDF, PSD, and more. Read More
[/TD]
[TD="class: col-2 col-last"] [h=3]Creative Thinking in Photoshop: Using Layer Comps to Create Variations[/h]
Layer Comps -- new in Adobe Photoshop CS -- may well be one of the first great inventions of the 21st century (at least in the digital world). A simple click in the palette to Save New Layer Comp,... Read More
[/TD]
[/TR]
[/TABLE]
Graphics
More...
