GalleryPlanner: Complete User Guide

Welcome to GalleryPlanner—the planning tool for designing gallery wall layouts. Whether you're a first-time user or looking to master advanced features, this guide will walk you through everything you need to create, customize, and export your designs.

What is GalleryPlanner?

GalleryPlanner is a free, web-based application that lets you visualize gallery wall layouts using your real frame inventory and personal photos. Unlike other design tools, GalleryPlanner prioritizes:

• Precision: Exact measurements down to the inch
• Privacy: Your photos never leave your device (local-first storage)
• Flexibility: Works on desktop and mobile with seamless project handoff
• Intelligence: Auto-Layout generates balanced arrangements automatically

---

Getting Started: Your First Project

Step 1: Open the App

Navigate to gallery-planner.com and click "Launch App" or "Start Designing Free".

Step 2: Set Your Wall Dimensions

When you first open the app, you'll see the Wall Configuration panel:

1. Enter your wall width and height in inches or feet
2. Choose between:
   • Standard Wall: Flat, rectangular wall
   • Staircase Wall: Angled wall following stairs
3. Click "Apply" to create your canvas

Pro tip: Measure your wall carefully! Include the full area where you want to place frames, from floor to ceiling or edge to edge.

---

Building Your Frame Library

The Frame Library is where you manage your frame inventory—the collection of frames you own or plan to buy.

Adding Standard Frames

GalleryPlanner includes presets for common frame sizes:

1. Click the Library tab (left sidebar on desktop, bottom toolbar on mobile)
2. Browse standard sizes: 4×6, 5×7, 8×10, 11×14, 16×20, 18×24, 24×36
3. Click the "+" button next to a size to add it to your inventory
4. Adjust the count to add multiples (e.g., "I have three 8×10 frames")

Creating Custom Frames

Got an unusual frame size or unique piece?

1. Click "Custom Frame" in the Library panel
2. Enter exact width and height dimensions
3. Choose frame color (black, white, natural wood, gold, or custom color)
4. Decide if the frame has matting
5. Click "Add to Library"

Frame Customization Options

Library Inventory View

Identical frames stack automatically in My Library. Switch to List view (the list icon in the Library header) to see the inventory breakdown: each row shows how many frames from that stack are currently Placed on the wall, Staged below it, or still Available in inventory—useful for tracking what's on the wall versus waiting.

Shortcut: In List view, click any row to instantly select all matching frames already on the canvas. Useful for batch-moving or deleting a frame type.

---

Designing Your Layout

Manual Placement

Drag and drop frames from your library onto the wall canvas:

1. Hover over a frame in your library
2. Click and drag it onto your wall
3. Release to place
4. Frames will snap to alignment guides and other frames for precision

Place All from Library

Want a fast first draft without comparing multiple Auto-Layout options?

1. Open My Library
2. Click or tap "Place all from library"
3. GalleryPlanner fits as many frames as it can onto the wall
4. Extra frames are staged neatly below the wall so you can place or ignore them later

Moving and Adjusting Frames

Once a frame is on your wall:

• Move: Click and drag to reposition
• Rotate: Click the rotate icon or use the rotation handle
• Delete: Click the trash icon to remove and return it to your library
• Resize: Some frames allow resizing directly on the canvas (custom frames only)

Alignment Tools

GalleryPlanner includes smart alignment features:

• Snap to Grid: Frames align to an invisible grid for clean spacing
• Alignment Lines: Visual guides appear when frames align horizontally or vertically
• Distribution Tools: Evenly space multiple frames with one click
• Center Alignment: Quickly center your entire layout on the wall

Keyboard shortcuts:

• Arrow keys: Nudge selected frame 1 inch
• Ctrl/Cmd + Arrow: Nudge 1/4 inch for precision
• Delete: Remove selected frame
• R: Rotate selected frame

Frame Grouping

Once you're happy with how a cluster of frames is arranged, you can lock it together as a group so it moves, aligns, and stays in formation as a single unit.

1. Select multiple frames (click the first, then Shift+click the rest, or drag a selection box)
2. Press Cmd/Ctrl + G to group them (or right-click → Group)
3. Move, duplicate, or align the group like any single frame
4. Press Cmd/Ctrl + U (or Cmd/Ctrl + Shift + G) to ungroup when you need to adjust individual frames again

On mobile: Long-press a frame to open the context menu, tap Select… to enter multi-select mode, tap additional frames to add them to the selection, then use the Group option in the Edit sheet.

When to use it: Group a symmetrical pair or a staircase cluster once you've dialed in the spacing. You can then use alignment tools to center the entire group on the wall without disturbing the internal arrangement.

---

Auto-Layout: Automated Design

Can't decide where to put your frames? Let Auto-Layout do the heavy lifting.

How Auto-Layout Works

Auto-Layout uses layout algorithms to generate balanced layouts based on your frame inventory. It considers:

