The new Photoshop CC 2015 came out with some amazing new features. Apart from a few, most of them are for designers. I must say that web developers and designers cannot be happier.
This tutorial is on The Brand New Export Option in Photoshop CC 2015, and I’ll be uploading more tutorials on new features of Photoshop CC 2015 in the coming days like I said when I was explaining Dehaze in Photoshop CC 2015.
Actually the new Export option in Photoshop CC 2015 is just an improved version of preexisted “Save For Web” feature in Photoshop. The fact is that it not only looks cleaner, but it also provides better compression too. Apart from that, it also lets to you export your layers, not the whole image, which the “Save for Web” cannot. If you are a graphic designer, you must be cheering up. So let’s begin the tutorial.
What is Export in Photoshop CC 2015?
The Export As the feature is a successor of Save for Web that lets to save your photo in a compressed way. Of course, compression reduces the image’s quality but you need to find out a balance between the quality and the size. If you own a website and upload heavy images of 1-2 MB in size then your website’s performance will be compromised, and hence the user’s browsing experience. These heavy size images take a huge time to load, and increases website’s loading time by 4-5 seconds. In a world where more than 70% of websites load under 1 second, increasing your website loading time by 4-5 seconds would definitely be problematic.
This is why Adobe introduced Save for Web long ago and succeeded it by the brand new Export As feature. This Export As feature compresses the image and its size. Of course, the quality will be compromised but a nice balance between the former and later will always be appreciated. Photoshop lets to choose the quality between 1% to 100% with 1% results in the least size and 100% results in maximum size.
The Export As feature is a successor of Save for Web that lets to save your photo in a compressed way. Of course, compression reduces the image’s quality but you need to find out a balance between the quality and the size.
You can also use this feature to export layers separately. In the layer panel, just select the layers you want to be exported and right click on them, and then click on Export. I’ll be explaining this elaborately later in this tutorial.
Where is the Export in Photoshop CC 2015?
The export option is bit hidden compared to “Save For Web” option in older versions of Photoshop. May be Adobe likes to know the users’ feedback before it makes it more exposed. You can find it by going to File>Export>Export As. But with the new release of Photoshop CC 2015, the “Save for Web” is not at all present directly in File. You need to go to File>Export>Save for Web (Legacy).
One more thing that you’d like to know is that the keyboard shortcut for Export As is very much similar to Save for Web’s. The shortcut of Export As is Ctrl+Shift+Alt+W/Cmd+Shift+Opt+W while the shortcut of Save for Web is Ctrl+Shift+Alt+S/Cmd+Shift+Opt+S. It just changed the alphabet S to W.
How Does Export in Photoshop CC Work?
To use this feature, go to File>Export>Export As. The actual size of image that is shown in Fig. 2 is 1.98 MB. The image’s width x height is 1500 x 1500 pixels, and it’s a square picture. Now I try to save the picture using the Export As feature.
Export As lets you know various thing before you save a picture. One of the most important of them is the size of the picture that going to be saved. With 100% quality, the size of the image reduces from 1.98 MB all the way down to 773.4 KB. This is a reduction of more than 50%. Photoshop has eliminated unnecessary color profiles etc. to reduce the size.
Now if I reduce the quality to 60%, which I guess is best for web use, the size has been reduced to 231 KB.
Still the size is too much for a website, but it’s only because of the fact that image’s dimension is too much. For web purposes, we don’t need the images to be 1500 pixels wide. I like to set 700 pixels as maximum width. In fact that images like Fig. 4 you are seeing right now is 700 pixels wide. So just by reducing its width x height to 700 pixels, the size reduces to 57.8 KB which I guess is optimized for web purposes.
Having too many images in one page reduces my website loading speed, and this is the reason why I break tutorials into multiple pages.
Export vs. Save for Web in Photoshop CC 2015
Since the beginning of this article I am saying that Export As is a successor for Save for Web. But a successor generally is better than its predecessor when it comes to software, and so is Export As. I am going to compare the size of the same image with the same configuration, and let’s see who wins.
Fig.4 showed us that the size of the image at 60% quality and 700 pixels wide is 57.8 KB. In Fig. 5, the same configuration results in the size of 109 KB which is around twice the size of what we were getting with Export As. That’s huge!
Adobe has definitely used a better algorithm this time with Export As feature.
Export Layers using Export in Photoshop CC 2015
Fig.6 is a PSD file that I downloaded from freepick.com. It is to show you that you can export even layers in Photoshop CC 2015. Just hold down Ctrl/Cmd and click on the layer you want to be exported. This will let you select multiple layers. Now right click on any of the selected layer and click on Export As.
Now Export in Photoshop CC will let to decide the configuration for each of the layer individually. When you are done with the configuration, click on Export button, and the layers will be exported.
You can also choose Quick Export as PNG which is present just above of Export As when you right click on the layer(s). You can choose a different format to show rather than PNG by changing the settings. Go to File>Export>Export Preferences and choose the format that suits you best.
However keep one thing is mind before choosing JPG is that JPG doesn’t support transparency.
And this is all about the new Export in Photoshop CC 2015. If you are feeling as much cheered up as I am regarding the new Photoshop CC 2015, don’t forget to read my article on the new feature Dehaze in Photoshop CC 2015.
Thank You! Please support www.tricky-photoshop.com aka TrickyPhotoshop by sharing this article with your friends on Facebook, Twitter, Google+ or more.
