Blog

Exporting from InDesign to Photoshop

Jul 24th, 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. Download script archive version 2.2

 

2. Have your InDesign document open and Photoshop running

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

4. Make sure your InDesign file is suitable:

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

4.2 Keep each object on its own layer

4.3 Fit frame to text content for all text objects

4.4 Ungroup complex objects to improve script performance

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

4.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

5. Optional - watch instructional video

6. UnZip and run script


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. 

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:

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
SEO 2.0: Share Your Way to Success

Nov 9th, 2011 by Max Tokman

Thanks to Google Analytics, everyone from your boss to your dog professes to be an “expert” in search engine optimization these days. But many of these so-called experts are still following old-school strategies that drive traffic to your site at the same speed as dial-up. Web 2.0 demands a new set of strategies for op

Technologies of embedding custom fonts into the web-page

Sep 13th, 2010 by Max Tokman

All existing technologies of embedding custom fonts may be classified into three major methods: Substitution of source text by flash movie or graphic image. Font is converted into some intermediate format, then JavaScript is used for rendering. CSS @font-face technology. Here are some specific services