• Frame sizes and proportions
• Visual balance and weight distribution
• Industry-standard spacing rules (2-3 inches between frames)
• Aesthetic principles (focal points, rhythm, symmetry)

Using Auto-Layout

1. Make sure you have frames in your library
2. Click "Auto-Layout" in the toolbar
3. Choose an algorithm:
   • Masonry (Tetris): Brick-like staggered pattern
   • Structured (Grid): Organized rows and columns
   • Skyline (Shelves): Frames align at top or bottom edges
   • Organic (Scatter / Monte Carlo): Randomized, organic arrangements
   • Center Out (Spiral): Radiates outward from a central point
   • Tidy Up (Snap): Cleans and aligns an existing layout
4. Click "Auto-Arrange"
5. Review the result—if you don't love it, click "Generate" again for a new arrangement

Pro tip: Use Auto-Layout as a starting point, then manually adjust frames to personalize the design.

Learn more about Auto-Layout algorithms →

---

Adding Photos to Your Frames

Bring your gallery wall to life by adding actual photos.

Uploading Photos

1. Select a frame on your canvas (click it to highlight)
2. Click the "Add Photo" button in the Properties panel (right sidebar)
3. Choose a photo from your device
4. The photo automatically fills the frame

Privacy Note: Your photos are stored locally in your browser using IndexedDB. They never get uploaded to a server. Learn more about our privacy policy.

Managing Photos

Once uploaded:

• Swap photos: Click "Change Photo" on any frame
• Remove photos: Click "Remove Photo" to clear the frame
• Photo library: Access all uploaded photos in the Photos tab for easy reuse

Supported formats: JPEG, PNG, WEBP, HEIC (on supported devices)

---

Customizing Frame Properties

Select any frame on your canvas to access the Properties Panel (right sidebar on desktop, bottom sheet on mobile).

Available Properties

• Position: X and Y coordinates (distance from wall edges)
• Size: Width and height (editable for custom frames)
• Rotation: Angle in degrees
• Frame Color: Change color after placement
• Matting: Add or remove matting
• Mat Color: Adjust mat color for matted frames
• Photo: Assign or change the photo

Use case: Quickly change all your frames to black by selecting each one and updating the frame color.

---

Exporting Your Design

Once you're happy with your layout, it's time to export it for real-world installation.

Hanging Guide (PDF) (Pro Only)

The PDF Hanging Guide gives you a clear plan for installation:

1. Use "Export" (desktop) or "Share" (mobile bottom toolbar)
2. Select "Hanging Guide (PDF)"
3. Download and print your guide

What's included:

• Full-scale layout diagram
• Exact coordinates for each nail (measured from wall edges)
• Frame dimensions and labels
• Step-by-step hanging instructions

Preview example output: Sample Hanging Guide PDF

Pro tip: Print the PDF in color and bring it to the wall. Use painter's tape to mark nail positions before hammering.

---

Snapshot Export

Export your design as a snapshot image for sharing, printing as a reference, or including in design portfolios.

Standard Snapshot (Free): JPEG export at standard resolution with a GalleryPlanner watermark.

1. Use "Export" → "Snapshot (Standard)" (desktop), or "Share" → "Share Snapshot (Standard)" (mobile)
2. Download your image

Pro 4K Snapshot: Ultra-HD PNG export at 3840px with no watermark—sharper for print, presentations, or client sharing.

1. Use "Export" → "Snapshot (4K)" (desktop), or "Share" → "Share Snapshot (4K)" (mobile)
2. Download your lossless PNG

Cropped Photos ZIP Export (Pro Only)

Need print-ready files for a lab?

1. Use "Export" → "Cropped Photos (.zip)" (desktop), or "Share" → "Export Cropped Photos (.zip)" (mobile)
2. Download high-resolution crops matched to your frame dimensions

---

Saving and Loading Projects

Auto-save: GalleryPlanner saves your project in this browser's local storage by default. You can usually close the app and come back later, but browser storage is not the same as cloud backup. If you prefer more control, open Settings and enable manual save mode—project changes will stay unsaved until you explicitly save them.

Install option: On supported browsers, you can install GalleryPlanner for quicker access and a standalone app feel. On iPhone and iPad, use Add to Home Screen in Safari. It is helpful for frequent use, but it is still not a replacement for saving .gwall backups.

Manual save: On desktop, click "Project" → "Save Project". On mobile, tap the project name at the top to open Project Switcher, then use "Save Project (.gwall)".
Note: Save Project (.gwall) is free. Backups include your wall layout and project library. For important projects, keep a backup in Files, iCloud, Drive, or Dropbox. Very large saves can still fail on iPhone and iPad.

Load a saved project: On desktop, click "Project" → "Load Project". On mobile, open Project Switcher and use "Load Project (.gwall)", then select your file.
Note: Loading .gwall files is available on all tiers.

