There are several ways to use multiple PSD files with an existing project to both complete and maintain updates to the final output. Each PSD you export is considered a single project on its own and will compile with all the assets associated with that project.

What to Expect

Export Kit works hand-in-hand with industry standards so you can also mix projects the same way you would under normal circumstances. Here are a few common things to expect when working with multiple PSD files and your project, depending on the environment you are working in.

HTML/CMS Content: Adding/updating HTML content on an existing project will often require cut-and-paste.

CSS (Responsive +Styles): Adding/updating style sheets will often require linking to the new style sheet.

JavaScript / jQuery: Adding/updating JavaScript will often require linking to the new js file.

HTML (Modules + Pages): Adding new HTML pages will often require creating Smart Objects for reusable elements and copying files from one directory to another.

PHP (Modules + Pages): PHP is designed for this, you will need to include your header and footer pages in your base design.

WordPress Themes: Adding new theme templates will often require:
(a) copying files from one directory to another
(b) change the css name and enqueue the new file in your custom functions PHP file

Android Studio / Eclipse: Adding new files to projects will require one or both of the following:
(a) copying files from one directory to another
(b) adding additional source paths to your project

Use Eclipse or a Similar IDE

There are many IDEs designed for different environments, but the most widely used – and used by Export Kit staff – is Eclipse (others are catching up). Some IDEs such as Adobe Dreamweaver makes it simple and easy to modify both code and assets related to PHP, HTML, CSS and JavaScript projects. While others are designed for Java and other code environments.

We strongly recommend using an IDE when editing code, unless you're a superstar and you edit in notepad!

HTML/CMS Content

Export Kit uses very specific CSS to render your PSD as-is. When adding HTML/CMS content or modules, you will need to do the following:

Update the CSS - In most situations, a current website may not use the same base CSS settings as Export Kit, and will likely have a custom CSS framework.

Copy-and-paste the content - You will need to remove the extra tags and copy/paste your code to your existing project. 

CSS Styles and JavaScript Files

CSS and JavaScript are considered run-time files, and have minimal requirements for loading. You can export any project with CSS Output, JavaScript Output or jQuery Output then simply link the updated files dynamically. Each file is self-contained, so all required information is stored in the individual file.

NOTE: You can export any page/module normally with dynamic files, and load the updated file in your current project.

Responsive CSS Screens

You can easily split your PSD design into several documents and design various responsive screens. You can create several PSDs to target multiple screens (provided element names are the same – see our guide) then export each individual PSD design using CSS Output.

Responsive designs are based on CSS only, so you can (a) load the new file externally, or (b) copy-and-paste the output contents into a single CSS file.

HTML Pages/Modules

There are many ways to combine various HTML projects, and depending on your situation – some may work better than others. The best way to manage a single HTML project from multiple PSD files is to use Smart Objects as much as possible.

CC2015 Users: Adobe makes much better use of Smart Objects in CC2015 allowing you to link a single object across multiple PSD files.

Smart Objects act as custom modules in Export Kit, allowing you to render: (a) an image of the element, or (b) expand the object and compile all elements on export. This feature allows you to reuse elements such as header and footer in various pages and/or responsive designs, then export the individual PSDs.

STEP 1: In your current design, you can use Layer Kit Pro Panel to convert your header and footer folders to separate PSD files.

STEP2: When creating new PSDs you can then use the "Place..." option in the Photoshop File menu - this will insert the PSDs (header and footer) as Smart Objects.

STEP 3: Use Obj Tag to convert the Smart Objects into Export Kit modules.

PHP Pages/Modules

PHP Output is designed for this particular situation and makes it easy to use multiple PSD files with a single web project.

Include your header and footer pages for a full render.

Create PHP modules and sub-pages normally, or include PHP files where necessary.

WordPress Theme Templates

WordPress is by nature a custom PHP framework so all PHP Page/Module rules apply. You can create any theme template page, or responsive design using additional PSD files then copy the output php files to your main theme folder.

IMPORTANT: You will need to rename the styles file in your new PSD output, so you do not override your main theme styles.

Adding External Files to WordPress

If you are adding custom CSS or JavaScript files to your WordPress export, we suggest you enable Custom Functions and manually add your enqueue scripts.

WordPress is very powerful and allows for many ways to add dynamic files, but you should Enqueue Scripts or Enqueue Styles. 

Android Studio / Eclipse

All Android projects are by nature Eclipse based. Java projects such as Android are supported in many IDEs and allow you to add multpiple source paths to any projects.

Export your additional PSD files and (a) copy the output files, or (b) add additional source paths to your Android project.