You can import Photoshop Document (PSD) files to your image template designs in the Creative Editor. If you are using a template set that contains multiple image templates, you can import a different PSD to each template if needed.
Prepare your PSD file
These are steps that you should take to make sure your PSD file gets imported seamlessly. If you prepare carefully, the imported template will have fewer things you have to fix.
- Convert PSB (Photoshop Big) files into PSD files - Smartly.io doesn't support PSB.
- The PSD file can contain only one artboard.
- If you have a file with many artboards, split it up in Photoshop before continuing. You can import several files at once.
- Ensure that your PSD file uses the 8-bit RGB color mode.
- CMYK, Grayscale, and other color modes are not supported.
- Other color modes get automatically converted to RGB. As a result, the colors in the editor may not match your PSD file.
- Photoshop tip: Image → Mode → RGB Color and 8Bits/Channel.
- Replace faux (pseudo) bold and italic typefaces with real font variants.
- PSD layers should be 4x4px at minimum and 6000x6000px at maximum.
- Convert mask and effect layers into Smart Objects or apply the effects - Smartly.io does not support mask and effect layers.
- Photoshop tip: either right-click on the layer in question and select “Convert to Smart Object" or right-click on the mask thumbnail and select Apply Layer Mask.
- Combine layers as much as you can. Put everything possible into a single layer, but if a layer is supposed to be dynamic, keep it separate.
- Group related objects and convert them into Smart Objects.
-
Label everything clearly - this makes it much easier to work with your template in Smartly.io
- Consider pre-labeling which layers will be dynamic and connected to a feed i.e., "Product Image (Dynamic)".
-
Remove folders from your layer structure.
- Folders and multiple artboards are not supported, so either split the file or flatten the structure.
- Delete unnecessary assets.
Import fonts and typefaces
Before importing a PSD file, upload your fonts and typefaces to the asset library in one of the supported formats.
If you can, ensure that the filenames (not font names) of the fonts match between PSD and the asset library. This will help the fonts to carry over without errors.
Import in the template editor
- In a template, select a text layer.
- Under Text format, click the Upload a custom font icon
.
- Select the file(s) and click Open.
Import in the Media Library
- Click Custom Fonts.
- Click Add Fonts.
- Select the file(s) and click Open.
Import your PSD file into Smartly.io
Import in the template editor
- Click the Templates button
.
- Click Add new template.
- Select Import from Photoshop.
- Click Upload, select the file(s) on your computer, or drag and drop the file(s) to the screen.
Import in the Media Library
- In Image Templates, click New > Image Template.
- Click Start from PSD.
- Click Select PSD file and select the file(s) on your computer, or drag and drop the file(s) to the screen.
The import starts. When it's finished, the new image template opens automatically. - Compare the result of the import to the original Photoshop version(s).
What Smartly.io does during import
- After importing the PSD file, Smartly.io automatically reads all layers from the file.
-
Text layers in the PSD file are transformed into text layers in the template. All other layers are transformed into image layers.
-
If the Image Template does not contain any layers before importing, the height and width settings from the PSD file will determine the template format. If the template contains layers before a PSD file is imported, the template format won’t change.
Check and fine-tune the fonts in your new image template
The fonts you see in the image template editor may not match the Photoshop file. It may be a different variant, or in some cases an entirely different font. This is due to differences in the way the two systems use font files.
Also text color settings might be reset during the import.
To reapply font and color settings:
- Select the text item(s).
- Use the Text settings to apply font variants and colors.
Make your creatives dynamic
The real power of Smartly.io comes from the enormous potential for automatic scaling of creative variants. To harness this, convert the static image layers in your PSD file into dynamic images in Smartly.io.
For example, you can set up a placeholder image in Photoshop and replace it with a product image from a feed.
The next step after the import is to update the text and images to be dynamic elements from a data source.
To find out how to attach a data source to your templates, see Use a data source in image and video templates.
Other software
As a final tip - being able to import Photoshop files also unlocks the ability to bring in your work from any design software that can save files in PSD format.
By using yet another tool, like Photopea.com, you can take PDF files and convert them into importable PSD files.
- In Adobe Illustrator, export your design as a PSD file: click File → Export → Export As, select "Photoshop (PSD)". See this tutorial for a more detailed guide to exporting your design.
- In Canva®, save your design as a PDF file, and use another tool to convert that into PSD.
- In Affinity Designer®, click File → Export and select PSD.
- For Sketch® files, you can use Affinity Designer as a stepping stone. See this tutorial for a more detailed guide.