Skip to main content
Birgit Pohl
Birgit Pohl
Inspiring
July 22, 2017
Question

Export to Web Photoshop Script

  • July 22, 2017
  • 1 reply
  • 2503 views

Hello Community, if you are interested in creating content for the web or for smartphone, this may become very handy for you. This is a script, which you download and add to your Adobe Photoshop folder. You just restart Photoshop and then you are ready to use the script. It will export your content in different sizes which you define according to the description. Please make sure to use content that is bigger than the highest width value in the script. Have fun!

Export to Web Photoshop Script

A script to export your pictures for the web sized non-retina and retina. Open all images in Photoshop and run the script:

File / Scripts / ExportDocumentForWeb_FullAuto

It will create a folder "ExportForWeb" and place all images there. You can close your original pictures without saving. This script will save a PNG in 100%.

##Set desired screen sizes: Open the file and set your sizes in arrayOfSizes. Leave the first value as it is for it's original size.

var arrayOfSizes = [app.activeDocument.width.value, 1200, 992, 768, 360, 320];

Windows Path:

Program / FilesAdobeAdobe / Photoshop CC 2015 / Presets / Scripts

Mac Path:

Applications / Adobe Photoshop CC / Presets / Scripts

Notes:

Based on Murdoch Carpenter's script. http://murdochcarpenter.com/blog/. Tested in Photoshop CC (2015.5.1) V2.0

More information:

Smashing Magazine Article of Mr Carpenter

This topic has been closed for replies.

1 reply

JJMack
Community Expert
JJMackCommunity Expert
Community Expert
July 22, 2017

Will the script resize and crop the image for the various aspect ratios one needs for different devices.  I do all that now with the Image Processor Pro Plug-in script it can handle up to 10 output files are a time.  Why do we need this new script does it have any unique feature? Even all apple devices do not have 4:3 aspect ratio displays. All I see there is 4:3  Aspect ratio.   Resizing an image is not new.  Is the script doing a content aware resize?  Changing Aspect ratio and size I can not do that now? The article shows various devices with different aspect ratios but only seems to take about various scaling factors.  I  do not see anything there that address the aspect ratio problem.. I do not develop for the web but if I did I think I would need to use Artboards to handle the various aspect ratios needed scaling the correct aspect ratio content should be easy. New 8K displays will have 7680x4320 pixels that  is over 33MP. One will need huge content. My Camera's image will not fill that many pixels and also does not have a 16:9 aspect ratio....

Looking at the scripts they just scale the active document up in size 2x the other 3x. Scaling up in size does not work as well as scaling down in size.  You would be better of working on the documents that are the largest size you need and scale those documents down in size for the other devices.  The scripts do not address aspect ratio at all. The resizing done is a constrain resize using BICUBIC interpolation the documents aspect ratio remains the same.

JJMack
Birgit Pohl
Birgit PohlAuthor
Inspiring
July 26, 2017

Hey JJMAck, thanks for the comment.

You first question:
Will the script do x?

It will not, because it is only for resizing an image – for now. It is a very simple program. A little program, that you put into another program.
But, since all of it is on Github and basically open to everybody, you are very welcome to add this specific feature. This is what Github is for. Community based programming.

Why does one need anything?
In this case, you are probably saying, that this program is not enough for you and you want more features. Well, here again, feel welcome to ad more features. But I can ensure you, some people really like light weight programs that do just one thing.

About the 4:3.

Can you please help me, to understand where you see that the program only exports pictures 4:3 ratio? From my knowledge and from what I read of the source code, it should keep the original aspect ratio of the image, having the width as the base size and resizing the height according to it. Imagine as a lock in Illustrator or Experience Design, when you want to resize an element.

About the program is not perfect:
Here again, feel free to address this issue. Open up an issue on Github and/or contribute to it. I'd be very happy to show a resizing script made by the community.

Thank you.

JJMack
Community Expert
JJMackCommunity Expert
Community Expert
July 26, 2017

All these scripts do is resize  a document 2x or 3x and save a png file.  You can do the same with an action. The action will execute faster than the script and the action can be batched.   There are many better and versatile script on the web that can resize and save image files for example the Image processor pro.  I do not want to do anything with those scripts I just deleted them.  IMO resampling an image up in size is not something that one should do. You are much better off fitting a large print size image for your mobile devices displays.  Adobe supplies a plug-in you can to use to do that with Photoshop. Adobe's Fit Image Plug-in......

JJMack
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices