Yes, you can convert that photoshop file into a dynamic and fully responsive Maker story for your site and sales channels.
If your marketing and design team is versed in using Photoshop, take advantage of our PSD to HTML conversion technology to create the most engaging content possible. Simply upload the Maker-ready PSD file into the editor - our magic conversion engine will take care of the rest.
Unsupported PSD Features
Adding any of the following to your file will inhibit our PSD conversion:
Image masks, clipping, or hidden layers.
Fonts that are not set-up in your Maker theme. (If you're unsure about what fonts are included in your theme, please contact your Maker representative).
Creating a responsive design
To build a fully responsive design with PSD, we suggest creating and uploading at least three different PSD files for the same page.
For example, if the widest container on your site is 1200px wide, create your desktop PSD file at that width. But when designing for tablet and mobile, you should create entirely new PSD files to match those breakpoints.
Here are the breakpoints that we recommend building for PSD:
Desktop - 992px (or the largest grid width that fits best with your site)
Tablet - 768px
Mobile Small - 320px
To learn how to upload breakpoint files on a Maker story built with PSD, visit this page.
Prepping your PSD file
Once you've created your individual breakpoint PSD files, here's how to prep the files to ensure that Maker's PSD conversion technology will work smoothly:
Save the image resolution of the file at 72 dpi.
Keep the background of the file transparent (unless you're using a different color than the background of your site).
Keep your file to a maximum size of 200MB.
Save the image mode at 8 Bits/Channel.
Organizing your layers
Here are the two most important factors when prepping your PSD layers:
Convert images to smart objects wherever possible.
Create separate text boxes for different text styles - this helps our conversion engine map each style correctly.
Organize your layers in sequential sections (more information on this below)
To add a background image, color or video to your file, use these shortcuts:
For background images, simply name the layer BG
For background color, simply name the layer BG [space] color hex code
For background video, simply name the layer BG [space] video URL
To ensure maximum design flexibility after uploading your PSD into Maker, we highly recommend grouping your layers into sections in Photoshop. When sectioned, your PSD will convert into individual advanced grids in Maker - allowing you to edit and update them separately in Maker in the future.
While you don't have to create sections for our conversion tool to work, if your design is longer than 1000px long, we strongly recommend it.
If you plan on using Sections, here's a snapshot of what your file should look like:
Some important things to note:
Sections must have the word 'section' in them; any typos in the word 'section' will prevent the file from loading correctly
Don't leave any elements (images, textboxes etc) outside of the sections (everything should be contained in the sections)
Organize your sections in sequential order of your content's design
Once you get into the groove of creating and prepping PSD files for Maker, you'll be able to easily and quickly design, publish and iterate Photoshop-created content to your site .