> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-pages/design-tools/how-to-create-a-psd-file-for-maker.md).

# How to create a PSD file for Maker

## Creating Photoshop files for Maker

Yes, you can convert that photoshop file into a dynamic and fully responsive Maker story for your site and sales channels.

If your 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 and our conversion engine will take care of the rest.

### Key Items:

Creating a responsive design

Prepping your PSD file

Dos and Don'ts

Adding backgrounds

Organizing your layers into "sections"

Download this example PSD to use as a guide for the following instructions:

<figure><img src="/files/eZqFYhgYvWggUjW8qzZ3" alt=""><figcaption></figcaption></figure>

### Unsupported PSD Features

* Don't include any hidden layers
* Don't use 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) .

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 - 1024px (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 .

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:

1. Save the image resolution of the file at 72 dpi.
2. Keep the background of the file transparent.
3. Keep your file to a maximum size of 200MB.
4. Save the image mode at 8 Bits/Channel.

### Dos

* Do convert all images with masks and effects to smart objects
* If the text in the section is using different styles, create a separate textbox for each style
* Do organize content sequentially

### Dont's

* Don't use auto formatting for text (this includes auto line height, auto caps, etc).

## Adding Backgrounds

To add a background image, color or video to a "Section" of 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
  * Note: background (BG) images will be uploaded in their entirety; be sure to crop the images to their desired sizes and aspect ratios before uploading.
* For background video, create a placeholder layer named BG \[space] video URL
  * Note: the video layer must have content attached (i.e., a placeholder image or shape) and the video URL must be an .mp4 link.

{% hint style="info" %}
Note: You can only have one background or BG layer per section. If you plan to apply a background for the whole story, the story background will be added once you've added your PSD file to Maker in the Document settings of the editor.
{% endhint %}

## Organize your layers into "Sections"

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

That's it!

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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-pages/design-tools/how-to-create-a-psd-file-for-maker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.