Design Studio

Welcome to the Roastify Design Studio! Whether you're a design pro or have never opened a design tool before, this guide will help you create professional-looking packaging for your coffee products.

Getting Started

After selecting a coffee from the Product Catalog and clicking Start Designing, you'll enter the Design Studio with a blank template for that product type.

Understanding the Template

The canvas shows your product's template with labeled areas in lighter font:

• Front, Back, Left, Right - The sides of your packaging
• Top Flap - The top of the box/bag

The Left Sidebar - Design Tools

All your design tools are located in the left sidebar. Let's walk through each tab:

Templates Tab

The Templates tab has two sections:

General Tab - Pre-made templates available based on your subscription:

• Base templates (available to all users)
• Pro templates (Pro plan subscribers only)

My Designs Tab - Your previously saved designs that you can reuse:

My Images Tab

Upload and manage images from your computer:

• Drag and drop files into this area
• Or click to browse your local file system
• Images are saved to your account and available for all future designs

Mockups Tab

View and download mockup images you've captured from the 3D preview:

• Mockups are saved when you click the Mockup button in the 3D preview
• Download mockups to use in other programs or for marketing

Backups Tab

Automatic backups protect your work:

• Automatic backups - Created automatically as you design
• Backup Now - Manually save your current progress
• Load Version - Restore a previous version of your design

Draw Tab

Freehand drawing tools:

• Brush - Draw with your mouse
• Highlighter - Transparent drawing
• Adjust stroke color and opacity

Text Tab

Add text to your design:

Elements Tab

Add shapes and decorative elements:

• Shapes (rectangles, circles, lines)
• Arrows and connectors
• Decorative elements

Background Tab

Find backgrounds for your design:

• Gradients - Pre-made gradient backgrounds
• Unsplash Integration - Search for free stock photos

Layers Tab

Manage the stacking order of elements:

• Drag layers - Reorder which elements appear on top
• Eye icon - Toggle visibility on/off
• Lock icon - Lock elements so they can't be accidentally moved

The Top Toolbar

When you select an element, the top toolbar shows element-specific options:

For Text Elements:

• Font family and size
• Bold, italic, underline, strikethrough
• Text color
• Effects (blur, shadow, background)

For All Elements:

• Position and alignment
• Opacity
• Effects and filters

3D Preview

See your design as it will look on the actual product:

3D Preview Controls

Saving Your Work

Automatic Backups

The Design Studio automatically creates backups as you work. You can access these from the Backups tab in the left sidebar.

Manual Backups

Click Backup Now in the Backups tab to manually save your current state.

Exporting Your Design

Go to File in the top toolbar:

• Export as JSON - Save a backup file to your computer
• Save Images - Download the 2D canvas design as an image

Creating Your Product

When you're happy with your design:

Design Best Practices

Keep It Simple

• ✅ Use clean, readable fonts

• ✅ Limit your color palette to 2-3 colors

• ✅ Make your brand name the most prominent element

• ✅ Include essential information (coffee type, weight, your brand)

• ❌ Use too many fonts or colors

• ❌ Clutter the design with too many elements

• ❌ Use low-resolution images

• ❌ Put important text near edges where it might get cut off

Make It Professional

• Brand Consistency: Use the same fonts and colors across all your products
• High Quality Images: Use clear, professional photos
• Adequate Contrast: Make sure text is readable against the background
• White Space: Don't be afraid of empty space - it helps your design breathe

Required Information

Your design must include these FDA-mandated elements:

Mandatory Text:

• Product weight: "12oz (340g)"
• "100% Roasted Coffee"
• "Manufactured for: [Your Brand Name]"
• Your valid business address

Image Requirements (For Uploads)

If you're uploading your own design instead of using the in-app designer:

Dieline Templates

We provide dieline templates for advanced design in external tools like Photoshop or Illustrator:

• Download PSD Template
• Download AI Template

Keyboard Shortcuts

Troubleshooting

"My image looks blurry"

• Make sure you're uploading high-resolution images (at least 1000x1000 pixels)
• Check the original file quality
• Vector images (SVG, AI) work best for logos

"Colors don't match what I expected"

• Computer screens display colors differently than print
• The preview is an approximation
• Use the color picker to adjust until you're happy

"Text is hard to read"

• Increase font size
• Add contrast between text and background
• Use simpler fonts for small text

"The 3D preview looks different from my canvas"

• The 3D preview wraps the design onto the product shape
• Some distortion is normal for curved surfaces
• The flat canvas view is most accurate for design work

"My design isn't saving"

• Wait for the upload to complete (large designs take time)
• Check your internet connection
• Try clicking "Backup Now" to save locally first

Getting Help

Next Steps