After following the guidelines mapped out here, adding your polished PSD file to Maker is incredibly easy.
Open the editor, and click on the "Elements" tab in the media panel on the left side and select the Ps icon under layout options.
Then, select the Upload PSD button from the media panel on the left:
Once uploaded, click 'ADD' to insert the file into your story. Once added to your story, you can continue to edit the layers and elements as normal.
Note: The grid width of your Maker story will automatically adjust to the size of your Desktop PSD. All PSD files uploaded to Maker will be saved and available for re-use and download.
After uploading your desktop PSD in Maker, you'll need to add your breakpoint files.
To upload the Tablet PSD, click on the responsive tab on the top right and select the 'Tablet' parent breakpoint, at 600 pixels wide.
With the 600 tablet breakpoint open, click on the first grid/section to generate the black menu bar in the center of the editor. From there, click on the Ps icon in the center to upload the tablet specific PSD file:
Then, open the mobile breakpoint parent 320, follow the same process as you did for tablet, and upload the mobile PSD:
If you PSD is already uploaded on Maker, you can insert the PSD on desktop directly from the media panel. Click on add PSD on the media panel then click again in the story to add the PSD. The same applies to the adding PSDs to the tablet and mobile breakpoints. Open the left panel, find tablet or mobile PSD, click add PSD and then click again on the top of the PSD you want to replace on that breakpoint.
Note: Although your tablet PSD is 768 pixels wide, don't upload it directly to the 768 breakpoint. Uploading it to the parent tablet breakpoint at 600 will ensure that the tablet PSD covers all possible tablet ranges, including 768.
Additional Note: When you add several PSDs to a single story, each new PSD becomes an individual breakpoint 'island'. Effectively, this separates each breakpoint group from the rest. For example, if you have a PSD on 'Tablet', any edits you make to the Tablet breakpoint group will not affect Mobile or Desktop. If you want to make changes story-wide (like copy or image changes), this means you'll have to make the change three times (on every breakpoint), or wherever a new PSD is added.
By default, all grids from a PSD file are originally set to "Scale Everything." Depending on your design's responsive behavior, you have the option to set individual grids "Scale Width" in the right side grid panel.
'Scale width' will keep the height of your elements fixed as well as the original sizes of your font. As the name suggests, 'Scale everything' enables fluid fonts and designs that scale both the height and width of your elements. If you're unsure about which to use, we recommend keeping 'Scale everything' as the default, as it supports a more responsively scaling design.