Video chapters
- 0:00 Welcome
- 0:14 How Creative Studio works
- 0:40 Part 1 · The library: explained
- 0:50 Part 1 · The library — Upload, New Design, sizes
- 1:25 Part 2 · The brand kit, and the post: explained
- 1:36 Part 2 · The brand kit, and the post — Warm Earthy kit, photo, band, text, logo
- 2:40 Part 3 · Arranging: explained
- 2:51 Part 3 · Arranging — Badge, Align, Group, Layers, Undo
- 3:31 Part 4 · More frames, and export: explained
- 3:42 Part 4 · More frames, and export — Instagram Story frame, Export to Files
- 4:15 Part 5 · Put it to work, then reuse it: explained
- 4:26 Part 5 · Put it to work, then reuse it — Product image, Duplicate, Rename, Summer sale
- 5:22 Wrap-up
Written guide
Overview
Appmint Creative Studio lets you create graphics, keep their editable design and export the finished artwork for reuse. We will create a design at the correct size, edit its objects, make another version and export it into Files. That gives us both the source we can change later and the image another Appmint module can use.
1. Create a design at its intended size
Your first editable graphic
Use New Graphic Design from Appmint's create menu to open Creative Studio. In its library choose New design. Name the example Spring collection square, choose a square preset or enter 1080 × 1080, then create the design. This is a canvas size, not a social account connection.
Retained Appmint capture: one Instagram Post frame is selected, with W 1080 and H 1080 visible in Frames. The design has no artwork yet.
The white frame is the area you will export. The dotted surrounding canvas is working space. The left toolbar adds objects; Frames identifies output areas; the bottom bar includes the design name, zoom and save/export controls. Library returns to your saved designs. Keep the frame selected when checking its size; selecting an image instead changes which properties you are editing.
Why this matters
A square social post, a story and a print design need different dimensions. Choosing a preset gives the canvas a useful starting size; it does not publish to that social network.
Follow these steps
Open Creative Studio and New design. Enter a recognizable Name. Choose a preset under Social post, Story & reel, Banner & cover or Print. For the custom example choose Custom size and enter W 1080 and H 1080. Choose Create design once and wait for the canvas.
Check the result:
The named design opens with the intended frame dimensions.
2. Work with objects and their properties
Retained Appmint capture: handles surround the logo, so Position and Filters affect the logo rather than the photograph. Unsaved changes is visible at the bottom.
Build the image, then its wording
- Drop your background photograph inside the frame and wait for the image object to appear. Resize and position it until the intended frame is covered.
- Add your logo as a separate image. Select it and use the position/size fields to place it without stretching it. The selection handles must surround the logo before you edit those fields.
- Use Text (T) for a heading, enter your own wording and adjust its font and size in Properties. Add supporting copy as a second text object when it needs independent placement.
- If the heading is hard to read, add a shape behind it, give that shape a contrasting fill and adjust its opacity; arrange the text above it. Do not reduce the opacity of the text by accidentally leaving it selected.
- Save and wait for the unsaved indicator to clear. Reopen from Library and check the photograph, logo and text are still separately editable.
Why this matters
The design is editable objects on a frame. Position, dimensions and styling belong to the selected object, so first show what is selected and then change its properties.
Follow these steps
Drop an image onto the canvas and wait for the upload-backed object. Select it and open properties. Adjust X and Y; adjust W and H deliberately, checking whether the result stretches. Try rotation, opacity and image filters on the example. Select a text object in a design that contains text, use Edit and replace its wording. Adjust Font, Size, Height and Style in the properties panel. Use Text (T) to insert another editable heading when needed.
Check the result:
Image and text edits are visible on the canvas and remain after saving and reopening.
3. Manage overlap and reusable variations
Why this matters
Layer order decides which object covers another. Duplicating a design gives a separate version; downloading a PNG creates an output image rather than another editable source.
Follow these steps
Select an overlapping object. Use Bring forward or Send backward one step and inspect the result; compare Bring to front and Send to back. Use Duplicate on a selected object and reposition the copy. Save with Command-S or Ctrl-S and check the save result. Return to the library. Open the design’s actions, choose Duplicate, rename the copy and reopen it. Use Search designs and the All, Designs or Uploads filters to find it.
Check the result:
The copied design has its own library entry. Reopening the original confirms the variation did not replace it.
4. Frames and export scope
Retained Appmint capture: All frames, PNG, 2× and This computer are selected. These are export choices, not proof that files have finished downloading.
Choose the output you actually need
For one square image, select One frame, choose the square frame, set a recognizable File name, select PNG and 1×, then choose the destination. At 1× a 1080-square frame exports at 1080-square; at 2× it becomes 2160-square. All frames is unavailable until there are at least two frames. Selection requires selected objects and may omit the frame background or other objects you expected to include.
Choose Files to make the output available in Appmint's file picker; choose This computer for a browser download. Press Export once and wait. Open the resulting image and inspect its edges and text before attaching it elsewhere. Saving this image does not replace saving the editable design.
Retained Appmint capture: the finished artwork has been selected in a new product’s Media area. Create Product remains available, so this image does not establish that the product was saved.
To reuse the exported file in a product, open that product’s Media → Choose from File Manager, select your output and inspect the preview. Save the product separately. This is one consuming feature; exporting artwork alone does not publish a product, post or campaign.
Why this matters
A design can hold more than one frame. Export scope determines whether we get one frame, all frames or only the selected objects.
Follow these steps
Open Frames and select Show on canvas for the intended frame. Inspect its background color. Open Export. Choose One frame and the frame name, then enter File name. Choose PNG for this example, select 1× and Save to → Files. Set the destination folder to creative-studio/exports and choose Export. Open File Manager and inspect the result. Repeat with This computer and open the downloaded file.
Check the result:
The output has the intended dimensions and content; there are no unexpected off-frame objects or missing backgrounds.
5. Advanced output and careful cleanup
Why this matters
Larger raster exports can suit another delivery size, while JPEG trades quality against file size. SVG is offered only when the chosen export permits it. These options should be tested against the actual artwork.
Follow these steps
Compare PNG at 2× with JPEG and its Quality control. Select an object before choosing Selection; it is disabled without a selection. With multiple frames, compare All frames. Inspect every resulting file. Use the library Download PNG shortcut for a quick output. Delete only a disposable duplicate through Delete and its confirmation.
Check the result:
The chosen scope matches the output, and the editable original remains in the library.
6. Draw, align and build the composition
Why this matters
Images are only one part of the design. Creative Studio gives you editable text, shapes and paths, so you can construct a composition and keep its parts adjustable.
Follow these steps
Choose Text (T) in the floating toolbar and replace Type here with your heading. Open Shapes and add a Rectangle, Circle, Triangle, Polygon or Star; use Line (L) for a line. Select the relevant objects and use alignment Left, Center, Right, Top, Middle or Bottom. Compare the result before and after. Group the selection with Group, move it together, then Ungroup when individual editing is needed. Toggle Snap to objects and Snap to grid separately so their effect is clear.
Open Draw tools. Use Freehand draw for a short stroke. For a controlled shape choose Straight path or Curve path: click to add points, Shift-click to switch straight/curve, click the first node to close a shape, or double-click/Enter/right-click to finish. Backspace removes the previous point and Escape cancels an unfinished path. Show those controls on a disposable path, not on the main composition. Use Layers to identify stacked objects rather than clicking blindly through overlap.
Use File Manager, Assets (Graphics, Icons, Photos, Videos), or Upload from device to add a visual. Select a raster image before using Remove background; the control is conditional on an image selection. Wait for the operation and inspect edges at useful magnification. Save, then reopen the design to verify the stored result.
Check the result: Editable objects remain separate or grouped as intended, paths have finished geometry, and the reopened design preserves the composition. Background removal remains subject to its actual service result.
7. Apply a brand kit and use its tokens
Why this matters
The Brand kit holds the design’s colors and typography references. Use it to keep a design consistent, and use object properties to apply those choices. A palette change is not a promise that every existing object will automatically restyle itself.
Follow these steps
Open Brand kit, then Browse presets. Expand a preset to inspect its colors and typography before applying it. Apply the intended preset and return to the editor view. Inspect the resulting palette, Typography, Corner Radius, Spacing and Buttons previews. Click a color’s hex value to open its picker and change one token. Use the panel’s Undo to restore the prior kit. Apply the chosen kit again and save the design.
Select a shape and apply an intended palette color from its Fill properties. Select text and apply a typography preset from Font, then inspect size, weight and line height. Save and reopen to confirm both kit and object styling. Typography/corner/spacing displays in this panel are reference previews; do not pretend each preview is an editing input. Preset entries in the inspected component come from STYLE_SET_PRESETS; do not promise that an organization-created set appears here without checking the current list.
Check the result: The design stores the chosen kit and the objects have the styles actually applied to them.
8. Ask Design AI to edit a specific selection
Why this matters
Design AI receives the canvas and current selection. That lets a focused request refer to the object you mean. Check the selection chips before sending; a request without a selection has a different scope.
Follow these steps
Open Design AI. Select the heading and inspect the Selected on the canvas chips. Remove an unintended chip with Remove from selection. Enter: Change the selected heading to Summer collection; keep its position and size. Choose Send or press Enter. Wait for the response and inspect the canvas change rather than assuming the response text means it happened. Use Stop during an unwanted running request, then inspect the canvas because stopping does not promise to undo changes already applied. Open Recent requests to recall a prompt; revise its target before resending. Save and reopen the completed design.
Check the result: The intended object changes and unrelated objects remain as intended. Failure responses remain visible and are not edited out as successful execution.
9. Generate an image with references and per-image instructions
Why this matters
Generate AI Image creates artwork for the active frame. Selected images become references. Labels, roles and instructions tell the request how those images should be used; they do not guarantee an exact generated result.
Follow these steps
Select a reference image. In Properties → AI Meta enter Label and Instruction, choose its appropriate Role, then leave the text field to persist it. Repeat for a second reference if needed and select both. Open Generate an AI image. Confirm the frame name and dimensions in Generate AI Image and inspect every reference thumbnail. Enter a precise visual request and choose Photo, Illustration, Minimal, Bold, 3D Render or Vintage. Choose Generate once, or Enter; use Shift-Enter for a new line. Watch the working status and the returned response. Inspect the image that arrives on the canvas, its placement, crops and reference fidelity. Save it only after review. Prompt history recalls requests; it does not reproduce an identical image by itself. Clear stale AI Meta when an image no longer has that role.
Check the result: A real generated image is added to the intended canvas and survives save/reopen.
10. Use material supplied by another Appmint module
Why this matters
When Creative Studio opens from another feature with a linked brief, it can receive that feature’s images, copy and output frames. The Material panel belongs to that link; it is not present in every standalone design.
Follow these steps
Open Creative Studio through a caller that supplies an actual linked brief. Inspect the header’s source name and Show details: Brief, Audience, Voice and Frames. Open Material → Images and click or drag a supplied image onto the canvas. Switch to Copy and click a snippet to create editable text. If the panel was closed use Show context material. If no link or material exists, use File Manager/upload and ordinary text tools; do not search for a nonexistent panel.
Finish the intended frames, save and choose Use These Designs. Wait for Sending to finish, return to the originating record and inspect every returned frame there. Saving the design and sending exports back to the caller are different outcomes. Unlink removes the current context link; do not use it before returning the result you need.
Check the result: The originating feature contains the intended outputs. A source issue needs explicit verification: when the caller has no onSaveResult handler, the code logs a warning but can still show a sent notice. Check the receiving record; the notice alone is insufficient.
Troubleshooting, recovery and alternatives
If the operation fails, keep the error text and inspect the saved state before retrying. A confirmation message is not enough: reopen the item or reader/output destination. Do not repeat a create action while the original request is pending. Use the smallest disposable example to distinguish a missing permission, unavailable backend or incomplete implementation from a content mistake. Keep explanations of prerequisites separate from the continuous task demonstration.
Next steps
You now have the module’s main path and the checks that tell you whether the result is ready to use. Keep the editable source, verify the output where your audience will see it, and return to the relevant chapter when you need an alternative.
Limitations and checks
Current design source includes autosave after a quiet period, explicit Command/Ctrl-S and save-error state. A closing editor is not a substitute for confirming save success. AI image, Brand kit, context material, linked-result return and Design AI controls are now covered from current source. Their provider and persistence behavior still needs live verification. SVG availability is conditional. This is a documented manuscript, not a live export verification.