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
CSS (Responsive +Styles): Adding/updating style sheets will often require
linking to the new style sheet.
linking to the new js file.
HTML (Modules + Pages): Adding new HTML pages will often require
creating Smart Objectsfor reusable elements and
copying filesfrom one directory to another.
PHP (Modules + Pages): PHP is designed for this, you will need to include your
footerpages in your base design.
WordPress Themes: Adding new theme templates will often require:
(a) copying filesfrom one directory to another
(b) change the css name and enqueuethe 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 filesfrom one directory to another
(b) adding additional source pathsto 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
strongly recommendusing an IDE when editing code,
unless you're a superstar and you edit in notepad!
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.
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.
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
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
footerfolders to separate PSD files.
STEP2: When creating new PSDs you can then use the "
Place..." option in the Photoshop
Filemenu - this will insert the PSDs (
footer) as Smart Objects.
STEP 3: Use Obj Tag to convert the Smart Objects into Export Kit modules.
PHP Output is designed for this particular situation and makes it easy to use multiple PSD files with a single web project.
footerpages for a full render.
Create PHP modules and sub-pages normally, or
include PHP fileswhere 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
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.
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.