Blog

Exporting from InDesign to Photoshop

Jul 25th, 2014 by Max Tokman

If you're still using InDesign instead of Photoshop to create your web layouts, you can use our script to convert InDesign to layered PSD (currently for Mac only).  Please follow these simple steps:

1. Optional, but strongly recommended - watch our instructional video

2. Download script archive version 2.2

3. Have your InDesign document open and Photoshop running

4. Make sure your InDesign document is open and both horizontal and vertical rulers are set to pixels

5. Make sure your InDesign file is suitable:

5.1 Script will run on a single page InDesign file, multi-page files should be broken into individual single page files

5.2 Keep each object on its own layer

5.3 Fit frame to text content for all text objects

5.4 Ungroup complex objects to improve script performance

5.5 Make sure all objects are placed exclusively on the artboard / page area - placing objects outside work area will impact scaling and position

5.6 Check document dimensions and make sure they match page size set in InDesign - our script uses document dimensions so any discrepancy between document and page dimensions will affect script performance

6. UnZip and run script

Need help turning Indesign into website? We are here to assist


InDesign file will be converted to layered Photoshop file with editable smart object layers corresponding to each InDesign layer; Photoshop file will be saved on your desktop under the same name as the original InDesign file and Photoshop smart object layers can be edited by selecting "Edit Contents" from layer menu. 

If you are creating for web apps, please fee free to run your artwork through Color Check for ADA and other free services we created.

We initially had plans for script 3.0  to import InDesign text into Photoshop as live text, which would've been editable directly in Photoshop and would’ve also made resulting Photoshop file suitable for validation with Web Preflight.  We tried going InDesign to Photoshop and InDesign to Illustrator but alas, the differences in file structure and typographic controls were too great between those different file formats, and version 2.1 is as far as we intend to take it for now while we focus our energies on Web Preflight and other online tools for creative community.  If you wish to be kept updated on our new tools and software releases as they become available, please sign up for our newsletter using the form above.  If you have any comments, suggestions on how we can improve our scripts, or creating other InDesign automation tools that you feel will be useful, please leave us a comment below.  And if your original InDesign artwork was intended for web, trying validating your new Photoshop file with Web Preflight.

If you encounter any issues with this script, try downloading earlier versions:

Version 2.1 - creates layered PSD with editable smart objects

Version 2.0 - creates layered PSD with editable smart objects

Version 1.1 - creates layered PSD without editable smart objects

Version 1.0 - creates layered PSD without editable smart objects

 

Some background - why would web developers like us work with AppleScript?

Normally, we wouldn't.   Some years ago, we started getting inquiries from our design partners on using InDesign layouts for web design.  Our preference at the time and to this day is to work with Photoshop files, as InDesign just doesn't generate proper HTML code.  But there's no question that InDesign layouts are a big time saver on the creative side, and so we went looking for ways to help.  We found an existing AppleScript and linked out to it from our site - that went well for a couple of years until that script was removed from external resource.  So, we sat down and wrote our own version 1.0 which generated PDF files from InDesign layers and assembled them in Photoshop. 

That was a first step, which showed promise but also had clear limitations - PDFs came into Photoshop as rasterized layers without editing capabilities.  The next milestone was transferring InDesign content to Photoshop while preserving editing capability, which meant abandoning PDF export route and emulating copy/paste action between the two programs.  One of the trickier steps was correctly positioning pasted elements in Photoshop which was only possible if InDesign ruler was set to pixels.  Once we had that part figured out, we released version 2.0 which exports InDesign to Photoshop and preserves editing capability in Photoshop through use of smart object layers.  That's probably everything a web designer would need but it was not quite done for us.

As web developers, we are the production arm of creative firms creating amazing web designs.  As technologists  we offer guidance on technical possibilities and limitations both before and during creative process.  Most often, our advice is heeded but there are times when visuals, branding requirements and copy trump technical considerations and we receive artwork that cannot be accurately executed on the web.  In those instances, we have to work with our creative partners to find the most appropriate solution, whether it's revising artwork to reflect realities of web technology, using images instead of live text to preserve client-approved visuals at the expense of SEO, or deviating from PSDs to execute design as closely as possible using tools available in HTML and CSS. To minimize these less than ideal situations, we started logging issues that regularly appeared in web designer's Photoshop files and had to be sent back to creatives for revisions.  Over time, this list grew to the point we turned it into Web Preflight, a service that automatically validates Photoshop files for known issues such as file organization, device-specific size and web typography.  But in order to be properly validated by Web Preflight software, the Photoshop file had to contain editable text, which cannot be parsed from smart objects generated by our version 2.0 script.

And so we began pursuing script version 3.0 that takes InDesign content to Illustrator and then to Photoshop, with resulting PSD file containing natively editable text with all the text attributes originally present in InDesign.  We are getting very close to completion and hope to release next version of the script soon.  Once it's is available, you'll be able to quickly generate your mockups in InDesign, transfer them to Photoshop and have them validated in Web Preflight, all in a few minutes time.  The next step for us is releasing to general public other software tools that form our production process: Web Preflight for preproduction evaluation; SpAS (specification automation software) online service for quickly generating full front and back end spec for web projects, utilizing reports from Photoshop files validated with Web Preflight; and OSS_Check quality control software that visually validates cross-browser and cross-platform consistency of finished web pages in addition to other project specifications set in SpAS.

And it all started with a little bit of AppleScript.

Categories:

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Jul 28th, 2014 by Max Tokman

When comparing Photoshop and InDesign as web design tools, we have to think back to their history. InDesign was originally created as a competing product for Quark and was meant to offer same multi-page layout and type controls. Over time, it expanded into providing web-friendly HTML and CSS export, leverag...

Jul 14th, 2014 by Max Tokman

Some time ago, we completed a beta version of responsive site and turned it over to agency’s client for review. The client came back with a number of issues, all centered around font and image sizes that were apparently not to spec for one of responsive states. Naturally, we were concerned as this indicated...