Mat Border Calculator App | Skillshare Projects

Paul Solt

iPhone App Expert



Mat Border Calculator App

Project Video (Updated Milestone 9 - 12/27/13)

Video 1: (Updated crop screen)

Video 2:


I frame photos and artwork as a hobby. It's a lot of manual labor and math to cut the large 40x32" mat boards to fit in a picture frame. All the existing apps to help are cumbersome with multiple screens and don't have any live previews.

To fix my pain point, I've decided to build an app that will let me preview different aspect ratios and dimensions using gesture input. Slide numbers up/down or left/right to get easy adjustments without the keyboard.

A Mat Border app will help...

  • Calculate the border dimensions (math)
  • Create a visual preview
  • Remember previous layouts

Milestone 9 - 12/27/13

Icon Design

Milestone 8 - 12/22/13

I've been merging the code between my updated interface using Auto Layout and the original system that used lots of math and frame rectangles. 

Now I can visualize and control both the bottom padding and the overlap width. Here's a screen showing the portion of the photo covered by the overlap (transparent gray) and a bottom padding to push the image up higher.

I'm working on a custom slide widget to change settings. Here's a sample animation. It'll slide out where the current Frame size sits. You'll be able to cycle between Frame Size, Bottom Padding, Overlap Width, and Opening Size. When the user is editing Overlap Width, the overlap area will become transparent to show what parts of the image are covered.

Slide Animation:

Milestone 7 - 11/19/13

iOS 7.0 is out, and a lot of the work I put into the UI needs to change. To kick off the iOS 7.0 version I'll be updating the live preview to support both bottom padding and to visualize the mat board/image overlap. I'll be taking the new live preview and combining it with my gesture controls in the next milestone.

I also really want to show and hide the overlap. When you want to adjust the overlap from 1/8" to 1/4" I want to make it transparent so you can what's covered. After you set it, and are playing with frame dimensions it should become opaque and match the mat board color. Making the preview more accurate really gives you an accurate preview of what the final image in the frame will look like. (See both screenshots below)

The tool has come a long way and I'm excited to finish it and publish on the App Store!

Milestone 6 - 6/13/13

  1. I've reconfigured the interface  so that interaction is along the bottom.
  2. I've also customized the appearance of the app.
  3. I've added a image selection/crop screen. 
  4. The image resizing now preserves aspect ratio.

The app is almost finished, but I have a few things to finalize.

  1. Help screens - show how to use the app
  2. Bottom padding and overlap control - allow bigger borders on the bottom, and change from 1/4" overlap values (1/8, etc). 
  3. Opening size: I want to show the opening size when a user taps on the FRAME or IMAGE labels, it'll toggle between different views.

Milestone 5 - 2/15/13

I've added gestures to control the size of the mat board and the image. It scales the image preview as you slide left/right or up/down on the numbers.

Notes: Now that I can do everything through touch I don't need the "Calculate" button. I have it always calculate and then there is no need for an additional button!


Milestone 4 - 2/7/13

Added more functionality to calculate the "live preview" Now you can see how changing the values changes the proportions of the image to the mat board size.

I also integrated with the photo library, to allow users to customize the "default image."

Milestone 3 - 2/5/13

Fleshed out the basic functionality in Xcode.

Milestone 2 - 1/28/13

I've started sketching my ideal app controls using gestures. I'm a big advocate for gestures because they can make apps more modern and usable (Look at Clear).

Lots of apps have tons of text fields, which is ok for beginners, but I want something more modern. I hate typing in numbers and want a special user interface (UI) widget that users finger taps and swipes. I want to drag left/right or up/down to change numbers without any popups.

Old Style UI - Mat Layout

Most apps suffer from poor UI design. Lets look at an example app that has all the fields, but it's hard to use. Why?

  1. It's tedious to type sizes on an iPhone/iPad. (less taps is better)
  2. The app should prevent bad input. (make it smart!)
  3. Use modern interface language and interaction to control. (gestures)
  4. Dynamic drawing - show a live preview! I want visual feedback as a user

Milestone 1 - 12/9/12

I've sketched out what the math looks like when I'm framing. It's never this organized in my scrap paper, but I need to think about all these things. An app would simplify the math, so I only have to measure and then adjust layout.


Let me know if you've ever framed artwork or have any feedback.


Please sign in or sign up to comment.