Share project file: Send your saved .gwall file to a designer, contractor, or friend.

---

Pro Features Overview

Core planning is free, including Auto-Layout, Smart Fill, Starter Layouts, Save/Load .gwall backups, and more. For a full breakdown, see What is GalleryPlanner Pro?.

Get Pro: Pro access is linked to your account and syncs across signed-in devices. Launch the app to upgrade.

---

Tips for Power Users

Tip 1: Start with Starter Layouts

Start with a proven layout and customize it:

1. Open Frames → Add Frames → Starter Layouts
2. Browse curated layouts (grid, salon, symmetrical, etc.)
3. Select a layout to load it onto your canvas
4. Adjust frames to match your specific inventory

Tip 2: Measure Twice, Design Once

Before opening GalleryPlanner:

• Measure your wall accurately (width, height, and note any obstacles)
• Measure every frame you own (outer dimensions, including the frame itself)
• Take photos of your frames to remember colors and styles

Tip 3: Start with the Largest Frame

Professional designers typically:

1. Place the largest or most important frame first (the focal point)
2. Build the layout around that anchor piece
3. Use smaller frames to fill gaps and create balance

Tip 4: Leave Breathing Room

Don't fill every inch! Negative space (empty wall) is important:

• Aim for 20-30% of your wall to remain empty
• Maintain 2-3 inches between all frames
• Leave extra space around the edges of your layout

Tip 5: Use Dark Mode for Late-Night Sessions

GalleryPlanner supports Light, Dark, and System themes. Open Settings (desktop header or mobile menu) and choose your preferred theme. Dark mode is especially useful when reviewing designs in a dim room or on a bright screen.

Tip 6: Test on Mobile, Finalize on Desktop

• Use mobile to brainstorm ideas on the couch or while shopping for frames
• Add GalleryPlanner to your Home Screen or install it on supported browsers if you want faster return access
• Switch to desktop for precise adjustments and exporting
• Your projects persist per browser (or use manual .gwall handoff with free Save/Load)

---

Troubleshooting Common Issues

"My frames won't snap into place"

Solution: Disable "Free Move" mode in Settings. Snap-to-grid is enabled by default, but you may have turned it off accidentally.

---

"I can't find my saved project"

Solution:

• Check that you're using the same browser (Chrome, Safari, etc.) where you created the project
• Browser data isn't shared across devices unless you manually move a .gwall file
• If you clear your browser cache, local projects may be lost. Save important projects as .gwall backups.

---

"Auto-Layout isn't working"

Solution:

• Ensure you have at least 3-4 frames in your library
• Check that your wall dimensions are large enough to fit your frames
• If your project is view-only, switch to Your Project or upgrade to Pro for multi-project editing

---

"How do I group frames?"

Solution: Select multiple frames on the canvas (click + Shift+click, or drag a selection box), then press Cmd/Ctrl + G or right-click → Group. Use Cmd/Ctrl + U or Cmd/Ctrl + Shift + G to ungroup. See the Frame Grouping section above for more detail.

---

"Where is Dark Mode?"

Solution: Open Settings from the desktop header (gear icon) or the mobile menu, then choose Light, Dark, or System theme.

---

"My photos look blurry in the design"

Solution:

• Upload higher-resolution photos (at least 1000px on the longest side)
• When zoomed in, low-res photos will pixelate—this is normal
• Exported PDFs and images use the best quality available from your source photos

---

Keyboard Shortcuts Cheat Sheet

---

Mobile App Guide

GalleryPlanner is fully optimized for mobile devices.

Touch Controls

• Tap: Select a frame
• Long press: Open quick actions menu
• Drag: Move a frame
• Pinch: Zoom in/out on the canvas
• Two-finger rotate: Rotate a frame

Mobile-Specific Features

• Bottom toolbar: Quick access to Library, Smart, Edit, Share, and Menu
• Collapsible panels: Tap headers to expand/collapse for more screen space
• Auto-rotate: Lock your phone in landscape mode for larger canvas

Pro tip: Use mobile to visualize layouts while shopping for frames at the store. Pull up your design to see if that new frame will fit!

---

Next Steps: Build Your Gallery Wall

Now that you're a GalleryPlanner pro, it's time to bring your design to life:

1. Finalize your layout using the tips in this guide
2. Export your PDF hanging guide (Pro Only) for exact measurements
3. Gather your frames and prepare your wall
4. Follow your guide to install with confidence

Need more inspiration? Check out these resources:

• The Complete Guide to Gallery Walls
• Understanding Auto-Layout Algorithms
• Gallery Wall Spacing & Alignment Tips

Ready to get started? Launch GalleryPlanner now →

---

Still Have Questions?

Visit our Help Center for FAQs and troubleshooting guides, or email us at hello@gallery-planner.com.