Design Studio. A whole studio that never phones home.

How to use the Design Studio

Design Studio is a drag and drop graphics editor for social posts, thumbnails, posters, banners and business cards. You pick a canvas size or a template, add text, shapes, icons and your own images, style them in the panel on the right, and export a PNG or JPG. Everything is drawn on a canvas in your browser, so it suits anyone who needs a quick graphic without an account.

Step by step

1. 1
   Pick a canvas or a template

   Under Start from a canvas size, click a preset such as Instagram Post (1080 × 1080), Instagram Story, YouTube Thumbnail, LinkedIn Banner, A4 Poster or Business Card. For any other size, type Custom width and Custom height between 50 and 6000 px and press Create custom canvas. Or click a design under Or start from a template to open it ready made.

2. 2
   Add text, shapes, icons and images

   Use the tabs on the left. Text has Add a heading, Add a subheading and Add a little body text. Shapes adds rectangles, circles, triangles, stars, hexagons, lines and arrows. Icons has a search box. Uploads takes images you drop on Drop images or browse to, and a click on a thumbnail places it on the canvas.

3. 3
   Move, resize and rotate

   Drag an element to move it. Magenta guides snap it to the canvas edges and center and to the centers of other elements; hold Alt while dragging, or switch off Snap in the toolbar, to place it freely. Corner handles resize in proportion, side handles stretch one way (icons have corner handles only), and the round handle above rotates (hold Shift for 15 degree steps). Double-click text to edit it in place.

4. 4
   Style the selected element

   The right panel changes with what you select. Text gets a font, size, weight, color, Italic, alignment, Spacing, Line h, Highlight behind text and Drop shadow. Shapes get Fill, Stroke, Stroke w and, for rectangles, Radius. Images get Corners, Border and a Filter of Black & white, Sepia or Brighten. Every element has X / Y, W / H, Rotate, Opacity, layer order buttons, flip, lock and Delete element.

5. 5
   Set the background and canvas size

   Open the Backgrnd tab for Solid colors, a Custom color, Gradient presets, or a Custom gradient made from two colors and an Angle (0 to 360, default 135) that you confirm with Apply. To change the canvas size later, click an empty spot so nothing is selected, edit W / H and press Apply canvas size.

6. 6
   Work faster with the keyboard

   Ctrl+Z undoes and Ctrl+Y or Ctrl+Shift+Z redoes, up to 100 steps. Ctrl+D duplicates, Del removes, arrow keys nudge by 1 px (10 px with Shift) and Esc deselects. Use the minus and plus buttons, Fit, or Ctrl with the mouse wheel to zoom between 5% and 400%.

7. 7
   Export the image

   Press Export. Choose Format PNG or JPG and Scale 1× or 2× (2× is the default). For PNG you can tick Transparent background; for JPG you can set JPG quality from 40% to 100% (default 90%). Press Download to save the file.

8. 8
   Save the project to edit later

   Press Save to download the whole design as a .json file with your uploaded images embedded, and Open to load one back. Separately, the current design is auto-saved in this browser, and the start screen offers Resume where you left off next time.

What you get

• The export window shows the final pixel size before you download. Scale 2× doubles each side, so an Instagram Post at 1080 × 1080 exports at 2160 × 2160 px.
• The file name comes from the project name and the size, with @2x added at 2× scale, for example untitled-instagram-post-2160x2160@2x.png. Rename the project in the box at the top left of the toolbar to change it.
• A selected element has a green outline with handles. A red dashed outline means the element is locked: it cannot be moved or edited until you press Unlock in the right panel.
• The project .json holds every element and every uploaded image, so it can be large when you use big photos.

Tips and common mistakes

• The browser keeps only one auto-saved design. Starting a new canvas or opening a template replaces it, so press Save first if you want to keep the current one.
• Applying a design from the Templates tab inside the editor replaces everything on the canvas and scales the template to your current size. Press Ctrl+Z straight away if you did not mean to.
• Transparent background is only offered for PNG. A JPG always includes the background color or gradient.
• The height of a text box follows its text, so the H field is locked for text. Use the side handles or W to change where the lines wrap.
• Most icons are emoji, drawn with the emoji font of the device you are working on, so the same design looks slightly different on Windows, Mac and phones. The exported image keeps the look of the device you exported from.

Privacy and limits

Everything runs in your browser. Images you add are read from your device and never uploaded, and exports and project files are created on your device. The current design and its images are auto-saved to this browser's local storage, which clearing site data removes. Browser storage has a size limit, so with very large images the auto-save can quietly stop working; keep a Save copy of anything important.

Back to the tool

Everything a design tool should do.

Frequently asked questions.

More design tools.

Browse the full free-tool library →